Cara menggunakan bootstrap bar chart

Di seri pertama dari pengantar Chart.js, kamu telah belajar cara memasang dan menggunakan Chart.js di sebuah proyek. Kamu juga telah belajar mengenai beberapa opsi konfigurasi global yang bisa digunakan untuk mengganti font dan tooltips dari grafik yang berbeda. Di tutorial ini, kamu akan belajar cara membuat grafik garis dan batang dengan Chart.js.

Membuat Grafik Garis

Grafik garis berguna ketika kamu ingin menampilkan perubahan dari nilai variabel tertentuk dengan mempertimbangkan perubahan dari variabel lainnya. Variabel lainnya biasanya adalah waktu. Contohnya, grafik garis bisa digunakan untuk menunjukkan kecepatan sebuah kendaraan dalam selang waktu tertentu.

Chart.js mengizinkanmu untuk membuat grafik garis dengan mengatur key type ke line, Ini adalah contohnya:

var lineChart = new Chart(speedCanvas, {
    type: 'line',
    data: speedData,
    options: chartOptions
});

Kita sekarang akan menyediakan data dan mengkonfigurasi opsi yang kita butuhkan untuk merencanakan grafik garisnya.

var speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [{
    label: "Car Speed",
    data: [0, 59, 75, 20, 20, 55, 40],
  }]
};

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  }
};

Semenjak kita tidak menyediakan warna apapun untuk grafik garis, warna bawaan rgba(0,0,0,0.1) akan digunakan. Kita tida kperlu melakukan perubahakan ke tooltip maupun legend. Kamu bisa membaca lebih banyak tentang mengubah ukuran crate, tooltip dan legend di bagian pertama seri ini.

Di bagian ini, kita akan fokus pada pilihan berbeda ang tersedia secara spesifik untuk memodifikasi grafik garis. Semua pilihan dan data yang disediakan akan membuat grafik berikut.

Warna dari area di bawah kurva ditentukan dengan key backgroundColor. Semua grafik garis yang digambar dengan metode ini akan diisi dengan warna yang ditentukan. Kamu bisa mengatur nilai key fill ke false jika kamu hanya ingin menggambar garis dan tidak mengisinya dengan warna apapun.

Satu hal yang mungkin telah kamu sadari adalah bahwa kita menggunakan data diskrit untuk memplot grafik. Pustakanya secara otomatis menginterpolasi nilai dari semua poin lain menggunakan algoritma bawaan.

Pada dasarnya, poin di plot menggunakan interpolasi kubik tertimbang kostum. Namun, kamu bisa mengatur key cubitInterpolationMode ke monotone untuk memplot point secara lebih akurat ketika grafik yang kamu plot didefinisikan dengan persamaan y = f(x) Tekanan dari plotted Bezier curve ditentukan dengan key lineTension. Kamu bisa mengatur nilainya ke nol untuk menggambar garis lurus. Mohon diingat key akan ditolak ketika nilai cubicInterpolationMode telah dispesifikasikan.

Kamu bisa menentukan nilai dari warna pinggiran dan ukurannya menggunakan key borderColor dan borderWidht. Jika kamu ingin memplot grafik menggunakan garis putus ketimbang garis solid, kamu bisa menggunakan key borderDash. Dia mengizinkan sebuah array sebagai nilainya yang elemennya menentukan panjang dan jarak dari garis-garis putus.

Tampilan dari point terplot bisa dikontrol menggunakan pointBorderColor, pointBackgroundColor, pointBorderWidth, pointRadius, dan pointHoverRadius. Ada juga key pointHitRadius yang menentukan jarak dimana poin terplot akan milai berinteraksi dengan mouse.

var speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [{
    label: "Car Speed",
    data: [0, 59, 75, 20, 20, 55, 40],
    lineTension: 0,
    fill: false,
    borderColor: 'orange',
    backgroundColor: 'transparent',
    borderDash: [5, 5],
    pointBorderColor: 'orange',
    pointBackgroundColor: 'rgba(255,150,0,0.5)',
    pointRadius: 5,
    pointHoverRadius: 10,
    pointHitRadius: 30,
    pointBorderWidth: 2,
    pointStyle: 'rectRounded'
  }]
};

