Highcharts setData on Columnrange not working

Question

Very simple problem, trying to use setData on a columnrange chart, but without success:

Original data:

series: [{
            name: '',
            data: [
                [-9.7, 9.4],

            ],
            color: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, CalculateMidColor('#00ff00', '#ff0000', 0.8, 1)],
                    [1, CalculateMidColor('#00ff00', '#ff0000', 0.2, 1)]
                ]
            }
        }]

Trying to change the data...

chart.series[0].setData([
                [-19.7, 19.4]             
            ],true);

http://jsfiddle.net/4J452/

Have tried multiple variations of arrays etc on the setData, not success - help!!

Answer 1

The problem is that you are attaching the click event listener before the DOM is ready, so the event is attached to nothing.

You can see this by doing a console.log :

console.log($('#button'));
$('#button').click(function() {
    chart.series[0].setData([
        [-19.7, 19.4]             
    ],true);
});

You'll see that right before attaching the click listener the very same selector is an empty array (check your console in this JSFiddle example ).

To solve this you could simply move your button-click code inside the $(function() { ... }) , which is a jQuery shorthand for " document ready ". Like so:

$(function () {
    ...

    console.log($('#button'));
    $('#button').click(function() {
        chart.series[0].setData([
            [-19.7, 19.4]             
        ],true);
    });
});

As in this JSFiddle example . You can also check your console here to see the different output.

In sum, your chart and the setData function were working perfectly, but the button was just not executing the code to update your chart.