Google Charts For Salesforce Visualforce

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.

Let's 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 and 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: Let's Customize Chart Options

Step 5: The main thing... Let's draw the chart.

Let's create two divs for two charts like below

Then, Let's 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 :)