Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
mzm-dev authored and mzm-dev committed Sep 6, 2014
1 parent 3032bcd commit ef5e6e0
Show file tree
Hide file tree
Showing 9 changed files with 305 additions and 8 deletions.
2 changes: 1 addition & 1 deletion bar/basic-bar.php
View file
Expand Up @@ -24,7 +24,7 @@
type: 'bar'
},
title: {
text: 'Statistik Pelawat Urusan XYZ',
text: 'Highcharts Chart PHP with MySQL Example',
x: -20 //center
},
subtitle: {
Expand Down
106 changes: 106 additions & 0 deletions bar/basic-colm-ajax.php
View file
@@ -0,0 +1,106 @@
<?php
/**
*
*
* @link https://github.com/mzm-dev
* @created September 2014
* @fb https://www.facebook.com/zakimedia
* @email mohdzaki04@gmail.com
*/
$cakeDescription = "Highcharts Pie Chart";
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php echo $cakeDescription ?></title>
<link href="../webroot/css/cake.generic.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//default
getAjaxData('2013');

$('#dynamic_data').change(function() {
var id = $('#dynamic_data').val();
getAjaxData(id);
});

var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Highcharts Chart PHP with MySQL Example',
x: -20 //center
},
subtitle: {
text: 'Sumber : Jabatan XYZ',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Jumlah Pelawat'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>:<b>{point.y}</b> of total<br/>'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
shadow: true
},
series: []
};
function getAjaxData(id) {
$.getJSON("data/data-basic-colm-ajax.php", {id: id}, function(json) {
options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
}

});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

</head>
<body>
<a class="link_header" href="/highcharts/">&lt;&lt; Back to index</a>
<div class="menu_top" >
<select id="dynamic_data">
<option value="">Pilih</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>
</div>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
</body>
</html>
2 changes: 1 addition & 1 deletion bar/basic-colm.php
View file
Expand Up @@ -24,7 +24,7 @@
type: 'column'
},
title: {
text: 'Statistik Pelawat Urusan XYZ',
text: 'Highcharts Chart PHP with MySQL Example',
x: -20 //center
},
subtitle: {
Expand Down
75 changes: 75 additions & 0 deletions bar/basic-line.php
View file
@@ -0,0 +1,75 @@
<?php
/**
*
*
* @link https://github.com/mzm-dev
* @created September 2014
* @fb https://www.facebook.com/zakimedia
* @email mohdzaki04@gmail.com
*/
$cakeDescription = "Highcharts Pie Chart";
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php echo $cakeDescription ?></title>
<link href="../webroot/css/cake.generic.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Highcharts Chart PHP with MySQL Example',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: [],
title: {
text: 'Bulan'
}
},
yAxis: {
title: {
text: 'Bilangan Pelawat'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: []
};
$.getJSON("data/data-basic-colm.php", function(json) {
options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<a class="link_header" href="/highcharts/">&lt;&lt; Back to index</a>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
24 changes: 24 additions & 0 deletions bar/data/data-basic-colm-ajax.php
View file
@@ -0,0 +1,24 @@
<?php

#Basic Line
require '../../conn/connection.php';

$id = $_GET['id'];

$result = mysql_query("SELECT id, year AS TAHUN, month AS BULAN, COUNT( * ) AS JUMLAH FROM activities WHERE year=" . $id . " GROUP BY MONTH ORDER BY id");

$bln = array();
$bln['name'] = 'Bulan';
$rows['name'] = 'Jumlah Pelawat';
while ($r = mysql_fetch_array($result)) {
$bln['data'][] = $r['BULAN'];
$rows['data'][] = $r['JUMLAH'];
}
$rslt = array();
array_push($rslt, $bln);
array_push($rslt, $rows);
print json_encode($rslt, JSON_NUMERIC_CHECK);

mysql_close($con);


12 changes: 8 additions & 4 deletions index.php
View file
Expand Up @@ -25,21 +25,25 @@
<thead>
<tr>
<th>PIE CHARTS</th>
<th>COLUMN AND BAR CHARTS</th>
<th>COLUMN, BAR AND LINE CHARTS</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="pie/pie-chart_1.php">Pie Chart Example 1</a></td>
<td><a href="bar/basic-colm.php">Basic Column</a></td>
</tr>
<tr>
<td><a href="pie/pie-chart_2.php">Pie Chart Example 2</a></td>
<td><a href="bar/basic-bar.php">Basic Bar</a></td>
</tr>
<tr>
<td><a href="pie/pie-semi-circle.php">Pie Semi Circle</a></td>
<td><a href="bar/basic-bar.php">Basic Bar</a></td>
<td><a href="bar/basic-colm-ajax.php">Basic Column AJAX</a></td>
</tr>
<tr>
<td><a href="pie/pie-semi-circle.php">Pie Chart Example 2</a></td>
<td></td>
<td><a href="pie/pie-chart-3d.php">Pie Chart 3D</a></td>
<td><a href="bar/basic-line.php">Basic Line</a></td>
</tr>
</tbody>
</table>
Expand Down
21 changes: 21 additions & 0 deletions pie/data/data-pie-chart2.php
View file
@@ -0,0 +1,21 @@
<?php
#Pie Chart
require '../../conn/connection.php';

$result = mysql_query("SELECT id, year AS TAHUN, COUNT( * ) AS JUMLAH FROM activities GROUP BY TAHUN");
#$result = mysql_query("SELECT name, val FROM web_marketing");

//$rows = array();
$rows['type'] = 'pie';
$rows['name'] = 'Pelawat';
//$rows['innerSize'] = '50%';
while ($r = mysql_fetch_array($result)) {
$rows['data'][] = array('Tahun '.$r['TAHUN'].'"', $r['JUMLAH']);
}
$rslt = array();
array_push($rslt,$rows);
print json_encode($rslt, JSON_NUMERIC_CHECK);

mysql_close($con);


67 changes: 67 additions & 0 deletions pie/pie-chart-3d.php
View file
@@ -0,0 +1,67 @@
<?php
/**
*
*
* @link https://github.com/mzm-dev
* @created September 2014
* @fb https://www.facebook.com/zakimedia
* @email mohdzaki04@gmail.com
*/
$cakeDescription = "Highcharts Pie Chart";
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php echo $cakeDescription ?></title>
<link href="../webroot/css/cake.generic.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

var options = {
chart: {
renderTo: 'container',
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}

},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>({point.y} pengunjung)'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: []
};

$.getJSON("data/data-pie-chart2.php", function(json) {
options.series = json;
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<a class="link_header" href="/highcharts/">&lt;&lt; Back to index</a>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
4 changes: 2 additions & 2 deletions pie/pie-chart_2.php
View file
Expand Up @@ -30,7 +30,7 @@
},
tooltip: {
formatter: function() {
return '<b>' + this.point.name + '</b>: ' + this.y;
return '<b>' + this.point.name + '</b>: ' + this.y+ ' Pengunjung';
}
},
plotOptions: {
Expand All @@ -51,7 +51,7 @@
series: []
};

$.getJSON("data/data-pie-chart.php", function(json) {
$.getJSON("data/data-pie-chart2.php", function(json) {
options.series = json;
chart = new Highcharts.Chart(options);
});
Expand Down

0 comments on commit ef5e6e0

Please sign in to comment.