Membuat Grafik Chart Dengan Chart.js

Ada banyak library yang bisa digunakan untuk membuat chart berbasis javascript misalnya morrisjs, flotcharts, chart.js,highcharts dan masih banyak yang lainnya. Salah satu yang saya sarankan adalah Chart.js.

Kenapa Harus Chart.js

Beberapa alasan memilih Chart.js

  1. Opensource.
  2. Sampai posting ini dibuat chart.js sudah mendukung 8 jenis chart dan dapat dikombinasi di antaranya:
    • Line Chart
    • Bar Chart
    • Radar Chart
    • Polar Area Chart
    • Pie & Doughnut Chart
    • Bubble Chart
    • Scatter
    • Horizontal Bar
  3. Ukurannya ringan.
  4. Berbasis HTML5 Canvas sehingga tidak perlu plugin tambahan dibrowser.
  5. Responsive.
  6. Interaktif.

Untuk dokumentasi library bisa anda lihat di chartjs.org/docs/.

Install Chart.js

Cara install Chart.js sangat mudah, cek update terbaru dari Github project chart.js.

Cara pasangnya cukup 2 cara :

a. Panggil librarynya atau menggunakan CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

b. Panggil data chart di elemen HTML5 <canvas>

<canvas id="myChart"></canvas>

Grafik Batang / Bar Chart

Masukan kode Javascript dibawah ini ke tag <body> dan jangan lupa panggil di tag <canvas> :

<canvas id="grafikBatang"></canvas>

<script>
var ctx = document.getElementById("grafikBatang").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# Jumlah Survei',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

Perhatikan id canvas harus sama dengan nama element yang ada di kode Javascript

kode type: 'bar' ada jenis grafiknya

kode labels pada bagian data adalah nama judul datanya

kode data pada bagian data adalah nilai dari datanya

Grafik Batang

Dokumentasi lengkapnya disini

Grafik garis / Line

Caranya sama dengan grafik batang yang diubah cukup tipenya

type: line

Contoh

<canvas id="grafikBatang"></canvas>

<script>
var ctx = document.getElementById("grafikBatang").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

Grafik Batang

Demikian beberapa contoh penggunaan Chart.js untuk Contoh lain bisa di lihat disini

Referensi

http://www.chartjs.org/

Selanjutnya