Filter Not Working

chrisiboy · October 3, 2012

Hi Guys,

I have 3 dropdown lists here, currently only two of them are working and the third one not. The "call_type_filter and end_user_filter" is working fine, but the "sim_filter" is not working. The sim filter would be numbers such as

901112114154283. Would I need to change any settings for long numbers such as this one? Please see my coding below. Please find my javascript and classes attached.

Needed to include my class where the function is being called :

/*

* To change this template, choose Tools | Templates

* and open the template in the editor.

*/

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;

}

<?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();

?>

<!--

You are free to copy and use this sample in accordance with the terms of the

Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)

-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>

Google Visualization API Sample

</title>

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>

<table>

<tr>

<td>Start Date: <input type="text" id="startDate"></input></td>

</td>

</tr>

<tr>

<td>Subscriber: <select id="end_user_filter" onchange="filterChange(4, 'end_user_filter')"></select></td>

</tr>

</td>

</tr>

</td>

</tr>

</td>

</tr>

</table>

</body>

</html>

RussellReal · October 3, 2012

Please enclose your javascript in a code tag and your php code in a php tag, I would love to help you but I find this post a little hard to read -- sorry .

- Russell

chrisiboy · October 3, 2012

Hi there! All of the coding is javascript

/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
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;
}

<?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();

?>
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.or...ICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR...l1-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.co...sapi"></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>

RussellReal · October 3, 2012

Have you checked to see if getSimList() pulls the proper data? Hop on google chrome and do a console.log() on the variable in there before you process it or return it..

chrisiboy · October 3, 2012

Well that's not the real issue, the dropdown is being populated with the numbers, it's when you se3lect a number on the list, nothing happens...

RussellReal · October 3, 2012

okay, well, if it works for the other two filters, then maybe you're supplying the wrong column id?

Sign In

Filter Not Working

Recommended Posts

chrisiboy

Link to comment

Share on other sites

RussellReal

Link to comment

Share on other sites

chrisiboy

Link to comment

Share on other sites

RussellReal

Link to comment

Share on other sites

chrisiboy

Link to comment

Share on other sites

RussellReal

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information