Untitled

<!DOCTYPE html>
<html>
<head>
	<title>high chart</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
	<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
	<style type="text/css">
	.container { margin: auto; padding: 5px; width: 800px; border: 2px solid #DBDBDB; }
	</style>
</head>
<body>
<div class="container">
<div class="grafik" style="width:100%; height:400px;"></div>
</div>

<?php
	// koneksi ke database
	 $host = 'localhost';
	 $user = 'root';
	 $pass = 'root';
	 $db = 'mydb';
	 mysql_select_db($db, mysql_connect($host, $user, $pass));

	 //data array
	 $array_series=array();
	 $array_categories = array();


	 $sql = 'SELECT * FROM revenue';
	 $rs = mysql_query($sql);

	 while($row = mysql_fetch_array($rs)) {
	 	$date = $row['trx_date'];
	 	$revenue = $row['total_revenue'];

	 	array_push($array_series, array('date'=>$date, 'revenue'=>$revenue));

	 	array_push($array_categories, $date);
	 }
?>

<script type="text/javascript">
$('.grafik').highcharts({
 chart: {
  type: 'column',
  marginTop: 80
 },
 credits: {
  enabled: false
 },
 tooltip: {
  shared: true,
  crosshairs: true,
  headerFormat: '<b>{point.key}</b>< br />'
 },
 title: {
  text: 'REVENUE'
 },
 subtitle: {
  text: 'Bulan Januari'
 },
 xAxis: {
  categories: <?php echo json_encode($array_categories); ?>,
  labels: {
   rotation: 0,
   align: 'right',
   style: {
    fontSize: '10px',
    fontFamily: 'Verdana, sans-serif'
   }
  }
 },
 legend: {
  enabled: true
 },
 series: <?php echo json_encode($array_series); ?>

});
</script>

</body>
</html>