highcharts change chart type using dropdown for multiple series

1
votes

hello im a newbie in this field of programming, im trying to create a chart with a drop down list to chart type. I've already tried many solutions posted here, unfortunately not finding a working one with my code. any help appreciated.,

here is the js fiddle link http://jsfiddle.net/hKGSK/

$(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'line',
        title: 'please select a category'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']//here we have a common timeline  (dates)
    }
});

$(".test").change(function() {
    var value = this.getAttribute("value");
    while (chart.series.length > 0) {
        chart.series[0].remove(true);
    }
    if (value == 'a') {
        chart.yAxis[0].setTitle({ text: "#Active Learners" });
        chart.setTitle({text: "Active Learners"});
        chart.addSeries({
            name: '#Active Leaners',
            type: 'column',
            color: '#43cd80',  
            data:[100, 200, 300, 400, 100, 200, 100,200,300,100,400,100]//no. of active learners           
        });      

    } else if (value == 'b') {
        chart.addSeries({
            name: 'grade1',
            type: 'column',
            color: '#7FCDBB',  
            data:[100, 280, 300, 490, 670, 900,100,200,300,400,500,100]             
        });
        chart.addSeries({
            name: 'grade2',
           type: 'column',
           color: '#41B6C4',  
            data:[100, 200, 300, 400, 100, 200,900,800,300,500,200,100]             
        });                      
        chart.addSeries({
            name: 'grade3',
           type: 'column',
            color: '#1D91C0',  
            data:[234,578,234,895,234,54,214,234,474,214,123,235]             
        });
         chart.addSeries({
            name: 'grade4',
           type: 'column',
            color: '#253494',  
            data:[343,132,467,124,214,55,73,546,435,23,56,746]             
        });               
        chart.yAxis[0].setTitle({ text: "#Learners" });
        chart.setTitle({ text: "Learners per grade" });
    } else if (value == 'c') {
        chart.addSeries({
            name: 'age group 1',
            type: 'column',
            color: '#FCC5C0',  
            data:[450, 770, 540, 110, 340, 870,200,500,300,600,100]             
        });
        chart.addSeries({
            name: 'age group 2',
            type: 'column',
            color: '#F768A1',
            data:[563,234,675,567,234,834,341,415,300,200,100,200,400]
        });
        chart.addSeries({
            name: 'age group 3',
            type: 'column',
            color: '#AE017E',
            data:[100,200,300,400,500,100,200,300,400,500]
        });
        chart.addSeries({
            name: 'age group 4',
            type: 'column',
            color: '#49006A',
            data:[400,300,200,400,200,300,500,600,100,600,700]
        });
    } else {
            chart.addSeries({
            name: 'total number of learners',
            type: 'column',
            color: '#ffcc99',  
            data:[100,0,200,0,300,100,400,100,500,200,500,300]             
        }); 
    }
});

});

2
javascriptjquerydrop-down-menuhighcharts

2 Answers

2
votes

You can simply update series.types using series.update(). See: http://jsfiddle.net/zuXDG/

$("#chartType").change(function() {
    var type = this.value;
    if(type !== '0') {
        $(chart.series).each(function(){
            this.update({
                type: type 
            }, false);
        });
        chart.redraw();
    }
});
1
votes

You will need to watch for changes to the selected chart type. I suggest something like:

var chartType = "line";
$("#chartType").change(function() {
    chartType = $("#chartType option:selected").val();
});

You can now refer to the variable chartType in your chart code.

 chart.addSeries({
            name: '#Active Leaners',
            type: chartType,
            color: '#43cd80',  
            data:[100, 200, 300, 400, 100, 200, 100,200,300,100,400,100]

http://jsfiddle.net/bYx9k/

To make your job simpler, I suggest putting the code which draws the chart into a function. You can then call this function whenever any of the selections/inputs changes. Something like:

var chartType = "line";
var seriesType = "a";
$("#chartType").change(function() {
    chartType = $("#chartType option:selected").val();
    redrawChart();
});
$(".test").change(function() {
    seriesType = this.getAttribute("value");
    redrawChart();
}