Objek speedDate di atas memplot data poin yang sama dengan grafik sebelumnya namun dengan nilai kostum diatur untuk semua properti.

Kamu juga bisa memplot banyak garis dalam satu grafik dan menyediakan berbagai opsi untuk menggambar tiap garis seperti ini:

var dataFirst = {
  label: "Car A - Speed (mph)",
  data: [0, 59, 75, 20, 20, 55, 40],
  lineTension: 0.3,
  // Set More Options
};
  
var dataSecond = {
  label: "Car B - Speed (mph)",
  data: [20, 15, 60, 60, 65, 30, 70],
  // Set More Options
};
  
var speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [dataFirst, dataSecond]
};


var lineChart = new Chart(speedCanvas, {
  type: 'line',
  data: speedData
});

Membuat Grafik Batang

Grafik batang berguna ketika kamu ingin membandingkan sebuah metrik untuk entitas berbeda- contohnya, jumlah mobil terjual oleh perusahaan berbeda atau angka dari orang di usia tertentu dalam sebuah kota. Kamu bisa membuat grafik batang di Chart.js dengan mengatur key type ke bar. Pada dasarnya, ini akan membuat grafik dengan batang vertikal. Jika kamu ingin membuat grafik dengan batang horizontal, kamu perlu mengatur type ke horizontalBar.

var barChart = new Chart(densityCanvas, {
    type: 'bar',
    data: densityData,
    options: chartOptions
});

Mari buat sebuah grafik batang yang memplot masa jenis dari semua planet di tata surya kita. Data massa jenis diambil dari Plantery Fact Sheet yang disediakan NASA.

var densityData = {
  label: 'Density of Planets (kg/m3)',
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638]
};

var barChart = new Chart(densityCanvas, {
  type: 'bar',
  data: {
    labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
    datasets: [densityData]
  }
});

Parameter yang disediakan di atas akan membuat grafik berikut:

Sepeti grafik garis, grafik batang diisi dengan warna abu-abu terang juga. Kamu bisa menggantinya dengan key backgroundColor. Sama juga, warna dan lebar dari pinggiran bisa dispesifikasikan menggunakan key borderColor dan borderWidth.

Jika kamu ingin pustaka melewati penggambaran pinggiran untuk edge tertentu, kamu bisa mengspesifikan edge tersebut dengan key borderSkipped. Kamu bisa mengatur nilai top, left, bottom, atau right nya. Kamu juga bisa mengganti warna pinggiran dan lata belakang batang yang berbeda ketika mereka ditunjuk menggunakan hoverBorderColor dan hoverBackgroundColor key.

Batang di grafik batang di atas diatur ukurannya secara otomatis. Namun, kamu bisa mengatur ukuran individualnya menggunakan properti barThickness dan barPercentage. key barThickness digunakan untuk mengatur ketebalan batang dalam piksel, dan barPercentage digunakan untuk mengatur ketebalan dalam persentase dari lebar kategori.

Kamu juga bisa menampilkan maupun menyembunyikan beberapa axis menggunakan key dispay. Atur nilai display menjadi false untuk menyembunyikan axis tertentu. Kamu bisa membaca lebih tentang semua opsi ini di halaman dokumentasi.

Mari buar grafik massa jenis menjadi lebih menarik dengan mengganti nilai bawaan dari grafik batang menggunakan kode berikut.

