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