Files
agc_2-X/www/vicidial/graphcanvas.inc
T
mattf a801674046 Added and tested ChartJS features for more aesthetically appealing graphs to many reports
git-svn-id: svn://192.168.202.10@2568 3d104415-ff17-0410-8863-d5cf3c621b8a
2016-07-31 14:19:56 +00:00

93 lines
6.7 KiB
PHP

<?php
$graphCanvas="\n\n<form>";
$graphCanvas.="<table cellspacing=\"1\" cellpadding=\"1\" summary=\""._QXZ("$graph_title")."\" class=\"horizontalgraph\">\n";
$graphCanvas.=" <caption align=\"top\">"._QXZ("$graph_title")."</caption>\n";
if ($graph_count>1) {
$graphCanvas.=" <tr>\n";
for ($q=0; $q<$graph_count; $q++) {
$graph_info=explode("|", $graph_array[$q]);
$link_name=$graph_info[2];
$graphCanvas.="<th width='".($q==0 ? '*' : floor(100/$graph_count).'%')."' class='thgraph ".($q==0 ? 'selected_grey_graph_cell' : 'grey_graph_cell')."' id='LinkID".$graph_id."_".$q."'><a href='#' onClick=\"ToggleSpan('".$graph_id."', '".$q."', '".$graph_count."'); return false;\">"._QXZ("$link_name")."</a></th>";
}
$graphCanvas.=" </tr>\n";
}
$graphCanvas.=" <tr><td colspan='".$graph_count."'>\n";
for ($q=0; $q<$graph_count; $q++) {
# SET GRAPH size FOR READABILITY
if (file_exists('options.php'))
{
require('options.php');
$init_height=$graph_canvas_size; # Chart has a minimum height/width of 600 by default
}
else
{
$init_height=600;
}
$entry_width=($init_width<20 ? 20 : ($init_width>50 ? 50 : $init_width));
$init_width=(($graph_count*$entry_width)<$init_height ? $init_height : ($graph_count*$entry_width));
$graph_info=explode("|", $graph_array[$q]);
$dataset_name=$graph_info[0];
$dataset_type=$graph_info[3];
switch($dataset_type) {
case "time":
$chart_options="options: {tooltips: {callbacks: {label: function(tooltipItem, data) {var value = Math.round(data.datasets[0].data[tooltipItem.index]); return value.toHHMMSS();}}}, legend: { display: false }},";
break;
case "percent":
$chart_options="options: {tooltips: {callbacks: {label: function(tooltipItem, data) {var value = data.datasets[0].data[tooltipItem.index]; return value + '%';}}}, legend: { display: false }},";
break;
default:
$chart_options="options: { legend: { display: false }},";
break;
}
$graphCanvas.="<span id='SpanID".$graph_id."_".$q."' style='display:".($q==0 ? 'block' : 'none').";'>";
$graphCanvas.="<table width='$init_width'>";
$graphCanvas.=$graph_totals_array[$q];
$graphCanvas.="<tr>\n";
/*
$graphCanvas.="<td align='center'><input type='button' value='PIE' onClick=\"if(GraphID".$graph_id."_".$q."!=null){GraphID".$graph_id."_".$q.".destroy();}; prepChart('pie', $graph_id, $q, $dataset_name); var GraphID".$graph_id."_".$q." = new Chart(main_ctx, $dataset_name);\"></td>\n";
$graphCanvas.="<td align='center'><input type='button' value='LINE' onClick=\"if(GraphID".$graph_id."_".$q."!=null){GraphID".$graph_id."_".$q.".destroy();}; prepChart('line', $graph_id, $q, $dataset_name); var GraphID".$graph_id."_".$q." = new Chart(main_ctx, $dataset_name);\"></td>\n";
$graphCanvas.="<td align='center'><input type='button' value='BAR' onClick=\"if(GraphID".$graph_id."_".$q."!=null){GraphID".$graph_id."_".$q.".destroy();}; prepChart('bar', $graph_id, $q, $dataset_name); var GraphID".$graph_id."_".$q." = new Chart(main_ctx, $dataset_name);\"></td>\n";
$graphCanvas.="<td align='center'><input type='button' value='POLAR' onClick=\"if(GraphID".$graph_id."_".$q."!=null){GraphID".$graph_id."_".$q.".destroy();}; prepChart('polarArea', $graph_id, $q, $dataset_name); var GraphID".$graph_id."_".$q." = new Chart(main_ctx, $dataset_name);\"></td>\n";
var h = Math.floor(d / 3600); var m = Math.floor(d % 3600 / 60); var s = Math.floor(d % 3600 % 60); return ((h > 0 ? h + ":" + (m < 10 ? "0" : "") : "") + m + ":" + (s < 10 ? "0" : "") + s);
type: 'pie', options: {tooltips: {callbacks: {label: function(tooltipItem, data) {var value = data.datasets[0].data[tooltipItem.index]; var label = data.labels[tooltipItem.index]; var percentage = Math.round(value / totalSessions * 100); return label + ' ' + percentage + '%';}}},}, data: topBrowsers
*/
$graphCanvas.="<td align='center' width='20%'><input type='button' class='ChartJSButton' value='PIE' onClick=\"if(GraphID".$graph_id."_".$q."!=null){GraphID".$graph_id."_".$q.".destroy();}; var main_ctx = document.getElementById('CanvasID".$graph_id."_".$q."'); GraphID".$graph_id."_".$q." = new Chart(main_ctx, {type: 'pie', options: {tooltips: {callbacks: {label: function(tooltipItem, data) {var value = data.datasets[0].data[tooltipItem.index]; var label = data.labels[tooltipItem.index]; var percentage = Math.round(value / ".$graph_totals_rawdata[$q]." * 10000)/100; return label + ' ' + percentage + '%';}}}, legend: { display: false }}, data: $dataset_name});\"></td>\n";
$graphCanvas.="<td align='center' width='20%'><input type='button' class='ChartJSButton' value='LINE' onClick=\"if(GraphID".$graph_id."_".$q."!=null){GraphID".$graph_id."_".$q.".destroy(); var main_ctx = document.getElementById('CanvasID".$graph_id."_".$q."'); GraphID".$graph_id."_".$q." = new Chart(main_ctx, {type: 'line', $chart_options data: $dataset_name});}\"></td>\n";
$graphCanvas.="<td align='center' width='20%'><input type='button' class='ChartJSButton' value='HORIZ. BAR' onClick=\"if(GraphID".$graph_id."_".$q."!=null){GraphID".$graph_id."_".$q.".destroy();}; var main_ctx = document.getElementById('CanvasID".$graph_id."_".$q."'); GraphID".$graph_id."_".$q." = new Chart(main_ctx, {type: 'horizontalBar', $chart_options data: $dataset_name});\"></td>\n";
$graphCanvas.="<td align='center' width='20%'><input type='button' class='ChartJSButton' value='VERT. BAR' onClick=\"if(GraphID".$graph_id."_".$q."!=null){GraphID".$graph_id."_".$q.".destroy();}; var main_ctx = document.getElementById('CanvasID".$graph_id."_".$q."'); GraphID".$graph_id."_".$q." = new Chart(main_ctx, {type: 'bar', $chart_options data: $dataset_name});\"></td>\n";
$graphCanvas.="<td align='center' width='20%'><input type='button' class='ChartJSButton' value='POLAR' onClick=\"if(GraphID".$graph_id."_".$q."!=null){GraphID".$graph_id."_".$q.".destroy();}; var main_ctx = document.getElementById('CanvasID".$graph_id."_".$q."'); GraphID".$graph_id."_".$q." = new Chart(main_ctx, {type: 'polarArea', $chart_options data: $dataset_name});\"></td>\n";
$graphCanvas.="</tr>\n";
$graphCanvas.="<tr height='$init_height'>";
$graphCanvas.="<td id='chartContainer' colspan=5>";
$graphCanvas.="<canvas id=\"CanvasID".$graph_id."_".$q."\" width=\"".$init_width."\" height=\"".$init_height."\"></canvas></td>";
$graphCanvas.="<td width='100' id='LegendID".$graph_id."_".$q."' rowspan=2></td>";
$graphCanvas.="</tr>";
$graphCanvas.="</table>";
$graphCanvas.="</span>";
}
$graphCanvas.="</td></tr>\n";
$graphCanvas.="</table>\n";
$graphCanvas.="</form>\n\n";
?>
<script language="Javascript">
// global chart names
<?php
for ($q=0; $q<$graph_count; $q++) {
echo "var GraphID".$graph_id."_".$q."=null;\n";
}
?>
</script>
<?php
$allowed_graph="ALL";
$graph_count=1;
?>