Show Dalam tutorial kali ini, kita akan mengdiskusikan tentang pembuatan sebuah grafik dengan tipe line chart dengan
menggunakan librari Highchart.
Langkah-langkahnya1. Create DatabaseDisini kita akan membuat sebuah database yang diberinama : dbline. Kemudian kita membuat tabel yang bernama comodity yang berisikan lima(5) field : id, month, sugar, rice, wheat_flour. Field-field tersebut berisikan data seperti yang ditunjukkan oleh script SQL dibawah ini : CREATE TABLE IF NOT EXISTS `comodity` ( 2. Create file dataline.phpDalam file ini kita membangun koneksi terhadap database, kemudian melakukan query ke masing-masing komiditi, yaitu query terhadap sugar, rice dan wheat_flour. Hasil query data tersebut akan diformat dalam bentuk JSON. <?php 3. Memangil data JSON dan membuat data properti line chartDalam langkah ke-3 ini, kita akan memangil data-data JSON dari file dataline.php. Selain itu kita akan mengeset tipe graph dengan line. Definisikan nama-nama bulan pada kode xAxis:{categories:[' '] dan harga pada kode yAxis:{ title: {text: 'Price (Rp)'}. Jika anda menampilkan legenda secara vertikal, lakukan pada kode legend: {layout: 'vertical', karena secara default kalo kita tidak membuat kode tersebut, maka legenda akan berada secara horizontal dengan posisi dibawah. <script type="text/javascript"> Jangan lupa untuk memberikan nama pada bagian renderTo, misal dalam contoh ini kita memberinama mygraph pada bagian kode renderTo: 'mygraph' . Nama pada bagian renderTo ini menjadi id unique yang nantinya akan ditampilkan grafiknya dimana kita meletakkannya. 4. Memanggil id unique dengan div elementTujuannya agar dirender untuk diterjemahkan dalam bentuk grafik. Dalam tutorial kali ini, kita meletakkannya pada class panel dalam framework Bootstrap : <div class="panel panel-primary"> Complete Source Code
|