membuat grafik dinamis dengan highchart easyui template
highchart ini compatible dengan template easyui dan banyak ragamnya agan bisa mencoba hasilnya
berikut adalah koding untuk membuat highchart seperti gambar diatas
semoga membantu.
koding untuk menampilkan chart simpan dengan nama index.php
taruhlah di header
<script type="text/javascript" src="<?php echo base_url() ?>asset/highcharts.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>asset/exporting.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>asset/dark-green.js"></script>
taruhlah di body
<script type="text/javascript">
function sensorData (data) {
new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 10000);
}
}
},
title: {
text: 'MONITORING DATA SENSOR'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Value'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: data,
});
}
$(document).ready(function() {
window.setInterval(function(){
$.ajax({
url: '<?php echo base_url() ?>index.php/data_sensors/data_grafik',
type: 'GET',
async: true,
dataType: "json",
success: function (data) {
sensorData(data);
}
});
}, 10000);
});
</script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto" Onload="sensorData(data)" ></div>
untuk keterangan lebih lanjut tunggu posting berikutnya , sekian terimakasih
berikut adalah koding untuk membuat highchart seperti gambar diatas
semoga membantu.
koding untuk menampilkan chart simpan dengan nama index.php
taruhlah di header
<script type="text/javascript" src="<?php echo base_url() ?>asset/highcharts.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>asset/exporting.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>asset/dark-green.js"></script>
taruhlah di body
<script type="text/javascript">
function sensorData (data) {
new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 10000);
}
}
},
title: {
text: 'MONITORING DATA SENSOR'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Value'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: data,
});
}
$(document).ready(function() {
window.setInterval(function(){
$.ajax({
url: '<?php echo base_url() ?>index.php/data_sensors/data_grafik',
type: 'GET',
async: true,
dataType: "json",
success: function (data) {
sensorData(data);
}
});
}, 10000);
});
</script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto" Onload="sensorData(data)" ></div>
untuk keterangan lebih lanjut tunggu posting berikutnya , sekian terimakasih
Komentar
Posting Komentar