Chartkick Rails 4 Bar Chart Issue with Multiple Charts

Question

I have a problem where I have multiple poll questions on a page. Simply enough, after a question is answered an AJAX call is made to the controller and a js.erb is rendered displaying a chart using the Chartkick gem and the Google jaspi library. This works fine for only a single chart. However, having several bar charts (one for each answered question) is a problem. What happens is the most recently answered question overwrites the chart of the question in the wrong div and just displays loading in the last answered question.

Here is the basic code.

In View:

 <div id="results-<%= i %>" style="display: none; margin-top: -20px;"></div>

Once the question is answered the above div is shown with the chart.

In the controller:

 data = [
    {
        data: results_array
    }
  ]
  respond_to do |format|
    @div_id = div_id
    @poll_data = data
    format.js
  end

And then in the js.erb file that is rendereed in the above block:

 $("#results-<%= @div_id%>").html('<%= escape_javascript(bar_chart(@poll_data, library: {legend: "none"})) %>').show();

Any help would be greatly appreciated. I need to display the correct charts for each question and have them dependably loaded. Is there a way to distinguish between instances of charts or objects that I am missing? Thanks.

Answer 1

I am currently using Chartkick to prepare my chart and I have found out the following.

If you are using Chartkick to render a chart, it will render a chart an give it a div with id of 'chart-xx' (xx is number, starting from 1). So in my case, I have 5 charts, when I am done rendering (loading the chart for the first time, it will have 5 charts with ID of:

'chart-1', 'chart-2','chart-3','chart-4','chart-5'

in my application.

I am running on rails, therefore I tried to re-render the chart by calling AJAX and replace the html element which I stored my chart. However, it seems that when you call the AJAX and re-render Chartkick back again. It started with 'chart-1' again, therefore it is replacing your first chart. (I haven't dive into the source code to have a look however it seems that there is some line of codes that automatically replace the chart based on the div: chart-1 )

After trying our several methods, eventually I have found out that the most effective way will be replace the javascript element straight . Therefore I have done the following using Javascript :

new Chartkick.LineChart($('#' + target).children().first().attr('id'), data);

target is the element where you store the chart and data being the raw JSON object you retrieved from your AJAX call. As illustrated as follows:

<div id="target">
  <div id="chart-1">
  </div>
</div>

Doing so will allow searching of the chart element and force the existing chart element on the page to re-render and generate a new chart .

(NOTE: Do not convert the data object to String [eg JSON.Stringify(data) ]. Doing so will let the chartkick.js misunderstood that the provided object is a string and it will attempt to perform a GET call on the string provided.

Hope this helps.

Answer 2

I had same problem with Chartkick, I have just changed the 'id' of every chart I wanted to use. The solution I found is on link below: https://github.com/ankane/chartkick/issues/193 I know is bit to late for this answer, but maybe it will help someone else.