Kenalan dengan Highcharts [Part 2]

Yap, sesuai janji, kali ini kita ngebahasa highcharts biar bisa nampilin data dari database.

contoh kegunaannya gimana?
ok, kita pengen tau nih, timeline user ‘X’ dalam upload data, jadi hari ini berapa upload, kemaren berapa, terus ditampilin pake line charts, jadi keliatan perkembangannya dari naek turunnya line charts.

ga usah banyak basa basi deh, tunjukin caranya !!
okeh, gini caranya.

  1. Bikin database nya dulu
  2. Munculin data nya ke highcharts

Lebih detail dong, saya newbie..

1. Bikin Database

sepertinya ini sudah pada ngerti..

2. Munculin datanya ke highcharts

kode php :
	$sql = "SELECT COUNT(USER) AS cnt, DATE as dates FROM upload GROUP BY DATE";

	$fetch = array();
	// bikin pola untuk categories highchart
	$result = mysql_query ($sql) or die (" can't do that ");
	while ($row= mysql_fetch_array($result)) {
		$date .= "'".$row['dates']."',";
		$count .= "".$row['cnt'].",";
	}

Penjelasan :
$sql ==> query buat ngedapetin count upload dari user berapa, terus jumlahnya berapa.
$result = mysql_query ($sql) or die (” can’t do that “);  ==> execute querynya

	while ($row= mysql_fetch_array($result)) {
		$date .= "'".$row['dates']."',";
		$count .= "".$row['cnt'].",";
	}

==>looping + bikin string pembentuk data ke highcharts nya. nanti hasil string nya jadi ‘2011-09-28′,’2011-09-29′,’2011-09-30’, ==> data yang kaya gini ntr dibaca ama highcharts sebagai date (utk categories)

Terus tambahin script ini diantara tag <head></head>

$(document).ready(function() {
	var chart = new Highcharts.Chart({

		chart: {
			renderTo: 'container'
		},

		title : {
			text : 'Highcharts and Php'
		},

		credits: {
			enabled: false
		},

		xAxis: {
			categories: [<?=$date;?>]
		},

		series: [{
			data: [<?=$count;?>]
		}],

		exporting: {
			width: 200
		}
	});
});

Ini screenshootnya :

ini link downloadnya :
http://dl.dropbox.com/u/20434260/Highcharts_PHP.7z

Cuma gitu doang? Ga asik ah.
ya ya ya, ini emang simpel, konsep dasar bwt maenin php, database + highcharts ya gini. selanjutnya ntr kita coba tambahin ama interaksi javascript didalem ini + script yang lebih kompeks. terus baca – baca referensi highcharts nya juga jangan lupa. REF

thanks,
seeya in next tuts.

2 thoughts on “Kenalan dengan Highcharts [Part 2]

  1. manstab… salam kenal .. need Help untuk Highstock …. puyeng badly ni … xixixixixixix
    highchart diatas kalo dirubah ke highstock,, kalo bisa kira kira jadinya kaya apa yah scriptnya..???

    help……

    1. kalo saya sendiri sih belum pernah nyoba pake highstock, mgkn ntr dibikin tuts nya, ditunggu aja ya😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s