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>

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 :

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)

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>

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>

taraaa... sekarang chart nya sudah jadi, selamat mencoba :D