CODEWITHSUNDEEP
jqueryhighcharts
Erkan Yilmaz
Erkan Yilmaz

Reputation: 43

Highcharts: trying to update series

I'm trying to update Highchart series by clicking the button. For unknown reason the series can't be updated. Can someone help me, please?

Here's a jsfiddle link: http://jsfiddle.net/cSx5c/1/

See my code below:

 chart: new Highcharts.Chart({
    chart: {
        renderTo:'container',
        type: 'bar',
        backgroundColor: 'transparent',
        height:200
    },
    tooltip: {
        positioner: function () {
            return {x:0,y:0}
        },
        formatter: function() {
            return '<b>' + this.series.name + '</b>: <b>' + this.y + ' uur</b>';},
        shadow: false,
        borderWidth: 0,
        backgroundColor: 'rgba(0,0,0,0.1)'
    },
    credits: {
        enabled: false
    },
    title: {
        text: 'Shift Overview'
    },
    xAxis: {
        lineWidth: 0,
        minorGridLineWidth: 0,
        lineColor: 'transparent',
        minorTickLength: 0,
        tickLength: 0,
        labels: {
            enabled: false
        },
        height: 50
    },
    yAxis: {
        categories: ['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
        tickmarkPlacement: 'on',
        height: 50
    },
    legend: {
        reversed: false
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{"name": "Production", "data": [3.5], "color":"green"}, {"name": "Changeover", "data": [1.5], "color":"lightblue"}, {"name": "Technical Failure", "data": [5], "color":"red"}, {"name": "Production", "data": [2], "color":"green"}]
});

Here's the script for the button for adding new series:

$('#button').click(function() {
    var chart = $('#container').highcharts();
    var new_serie = [{"name": "Production", "data": [3.5], "color":"green"}, {"name": "Changeover","data": [3.5], "color":"lightblue"}, {"name": "Technical Failure", "data": [5], "color":"red"}];
    //alert(new_serie);
    chart.series[0].update({series: new_serie}, true);
});

Upvotes: 3

Views: 5572

Answers (1)

the_dude
the_dude

Reputation: 101

The .update() method only updates the options of the existing series. To update I think you need to remove the existing series and then add the new series one at a time. An alternative would be to remove the chart and recreate it with the new data. I show the first one were an update is done below: 

$('#button').click(function () {
        var chart = $('#container').highcharts();
        var new_serie = [{
            "name": "Production",
                "data": [3.5],
                "color": "green"
        }, {
            "name": "Changeover",
                "data": [3.5],
                "color": "lightblue"
        }, {
            "name": "Technical Failure",
                "data": [5],
                "color": "red"
        }];
        //alert(new_serie); // returns objects
        for (var i = chart.series.length-1; i>=0; i--) {
            chart.series[i].remove();
        }
        for (var y = new_serie.length-1; y >= 0; y--) {
            chart.addSeries(new_serie[y]);
        }
    });

Check this fiddle: http://jsfiddle.net/BhC4J/1/

Upvotes: 7

Related Questions