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
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…

Membuat Graphic Chart di Web dengan ChartJS

chartjs

Tutorial ini adalah bagian pertama dari 4 Tutorial. Tutorial lain yang merupakan kelanjutan dari tutorial ini bisa anda baca di link berikut :

  1. Mengenal ChartJS (artikel ini )
  2. Membuat Line Chart dengan ChartJS + PHP (Coming soon…)
  3. Membuat Bar Chart dengan ChartJS + PHP ( Coming soon…)
  4. Membuat Pie Chart dengan ChartJS + PHP (Coming soon ..)

Sekitar 3 tahun yang lalu saya membuat tutorial Membuat grafik Chart dengan Highcart dan PHP yang sampai hari ini tetap menjadi TOP Post di blog ini.  Sayangnya Highcart hanya membolehkan versi freenya untuk membuat aplikasi open source saja dan tidak diperbolehkan membuat aplikasi komersial kecuali membeli lisensinya yang untuk ukuran kantong indonesia mahal banget, bayangkan saja satu developer lisensinya sampai 590 USD atau sekitar 8 Juta dengan Kurs saat ini.

Untuk itulah saya akan membuat panduan baru dengan chartJS Library yang murni Open source berbasis teknologi HTML5 Canvas dengan Lisensi MIT . Lisensi ini membolehkan kita membuat aplikasi Free ataupun Komersial tanpa harus membayar lisensi.

ChartJS punya 6 Fitur utama yaitu :

  1. Mendukung 6 tipe chart yaitu line,bar, pie, donat, polar dan radar Chart
  2. Berbasis HTML5  Canvas sehingga tidak perlu plugin dibrowser
  3. Tidak membutuhkan library lain seperti jQuery . Ukuranya kecil cuma 11kb.
  4. Responsive, Graphic Chart bisa dilihat di smartphone, tablet ataupun desktop Browser.
  5. Modular, Anda bisa mengcustom javascript misalkan hanya untuk barchart saja sehingga ukuran library menjadi sangat kecil yang efeknya akan mempercepat loading halaman.
  6. Interaktif, berupa tooltip yang menampilkan informasi jumlah data di chart.

Dengan 6 kelebihan itu saya yakin Lebih dari cukup untuk kebutuhan pembuatan chart di website/WebApp yang anda buat. Tutorial selanjutnya akan membahas tentang membuat chart yang dikombinasikan dengan PHP dan MySQL. Untuk dokumentasi library ini dan contoh pembuatan chart static (tanpa database dan php) bisa anda lihat di http://www.chartjs.org/docs/.