hndr91/chart.php

## chart.php
<?php
  include 'db_con.php';
	$idbarang = $_GET['id_barang']; //mendapatkan informasi id barang dari file index.php

	//melakukan query pada tabel penjualan sesaui dengan informasi id barang yang didapat dari metode GET
	$sql = "select * from penjualan where id_barang = '".$idbarang."' ";
	$query = mysql_query($sql);

	//membuat kolom pada tabel
	$tabel = array();
	$tabel['cols'] = array (
		array('label'=>'Nama Barang','type'=>'string'),
		//sesuaikan dengan tipe data yang ada, google chart hanya membaca persilangan (vAxis dengan hAxis) antara string dengan number (kecuali menampilkan dalam bentuk tabel)
		array('label'=>'Tahun 2012','type'=>'number'),
		array('label'=>'Tahun 2013','type'=>'number')
	);

	//selanjutnya adalah memasukan hasil query pada baris yang bersifat temporary
	$baris = array ();
	while ($hasil = mysql_fetch_assoc($query)) {
		$tmp = array ();
		$tmp[] = array ('v'=>$hasil['nama_barang']);
		$tmp[] = array ('v'=>(int)$hasil['2012']);
		$tmp[] = array ('v'=>(int)$hasil['2013']);
		$baris[] = array ('c'=>$tmp);
	}
	//membuat baris pada tabel
	$tabel['rows'] = $baris;
	//merubah tabel ke dalam format json
	$jsonTabel = json_encode($tabel);
	//echo $jsonTabel;
?>
<html>
	<head>
		<title>Chart Penjualan</title>
		<!-- memanggil API google charts -->
		<script src="https://www.google.com/jsapi"></script>
		<!-- memanggil API jQuery sebagai syarat google charts -->
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<!-- membuat chart -->
		<script type="text/javascript">
			google.load('visualization','1',{'packages':['corechart']});
			google.setOnLoadCallback(drawLine);

			function drawLine () {
				var data = new google.visualization.DataTable(<?=$jsonTabel?>);


				var BarChart = new google.visualization.ColumnChart(document.getElementById('col'));
				BarChart.draw(data);
			}
		</script>
	</head>
	<body>
		<!-- id harus sama dengan yang ditulis pada script js ! -->
		<div id="col"></div>
	</body>
</html>
	<?php
	include 'db_con.php';
	$idbarang = $_GET['id_barang']; //mendapatkan informasi id barang dari file index.php

	//melakukan query pada tabel penjualan sesaui dengan informasi id barang yang didapat dari metode GET
	$sql = "select * from penjualan where id_barang = '".$idbarang."' ";
	$query = mysql_query($sql);

	//membuat kolom pada tabel
	$tabel = array();
	$tabel['cols'] = array (
	array('label'=>'Nama Barang','type'=>'string'),
	//sesuaikan dengan tipe data yang ada, google chart hanya membaca persilangan (vAxis dengan hAxis) antara string dengan number (kecuali menampilkan dalam bentuk tabel)
	array('label'=>'Tahun 2012','type'=>'number'),
	array('label'=>'Tahun 2013','type'=>'number')
	);

	//selanjutnya adalah memasukan hasil query pada baris yang bersifat temporary
	$baris = array ();
	while ($hasil = mysql_fetch_assoc($query)) {
	$tmp = array ();
	$tmp[] = array ('v'=>$hasil['nama_barang']);
	$tmp[] = array ('v'=>(int)$hasil['2012']);
	$tmp[] = array ('v'=>(int)$hasil['2013']);
	$baris[] = array ('c'=>$tmp);
	}
	//membuat baris pada tabel
	$tabel['rows'] = $baris;
	//merubah tabel ke dalam format json
	$jsonTabel = json_encode($tabel);
	//echo $jsonTabel;
	?>
	<html>
	<head>
	<title>Chart Penjualan</title>
	<!-- memanggil API google charts -->
	<script src="https://www.google.com/jsapi"></script>
	<!-- memanggil API jQuery sebagai syarat google charts -->
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<!-- membuat chart -->
	<script type="text/javascript">
	google.load('visualization','1',{'packages':['corechart']});
	google.setOnLoadCallback(drawLine);

	function drawLine () {
	var data = new google.visualization.DataTable(<?=$jsonTabel?>);


	var BarChart = new google.visualization.ColumnChart(document.getElementById('col'));
	BarChart.draw(data);
	}
	</script>
	</head>
	<body>
	<!-- id harus sama dengan yang ditulis pada script js ! -->
	<div id="col"></div>
	</body>
	</html>