I am using highcharts to display daily stats, 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 does an ajax call and will return 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 do I update the charts pointStart and pointInterval value?

I am using highcharts to display daily stats, 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 does an ajax call and will return 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 do I update the charts pointStart and pointInterval value?

• javascript
• highcharts

• What is the result of your current success function and what happens when you console.log(data) in it? Does the server set a mimetype in the header of the response? – Jacob Dalton Commented Feb 18, 2013 at 23:55
• The new plots are drawn but the axis labels don't change to the right date. I am passing back the data with a header type Content-type: application/json. – pjknight Commented Feb 19, 2013 at 0:29
• Okay so the object es back and is properly identified and parsed as json - meaning this is almost certainly a highcharts issue. – Jacob Dalton Commented Feb 19, 2013 at 0:39
• Try to use dynamic methods. stackoverflow./questions/10549745/… – Ricardo Lohmann Commented Feb 19, 2013 at 0:53

3 Answers 3

Since 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

I edited the original question to show a jsFiddle example that explains the issue, but I've got a working solution that I'll provide.

With my solution, the chart doesn't have to be pletely reinitialized, but all series are removed and then the new series are added via the Chart.addSeries() method. I have a feeling that Series.setData() would be more efficient but I can't figure out how to get it working - maybe someone out there will!

My current solution (sucks): jsFiddle solution

So, in an answer to the original poster, you'd have to, as @jacobdalton's answer states, changing the json object to match the form of the options object, and then supply those objects to the Chart.setData() function.

Also, you may notice the false arguments Series.remove(false) and Chart.addSeries(false) - these arguments ensure that the chart is not rerendered each time these calls are made, and a single Chart.redraw() can be called afterwards to save on processing.

chart.series[0] doesn't have an editable pointStart or a pointInterval property. You need to assign these through a dynamic method like chart.series[0].setData() and create a full options object (right now you're only sending the value data.data which is an acceptable parameter to the function but it can also take an object -- check out the docs for setData() and for series options).

I would suggest changing your json object to match the form of the options object:

{
    "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).