chrisiboy Posted October 3, 2012 Share Posted 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"> <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> Quote Link to comment https://forums.phpfreaks.com/topic/269037-filter-not-working/ Share on other sites More sharing options...
RussellReal Posted October 3, 2012 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/269037-filter-not-working/#findComment-1382483 Share on other sites More sharing options...
chrisiboy Posted October 3, 2012 Author Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/269037-filter-not-working/#findComment-1382488 Share on other sites More sharing options...
RussellReal Posted October 3, 2012 Share Posted 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.. Quote Link to comment https://forums.phpfreaks.com/topic/269037-filter-not-working/#findComment-1382494 Share on other sites More sharing options...
chrisiboy Posted October 3, 2012 Author Share Posted 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... Quote Link to comment https://forums.phpfreaks.com/topic/269037-filter-not-working/#findComment-1382507 Share on other sites More sharing options...
RussellReal Posted October 3, 2012 Share Posted October 3, 2012 okay, well, if it works for the other two filters, then maybe you're supplying the wrong column id? Quote Link to comment https://forums.phpfreaks.com/topic/269037-filter-not-working/#findComment-1382571 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.