Membuat chart dengan chart.js -->
Home ›

Membuat chart dengan chart.js

Sorayakit
15 September 2018
Komentar

Baca Juga

Chart atau grafik adalah bentuk visual dari data. Dengan menggunakan chart kita bisa melihat trend dari perubahan setiap data yang masuk. Data yang bisa diberikan ke chart bermacam macam ada data suhu, kelembapan, kecepatan, harga harga dan banyak lagi data yang bisa ditampilkan di chart.

 


Untuk bisa menampilkan atau mem visualisasi kan (maaf penulisan bahasa Indonesia saya agak agak.. :) ) dengan chart penulis menggunakan chart.js. di chartjs ada macam bentuk grafik yang bisa dipilih seperti line, donut atau bar, pemilihan tergantung data apa yang kira kira bisa lebih mudah dimengerti user nya, atau mungkin ada standarisasi grafik untuk model tertentu.

Untuk bisa memanfaatkan chartjs sobat mesti melampirkan source link  https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js dan "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" di halaman html. selebihnya adalah script chartjs yang berisi parameter parameter yang bisa di modifikasi.

berikut script lengkap di bawah ini, yang perlu di copy dan modif.

<!DOCTYPE html>

<html lang="en-US">
<body>

<h1>Selamat datang</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- chart js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>


<div style="width:50%;">
  <canvas id="mycanvas"></canvas>
</div>


<script>
// used for example purposes
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// create initial empty chart
var ctx_live = document.getElementById("mycanvas");
var myChart = new Chart(ctx_live, {
  type: 'line',
  data: {
    labels: [],
    datasets: [{
      data: [],
      borderWidth: 1,
      borderColor:'#00c0ef',
      label: 'liveCount',
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: "Halaman Chart Js, titel ini bisa mengambil data dari handlebars atau ajax",
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }]
    }
  }
});

// this post id drives the example data
var postId = 1;

// logic to get new data
var getData = function() {
var detik = new Date();
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/' + postId + '/comments', // ini bisa diambil dari API kita
    success: function(data) {
      // process your data to pull out what you plan to use to update the chart
      // e.g. new label and a new data point
   
      // add new label and data point to chart's underlying data structures
      myChart.data.labels.push("Detik yang ke " +detik.getSeconds());
      myChart.data.datasets[0].data.push(getRandomIntInclusive(1, 25));
   
      // re-render the chart
      myChart.update();
    }
  });
};

// get new data every 1 seconds, ini untuk call ajax api dengan durasi. penulis pakai untuk realime suhu dari dht 11
setInterval(getData, 1000);


</script>

</body>
</html>


Pertama kopi file diatas pindahkan ke notepad, beri nama belajar chartjs.html kemudian save as sebagai all files

Kemudian buka file belajar chartjs akan langsung tampak grafik model Line seperti berikut.



untuk merubah tipe bar, sobat bisa ganti tipe line ke bar 

// create initial empty chart
var ctx_live = document.getElementById("mycanvas");
var myChart = new Chart(ctx_live, {
  type: 'bar', 




Dengan grafik diatas sobat bisa, melakukan panggilan ke Server dengan metode Ajax, dimana kita bisa collect data dari sebuah sensor atau dari database.

Semoga bermanfaat. Salam.. :)


sumber: https://codepen.io/jordanwillis