Building Chart Components with Google Polymer and Force.com

Learn how to use Google Polymer with Salesforce to built robust, scalable, modular and re-usable components that works smoothly with Force.com

Using Google Polymer and Force.com to Draw Charts

Charts are a great way to visually present and explore data. Luckily, there are a number of free and commercial JavaScript chart frameworks available. D3.js (Data-Driven Documents) has emerged as a standard of data visualization, offering developers full control, but at the same time, complexity in design. Another strong option is AMcharts that are powerful, mobile ready components and visually appealing.

Note: AMChart is a commercial product but has a “free for non-commercial use” option. This is by no means an endorsement of the product.

We have been experimenting on developing Google Polymer Components that works smoothly with force.com platform and use charts to display data on visualforce. The idea is to develop robust, scalable reusable components which are easy to embed on visualforce pages. 

Why Google Polymer Web Components ?
For analytics we repeatedly need charts,  clearly building a reusable component that support multiple chart type is a smart choice, and this have reduced efforts of development and maintenance to a significant level . Polymer framework from google offer latest standard of web components and usher faster way of creating web-button to complete application web. We decided to use Google Polymer with Salesforce to create reusable-components

Note: Google Polymer is open source project by Google and this by no means an endorsement of product.

Getting Started with Google Polymer

Addy Osmani and Eric Bidelman, developers advocate at Google have written set of tutorials and examples for building your first Polymer components and their official docs will light your path. I created a simple tutorial of my own here, which will show you how to develop a Polymer video component that supports embedding video on multiple platforms. You can explore many more examples of components at the following sharing platforms: Component.Kitchen and CustomElement.io. For a comprehensive overview, take a look at this presentation  written by Eric Bidelman explaining the architecture and capabilities of Polymer.

 

In order to illustrate how Polymer and Salesforce can work together, I built a custom component that queries Salesforce data and generates charts using the AMCharts library. The key reason to use Polymer is make code modular, usable and simple to implement. For  example, with only one line of code on a Visualforce page, you can generate a pie chart based on live data in Salesforce as shown here.

Donut Chart

<force-amchart charttype="donut" sobject="Opportunity" titlefield="Name" valuefield="Amount" limitResults="50">
<force-amchart>

Pyramid Chart

<force-amchart charttype="pyramid" sobject="Opportunity" titlefield="Name" valuefield="Probability" limitResults="10"></force-amchart>

Charting Libraries

There are many libraries available, Christophe Coenretes (Developer Evangelist at Salesforce) has written posts about charting libraries here and here covering wide variety of charting libraries ranging from free (Flot, Flotr2, jqPlot, etc.) and commercial (amCharts, Highcharts, FusionCharts, ChartJS, etc.), including mobile supported charts.

Accessing Data Through Salesforce

Salesforce provides multiple API’s to access data with the  Salesforce REST API and Analytics API providing access to analytics data. For Polymer components, I reused data components named ‘force-sobject-collection’ built by the Salesforce Mobile SDK team that uses ForceTK library to query Salesforce on the backend.  This component supports multiple attributes that let us filters and handle events smartly. 

<force-sobject-collection sobject="Account" querytype="SOQL" query="Select Id, Name from Account limit 100">

Implementation

To implement polymer on any visualforce page, follow the instructions on PolyForce Github library and feel free to fork repo and implement the charts with your favorite type to implement a dashboard. Using the code, you are free to implement chart with your favorite library, or submit a pull request to improve the implementations. It would be great to see additional implementations

Source Code
PolyForce Amchart Components with detailed instructions on installation are available on this Github repository.

Summary
We started with AMCharts because of mobile first approach and higher level of API offering that makes it easier to implement charts. D3.js on the other hand have broader scope and but have steeper learning curve. D3 has faster growing community and have myriad examples listed here to learn from. You can use this chart components with salesforce on supported browsers as mentioned by google

Leave your comments...

Building Chart Components with Google Polymer and Force.com