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

Komentar

Postingan populer dari blog ini

cara membuat checkbox pada listview vb.net dan dapat di pilih sesuai checkbox yang dipilih

membuat menu jquery bootstrap tanpa reload page

menampilkan data pada power point menggunakan program visual studio 2010