Membuat Grafik dengan Chart.js Javascript - Mari Belajar Coding

Jumat, 17 Mei 2019

Membuat Grafik dengan Chart.js Javascript


Membuat Grafik dengan Chart.js Javascript

Selamat datang di blog Mari belajar coding. Pada tutorial kali ini kita akan belajar menampilkan sebuah grafik chart dengan plugin chartjs menggunakan jquery dan javascript. Grafik merupakan representasi grafis dari data di mana data diwakili oleh simbol-simbol, seperti bar chart, garis-garis dalam grafik garis, atau irisan dalam pie chart. Dengan menggunakan sebuah grafik, kita dapat membuat sebuah laporan seperti laporan data produk, data penjualan, dan sebagainya yang akan di tampilkan dalam bentuk visual.

Chart.js merupakan sebuah plugin javascript untuk membantu membuat sebuah grafik dengan mudah dan cepat. Ada banyak tipe grafik yang dapat kita gunakan seperti Bar charts, Line charts, Doughnut, Pie dan sebagainya. Teman-teman bisa melihat sampel chart menggunakan chartjs disini chartjs.org/samples.

Membuat Grafik dengan Chart.js Javascript 
1. Download terlebih dahulu plugin chartjs. Chart.js.zip 
2. Ekstak file hasil download menggunakan winrar. 

Membuat Grafik dengan Chart.js Javascript
3. Buat folder chart di directory xampp/htdocs. Kemudian pindah kan file hasil ekstrak kedalam  directory xampp/htdocs/chart.
Membuat Grafik dengan Chart.js Javascript
4. Untuk mengintegerasikan plugin chartjs, panggil file js dan css nya. ada dua  tipe file js yaitu chart.js dan Chart.bundle.js. Untuk versi bundle sudah include dengan moment.js.
<link rel="stylesheet" type="text/css" href="Chartjs/Chart.min.css">
<script type="text/javascript" src="Chartjs/Chart.min.js"> </script>
5. Tambahkan tag canvas untuk menampilkan grafik.
<canvas id="myChart"></canvas>
6. Buat fungsi menggunakan javascript.
<script>
//deklarasi chartjs untuk membuat grafik 2d di id mychart 
var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {
 //chart akan ditampilkan sebagai bar chart
    type: 'bar',
    data: {
     //membuat label chart
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            //isi chart
            data: [12, 19, 3, 5, 2, 3],
            //membuat warna pada bar chart
            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>
Keterangan
Teman-teman bisa mengganti tipe chart yang akan di tampilkan dengan mengganti variabel bar pada type, contohnya line, pie, doughnut, polarArea dan sebagainya. Untuk labels dan isi data, bisa di ganti dengan format array.

Kode lengkap seperti dibawah ini. simpan dengan nama latihan1.html
<!DOCTYPE html>
<html>
<head>
 <title>maribelajarcoding.com</title>
 <link rel="stylesheet" type="text/css" href="Chartjs/Chart.min.css">
 <script type="text/javascript" src="Chartjs/Chart.min.js"> </script>
</head>
<body>
<h2 >Membuat Grafik dengan Chart.js Javascript</h2> 

<div style="width: 600px;" >
 <canvas id="myChart"></canvas>
</div>
<h4><a href="">maribelajarcoding.com</a></h4>
<script>
//deklarasi chartjs untuk membuat grafik 2d di id mychart 
var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {
 //chart akan ditampilkan sebagai bar chart
    type: 'bar',
    data: {
     //membuat label chart
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            //isi chart
            data: [12, 19, 3, 5, 2, 3],
            //membuat warna pada bar chart
            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>
</body>
</html>

Membuat Grafik dengan Chart.js Javascript

Contoh diatas merupakan chart dengan satu label dan satu data. Untuk membuat chart grouping, kamu bisa menggunakan contoh dibawah ini. Simpan dengan nama file latihan2.html.
<!DOCTYPE html>
<html>
<head>
 <title>maribelajarcoding.com</title>
 <link rel="stylesheet" type="text/css" href="Chartjs/Chart.min.css">
 <script type="text/javascript" src="Chartjs/Chart.min.js"> </script>
</head>
<body>
<h2 >Membuat Grafik dengan Chart.js Javascript</h2> 

<div style="width: 600px;" >
 <canvas id="myChart"></canvas>
</div>
<h4><a href="">maribelajarcoding.com</a></h4>
<script>

var barChartData = {
  labels: [
    "Absence of OB",
    "Closeness",
    "Credibility",
    "Heritage",
    "M Disclosure",
    "Provenance",
    "Reliability",
    "Transparency"
  ],

  datasets: [
    {
      label: "American Express",
      backgroundColor: "pink",
      borderColor: "red",
      borderWidth: 1,
      data: [3, 5, 6, 7,3, 5, 6, 7]
    },
    {
      label: "Mastercard",
      backgroundColor: "lightblue",
      borderColor: "blue",
      borderWidth: 1,
      data: [4, 7, 3, 6, 10,7,4,6]
    },
    {
      label: "Paypal",
      backgroundColor: "lightgreen",
      borderColor: "green",
      borderWidth: 1,
      data: [10,7,4,6,9,7,3,10]
    },
    {
      label: "Visa",
      backgroundColor: "yellow",
      borderColor: "orange",
      borderWidth: 1,
      data: [6,9,7,3,10,7,4,6]
    }
  ]
};

var chartOptions = {
  responsive: true,
  legend: {
    position: "top"
  },
  title: {
    display: true,
    text: "Chart.js Bar Chart"
  },
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
}

  var ctx = document.getElementById("myChart").getContext("2d");
  window.myBar = new Chart(ctx, {
    type: "bar",
    data: barChartData,
    options: chartOptions
  });

</script>
</body>
</html>

Membuat Grafik dengan Chart.js Javascript


Tutorial membuat grafik dengan chart.js sampai disini. Sekian semoga bermanfaat.



Related search:
Membuat grafik dengan Chart.js javascript
Membuat grafik dengan PHP dan Mysql
Membuat grafik grouping dengan Chart.js
Membuat chart grouping dengan Chart.js 

Related Posts

Load comments