<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<title>Testing chart classes</title>
<style>
.celula {
border: 1px solid black;
}
</style>
</head>
<body>
<?php
function __autoload($class) {
$filename=$class.".php";
if (is_readable($filename)) {
require_once $filename;
}
}
//database connection and fetch data(I have a class databse who give me mysqli)
$db=database::connection();
$select="SELECT oras,ROUND(AVG(spect)) as medie,SUM(spect) as total FROM `meci` WHERE wc=1990 ";
$select.=" GROUP BY oras ORDER BY total DESC";
if ($q=$db->query($select)) {
$data=$q->fetch_all();
}
// set the array with columns name
$columns=array('oras'=>'string','medie'=>'number','spectatori'=>'number');
//draw table
$table= new table($columns, $data, 'table_div');
$table->addTableClass('tableCell', 'celula');//add CSS class for table cells
$table->addTableClass('headerCell','celula');//add CSS class for table cells
$table->setOptions('showRowNumber','true');//add a column with order
$table->setOptions('width','500px');//width of table
$table->setOptions('page','enable');//allow pagination
$table->setOptions('pageSize',8);//number of rows on page
echo $table->render();
//draw pie chart
$pie=new pie($columns, $data, 'pie_div');
$pie->setOptions('width','500');
$pie->setOptions('height','500');
$pie->setOptions('backgroundColor', "{'strokeWidth':'10'}");
echo $pie->render();
//draw column chart
$columnChart=new column($columns,$data,"column_div");
$columnChart->setOptions('backgroundColor','yellow');
$columnChart->setOptions('title','Attendance');
$columnChart->setOptions('chartArea',"{'width':'50%','height':'80%'}");
echo $columnChart->render();
$geo=new geo($columns,$data,"geo_div");
$geo->setOptions('region','IT');
$geo->setOptions('displayMode','markers');
$geo->setOptions('chartArea',"{'width':'50%','height':'90%'}");
echo $geo->render();
?>
<div id="table_div"></div>
<div id="pie_div"></div>
<div id="column_div"></div>
<div id="geo_div" style="width:900px;height:500px"></div>
</body>
</html>
|
Download
