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