Question

Hia guys,

I’m currently learning to use HighCharts in order to graph some data.

After learning to set up on a local page, it was time to load the data dynamically / though ajax.

The chart loads fine, with series defined like:

var series1=[];
var series2=[];
var series3=[];

I then have a button, which fires an ajax request, and these arrays are filled with data, pulled from an sql database, formatted, and sent back to the webpage 😀
(this has taken a while)

Now – with these arrays filled, I’m looking to get HighCharts to draw this data.

I’ve tried to use chart.refresh(); on the end of my ajax but this seems to give the error:

Uncaught TypeError: Object #<Object> has no method 'refresh'

I’m a little stumped and struggling to make progress – a nudge in the right direction would be very much appreciated!

Edit:

chart.series[0].setData(series1);

Is what needs firing after the arrays have been filled up.

Answer 1

Without seeing the rest of your code here is a wild guess:
You have set up your chart with these 3 series already “created” in the HighCharts options. You are loading the page, defining your HighCharts options (including the 3 series – as empty series), then firing the ajax call to populate the three series of data.

You are not actually pushing the new data in each series to the chart, however. You are just setting the vars to new values after they have been sent to HighCharts – refreshing (if even a valid HighCharts call) HighCharts does “nothing” because it is not re-reading the 3 var values.

Also, note that chart.refresh does not appear to be a valid HighCharts call. There is chart.redraw that you can try – but I do not think this will help in your case because of how you are defining your data series elements (again, no idea because the important part – telling HighCharts there is new data in code was not presented). Have a look at the API as well for pointers on dynamically assigning data.

How are you updating the series values? How are you telling the chart there is new data? It would be helpful to see the rest of the code because 3 lines of var x=[] is not really useful.

Here is a basic way to set the data of a series using setData:

$('#button').click(function() {
    chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] );
});