iamcootis
Posts: 4
Joined: Wed Nov 30, 2011 9:33 pm
Location: Austin, TX

Chart not refreshing when dynamically updating ajaxSource

I have a chart that I want to update every 10 seconds by updating the ajaxSource. Here is how I'm trying to do this and obviously it is not correct. Can anyone help? Thanks.

Code: Select all

var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
	chart: {
		renderTo: 'container',
		defaultSeriesType: 'spline',
		marginRight: 130,
		marginBottom: 25,
		ajaxSource: '/ourChart/dashboardGraph',
                events: {
                         load: requestData()
                }
	},

function requestData() {

if(chart != undefined){
       chart.ajaxSource = 'ourChart/dashboardGraph';
       chart.redraw();
    }

    setTimeout(requestData, 10000);
}


malonso
Posts: 62
Joined: Fri Mar 26, 2010 3:52 pm

Re: Chart not refreshing when dynamically updating ajaxSourc

Probably a stupid question but where is ajaxSource? I don't see that option documented anywhere.

Have you tried duplicating the "Live Server" case study (http://www.highcharts.com/studies/live-server.htm)?
iamcootis
Posts: 4
Joined: Wed Nov 30, 2011 9:33 pm
Location: Austin, TX

Re: Chart not refreshing when dynamically updating ajaxSourc

No idea, I am totally new to javascript (Java/Flex developer) and am using what was previously there. If I just set ajaxSource in the constructor the chart displays correctly, but it never updates. That example doesn't really help because my data isn't that simple and we're getting it through Ajax.

I've also tried this function

Code: Select all

 if(chart != undefined){
         chart.reloadAjax();
         chart.redraw();

                 }
My source data looks like this:

{"aaData":[{"name":"Total Inbound","data":[589205,164775,838332,785334,557257,275124,504864,847020,879682,1807524,1563165,1067388,89403,88067,995176,837042,864020,924667,1010290,4851,0,314708,208385,170565,480683,526710,618336,922599,952091,631847,293340,408657,831436,1011806,1644379,1795943,1194315,76275,74734,725554,822359,906378,1101525,923814,91070,0,0,0,531845,179336,271809,526695,523843,847690,909111,676487,64518514,260111,812777,697185],"pointInterval":60000,"pointStart":1322753071286,"type":"area"},{"name":"Total Outbound","data":[2528580,827553,4154536,3298096,1246790,987687,2302243,4136571,4164521,8447694,8330301,4822822,305287,303976,3778849,3750316,3945923,4174062,4230583,13833,0,261587,693594,622719,1733660,1891038,2456039,4174340,4120975,1132843,1032309,1781341,4143365,4203249,7806919,8455649,6062225,283390,280645,3380151,3761979,3916448,4246584,4164546,400903,0,0,0,775060,639966,987347,1893780,1879788,3907588,4180866,1764720,273251800,941797,3856921,3314921],"pointInterval":60000,"pointStart":1322753071286,"type":"area"},{"yAxis":1,"name":"Blocked Inbound","data":[22808,0,0,7,124813,45,0,18,11551,105507,30733,73401,3248,3176,32523,16065,16378,20978,49571,697,0,119690,3726,0,0,7,877,0,2,137878,50,0,1972,41312,30677,107084,25229,998,1113,13414,21848,38645,69720,16462,2457,0,0,0,139999,36,0,0,0,0,0,115420,2390178,0,0,1243],"pointInterval":60000,"pointStart":1322753071286,"type":"scatter"},{"yAxis":1,"name":"Blocked Outbound","data":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"pointInterval":60000,"pointStart":1322753071286,"type":"scatter"}]}
jlbriggs
Posts: 1465
Joined: Tue Sep 21, 2010 2:33 pm

Re: Chart not refreshing when dynamically updating ajaxSourc

iamcootis wrote: That example doesn't really help because my data isn't that simple and we're getting it through Ajax.
That example shows you how to properly update the chart via ajax.
View the page source for the javscript.

You'll want to set up the series in the chart code, and update just the data itself.
fiddles: http://jsfiddle.net/jlbriggs/J9JLr/
iamcootis
Posts: 4
Joined: Wed Nov 30, 2011 9:33 pm
Location: Austin, TX

Re: Chart not refreshing when dynamically updating ajaxSourc

I'm still very confused. Given that this is the data I am being given back from Ajax, what would the syntax be?

The idealist in me wants to do chart.series = point;

Data =

Code: Select all

{"aaData":[{"name":"Total Inbound","data":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"pointInterval":60000,"pointStart":1322812930625,"type":"area"},{"name":"Total Outbound","data":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"pointInterval":60000,"pointStart":1322812930626,"type":"area"},{"yAxis":1,"name":"Blocked Inbound","data":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"pointInterval":60000,"pointStart":1322812930626,"type":"scatter"},{"yAxis":1,"name":"Blocked Outbound","data":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"pointInterval":60000,"pointStart":1322812930626,"type":"scatter"}]}

Code: Select all

 function requestData() {
                 setTimeout(requestData, 10000);

                 if(chart != undefined){
                   $.ajax({
                       url: '/gatis/dashboardGraph',
                       success: function(point){
                           //What does here?
                       },
                       cache: false
                       
                   });
                 }
            }

iamcootis
Posts: 4
Joined: Wed Nov 30, 2011 9:33 pm
Location: Austin, TX

Re: Chart not refreshing when dynamically updating ajaxSourc

I just realized that the co-worker who had originally written this, got it from here http://pynej.blogspot.com/2011/04/addin ... html#links

Return to “Highcharts Usage”