highcharts Js | Sample Update Chart

by Adi Jaya

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>


<hr>

<button class="testUpdate" data-update="1">UPDATE 1</button>
<button class="testUpdate" data-update="2">UPDATE 2</button>
<button class="testUpdate" data-update="3">UPDATE 3</button>

JavaScript

var chart = Highcharts.chart('container', {
    title: {
        text: "CHART DEMO"
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        showEmpty: false
    },
    yAxis: {
        showEmpty: false
    },
    series: [{
        type: "column",
        data: [
            ['January', 0],
            ['February', 0],
            ['March', 0],
            ['April', 0],
            ['May', 0],
            ['June', 0],
            ['July', 0],
            ['August', 0],
            ['September', 0],
            ['October', 0],
            ['November', 0],
            ['December', 0]
        ]
    }]
});


function __update(index, value) {
    chart.series[0].data[index].update(value, false);
    chart.redraw();
}
//__update( 0, 35 );

//demo
var dataUpdateChartByAjax = [10, 20, 30, 40, 50, 60, 60, 50, 40, 30, 20, 10];

function testUpdate(arr) {
    if (arr === undefined) return;
    if (Object.prototype.toString.call(arr) === "[object Array]") {
        for (var i = 0; i < arr.length; i++) {
            __update(i, arr[i]);
            console.log("__update( " + i + ", " + arr[i] + " )");
        }
    }
}


//tester only
setTimeout(function() {
    testUpdate(dataUpdateChartByAjax);
}, 2000);


var btnDemo = document.querySelectorAll(".testUpdate");

for (var $i = 0; $i < btnDemo.length; $i++) {
    btnDemo[$i].onclick = function() {
        var data = parseInt(this.getAttribute("data-update"));
        var arr;
        switch (data) {
            case 1:
                arr = [5, 10, 15, 30, 35, 40, 45, 50];
                break;
            case 2:
                arr = [77, 20, 112, 66.5, 55, 56];
                break;
            case 3:
                arr = [120, 110, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10];
                break;
            default:
                arr = [10, 20, 30, 40, 50, 60, 60, 50, 40, 30, 20, 10];
        }
        testUpdate(arr);
    }
}