Dynamic Data in Highcharts

[John Sanderbeck]

I have a chart page with 12 charts on it. Each chart is in a self
contained partial. Each chart is a different group of data however the
common filter is a date range which I pass into the partial.

I implemented a jQRangeSlider to select the date range and pass that to
the controller which in turn re-renders the page.

I can't seem to get the charts to refresh showing the new data. I can
see in the terminal window the queries being called and they have the
right date however the chart is not refreshing.

HELP !!!

John

Part of the Controller
-------------------
class ChartsController < ApplicationController
def charts
if params.has_key?(:startdate)
@startdate = params[:startdate]
@enddate = params[:enddate]
end
@displaystartdate = @startdate.to_date.strftime("%m/%d/%Y")
@displayenddate = @enddate.to_date.strftime("%m/%d/%Y")
respond_to do |format|
format.html
format.js
end
end
end

Primary Chart View
----------------------
<br />
<div id="slider"></div>
<br />
<script>
function pad2(number) {
return (number < 10 ? '0' : '') + number
};

function datachanged(displaystart,displayend) {
$("#date_display h2").text('Dates from '+displaystart+' to
'+displayend);
};

$("#slider").dateRangeSlider({
arrows: false,
bounds:{
min: <%= first_training_jq %>,
max: <%= last_training_jq %>
},
defaultValues:{
min: <%= date_to_jq_date(@startdate) %>,
max: <%= date_to_jq_date(@enddate) %>
},
});

$("#slider").bind("userValuesChanged", function(e, data){
var startdate = data.values.min;
var enddate = data.values.max;
var displaystart =
pad2(startdate.getMonth()+1)+'/'+pad2(startdate.getDate())+'/'+startdate.getFullYear();
var displayend =
pad2(enddate.getMonth()+1)+'/'+pad2(enddate.getDate())+'/'+enddate.getFullYear();;

var
newstartdate=startdate.getFullYear()+'-'+pad2(startdate.getMonth()+1)+'-'+pad2(startdate.getDate());
var
newenddate=enddate.getFullYear()+'-'+pad2(enddate.getMonth()+1)+'-'+pad2(enddate.getDate());

$("#date_display h2").text('Dates from '+displaystart+' to
'+displayend);

$.ajax({
url: "/charts",
type: 'POST',
data: { startdate: newstartdate, enddate : newenddate},
cache: false,
dataType: 'json'
});
});

</script>

<div class="navigation">
<table>
<tr>
<td><%= link_to 'Back to Main Menu', :controller => 'home',
:action => 'menu' %></td>
</tr>
</table>
<br>
</div>

<div id="date_display" align="center"><h2>Dates from <%=
@displaystartdate %> to <%= @displayenddate %></h2></div>

<div id="chart_list" align="center"><table>
<tr>
<td>
<%= render partial: 'chart8', :locals => {:startdate =>
@startdate, :enddate => @enddate} %>
</td>
</tr>
</div>

And finally _chart8 partial
-----------------------
<script type="text/javascript" charset="utf-8">
$(function() {
new Highcharts.Chart({
chart: {
defaultSeriesType: "column",
type: "column",
renderTo: "charts8"
},
title: {
text: "Test/Test"
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},

yAxis: {
title: {
text: "Counts"
}
},
tooltip: {
pointFormat: '<tr><td
style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y}</b></td></tr>',
},
legend: {
enabled: false
},
series: [{
name: "Counts",
data: <%= raw test_count_by_initiative(startdate, enddate)
%>
}],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
});
});
</script>
<div id="charts8"></div>

--
Posted via http://www.ruby-forum.com/.

[Rob Lane]

Your using a $.ajax call but not handling the response in any way.  It also seems that the data for your charts is being driven by instance variables from the controller.  This means that the data is set for the chart once, when the page is rendered and then never again.

I think what you want to do here is have your front-end charts populated through an ajax call, wrapped in a method.  This same method is used when you need to refresh the data on the page.  Essentially the HTML is rendered to give you the page structure and populate this with data using the ajax call, as opposed to using iVars from the controller.  Take a look at the jQuery documentation to get an idea on how to handle the ajax response.  You will want to write handler code for error responses as well to improve your debugging experience.

Does this make sense/help you out?  If not I can toss a small example of what I'm talking about here.

[Rob Lane]

Also jQuery documentation for ajax method can be found here - http://api.jquery.com/jquery.ajax/

[John Sanderbeck]

I think I understand what you are saying to do, but an example would be
helpful... I am far from a JQuery expert... :-)

John

[Rob Lane]

So in your _chart8 partial you are populating chart.series.data using the proved startdate and enddate variables.  You will want to change these values when your ajax function returns data meaning you should first persist your chart object instead of just creating it without assignment.  

Something simple would be

 $(function() { 
    window.chart8 = new Highcharts.Chart({ 

    // etc...

Once this chart is accessible you can update your ajax query to do something like this (forgive me I'm not familiar with the Chart API you are using)

$.ajax({ 
          url: "/charts", 
          type: 'POST', 
          data: { startdate: newstartdate, enddate : newenddate}, 
          cache: false, 
          dataType: 'json' 

      }).done(function(data) { 

        window.chart8.series.data = data // or some such thing

      }).fail(function(msg) { 

        //something went wrong with the request

      });

Again browse through the documentation at http://api.jquery.com/jquery.ajax/

Hope this gives you a good direction. 

[John Sanderbeck]

Thank you. I assumed that was what you were saying... Let me play with
that idea and see if I can get that to work.

John