Simple Chart with JQuery
Dalam artikel ini saya akan sharing tentang membuat chart dengan JQuery yang pastinya mudah dipahami dan simple untuk diimplementasikan. Ada 4 jenis chart yang tersedia yaitu Bar, Line, Pie, Doughnut dan bisa dicustom sesuai kebutuhan. Oke langsung saja berikut langkah-langkahnya :
1. Include Script
Bisa download filenya disini, kemudian include di code kalian
<script type="text/javascript" src="Scripts/Chart.js"></ script>
<script type="text/javascript" src="Scripts/Charts.js"></ script>
<script type="text/javascript" src="Scripts/Chart.js"></
<script type="text/javascript" src="Scripts/Charts.js"></
2. Add Hidden Field
Hidden filed berfungsi sebagai input value dan bisa diisi langsung melalui frontend maupun dari backend.
<input type="hidden" id="data/>
3. Parsing Data
Untuk tipe char Bar dan Line bisa dipakai untuk data 3D, dengan memasukkan kombinasi array berikut yang dipisahkan titik koma dan :
Untuk tipe char Bar dan Line bisa dipakai untuk data 3D, dengan memasukkan kombinasi array berikut yang dipisahkan titik koma dan :
Array 1 : Berisi Label untuk setiap kategori (dipisah koma untuk setiap data)
Array 2 : Berisi Warna untuk setiap kategori (dipisah koma untuk setiap data)
Array 3 dst : Berisi Value untuk setiap kategori (dipisah koma untuk setiap data)
Array 3 dst : Berisi Value untuk setiap kategori (dipisah koma untuk setiap data)
Contoh untuk 3 data dengan 3 kategori:
<input type="hidden" id="data" value="Sales 2013,Sales 2014,Sales 2015;#F7464A,#46BFBD,#B48EAD; 10,40,30;15,30,35;40,41,44" />
Sedangkan untuk Pie dan Doughnut bisa dipakai untuk data 2D, dengan memasukkan kombinasi array berikut (dipisahkan dengan titik koma) :
Array 1 : Berisi Label (dipisah koma untuk setiap data)
Array 2 : Berisi Warna (dipisah koma untuk setiap data)
Array 3 dst : Berisi Value (dipisah koma untuk setiap data)
Contoh untuk 3 data:
<input type="hidden" id="data2" value="Sales 2013,Sales 2014,Sales 2015;#F7464A,#46BFBD,#B48EAD; 60,80,40" />
4. Create Canvas
Canvas berfungsi sebagai tempat menggambar chart
<canvas id="myChart1" width="260" height="260"></canvas>
<canvas id="myChart2" width="260" height="260"></canvas>
<canvas id="myChart3" width="260" height="260"></canvas>
<canvas id="myChart4" width="260" height="260"></canvas>
<canvas id="myChart1" width="260" height="260"></canvas>
<canvas id="myChart2" width="260" height="260"></canvas>
<canvas id="myChart3" width="260" height="260"></canvas>
<canvas id="myChart4" width="260" height="260"></canvas>
5. Create Script
Tambahkan script untuk menggambar chart
<script type="text/javascript">
ChartBar("myChart1", "data");
ChartLine("myChart2", "data");
ChartPie("myChart3", "data2");
ChartDoughnut("myChart4", "data2");
</script>
Tambahkan script untuk menggambar chart
<script type="text/javascript">
ChartBar("myChart1", "data");
ChartLine("myChart2", "data");
ChartPie("myChart3", "data2");
ChartDoughnut("myChart4", "data2");
</script>
taraaa... sekarang chart nya sudah jadi, selamat mencoba :D