CODEWITHSUNDEEP
javascripthighcharts
berkona
berkona

Reputation: 11

Change HighCharts pointInterval after creating chart

I'm using the HighCharts library to chart very large datasets (i.e., ~18,000 points). I'm using quantization on the backend to reduce the number of points to a reasonable size (less than 200). When the user selects a section of the chart, it makes an ajax request to the server and receives a new set with a higher sample frequency. However, when change the pointInterval in plotOptions, it doesn't actually change the interval on the displayed chart.

These are my options that I use to make the chart:

options = {
    chart: {
        renderTo: settings.highchartId,
        zoomType: 'x',
        spacingRight: 20,
        events: {
            load: getChartData,
            selection: zoomChart,
        }   
    },
    title: {
        text: Drupal.settings.openfitcharts.title
    },
    subtitle: {
        text: document.ontouchstart === undefined ? 
                'Click and drag in the plot area to zoom in' :
                'Drag your finger over the plot to zoom in'
    },
    xAxis: {
        allowDecimals: false,
        title: {
            text: Drupal.settings.openfitcharts.xAxisTitle
        }
    },
    yAxis: {
        title: {
            text: Drupal.settings.openfitcharts.yAxisTitle
        },
        startOnTick: false,
        showFirstLabel: false
    },
    tooltip: {
        shared: true                    
    },
    legend: {
        enabled: false
    },
    series: [{
        type: "line",
        data: [],
    }],
    plotOptions: {
        line: {
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: true,
                        radius: 5
                    }
                }
            },
            pointInterval: 1,
            pointStart: 0,
        }
    }
};

This is the function I use to get the data:

function getChartData() {
    activityId = settings.seriesData.activityId;
    trackType = settings.seriesData.type;

    jQuery.getJSON(OPENFIT_DATA_URL, {op: 'TrackHandler.getTrackData', actid: activityId, type: trackType}, function(returnData) {
        console.log(returnData);
        console.log(chart);
        if (returnData != null) {
            chart.options.plotOptions.line.pointInterval = returnData.interval;
            chart.options.plotOptions.line.pointStart = returnData.start;
            chart.xAxis[0].adjustTickAmount();
            chart.series[0].setData(returnData.data, true);
        }
    });
}

Upvotes: 1

Views: 6900

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

You can also use series.update() to update all options once, see: http://jsfiddle.net/7XcMn/

    chart.series[0].update({
        pointInterval: 100,
        data: [100, 200, 300]
    });

Upvotes: 1

Mark
Mark

Reputation: 108567

Change the pointInterval of the series object not the plotOptions:

chart.series[0].pointInterval = 24 * 3600 * 1000;
chart.series[0].setData([29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],true);

See this fiddle.

Upvotes: 0

Related Questions