javascript - Object structure changed internally -

i trying populate highcharts object. chart loaded fine initially, source object gets changed. it's little tough tell, if kindly check jsfiddle code , following:

click button1 => chart loads data [687, 687] expected.

click button2 => chart loads data [546, 546] expected.

again, click button1 => nothing happens because getalldata.t1.c1.m1 changed [687, 687] [object, object].

again, click button2 => chart loads data [546, 546] expected (please see console.log output below).

can please explain?

jsfiddle

below console.log in chrome each button click.

[687, 687] [546, 546] [object, object]   0: object     y: 687     __proto__: object   1: object     y: 687     __proto__: object   length: 2   __proto__: array[0] [546, 546] 

as mentioned in comment, need set updatepoints argument of series.setdata false prevent highcharts updating existing data points (it due data sets being same length).

something should suffice , preserve animations.

chart.series[0].setdata(data[0], false, false, false); chart.redraw(); 

jsfiddle