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
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.
<force-amchart charttype="donut" sobject="Opportunity" titlefield="Name" valuefield="Amount" limitResults="50">
<force-amchart charttype="pyramid" sobject="Opportunity" titlefield="Name" valuefield="Probability" limitResults="10"></force-amchart>
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">
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
PolyForce Amchart Components with detailed instructions on installation are available on this Github repository.
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