Membuat Chart Diagram Dengan Chart.JS

Membuat Chart Diagram Dengan Chart.JS

lebakcyber.net – Membuat chart diagram dengan Chart.Js. Oke pada kesempatan kali ini kita akan membahas mengenai bagaimana cara membuat chart diagram menggunakan library Chart.JS. Chart. JS dapat digunakan untuk membuat diagram pada website yang sedang kalian buat.

Oke daripada kebanyak basa basi, langsung saja kita masuk ke pembahasannya.

Agar dapat menggunakan contoh pada tutorial ini, pastikan kalian sudah menginclude Chart.Js kedalam web yang sedang kalian buat dengan menggunakan script dibawah ini :

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js

Membuat Bar Chart Dengan Chart.JS

Masukan perintah dibawah ini pada bagian HTML :

<canvas id="bar-chart" width="800" height="450"></canvas>

Lalu pada bagian JavaScript, silahkan masukan perintah dibawah ini :

new Chart(document.getElementById("bar-chart"), {
    type: 'bar',
    data: {
      labels: ["Samsung", "iPhone", "Xiaomi", "Realme", "Oppo"],
      datasets: [
        {
          label: "Jumlah Penjulan",
          backgroundColor: ["#4e95cd", "#e15ea2","#2187CB","#e8c3b9","#FB0000"],
          data: [6478,3267,734,1784,2233]
        }
      ]
    },
    options: {
      legend: { display: false },
      title: {
        display: true,
        text: 'Grafik Penjualan Smartphone'
      }
    }
});

Nanti outputnya akan seperti grafik dibawah ini :

Membuat Line Chart Dengan Chart.Js

Masukan perintah dibawah ini pada bagian html :

<canvas id="line-chart" width="800" height="450"></canvas>

Lalu pada bagian JavaScript, silahkan masukan perintah dibawah ini :

new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: [2014,2015,2016,2017,2018,2019],
    datasets: [{ 
        data: [86,114,106,106,107,211],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      }, { 
        data: [282,350,399,402,635,409],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      }, { 
        data: [168,170,178,190,303,476],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      }, { 
        data: [430,290,410,316,324,438],
        label: "Latin America",
        borderColor: "#e8c3b9",
        fill: false
      }, { 
        data: [60,93,102,200,175,260],
        label: "North America",
        borderColor: "#c45850",
        fill: false
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'Penjualan Smartphone Lebak Cyber Di Seluruh Dunia'
    }
  }
});

Nanti outputnya akan seperti grafik dibawah ini :

Membuat Pie Chart Dengan Chart.Js

Masukan perintah dibawah ini pada bagian html :

<canvas id="pie-chart" width="800" height="450"></canvas>

Lalu pada bagian JavaScript, silahkan masukan perintah dibawah ini :

new Chart(document.getElementById("pie-chart"), {
    type: 'pie',
    data: {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [{
        label: "Penjualan",
        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
        data: [478,267,734,784,433]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Penjualan Smartphone Lebak Cyber Di Seluruh Dunia'
      }
    }
});

Nanti outputnya akan seperti grafik dibawah ini :

Membuat Doughnut Chart Dengan Chart.Js

Masukan perintah dibawah ini pada bagian html :

<canvas id="doughnut-chart" width="800" height="450"></canvas>

Lalu pada bagian JavaScript, silahkan masukan perintah dibawah ini :

new Chart(document.getElementById("doughnut-chart"), {
    type: 'doughnut',
    data: {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [
        {
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: [478,267,934,484,433]
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Penjualan Smartphone Lebak Cyber di Seluruh Dunia'
      }
    }
});

Nanti outputnya akan seperti grafik dibawah ini :

Membuat Horizontal bar chart dengan Chart.Js

Masukan perintah dibawah ini pada bagian html :

<canvas id="bar-chart-horizontal" width="800" height="450"></canvas>

Lalu pada bagian JavaScript, silahkan masukan perintah dibawah ini :

Oke jadi itulah beberapa contoh bagaimana membuat sebuah diagram dengan menggunakan library chart.js. Semoga tutorial sederhana ini dapat bermanfaat, terima kasih.