CODEWITHSUNDEEP
javascriptjqueryhighchartssynchronizationdata-visualization
Mike Zavarello
Mike Zavarello

Reputation: 3554

Highcharts: synchronized charts no longer sync up once data are updated

I'm currently working on a project using two synchronized charts, working from the example demo provided at http://www.highcharts.com/demo/synchronized-charts (specifically, the syncExtremes() function).

Users will be able to choose from different data sets using a date picker. When they do, I replace the existing charts with new versions that have updated data and attributes. This is to avoid conflicts between the existing and new data.

When I first load the charts, they synchronize perfectly. However, whenever I update the data and replace the charts, they become out of sync. I'm confused as to why this happens, as I'm creating them in the exact same way as when the page is first loaded (see the code snippet below).

// draw on page load
var drawChart1 = new Highcharts.Chart(chart1);
var drawChart2 = new Highcharts.Chart(chart2);

var newData = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];

// draw on button click
$('#button').click(function () {
    chart1.series[0].data = newData.reverse();
    chart2.series[0].data = newData.reverse();
    drawChart1 = new Highcharts.Chart(chart1);
    drawChart2 = new Highcharts.Chart(chart2);
});

Here is a working fiddle with a format similar to my project. The button at the bottom changes the data and recreates the charts: https://jsfiddle.net/brightmatrix/yqapp3f0/.

Why does syncExtremes() fail to work when the charts are recreated?

I realize that a more effective method may be to use setData(), but I wanted to see whether there was something I was missing in my current method before I rewrote my code.

Thank you in advance for your guidance and advice!

Upvotes: 0

Views: 973

Answers (1)

morganfree
morganfree

Reputation: 12472

The part of synchronizing is done in the loop and you can see it works with Highcharts.charts array

for (i = 0; i < Highcharts.charts.length; i = i + 1) {

When you create a chart it is pushed to the array and when you destroy it the chart element in the array becomes undefined. So when you create new charts the array becomes this:

[undefined, undefined, x.Chart, x.Chart]

And this is the reason why synchronizing is not working anymore.

You can change the logic of the loop or you can, after destroying the charts, delete first elements of the array. Example: https://jsfiddle.net/ezae8kvk/1/

In this case the best way to do this will be using methods for changing some parts of chart dynamically like setData or series.update - you don't have to build a new chart from scratch.

Upvotes: 4

Related Questions