Charts mashups on Google Maps

Enterprise users are constantly exploring to design interactive data visualization tools for custom maps. This can be charts or map based reporting, which can display the information for each of the location depicted across the Google Map. Data values are displayed as points on the map and can be coordinates (Lat-Long pairs) or addresses. 

This was not the first time Sigma Infosolutions‘ Business Intelligence team was developing a simple charting individually or even the map based reporting individually. They have done a lot of reports which involves multiple dimensions to the data charted. But definitely, the combination of these 2 and to effectively show-up the data against a dimension, and mashup on a different dimension was a new and exciting challenge to have.

The Sigma Infoslutions‘ BI team started analyzing the technical feasibility and to understand how these 2 different styles of reporting works and combine them in a manner that they work with each other and get the desired result. 

Charting is usually done by getting the data from the relevant data source, which may include firing queries on the DB or parsing a feed, etc. and then supplying them for the charting tool in the manner it understands and can process and throw-up a chart showing the same.  Usually there is a  better control over the charting UI like sizing and selecting color according to the needs. It may also include any branding artifacts into visibility alongside the chart. 

The BI team triggered this charting process and throw-out a chart (which is usually an image file, a flash object or a collection of canvas objects assimilated together to form-up a chart). Sigma Infosolutions has the right layers in the UI taking care of these effects. 

The BI team knew how Google renders its maps and plots the location on the maps along with certain required measures, using the latlang values. To be more specific “Geocodes“. Of‘ course it requires an API key which can be easily got by referring to it’s documentation. It can then have any open source or custom functions available implemented which can take in various locations and output the series of corresponding geocodes as it finds best. You can easily get a map object created through Google JS APIs and get these LatLang values supplied into it to plot the map locations. Then apply a simple JS trick to override the basic way of how Google adds the typical ballons as plotting pointers into Google maps. Instead, we call upon our action as described above to get the charts as images and show them up on each of the plot locations. 

Bingo!! What you finally see is