[code]<?php
/*
- To change this template, choose Tools | Templates
- and open the template in the editor.
*/
error_reporting(E_ALL);
require_once(“security_header.php”);
require_once("…/…/classes/class.airtime.php");
$app = new EvoAirtime();
?>
Google Visualization API Sample
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart', 'controls', 'table']});
google.setOnLoadCallback(reloadDashboard);
$(function() {
$( "#startDate" ).datepicker();
$( "#endDate" ).datepicker();
});
function reloadDashboard()
{
Date.prototype.yyyymmdd = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]); // padding
};
if( document.getElementById("startDate").value == "" )
{
var startDate = new Date();
startDate.setDate(startDate.getDate() - 1);
var endDate = new Date();
document.getElementById("startDate").value = startDate.yyyymmdd();
document.getElementById("endDate").value = endDate.yyyymmdd();
}
else
{
var startDate = new Date(document.getElementById("startDate").value);
var endDate = new Date(document.getElementById("endDate").value);
}
redrawDashboard(startDate.yyyymmdd(), endDate.yyyymmdd());
}
function filterChange(filterId, listName)
{
var dropDown = document.getElementById(listName);
applyFilter(filterId, dropDown.value);
}
function exportXls()
{
Date.prototype.yyyymmdd = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]); // padding
};
if( document.getElementById("startDate").value == "" )
{
var startDate = new Date();
startDate.setDate(startDate.getDate() - 1);
var endDate = new Date();
document.getElementById("startDate").value = startDate.yyyymmdd();
document.getElementById("endDate").value = endDate.yyyymmdd();
}
else
{
var startDate = new Date(document.getElementById("startDate").value);
var endDate = new Date(document.getElementById("endDate").value);
}
window.open('getData.php?format=xls&startDate=' + startDate.yyyymmdd() + '&endDate=' + endDate.yyyymmdd());
}
</script>
<table>
<tr>
<td>Start Date: <input type="text" id="startDate"></input></td>
<td>End Date: <input type="text" id="endDate"></input></td>
<td><input type="button" value="Reload" onclick="reloadDashboard()" ></input>
<input type="button" value="Download (.xlsx)" onclick="exportXls()" ></input>
</td>
</tr>
<tr>
<td>Type: <select id="call_type_filter" onchange="filterChange(1, 'call_type_filter')"></select></td>
<td>SIM: <select id="sim_filter" onchange="filterChange(2, 'sim_filter')"></select></td>
<td>Subscriber: <select id="end_user_filter" onchange="filterChange(4, 'end_user_filter')"></select></td>
</tr>
<tr style='vertical-align: top'>
<td colspan="3">
<div style="float: left;" id="dataTableSubset"></div>
</td>
</tr>
<tr style='vertical-align: top'>
<td colspan="3">
<div style="float: left;" id="groupLineChart"></div>
</td>
</tr>
<tr style='vertical-align: top'>
<td colspan="3">
<div style="float: left;" id="dataTable"></div>
</td>
</tr>
</table>
var data = null;
var subsetJoined = null;
var tableOptions = {'showRowNumber': true};
tableOptions['page'] = 'enable';
tableOptions['pageSize'] = 10;
tableOptions['pagingSymbols'] = {prev: 'prev', next: 'next'};
tableOptions['pagingButtonsConfiguration'] = 'auto';
function redrawDashboard(startDate, endDate)
{
data = google.visualization.arrayToDataTable(getMonsterDataArray(startDate, endDate));
drawSubsetTable(data);
buildDataTable(null, null);
//call_type_filter
//sim_filter
//end_user_filter
populateFilters(getCallTypes(), "call_type_filter");
populateFilters(getSimList(), "sim_filter");
populateFilters(getSubscriberList(), "end_user_filter");
drawLineChart();
}
function drawLineChart()
{
// subsetJoined
new google.visualization.LineChart(document.getElementById('groupLineChart')).
draw(subsetJoined, {curveType: "function",
width: 700, height: 300,
vAxis: {maxValue: 10}}
);
}
function getCallTypes()
{
var dataView1 = new google.visualization.DataView(data);
return dataView1.getDistinctValues(1);
}
function getSimList()
{
var dataView1 = new google.visualization.DataView(data);
return dataView1.getDistinctValues(2);
}
function getSubscriberList()
{
var dataView1 = new google.visualization.DataView(data);
return dataView1.getDistinctValues(4);
}
function populateFilters(filters, dropDownName)
{
// sim_filter
var dropdown = document.getElementById(dropDownName);
dropdown.options.length = 0;
var counter = 1;
var selectOption = new Option(’ ALL ', ‘-1’);
dropdown.options[0] = selectOption;
for(opt in filters)
{
var selectOption = new Option(filters[opt], filters[opt]);
dropdown.options[counter] = selectOption;
counter++;
}
}
function applyFilter(filterFieldIndex, filterValue)
{
if(filterValue == ‘-1’)
{
// we remove all filters
var dataTableVisualization = new google.visualization.Table(document.getElementById(‘dataTable’));
dataTableVisualization.draw(data, tableOptions);
drawSubsetTable(data);
drawLineChart();
}
else
{
// redraw the reports using only the selected filter
// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: filterFieldIndex, value: filterValue}]));
var dataTableVisualization = new google.visualization.Table(document.getElementById('dataTable'));
drawSubsetTable(view);
drawLineChart();
dataTableVisualization.draw(view, tableOptions);
}
}
function buildDataTable(tableData, tableContainer)
{
var output = “”;
var rowCounter = 0;
var heading = “”;
//data = new google.visualization.arrayToDataTable(getMonsterDataArray());
var dataTableVisualization = new google.visualization.Table(document.getElementById('dataTable'));
dataTableVisualization.draw(data, tableOptions);
}
function drawSubsetTable(dataTableMain)
{
// dataTableSubset
//var dataTableMain = google.visualization.arrayToDataTable(getMonsterDataArray());
var viewIPUsage = new google.visualization.DataView(dataTableMain);
viewIPUsage.setRows(viewIPUsage.getFilteredRows([{column: 3, value: "Data"}]));
// var dataTableVisualization = new google.visualization.Table(document.getElementById(‘dataTableSubset’));
// dataTableVisualization.draw(viewIPUsage, {sortColumn: 1});
var groupIPUsage = google.visualization.data.group(
viewIPUsage,
,
[{‘column’: 5, ‘aggregation’: google.visualization.data.sum, ‘type’: ‘number’, ‘label’: ‘IP Usage’}]);
var viewVoiceUsage = new google.visualization.DataView(dataTableMain);
viewVoiceUsage.setRows(viewVoiceUsage.getFilteredRows([{column: 3, value: "Voice"}]));
// var dataTableVisualization = new google.visualization.Table(document.getElementById('dataTableSubset'));
// dataTableVisualization.draw(viewIPUsage, {sortColumn: 1});
var groupVoiceUsage = google.visualization.data.group(
viewVoiceUsage,
,
[{‘column’: 5, ‘aggregation’: google.visualization.data.sum, ‘type’: ‘number’, ‘label’: ‘Voice Usage’}]);
var viewStreamingUsage = new google.visualization.DataView(dataTableMain);
viewStreamingUsage.setRows(viewStreamingUsage.getFilteredRows([{column: 3, value: "Streaming"}]));
// var dataTableVisualization = new google.visualization.Table(document.getElementById('dataTableSubset'));
// dataTableVisualization.draw(viewIPUsage, {sortColumn: 1});
var groupStreamingUsage = google.visualization.data.group(
viewStreamingUsage,
,
[{‘column’: 5, ‘aggregation’: google.visualization.data.sum, ‘type’: ‘number’, ‘label’: ‘Streaming Usage’}]);
var viewFaxUsage = new google.visualization.DataView(dataTableMain);
viewFaxUsage.setRows(viewFaxUsage.getFilteredRows([{column: 3, value: "ISDN"}]));
// var dataTableVisualization = new google.visualization.Table(document.getElementById('dataTableSubset'));
// dataTableVisualization.draw(viewIPUsage, {sortColumn: 1});
var groupFaxUsage = google.visualization.data.group(
viewFaxUsage,
,
[{‘column’: 5, ‘aggregation’: google.visualization.data.sum, ‘type’: ‘number’, ‘label’: ‘Fax/ISDN Usage’}]);
var viewOtherUsage = new google.visualization.DataView(dataTableMain);
viewOtherUsage.setRows(viewOtherUsage.getFilteredRows([{column: 3, value: "Other"}]));
// var dataTableVisualization = new google.visualization.Table(document.getElementById('dataTableSubset'));
// dataTableVisualization.draw(viewIPUsage, {sortColumn: 1});
var groupOtherUsage = google.visualization.data.group(
viewOtherUsage,
,
[{‘column’: 5, ‘aggregation’: google.visualization.data.sum, ‘type’: ‘number’, ‘label’: ‘Other Usage’}]);
var formatter = new google.visualization.NumberFormat({fractionDigits:2});
formatter.format(groupIPUsage, 1);
formatter.format(groupVoiceUsage, 1);
formatter.format(groupStreamingUsage, 1);
formatter.format(groupFaxUsage, 1);
formatter.format(groupOtherUsage, 1);
var joined_dt = google.visualization.data.join(groupIPUsage, groupVoiceUsage, 'full', [
[0,0]], [1], [1]);
var joined_dt2 = google.visualization.data.join(groupFaxUsage, groupStreamingUsage, ‘full’, [[0,0]], [1], [1]);
var joined_dt3 = google.visualization.data.join(joined_dt, joined_dt2, ‘full’, [[0,0]], [1,2], [1,2]);
subsetJoined = google.visualization.data.join(joined_dt3, groupOtherUsage, ‘full’, [[0,0]], [1,2, 3, 4], [1]);
var joinedSubTable = new google.visualization.Table(document.getElementById(‘dataTableSubset’));
joinedSubTable.draw(subsetJoined, tableOptions);
//var table = new google.visualization.Table(document.getElementById(‘dataTableSubset’));
//table.draw(grouped_dt, null);
}
function getMonsterDataArray(startDate, endDate)
{
var reportData = $.ajax({
url: “getData.php?format=groupDashboard&startDate=” + startDate + “&endDate=” + endDate,
dataType:“script”,
async: false
}).responseText;
return dataArrayDashboard;
}
[/code]
