I am supporting CandidateX

CandidateX is a startup that focuses on creating inclusion-focused hiring solutions, designed to increase access to job opportunities for underestimated talent. Check them out if you have a few minutes to spare. They need visibility!

Deprecated
Google has now stopped its Earth API and Maps API is a paid for API nowadays. Some capabilities have also been either removed or changed. Therefore, I had to remove all examples of VizMap applications I had created. I didn’t remove the entire topic as I thought some of the code may still be useful with some modifications. 

javaScript: creating google visualization charts and tables

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;
    }
   }
  }

Even 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