Google Charts For Salesforce.

Hello There ! Welcome Back 🙂

Today we are gonna use Google Charts in Salesforce. Why you ask ? There are a lot of reasons :

  • Completely Free – You can use the same chart tool Google uses.
  • Rich Gallery – Choose from different variety of charts that best fits your data.
  • Customizable – Make the charts your own. Configure an extensive set of options to match your taste. You can even print PNG images of the charts. (Cool one, Right ?)
  • Compatibility – Purely based on HTML5 / SVG so no plugins needed. And also, cross-platform portability to iOS and Android.
  • Dynamic Data – Connect to your data in real time using a variety of data connection tools and protocols.
  • Controls And Dashboards – Easily connect charts and controls into an interactive dashboard.

In this demo we are gonna draw two types of charts , Bar and pie. We will be using JSforce to query for our data. If you are not familiar with JSforce, no worries it is very easy. Just take a look here and you will be good to go.

Lets Get Started !! 😀

Step 1 :

The cdn to load Google AJAX API –

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Step 2 :

For the Appropriate Data for our Charts we will be using GROUP BY query.

Create a visualforce page and copy paste the code below onto the visualforce page you created and save, and your whole code should look similar to this …
So, You can see the results in the console(As shown below)–> Right Click on your page –> Click Inspect Element –> Console   In the above Code, We queried for Accounts grouped by their Billing Country and put all the countries and their counts into two different arrays. The data for the charts should be in a tabular format and We will be using those arrays to make the table.

Step 3 :Converting the Query Result Data for Google Charts Add the following Code in your script tag and save.

So ,  google.load("visualization", "1.1", {packages:["bar", "corechart"]}); is used to load the required packages or charts, as we are going to draw only A Bar Chart and A Pie Chart we have them in the package, you can add anything you want.

Then,
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Count');

As The Charts need data in a tabular format to plot it graphically, we initialise the table and add two columns – Country and Count which are of String and Number Datatype Respectively.

Finally,
for(i = 0; i < cArr1.length; i++)
data.addRow([cArr[i], cArr1[i]]);

This code adds our query data arrays to the DataTable above initialised.

Step 4 : Lets Customize Chart Options
Add the following Code after the above code.
Step 5 : The main thing… Lets draw the chart. Lets create two divs for two charts like below.

Then, Lets Draw the Charts.. add the following code after the options code and Save !!
Important : The div ids should match the ids in the above javascript code  Your Final code looks similar to this:

And Your page Looks Like This..

Congratulations !! There it is .. You just plotted your Query onto Interactive Charts. Awesome, Right?

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!




10 thoughts on “Google Charts For Salesforce.”

  1. excellent publish, very informative. I wonder why the other
    specialists of this sector do not realize this.
    You should continue your writing. I’m sure, you have a great readers’ base already!

  2. We’re a gaggle of volunteers and starting a brand new scheme in our community.
    Your web site provided us with valuable info to work on. You’ve performed a formidable job and our whole community
    will be thankful to you.

  3. We have used different charts used and I am trying to custom order the bar chart. Using the example you used, what if you want to plot all those values in specific order, like Italy, Europe, India, Spain and etc? how to achieve that, appreciate your reply. Thanks in advance.

    1. Hello Vande,
      Hope you are doing great 😀

      Sure, No Problem.
      If it is a custom order, Instead of using the for loop to add the data in the code snippet of step 3, we will have to add each row manually.

      I hope it helps,
      Thanks 🙂

Leave a Reply

Your email address will not be published.