Highcharts - update column graph with setData() not working

Question

I have a column graph that I would like to update when user selects an option from a drop down menu. I am able to render the column graph correctly but I am not able to update the graph using setData(). I am a little stumped because I am not receiving any errors. Any help or insight you can give me would be much appreciated! here is a link to my JSFiddle

http://jsfiddle.net/mshirk/6QYzD/2/

and the Javascript code rendering the graph

$(document).ready(function () {
    var chartBench = new Highcharts.Chart({
        chart: {
            renderTo: 'containerYo',
            type: 'column'
        },
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        legend: {},
        plotOptions: {
            series: {
                shadow: false,
                borderWidth: 0
            }
        },
        xAxis: {
            lineColor: '#999',
            lineWidth: 1,
            tickColor: '#666',
            tickLength: 3,
            categories: ['2011', '2012', '2013', '2014'],
            title: {
                text: 'Years'
            }
        },
        yAxis: {
            lineColor: '#999',
            lineWidth: 1,
            tickColor: '#666',
            tickWidth: 1,
            tickLength: 3,
            gridLineColor: '#ddd',
            labels: {
                format: '$ {value}'
            },
            title: {
                text: ''
            }
        },
        series: [{
            "name": "Yours",
                "data": [110, 100, 120, 130]
        }, {
            "name": "Another",
                "data": [100, 90, 110, 120]
        }, {
            "name": "Another B",
                "data": [90, 80, 100, 110]
        }, {
            "name": "Another C",
                "data": [80, 70, 90, 100]
        }]



    });
});


$("#list").on('change', function () {
    //alert('f')
    var selVal = $("#list").val();


    if (selVal == "a") {
        chartBench.series[0].setData([
            [{
                "name": "Yours",
                    "data": [110, 100, 120, 130]
            }, {
                "name": "Another",
                    "data": [100, 90, 110, 120]
            }, {
                "name": "Another B",
                    "data": [90, 80, 100, 110]
            }, {
                "name": "Another C",
                    "data": [80, 70, 90, 100]
            }]
        ]);

    } else if (selVal == "b") {
        chartBench.series[0].setData([
            [{
            "name": "Yours",
                "data": [210, 200, 220, 230]
        }, {
            "name": "Another",
                "data": [200, 190, 210, 220]
        }, {
            "name": "Another B",
                "data": [190, 180, 200, 210]
        }, {
            "name": "Another C",
                "data": [180, 170, 190, 200]
        }]
            ]);

        } else {

        }
    });

"I am not receiving any errors". Check your console for hints. — Halvor Holsten Strand, Jul 21 '14 at 18:14
Thanks for your help, however when checking console, I do not receive any notifications — user3826864, Jul 21 '14 at 18:17
If you select something in your dropdown it generates this error in the console: `Uncaught ReferenceError: chartBench is not defined`. The scope is wrong for `chartBench` to be referenced in list change event. — Halvor Holsten Strand, Jul 21 '14 at 18:21
ahh.. Yes thank you, I see the error in Console now. What would be a better way to reference chartBench? — user3826864, Jul 21 '14 at 18:31

score 3 · Answer 1 · answered Jul 22 '14 at 13:15

DEMO to update data for all series (not only the first series).

code:

var chartBench

$(document).ready(function () {
    chartBench = new Highcharts.Chart({
        chart: {
            renderTo: 'containerYo',
            type: 'column'
        },
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        legend: {},
        plotOptions: {
            series: {
                shadow: false,
                borderWidth: 0
            }
        },
        xAxis: {
            lineColor: '#999',
            lineWidth: 1,
            tickColor: '#666',
            tickLength: 3,
            categories: ['2011', '2012', '2013', '2014'],
            title: {
                text: 'Years'
            }
        },
        yAxis: {
            lineColor: '#999',
            lineWidth: 1,
            tickColor: '#666',
            tickWidth: 1,
            tickLength: 3,
            gridLineColor: '#ddd',
            labels: {
                format: '$ {value}'
            },
            title: {
                text: ''
            }
        },
        series: [{
            "name": "Yours",
                "data": [110, 100, 120, 130]
        }, {
            "name": "Another",
                "data": [100, 90, 110, 120]
        }, {
            "name": "Another B",
                "data": [90, 80, 100, 110]
        }, {
            "name": "Another C",
                "data": [80, 70, 90, 100]
        }]



    });
});

var option_a_data = [{
            "name": "Option-A (1)",
                "data": [10, 20, 30, 40]
        }, {
            "name": "Option-A (2)",
                "data": [50, 60, 70, 80]
        }, {
            "name": "Option-A (3)",
                "data": [90, 100, 110, 120]
        }, {
            "name": "Option-A (4)",
                "data": [130, 140, 150, 160]
        }];

var option_b_data = [{
            "name": "Option-B (1)",
                "data": [110, 100, 90, 80]
        }, {
            "name": "Option-B (2)",
                "data": [110, 100, 90, 80]
        }, {
            "name": "Option-B (3)",
                "data": [110, 100, 90, 80]
        }, {
            "name": "Option-B (4)",
                "data": [110, 100, 90, 80]
        }];

$("#list").on('change', function () {
    //alert('f')
    var selVal = $("#list").val();

    if (selVal == "a") 
    {
        //chartBench.series[0].setData([110, 100, 120, 130]);
        for(i=0; i<chartBench.series.length; i++)
        {
            //alert(i);
            //chartBench.series[i].setData(my_data[i].data);
            chartBench.series[i].update({
                name: option_a_data[i].name,
                data:option_a_data[i].data
            });
        }    

        chartBench.redraw(); 
    } 
    else if (selVal == "b") 
    {
        for(i=0; i<chartBench.series.length; i++)
        {
            //alert(i);
            //chartBench.series[i].setData(my_data[i].data);
            chartBench.series[i].update({
                name: option_b_data[i].name,
                data:option_b_data[i].data
            });
        }    

        chartBench.redraw(); // redraw only after add all series

    } 
    else 
    {

    }
    });

score 1 · Accepted Answer · edited May 23 '17 at 12:30

The first problem is reading out the error generated by your code. When you select a option from the dropdown your code generates the error:

Uncaught ReferenceError: chartBench is not defined

This is because chartBench is created within the ready(function() { ... }) scope, and can't be access from the outside on('change', function() { ... }). You may want to take a look at Javascript Variable Scope.

To solve this you can define the chartBench variable at the top level to make sure it is accessible, like this:

var chartBench;
$(document).ready(function () {
    chartBench = new Highcharts.Chart({
    ....

You could alternatively also move your change listener declaration within the ready(function() { ... }) scope.

Regarding the updating of data, your code still has issues. You are using chartBench.series[0].setData as if it can update all your data at the same time. This is not the case. This function sets the data of a single series, so you will have to loop through your series and update them individually. Correct use of setData to update a single column would look something like this:

chartBench.series[0].setData([210, 200, 220, 230]);

This updates the first series in your chart to use those specific values instead of those it had previously. This updated JSFiddle gives a example updating a single column with dropdown. It is up to you to utilize this functionality for all series, if desired.

Highcharts - update column graph with setData() not working

2 Answers2