score:1

Accepted answer

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.

score:3

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 
    {

    }
    });

Related Query

More Query from same tag