Dynamically updating pointStart and pointInterval
I am using highcharts to display daily statistics, I want users to be able to select a date range.
function requestData(chart, from, to, group) {
$.ajax({
url: '/stats/chart?from='+from+'&to='+to+'&group='+group,
success: function(data) {
chart.series[0].setData(data.data);
chart.series[0].pointStart = data.start;
chart.series[0].pointInterval = data.interval;
},
cache: false
});
}
The js function makes an ajax call and returns something like: -
{
"start":1358467200000,
"interval":86400000,
"data":[24,9,46,66,19,93,11,10,66,75,70,52,35,91,69,0,50,24,5,14,83,9,26,5,53,32,27,30,34,25,57,100]
}
How to update the pointStart and pointInterval values of the chart?
source to share
With Highcharts 3, you can use series.update () :
chart.series[0].update({
pointStart: data.start
pointInterval: data.interval,
data: data.data
}, false); // true if you want redraw
source to share
I edited the original question to show a jsFiddle example that explains the problem, but I have a working solution that I will provide you with.
In my solution, the diagram does not need to be completely reinitialized, but all series are removed and then a new series is added using the method Chart.addSeries()
. I have a feeling it Series.setData()
will be more efficient, but I can't figure out how to make it work - maybe someone will be there!
My current solution (sucks): jsFiddle solution
So, in response to the original poster, you would need, as @jacobdalton's answers assert, to modify the json object to fit the shape of the object options
, and then pass those objects to the Chart.setData()
function.
Also, you can notice the arguments false
Series.remove(false)
and Chart.addSeries(false)
- these arguments ensure that the chart is not re-passed every time these calls are made, and one Chart.redraw()
can be called afterwards to save processing.
source to share
chart.series[0]
has no editable property pointStart
or pointInterval
. You need to assign them with a dynamic method like chart.series[0].setData()
, and create a complete object options
(right now you only send a value data.data
that is an acceptable parameter to the function, but it can also accept an object - - check docs for setData () and series parameters ).
I would suggest changing my json object to fit the shape of the object options
:
{
"pointStart":1358467200000,
"pointInterval":86400000,
"data":[24,9,46,66,19,93,11,10,66,75,70,52,35,91,69,0,50,24,5,14,83,9,26,5,53,32,27,30,34,25,57,100]
}
Then send the json object directly to chart.series[0].setData(data)
.
source to share