Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Filter Not working

    Hi Guys,

    I am using google.vizualization functions. I got three dropdown menu's that filter out the data :

    Code:
    <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!

    Code:
    <!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>

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Form control values are always strings; perhaps the filtering needs to occur against the number-value:

    Code:
    if (!isNaN(filterValue)) filterValue = filterValue * 1;    // convert to number
    view.setRows(view.getFilteredRows([{column: filterFieldIndex, value: filterValue}]));
    Your value: "901112112478534"
    Max Integer (ECMAScript) 9007199254740992

    You could alert(Number.MAX_VALUE), but your value is small enough to be converted to a number.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    chrisiboy (10-06-2012)

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    If you were to put that in my coding, where exactly, at which function would you use the coding that you gave me?

    Thanks!

  • #4
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ignore what I asked, I see what you did :-)

    Thanks!

  • #5
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi there, makes perfect sense.. One question, where do you get "isNaN"?

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by chrisiboy View Post
    Hi there, makes perfect sense.. One question, where do you get "isNaN"?
    It's a function
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •