Using Google Visualization charts and tables

javaScript: creating google visualization charts and tables    get it now

This relates to Data Driven Mapping applications and the javaScript 'howTo' section.

Google Visualization tables and charts

All visualizations are created from the dataViews mentioned in Using Google Visualization DataViews. 

Once these dataViews are created, displaying them is very simple. Here is an example, using ready baked dataViews,  of a chart

      // and a summary chart 
      if (this.infoElements['chart']){
           if (this.cTable) {
             this.chart = new google.visualization.ImageBarChart 
                       (this.infoElements['chart']);
             this.chart.draw(this.cTable,
                {title:mm.parent.tabs[this.tabIndex],isStacked:false});
          }
      }

and a table. 

          // and a google viz table of qualifying matching transactions
      if (this.infoElements['table']){
        if (this.vTable = this.createTable() ) {
           this.table = new google.visualization.Table(this.infoElements['table']);
           this.table.draw(this.vTable , mm.parent.cssTableOptions);
           // allow selection on this table 
           var vizTab = this.table;
           var datTab = this.vTable;
           google.visualization.events.addListener(
                    vizTab, 'select', function() {
             conTab.dealWithSelection (vizTab,datTab);
         });
        }
      }


The output  of all this is  below - items 6 and 8 are being visualized Using Google Visualization DataViews  as the source data.


Notice also that we are looking for events on the table - this is because this application will change to another map marker if the data row selected is a different SpotID than the currently shown marker.  getSelection() returns the curremtly selected row, and we can use getTableRowIndex() to find the original row of the source dataTable - (which won't correspond to the row number in the dataView since it is filtered). From this we can figure out whether the record selected belongs to the same spot as the infowindow we are currently showing.

mcpherInfoTab.prototype.dealWithSelection = function (vizTab,datTab) {  
 
 var row = vizTab.getSelection()[0].row;
 var newIndex = datTab.getTableRowIndex(row);
 // now we have the original item -  
 //we may need oc lose this infowindow and go somewhere else
 var im = this.parent;
 var vm = im.parent;
 var spot = im.spot;
 var markerIndex = this.parent.markerIndex;
 if (newIndex != markerIndex){
  // so we may need to close this one
  var newSpot =vm.items[newIndex].spot;
  if (newSpot.spotIndex != spot.spotIndex ){
   vm.statusUpdate('change spot from '+
           spot.title + ' to '+ newSpot.title,true,null); 
  }
  spot.infoWindow.close();
  newSpot.usingIndex = newIndex;
  newSpot.createInfoWindow(0);

 }
};


Tailoring table styles

In Tailoring Output you can read how to change the look and feel of the content of the info Windows.  You can also change the presentation of the visualizations through css classes

See Using css styles to tailor InfoWindows for how to permanently change these classes for your application

css classes
.mctable {
 font-family: sans-serif;
 font-size: 0.7em;
 border: 1px solid Gray;
}

.mctableheader {
 font-family: sans-serif;
 font-size: 0.6em;
 background-color: Azure;
 border: 1px solid Gray;
}

google visualization table options
     this.cssTableOptions =  { 
     alternatingRowStyle: true, 
     showRowNumber: false, 
     allowHtml: true, 
     cssClassNames: { 
     headerCell: 'mctableheader',
     tableCell:  'mctable' 
        }
    };

are used like this
this.table.draw(this.vTable , mm.parent.cssTableOptions);

Organzation charts

As well as bar charts, you can also specify organization charts, which would look like this

These are Google Vizualization Org Charts and the data rules are as per the API and are generated like this. Since I allow selection on this type of chart (meaning that you can select someone and it will jump to their home spot and data), I cannot use the same aggregrated table View visualization as is used for the imagebar chart. Aside from that I can use exactly the same event handler as is used for selecting from a normal table.


  if (ie['chart']){
   if (this.cTable) {
    var chtType =  vm.cTabs[ vm.tabs[conTab.tabIndex] ]['charttype'];
    switch (chtType) {

    case 'barchart':
     this.chart = new google.visualization.ImageBarChart(ie['chart']);
     this.chart.draw(this.cTable, 
       {title:vm.tabs[this.tabIndex],
      isStacked:false});
     break;

    case 'orgchart':
     this.oTable = this.orgTable();
     this.chart = new google.visualization.OrgChart(ie['chart']);
     this.chart.draw(this.oTable, 
       {title:vm.tabs[this.tabIndex]});
     // allow selection on this chart
     var vizTab = this.chart;
     var datTab = this.oTable;
     google.visualization.events.addListener(vizTab, 
       'select', function() { 
      conTab.dealWithSelection (vizTab,datTab);
     });
     
     break;

    case 'none':
     break;

    default:
     alert('unknown charttype ' + chtType);
    break;
    }
   }
  }

Event Handler
mcpherInfoTab.prototype.dealWithSelection = function (vizTab,datTab) {  

  var row = vizTab.getSelection()[0].row;
  var newIndex = datTab.getTableRowIndex(row);
  
  // now we have the original item -  we may need oc lose this infowindow and go somewhere else
  var im = this.parent;
  var vm = im.parent;
  var spot = im.spot;
  var markerIndex = im.markerIndex;
  
  if (newIndex != markerIndex){

   switch (vm.provider){
   case 'maps':
    spot.infoWindow.close();
    break;
   case 'earth':
    break;
   default:
    alert('dealwithinsanity');
   }
   // so we may need to close this one
   var newSpot =vm.items[newIndex].spot;
   vm.gotoAnotherSpot (spot, newSpot);
   newSpot.usingIndex = newIndex;
   newSpot.createInfoWindow(0);
  }
 };


As usual questions, feedback and comments are welcome at our forum. Now lets take a look at more javaScript snippets from this application

You want to learn Google Apps Script?
Learning Apps Script, (and transitioning from VBA) are covered comprehensively in my my book, Going Gas - from VBA to Apps script, available All formats are available now from O'Reilly,Amazon and all good bookshops. You can also read a preview on O'Reilly. 
If you prefer Video style learning I also have two courses available. also published by O'Reilly.
 Google Apps Script for Developers and Google Apps Script for Beginners.



Comments