var densityData = {
  label: 'Density of Planets (kg/m3)',
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  backgroundColor: [
    'rgba(0, 99, 132, 0.6)',
    'rgba(30, 99, 132, 0.6)',
    'rgba(60, 99, 132, 0.6)',
    'rgba(90, 99, 132, 0.6)',
    'rgba(120, 99, 132, 0.6)',
    'rgba(150, 99, 132, 0.6)',
    'rgba(180, 99, 132, 0.6)',
    'rgba(210, 99, 132, 0.6)',
    'rgba(240, 99, 132, 0.6)'
  ],
  borderColor: [
    'rgba(0, 99, 132, 1)',
    'rgba(30, 99, 132, 1)',
    'rgba(60, 99, 132, 1)',
    'rgba(90, 99, 132, 1)',
    'rgba(120, 99, 132, 1)',
    'rgba(150, 99, 132, 1)',
    'rgba(180, 99, 132, 1)',
    'rgba(210, 99, 132, 1)',
    'rgba(240, 99, 132, 1)'
  ],
  borderWidth: 2,
  hoverBorderWidth: 0
};

var chartOptions = {
  scales: {
    yAxes: [{
      barPercentage: 0.5
    }]
  },
  elements: {
    rectangle: {
      borderSkipped: 'left',
    }
  }
};

var barChart = new Chart(densityCanvas, {
  type: 'horizontalBar',
  data: {
    labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
    datasets: [densityData],
  },
  options: chartOptions
});

Objek densityData digunakan untuk mengatur pinggiran dan warna latar dari batang. Ada dua hal yang perlu diperhatikan dari kode di atas. Pertama nilai dari barPercentage dan borderSkipped telah di atur di dalam chartOptions ketimbang di objek dataDensitiy.

Kedua, grafik type telah diatur ke horizontalBar kali ini. Ini juga berarti kamu akan perlu mengganti nilai dari barThickness dan barPercentage untuk axis y ketimbang axis x agar memiliki efek pada batangnya.

Parameter diatas akan membuat grafik baris berikut.

Kamu juga bisa memplot banyak dataset di grafik yang sama dengan memberikan sebuah id dengan axis yang berkorespon terhadap dataset tertentu. key xAxisID digunakan untuk memberikan id dari axix x manapun dari dataset mu. Mirip juga, yAxisID digunakan untuk memberi id ke dataset apapun di axis y. Kedua axis memiliki key id yang bisa kamu gunakan untuk menentukan id unik ke mereka.

Jika paragraf terakhir sedikit membingungkan, contoh berikut akan membantu membuatnya jelas.

var densityData = {
  label: 'Density of Planet (kg/m3)',
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  backgroundColor: 'rgba(0, 99, 132, 0.6)',
  borderColor: 'rgba(0, 99, 132, 1)',
  yAxisID: "y-axis-density"
};

var gravityData = {
  label: 'Gravity of Planet (m/s2)',
  data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
  backgroundColor: 'rgba(99, 132, 0, 0.6)',
  borderColor: 'rgba(99, 132, 0, 1)',
  yAxisID: "y-axis-gravity"
};

var planetData = {
  labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
  datasets: [densityData, gravityData]
};

var chartOptions = {
  scales: {
    xAxes: [{
      barPercentage: 1,
      categoryPercentage: 0.6
    }],
    yAxes: [{
      id: "y-axis-density"
    }, {
      id: "y-axis-gravity"
    }]
  }
};

var barChart = new Chart(densityCanvas, {
  type: 'bar',
  data: planetData,
  options: chartOptions
});

Di sini, kita harus membuat 2 axis dengan id unik, dan mereka telah ditentukan ke dataset tertentu menggunakan key yAxisID. Key barPercentage dan categoryPercentage telah digunakan untuk menggabungkan bbatang dari tiap planet bersama. Atur categoryPercentage ke nilai yang lebih rendah untuk meningkatkan jarak antarbatang planet. Mirip juga, atur barPercentage ke nilai lebih tinggi untuk mengurangi jarak antarbatang planet yang sama.

Pikiran Akhir

Di tutorial ini, kita telah membahas semua aspek dari grafik baris dan batang di Chart.js. Kamu sekarang bisa membuat grafik dasar, mengubah tampilannya dan memplot banyak dataset di grafik yang sama tanpa masalah. Di bagian selanjutnya dari seri ini, kamu akan belajar mengenai grafik area radar dan polar di Chart.js.

Saya harap kamu menyukai tutorial ini. Jika kamu memiliki pertanyaan apapun, mohon biarkan saya tahu di kolom komentar.