Table Chart Example

An example of a Google Table Chart.

by fkhairzad

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['table','controls']}]}"></script>

    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="categoryPicker_div"></div>
        <div id="table_div"></div>
    </div>

JavaScript

var jsonData = {"cols":[{"id":"a","label":"TIME","type":"date"},{"id":"b","label":"LDAP","type":"string"},{"id":"c","label":"CASE ID","type":"string"},{"id":"d","label":"PACKAGE NAME","type":"string"},{"id":"e","label":"UID","type":"string"},{"id":"f","label":"CR TITLE","type":"string"}],"rows":[{"c":[{"v":"new Date(2015,1,05)","f":"02-05-2015"},{"v":"fkhairzad"},{"v":"testing"},{"v":"com.HBO"},{"v":"FN-00"},{"v":"[App-Specific] test"}]},{"c":[{"v":"new Date(2015,1,05)","f":"02-05-2015"},{"v":"fkhairzad"},{"v":"testing"},{"v":"com.HBO"},{"v":"FN-00"},{"v":"[App-Specific] 123"}]},{"c":[{"v":"new Date(2015,1,05)","f":"02-05-2015"},{"v":"fkhairzad"},{"v":"testing"},{"v":"com.HBO"},{"v":"BG-01"},{"v":"[Bug] 123"}]},{"c":[{"v":"new Date(2015,1,05)","f":"02-05-2015"},{"v":"fkhairzad"},{"v":"testing"},{"v":"com.HBO"},{"v":"CP-04"},{"v":"Casino games - Age Gate"}]},{"c":[{"v":"new Date(2015,1,05)","f":"02-05-2015"},{"v":"fkhairzad"},{"v":"testing"},{"v":"com.HBO"},{"v":"FN-23"},{"v":"TV - Background Media Playback"}]},{"c":[{"v":"new Date(2015,1,05)","f":"02-05-2015"},{"v":"fkhairzad"},{"v":"testing"},{"v":"com.HBO"},{"v":"GP-00"},{"v":"[App-Specific] Test"}]},{"c":[{"v":"new Date(2015,1,05)","f":"02-05-2015"},{"v":"fkhairzad"},{"v":"testing"},{"v":"com.HBO"},{"v":"GP-00"},{"v":"[App-Specific] test"}]},{"c":[{"v":"new Date(2015,1,05)","f":"02-05-2015"},{"v":"fkhairzad"},{"v":"testing"},{"v":"com.HBO"},{"v":"BG-01"},{"v":"[Bug] test2"}]}]};

/*            
      google.setOnLoadCallback(drawTable);

function drawTable() {
          
          var data = new google.visualization.DataTable(jsonData);
    
         var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

    
    //CategoryFilter
    
    //dashboard.draw(data);

 //       var table = new google.visualization.Table(document.getElementById('table_div'));

    var table = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'table_div',
...