Membuat Line Chart dengan ChartJS + PHP

Pada artikel ini kita akan membahas cara membuat Line Chart dengan PHP. Namun sebelumnya kita analisa dulu struktur dari Linechart di Chart JS dengan mengamati kode berikut .

//variable yang berisi data linechart terdiri dari 2 komponen utama yaitu labels dan datasets
		var lineChartData = {
			labels : ["Jan","Feb","Maret","April","Mei","Juni"],
			datasets : [
//jika anda tidak suka dengan warna linechart, silahkan ganti sendiri warnanya
//dari fillColor sampai pointHIghlghtStroke dengan kode WARNA hexa atau RGBA
//klo anda programer/desainer bagian ini tidak perlu dijelaskan lagi			
				{
					label: "Jakarta",

					fillColor : "rgba(151,187,205,0.2)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(151,187,205,1)",
//ini adalah data yang akan dibuatkan grafiknya, 
//jika memakai PHP mYSQL baris inilah yang diganti 
					data : [20,25,17,29,25,21]
				}
				
			]

		}

	window.onload = function(){
		var ctx = document.getElementById("canvas").getContext("2d");
		window.myLine = new Chart(ctx).Line(lineChartData, {
			responsive: true
		});
	}

	
// ]]>

Perhatikan Kode diatas beserta penjelasannya di kode. Berikut ini adalah hasilnya

Kadang, dalam satu graphic ada 2 atau lebih linechart, misalkan kita ingin membandingkan suhu jakarta dan suhu
kota bandung, bagaimana caranya? cukup tambahkan data pada datasetnya seperti ini.

datasets : [
			
				{
					label: "Jakarta",
					fillColor : "rgba(151,187,205,0.2)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(151,187,205,1)",
					data : [20,25,17,29,25,21]
				},
				{
					label: "bandung",
					fillColor : "rgba(151,187,205,0.2)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(151,187,205,1)",
					data : [24,21,25,21,21,31]
				}

Berikut ini adalah hasilnya :

Implementasi dengan PHP coming soon…