Ruby on Rails - Chartkick gem

91 Views Asked by At

I am new to Ruby on Rails development. I am trying to plot a chart using Chartkick gem. Below is what I am trying to do.

I have a form with a POST method, and I am storing the params data in the instance variables in a method in a controller. I want to plot the data in the instance variables on a Chartkick graph.

Below is my view:

<div class="jumbotron jumbotron-fluid">
  <h1 class="display-4">LIGHTWAVE</h1>  
</div>
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">HOME</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">USERS</a>
  </li>
   <li class="nav-item">
    <a class="nav-link" href="#">OPERATIONS</a>
  </li>
</ul>
<br/>
<div class="container">

   <%= form_with url: home_homepage_path, method: :post, multipart: true do |f| %>


        <div class="row">
            <div class="form-group col-12">
            <b>OPERATION NAME:</b>
            <%= f.text_field :name, placeholder: "Enter operation name", class: 'form-content form-content w-100 p-1' %>
            </div>
        </div>

     <div class="row">
        
        <div class="form-group col-6">
           <b>LOWER SPECIFICATION LIMIT (LSL):</b>
           <%= f.number_field :lower_specification_limit, placeholder: "Enter lower specificattion limit", class: 'form-content form-content w-100 p-1' %> 
        </div>
      
        <div class="form-group col-6">
           <b>UPPER SPECIFICATION LIMIT (USL):</b>
           <%= f.number_field :upper_specification_limit, placeholder: "Enter upper specification limit", class: 'form-content form-content w-100 p-1' %> 
        </div>

   
     </div>

      <div class="row">
         <div class="form-group col-12">
           <b>PROCESS TIME:</b>
           <%= f.text_field :upper_specification_limit, name: "user_specification_limit[]",  placeholder: "Enter process time. These values could be an array", class: 'form-content form-content w-100 p-1' %> 
         </div>
     </div>
  
  <br/>
  <div class="actions">
    <%= f.submit 'Generate Plot', class: 'btn btn-block btn-outline-dark rounded-0' %>
  </div>
<% end %>

</div>

<div class="container">
  <div class="jumbotron border border-dark">
**<%= pie_chart @usl %>**
</div>
</div>

Below is the controller.

class HomeController < ApplicationController
  def homepage
  @usl = (params[:upper_specification_limit]).to_i
  @lsl = (params[:lower_specification_limit]).to_i
  @design_time = @usl - @lsl 
  end


end

When I enter the values in the form, params get captured as expected. I have even checked the instance variables values using byebug gem. Everything is working alright but no graph is displayed in the view.

I have tested that Chartkick is working alright and is correctly installed.

I do not have any model and want to plot data straight from an instance variable to the graph. I am stuck on this and unable to find how to tackle this.

View Screencapture:

enter image description here

Embeeded Ruby to plot the chart:

<%= column_chart({us: @usl, ls: @lsl, des: @design_time}, empty: "No data", width: "800px", height: "500px") %>

TEST 1:- You can see that @usl value is 0 as I haven't submitted form. enter image description here

I submit the form with values LSL - 30, USL - 100 enter image description here

We can see values are updated accordingly in console. enter image description here

But in the view value of @usl is still 0 enter image description here

1

There are 1 best solutions below

1
TEJINDER SINGH On

Once I replaced the POST request to a GET request it worked. I had a thinking that since I am not posting anything to a database and also, I am not querying database, I don't need a POST request. Therefore, I tried using GET request in route and in form and it worked. Not sure if my thought process is right. Please correct me if I am not thinking correctly.