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
line1

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 :
chart2

Implementasi dengan PHP coming soon…

Categories: PHP

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. Ingin Kerjasama, Pasang Iklan, Membuat aplikasi Android atau Web? hubungi saya di candraadiputra (at) gmail (dot) com atau WA ke 081328533115

1 Comment

0rangtanah · 24 November , 2016 at 5:47 pm

Tutorial lanjutannya dengan implementasi di php-nya ditunggu bang..

Tinggalkan Komentar plz!

This site uses Akismet to reduce spam. Learn how your comment data is processed.