membuat statistik atau grafik chart pada easyui menggunakan highchart metode ambil data dari json

salam, kali ini saya akan berbagi kepada agan bagaimana cara membuat grafik menggunakan highcharts,. ada hal yang perlu di perhatikan perta adalah, membuat file index.html cukup membuat file itu dan langkah selanjutnya adalah

1. pastikan sudah membuat file index.html
2. sudah download file extensi highchart.js dan file exporting.js apabila ingin mewarnainya tambahkan juga file extentsi dark-green.js
3. pastikan format file json seperti berikut :

[{"name":"Suhu","data":[19,19]},{"name":"pH","data":[7,7]},{"name":"DO","data":[7,7]},{"name":"TDs","data":[0,0]},{"name":"Konduktivitas","data":[0,0]},{"name":"Liter","data":[0,0]}]

cukup mudah prosesnya dan sekarang kita lihat kode programnya sebagai berikut


<script type="text/javascript" src="../highcharts.js"></script>
<script type="text/javascript" src="../exporting.js"></script>
<script type="text/javascript" src="../dark-green.js"></script>
<script type="text/javascript">
function sensorData (data) {
   new Highcharts.Chart({
    chart: {
        renderTo: 'chart_colm',
        type: 'areaspline'
    },
    title: {
        text: 'MONITORING DATA SENSOR'
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            text: 'Value'
        }
    },
    plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
   },
    series: data,
  });
}
$(document).ready(function() {
 $.ajax({
    url: 'data.php',
    type: 'GET',
    async: true,
    dataType: "json",
    success: function (data) {
         sensorData(data);
    }
  });
 });
</script>
<div id="chart_colm" style="min-width: 310px; height: 400px; margin: 0 auto" Onload="sensorData(data)" ></div>