Creating Interactive GeoCharts in Salesforce

Hello There! Welcome BackΒ πŸ™‚
Hope you are doing great πŸ˜€

In this blog we are gonna take a look plotting our Salesforce Data onto Geographical Charts(A geographical representation of our Salesforce Data) using the Google Charts’ Library.
We get our data from an Apex Controller.

Let’s get started!

Things we will be using:
1) GeoCharts(Google Charts Library)
2) Google GeoCoding API

Step 1: Gathering the resources we need.

  1. Getting a Google API Key:
    We will be using the API Key to Geocode the Region(ex. Country) get a Standard Name for the region that is to be plotted onto the map.
    This required because the GeoChart Library accepts a particular format of the Regions’ Name to plot it on to the chart as specified in Google GeoCharts’ documentation here.
    You can get the API Key here.
    1) Click “Get A Key”.
    2) Sign In with your Google Account you already havent.
    3) Create a New Project and Enable API.

Now we have all the stuff we need, lets code what we want.

Step 2: The Code.
1. Define a controller and its constructor to get the data from Salesforce which is basically the count of records per BillingCountry (Apex Code Snippet).
2. Add the Google Charts Script Source (Visualforce Code: Line 3)
3. Add a container for GeoChart (Visualforce Code: Line 5)
3. Add JavaScript code to load the GeoChart module (Visualforce Code: Line)
4. Add the code to call the “standardizeData” function on chart load that loops through our data to standardize it using Google’s GeoCoding API and puts the Country Name into one array and the number of records for the country in another array (Visualforce Code: Lines)
5. Once we are done standardising our data, we call the “drawChart” function which prepares our standardized data to be plotted onto the GeoChart and draw the chart with color options (Visualforce Code: Line)

<apex:page sidebar="false" controller="geoChartCon" readOnly="true">
<!--Google Charts Script Source-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<!--GeoChart Container-->
<div id="GeoChart" style="width: 100%;height: 500px;">
<!-- SLDS Spinner Start-->
    <div class="slds-spinner_container">
      <div role="status" class="slds-spinner slds-spinner--large slds-spinner--brand">
        <span class="slds-assistive-text">Loading</span>
        <div class="slds-spinner__dot-a"></div>
        <div class="slds-spinner__dot-b"></div>
      </div>
    </div>
<!-- SLDS Spinner End-->
</div>

<script type="text/javascript">
//Loading the GeoChart Library
google.charts.load('upcoming', {'packages':['geochart']});
var country = [];
var count = [];
//Our Data From Apex
var ChartData = {!AllData};
//Length of our Data Array
var chartDatalen = ChartData.length;
var cntr = 0;
//Calling a standardizing function with the first record from our data
google.charts.setOnLoadCallback(function(){standardizeData(cntr)});

function standardizeData(idx) {
  
    var xmlhttp = new XMLHttpRequest();
//REPLACE YOUR_API_KEY BELOW WITH YOUR GOOGLE API KEY AS GENERATED WITH THE STEPS MENTIONED ABOVE
var url = 'https://maps.googleapis.com/maps/api/geocode/json?address='+ChartData[idx].BillingCountry+'&key=YOUR_API_KEY';
    
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var myArr = JSON.parse(this.responseText);
            if(myArr.status != 'ZERO_RESULTS'){
                var countryname = myArr.results[0].address_components[0].long_name;
                if(country.indexOf(countryname) != -1){
                    count[country.indexOf(countryname)] += ChartData[idx].expr0;
                }else{
                    country.push(countryname);
                    count.push(ChartData[idx].expr0);
                }
            }
            if(idx < chartDatalen-1){
                standardizeData(idx+1);
            }else{
//Calling the drawChart function to prepare data and draw the chart
                drawChart();
            }
        }
    };
    xmlhttp.open('GET', url, true);
    xmlhttp.send();
}

 
  
function drawChart(){
//Initializing a Google DataTable(required format to plot data onto chart)
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Country');
    data.addColumn('number', 'Count');

//Adding our Standardized Data to Google DataTable
    for(i = 0; i < count.length; i++)
        data.addRow([country[i], count[i]]);
    
//Color options for the Chart, white and blue to blend into the standard salesforce colors
    var options = {
      colorAxis: {colors: ['#76c6ee', '#1589ee', '#0070d2']},
      backgroundColor: '#ffffff',
      datalessRegionColor: '#ffffff',
      defaultColor: '#0070d2'
    };
    
//Getting the GeoChart Div Container
    var chart = new google.visualization.GeoChart(document.getElementById('GeoChart'));

//Drawing the GeoChart with Data and Options
    chart.draw(data, options);
}
</script>
</apex:page>
public with sharing class geoChartCon {

public string AllData{get; set;}

    public geoChartCon(){
        AllData = JSON.serialize([SELECT BillingCountry, COUNT(Name) FROM Account GROUP BY BillingCountry ORDER BY BillingCountry]);    
    }

}

And it will look like this:

There it is! We just created an interactive GeoChart to visualize our salesforce data.
Awesome, Right?

I have also created a demo page so that you can play around with it yourself:Β http://minerva18-developer-edition.ap2.force.com/Demos/GeoChart

You can also checkout my other post about Using Google Charts in Salesforce here.

For more chart customizations checkout the awesome Google GeoCharts’ library here.

Please feel free to give your suggestions or feedback in the comments section below or via email(minerva18dotcom@gmail.com).
If you like the content, give it some sharing πŸ™‚

Happy Coding πŸ˜€
For more Salesforce Content, Please Like & Subscribe to My Facebook Page and Youtube Channel with the links below.
Thank you, See you in the next one & Peace πŸ˜€


Stay update with our latest posts by subscribing to our newsletter. It is free!




2 thoughts on “Creating Interactive GeoCharts in Salesforce”

  1. Hi Raghavendra,
    Nice post. There are few improvments/changes that I had to do to make them work and thought would let you know.
    The geochart was not functioning consistently and one workaround after googling a bit was to include

    I think that was happening because the google chart was taking time to load initially, there might also be a better way to do it like checking if the api has loaded and then load the chart.
    Also if the accounts exceed 50k then we can get an soql error, to get around this we will have to include readOnly=”true” in the apex page.

    Great post as always πŸ™‚

    Regards,
    Sandeep

    1. Hello Mr.Sandeep,
      Hope you are doing great πŸ˜€

      Sounds great, thank you so much for your inputs! I really appreciate it! πŸ™‚
      The chart basically takes time to load because the script has to geocode every country and prepare the chart data.
      I have updated the code too!

      I hope it helped,
      Thanks πŸ™‚

Leave a Reply

Your email address will not be published.