Hi Guys,
I am using google.vizualization functions. I got three dropdown menu’s that filter out the data :
<html>
<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>
</html>call_type_filter and end_user_filter is working fine, but sim_filter not. The dropdown is being populated with the
numbers correctly, BUT when I choose a number from the list, it does not filter out the specific one I chose
on the data table. The number would be something like “901112112478534”… Is there a bug that does not allow this sort of number. Please see my coding below. Would appreciate it if someone can help… Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<link rel="stylesheet" href="../../include/jquery-ui-1.8.21.custom/css/cupertino/jquery-ui-1.8.21.custom.css" type="text/css" media="all" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="../../include/jquery-ui-1.8.21.custom/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../include/jquery-ui-1.8.21.custom/js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="../../include/interactiveDashboard.js"></script>
<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>
</head>
<body style="font-family: Arial;border: 0 none;">
<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>
</body>
</html>
--------------------------
<script type="text/javascript">
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, [0],
[{'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, [0],
[{'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, [0],
[{'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, [0],
[{'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, [0],
[{'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;
}
</script>