Tap Count Dashboard

by Brian Duffey

HTML

<script src="http://www.google.com/jsapi"></script>
<link rel="stylesheet" href="http://www.mrcwebapps.com:8011/mrcjava/mrcclasses/mrcmain.css">
<link rel="stylesheet" href="http://www.mrcwebapps.com:8011/mrcjava/mrcclasses/TNATION/jquery.custom.css">
<link rel="stylesheet" href="http://www.mrcwebapps.com:8011/mrcjava/mrcclasses/TNATION/mrc_servlet_stylesheet.css">
<link rel="stylesheet" href="http://www.mrcwebapps.com:8011/mrcjava/mrcclasses/mrc_servlet_ajax.css">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<table border="0" dashboardtype="dash" id="mrcMainDashboard" includemainapp="yes" mrccolumns="2" mrcrows="2" mrcsortable="yes">
            <tbody>
                <tr>
                    <td class="dashboardguide" mrcmaincell="mrcmaincell">
                        <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
                        <div class="portlet-header ui-widget-header ui-corner-all" mrcattribute="mrc_container_part">Ten Only Count</div>
                        <div class="portlet-content" id="tenTableDash">
                        <div id="tenTableControl">&nbsp;</div>
                        <div id="tenTable">&nbsp;</div>
                        </div>
                        </div>
                    </td>
                    <td class="dashboardguide">
                        <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
                        <div class="portlet-header ui-widget-header ui-corner-all">Ten and Twenty Count</div>
                        <div class="portlet-content" id="twentyTableDash">
                        <div id="twentyTableControl">&nbsp;</div>
                        <div id="twentyTable">&nbsp;</div>
                        </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="dashboardguide">
                        <div...

CSS

#tenGraph, #twentyGraph { height:300px; }
#tenGraphControl, #twentyGraphControl { height:50px; }

JavaScript

google.load('visualization', '1', {packages: ['table']});
google.load('visualization', '1.1', {packages: ['corechart', 'controls']});
  function drawVisualization() {
    // Create and populate the data table.
    
var data = new google.visualization.DataTable({
  cols: [
    {id: 'when', label: 'Date of Tap', type: 'datetime'},
    {id: 'tenCount', label: 'Ten Second Count', type: 'number'},
    {id: 'twentyCount', label: 'Twenty Second Count', type: 'number'},
    {id: 'note', label: 'Note', type: 'string'}
  ],
  rows: [
  {c:[{v:new Date('March 29, 2013 09:52:54')}, {v:32}, {v:0}, {v:'Testing'}]},
  {c:[{v:new Date('March 29, 2013 10:02:04')}, {v:10}, {v:0}, {v:'Testing'}]},
  {c:[{v:new Date('March 29, 2013 10:02:40')}, {v:10}, {v:19}, {v:'Testing'}]}
  ]
});



    // Create a view that shows ten counts
    var tenView = new google.visualization.DataView(data);
    tenView.setRows(tenView.getFilteredRows([{column:2, maxValue:0}]));
    tenView.setColumns([0, 1, 3]);
    var tenTable = new google.visualization.Table(document.getElementById('tenTable'));
    tenTable.draw(tenView, {allowHtml:true});
    // Create a view that shows twenty counts
    var twentyView = new google.visualization.DataView(data);
    twentyView.setRows(twentyView.getFilteredRows([{column:2, minValue:1}]));
    var twentyTable = new google.visualization.Table(document.getElementById('twentyTable'));
    twentyTable.draw(twentyView, {allowHtml:true});
    var tenGraphView = new google.visualization.DataView(tenView);
    tenGraphView.setColumns([0, 1]);
    // Dashboards
    var dashboard = new google.visualization.Dashboard(document.getElementById('mrcMainDashboard'));
    var tenControl = new google.visualization.ControlWrapper({
      'controlType':'ChartRangeFilter',
      'containerId':'tenGraphControl',
      'options':{
        // Filter by the date axis.
        'filterColumnIndex':0,
        'ui':{
          'chartType':'LineChart',
          'chartOptions':{
           ...