Advanced - Google Charts Visualisation
Google Charts
Connect to an Access Database and display a Google Chart.
Google Chart Visualisation Reference
Script
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {packages: ['corechart']});
</script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Request', 'Status']
,['Approved', 1]
,['Closed', 1]
,['Escalated', 2]
,['Received', 6]
]);
var options = {
title: 'Requests Status',
pieSliceText: 'value',
is3D: true,
fontName: 'Verdana',
fontSize: '10',
colors:['#808080','#4e1818','#9c3030','#db8181','#c33c3c','#666666','#b3b3b3','#999999','#752424'],
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="height: 400px; width: 600px;"></div>
</body>
</html>
Now we need to create a connection to a db, loop some values and produce the var data dynamically.
To Add...
Example
Sample Files
By: Alex Hedley
Click here to sign up for more FREE tips
|
