Pada dasarnya grafik digunakan untuk mempermudah user dalam melihat perbandangin hasil sekarang, kemarin dan hari ini, maka dari itu pada kesempatan kali ini saya akan menjelaskan cara membuat Grafik atau Chart dengan JQuery dan CanvasJS utuk membuatnya silahkan simak tutorial berikut.
- Pertama download JQuery dan download CanvasJS kemudian buat sebuah folder dengan nama example, lalu simpan kedua file tersebut kedalam folder yang sudah di buat.
- Kemudian panggil kedua file tersebut dengan menyertakan nya di dalam tag <script> , lihatcontoh di bawah ini :
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.canvasjs.min.js"></script>
- Kemudian buat sebuah file HTML dari file berikut ini, silahkan di copy paste dan simpan dengan nama index.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/assets/script/jquery.canvasjs.min.js"></script>
<script type="text/javascript">
$(function () {
//Better to construct options first and then pass it as a parameter
var options = {
title: {
text: "Spline Chart using jQuery Plugin"
},
animationEnabled: true,
data: [
{
type: "spline", //change it to line, area, column, pie, etc
dataPoints: [
{ x: 10, y: 10 },
{ x: 20, y: 12 },
{ x: 30, y: 8 },
{ x: 40, y: 14 },
{ x: 50, y: 6 },
{ x: 60, y: 24 },
{ x: 70, y: -4 },
{ x: 80, y: 10 }
]
}
]
};
$("#chartContainer").CanvasJSChart(options);
});
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
- Jalankan file tersebut di browser maka akan tampil hasil seperti gambar di bawah ini.
Bagaimana.? mudah bukan untuk membuat grafik dengan Jquery dan Canvas JS untuk mempraktekannya silahkan di coba ya, semoga yang saya share ini bisa bermanfaat bagi yang sedang belajar JQuery.
Selamat Mencoba