-->
ZDIRY-TUFWT-EBONM-EYJ00-IDBLANTER.COM
ZDIRY-TUFWT-EBONM-EYJ00

BLANTERWISDOM105

3 Cara Update Highchart di Jquery Untuk ASP NET MVC

2/13/2020
Menyajikan data dalam bentuk grafik sangat berguna untuk seseorang memahami kondisi aktivitas kerja atau hasil produksi suatu perusahaan. Dengan grafik kita akan melihat perkembangan atau pertumbuhan hal-hal apa saja yang sedang di produksi. Ada berbagai bentuk grafik yang anda bisa pilih pada highchart misalkan Stack Column yang akan kita bahas pada artikel ini. Untuk lebih banyak contohnya anda bisa kunjungi situs highchart.


Seperti yang sebutkan tadi grafik dapat melihat bagaimana perkembangan dan pertumbuhan suatu data. Untuk melihat hal tersebut dapat dilakukan apabila data pada grafik dilakukan update, dapat setiap menit, jam, hari, minggu, bulan, tahun bahkan detik.
Sebelum melakukan update anda dapat mencopy script di bawah ini untuk menampilkan chart dengan data awal, Tetapi harus terkoneksi internet terlebih dahulu karena source script diambil dari situs.



<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>
<figure class="highcharts-figure">
    <div id="container1"></div>
    <p class="highcharts-description">
      
    </p>
</figure>
<button type="button" onclick="UpdateAddSeries()">Update Use AddSeries</button>
<button type="button" onclick="UpdateSeries()">Update Series</button>
<button type="button" onclick="UpdateSetData()">Update SetData</button>
<button type="button" onclick="UpdateWithCondition()">Update With Condition</button>
</body>
</html>
<script type="text/javascript">
 function GetDateX() {
      var dateX = new Date();
      var dd = dateX.getDate();
      var MM = dateX.getMonth();
      var yyyy = dateX.getFullYear();
      var GetValueDate = []; 

      for (i = 0; i <= 2; i++) {
           GetValueDate[i]= (dd-i) + "-" + (MM + 1) + "-" + yyyy;
      }
      return GetValueDate;
  }
 

var dateX = GetDateX();
Highcharts.chart('container1', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: [dateX.toString().substr(20, 9), dateX.toString().substr(10, 9), dateX.toString().substr(0, 9)]
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        }
    },
    tooltip: {
      formatter: function () {
         return '<b>' + this.x + '</b><br/>' +
             this.series.name + ': ' + this.y + '<br/>' +
             'Total: ' + this.point.stackTotal;
       }
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    series: [{
        id : "Cont1",
        name: 'John',
        data: [5, 3, 4]
    }, {
        id : "Cont2",
        name: 'Jane',
        data: [2, 2, 3]
    }, {
        id : "Cont3",
        name: 'Joe',
        data: [3, 4, 4]
    }]
});

</script>

Adapun cara update data pada highchart adalah menggunakan AddSeries, Update, dan SetData.

Update Highchart Dengan AddSeries

Update dengan AddSeries ini yang harus dilakukan pertama adalah remove semua seriesnya terlebih dahulu. Jika tidak maka grafik malah ditambahkan column padahal series dengan name tertentu sudah ada atau menjadi duplikat. Tambahkan Function ini di bawah function Highcharts.chart.
function UpdateAddSeries(){
    var chart = $('#container1').highcharts();
       var i = 0;
    while (chart.series.length > 0) {
           i++;
           chart.get('Cont'+ i).remove();
    }
    var id;
    var name;
    var stack;
    var type;
    var data;
    var datalist = [];
        datalist[0] = [1,2,3];
        datalist[1] = [4,5,6];
        datalist[2] = [4,3,6];
    var listname = ["Jhon", "Jone", "Joe"]
    for (var i = 0; i < listname.length; i++) {
          chart.addSeries({
         id: "Cont"+(i+1),
         name: listname[i],
         stack: "male",
         type:'column',
         data:datalist[i]
       }, true);
    }
   
    chart.redraw();
    chart.hideLoading();
}

Update Highchart Dengan Update

Update dengan metode ini berbeda dengan cara sebelumnya yaitu tak perlu remove series sebelumnya namun langsung mengganti datanya saja. Namun saya sarankan hati-hati dalam menentukan index pada looping karena bisa saja series tertentu tidak terupdate. Misalkan series harusnya dimulai dari index 0 namun looping untuk update dimulai dari 1 maka series index ke 0 tidak terupdate.
function UpdateSeries(){
   var chart = $('#container1').highcharts();
   var datalist = [];
        datalist[0] = [1,2,3];
        datalist[1] = [4,2,6];
        datalist[2] = [4,3,1];
    var listname = ["Jhon", "Jone", "Joe"]
    for (var i = 0; i < listname.length; i++) {
         chart.series[i].update({data: datalist[i]}, true);
         //chart.update({
         //  id: "Cont"+(i+1),
         //  name: listname[i],
         //  stack: "male",
         //  type:'column',
         //  data:datalist[i]
         //}, true);
    }
    chart.redraw();
    chart.hideLoading();
}
Catatan: Var dataList adalah variable array yang berisi array lain atau sederhananya datalist = [{},{},{}].

Update Highchart Dengan SetData

Update dengan metode SetData tidak beda jauh dengan metode Update hanya perbedaannya ada pada penulisan saja,
function UpdateSetData(){
   var chart = $('#container1').highcharts();
   var datalist = [];
        datalist[0] = [1,2,3];
        datalist[1] = [4,5,0];
        datalist[2] = [4,3,1];
    var listname = ["Jhon", "Jone", "Joe"]
    for (var i = 0; i < listname.length; i++) {
         chart.series[i].setData(datalist[i], false);
    }
    chart.redraw();
    chart.hideLoading();
}
Share This :

0 Comments