Highcharts in replacement of Google charts for local library / offline
I preserve all the code of the MOD except that i created a directory for plugins, so that I have a PLUGINS_DIR global variable for the relative path.
In the same way Highcharts 2.2.5 is in this directory.
The good thing is that I only have to format data from php to json and Highcharts is doing all the stuff without other complicated code and delay requesting online google libs.
see www.highcharts.com(www.highcharts.com) for impressive online demos.
At the moment I tested almost all views but the custom ranges are not working : I have to work it out !
See my code for replacing reports.inc.php (to save before replacement) :
<?php
require_once(PLUGINS_DIR.'reportsv5/reports_includes/functions.php');
// Get date for export file
//$file = getFile('../plugins/reportsv5/reports_csv');
// If form has not been submitted yet then create a default report.
if(!isset($_POST)){
$_POST = 'tixPerDept';
$_POST = 'submit';
$_POST = 'timePeriod';
$_POST = 'thisWeek';
}
// Main Content sections
// Made requires to make them easy to move around if you want to re-organize
// Or if you simply don't want quick stats just comment out the line
require_once(PLUGINS_DIR.'reportsv5/reports_includes/quickStats.php');
require_once(PLUGINS_DIR.'reportsv5/reports_includes/reportsForm.php');
//$qwhere is DEFINED HERE :
if($_POST == 'timePeriod'){ require_once(PLUGINS_DIR.'reportsv5/reports_includes/timePeriods.php'); }
// Specified time range
if($_POST == 'timeRange'){ require_once(PLUGINS_DIR.'reports_includes/timeRange.php'); }
//DEBUT HIGHCHARTS
//print_r($_POST);
$queries = Array (
"tixPerDept" => array (
"SQL" => "SELECT dept_name AS name, COUNT(ticket_id) AS nb FROM ".TICKET_TABLE." LEFT JOIN ".DEPT_TABLE." ON ".DEPT_TABLE.".dept_id=".TICKET_TABLE.".dept_id $qwhere GROUP BY ".DEPT_TABLE.".dept_id ORDER BY nb DESC",
"titre" => "Tickets par département"),
"tixPerDay" => array (
"SQL" => "SELECT DATE(created) AS name, COUNT(ticket_id) AS nb FROM ".TICKET_TABLE." $qwhere GROUP BY DAY(created)",
"titre" => "Tickets par jour"),
"tixPerMonth" => array (
"SQL" => "SELECT MONTH(created) AS name, COUNT(ticket_id) AS nb FROM ".TICKET_TABLE." $qwhere GROUP BY MONTH(created)",
"titre" => "Tickets par mois"),
"repliesPerStaff" => array (
"SQL" => "SELECT CONCAT(firstname, ' ', lastname) AS name, COUNT(response_id) AS nb FROM ".TICKET_RESPONSE_TABLE." LEFT JOIN ".STAFF_TABLE." ON ".STAFF_TABLE.".staff_id=".TICKET_RESPONSE_TABLE.".staff_id $qwhere GROUP BY ".STAFF_TABLE.".staff_id ORDER BY nb DESC",
"titre" => "Tickets par agent"),
"tixPerClient" => array (
"SQL" => "SELECT email AS name, COUNT(ticket_id) AS nb FROM ".TICKET_TABLE." $qwhere GROUP BY ".TICKET_TABLE.".email ORDER BY nb DESC",
"titre" => "Tickets par internaute")
);
//print_r($queries);
$sql = $queries[$_POST;
$titre = $queries[$_POST;
//echo $sql;
$data = "";
$res = db_query ($sql);
while ($row = db_fetch_array($res)) {
if ($data == "") {
$data .= "{
name: '".$row."',
y: ".$row.",
sliced: true,
selected: true
},";
} else {
$data .= "['".$row."',".$row,";
}
}
$data = substr($data, 0, -1);
//echo $data;
//exit();
?>
<link href='../plugins/reportsv5/reports_css/style.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="../scp/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
// Radialize the colors
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
,
};
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'conteneur',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '<?php echo $titre;?>'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage,2) +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage,2) +' %';
}
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data :
});
});
});
</script>
<script src="../plugins/Highcharts-2.2.5/js/highcharts.js"></script>
<script src="../plugins/Highcharts-2.2.5/js/modules/exporting.js"></script>
<div id="conteneur" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
