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