Dashboards allow us to consume vast amounts of information in an easy to understand way. Join us to see how current mobile visualizations libraries (JQuery Mobile, Google Charts, and D3.js) integrate with salesforce.com using the recently released REST Analytics API. We'll also cover best practices for scaling using Snapshots and Batch Apex.

1. Building Mobile Dashboard
Using D3.js & Google Charts
Ramanathan Pachaiyappan
Sr. Software Engineer
Comity Designs Inc.
@rpachaiyappan

2. Agenda
Building Mobile Web Dashboards/Visualization app which
works in multiple devices using Web Technologies.
We use JQuery Mobile, Google Charts/D3, Force.com to build
our app.

3. Responsive Design
RWD consist of 1. CSS Media Queries, 2. Fluid Grid, 3. Flexible Image/Media
(as per JQM site)

4. Progressive Enhancement
Like Un-obstrusive Javascript, provide basic
HTML feature which is accessible across all
IE 6
browser and enhance user experience using
CSS & Javascript based on Browser Grade
(JQM grades browser as A, B, C)
IE
7/8
IE 9
IE
10

5. JQuery Mobile(JQM) - Why?
▪ Based on Response Design & Progressive Enhancement
Philosophy
▪ Touch Optimized cross platform UI Framework
▪ Provides Event Handling, Navigation, History, UI
Widgets, Theme roller
▪ Easy to get started with application design using JQM if
you used JQuery before

6. JQM Page

7. JQM Multi-Page

8. Popups,
Navbars, DataTheme, Panel

9. Charts/Visualization – Google Charts
• Google Charts – Based on HTML/JS/SVG/VML
technologies
• Easy to use and well documented. Provides out of the box
charts (data table, pie, bar, line, bubble, geo, etc).
• Self Optimizing – Scale, Input Domain, Output Range,
Width/Height
• DataTable is the base data structure for all charts, its
analogues to excel.

10. Google Charts

11. Charts/Visualization – D3.JS
• D3.JS stands for Data Driven Documents
• An interactive visualization library for building your own
Charts/Visualization or any shapes using SVG.
• There is dependency on SVG which provides seamless
experience across all browser.
• D3 steps – Load, Bind, Transform & Transition of elements in
DOM

12. Bar Chart in D3

13. Force.com Features
Visualforce Remoting – Using Javascript you can call Visualforce controller
methods and get results through call back mechanism, its simple and elegant
option
Analytics API (REST) – It’s a new feature, GA in Winter 14, using this API you
can access your tabular/summary/matrix report data and meta data to build
some cool charts/visualization and automates complex aggregation using
reports

14. Demo

15. Limits
1. Script Limit/CPU Timeout
2. Analytics API 2K rows
3. SOAP/REST API 2K Rows per request (Query more pattern)
4. Rollups per Object (10), Roll ups can't have date time filter, SOQL query
rows 50K
5. Viewstate 6MB

16. Scalability
Snapshots - See if you can solve your use case with standard
analytics snapshots which helps to pre-aggregate rows (Materialized
View like) into desired format
Batch Apex - Consider writing batch apex for large data sets with
custom snapshots which provides more flexible choices (ex:
traversing account hierarchy with 5 level depth which can’t be done
using standard analytics snapshots)

17. All about Comity Designs Inc
Salesforce CRM Product Development and Implementation
Solution Provider. http://Salesforce CRM Product
Development and Implementation Solution Provider. http:
//www.comitydesigns.com

18. Resources
Source Code Github
JQM
https://github.com/ramanathansj/mobile-dashboard-dreamforce-2013
http://api.jquerymobile.com
Force.com Reference
http://view.jquerymobile.com/1.3.2/dist/demoshttp://view.jquerymobile.com/1.
3.2/dist/demos/
http://www2.developerforce.com/en/mobile/getting-started
RWD
http://blogs.developerforce.com/developer-relations/2013/09/using-thesalesforce-analytics-api-on-a-visualforce-page.htm
http://alistapart.com/article/responsive-web-design
http://www.salesforce.com/us/developer/docs/pages/
Google Charts
http://blogs.developerforce.com/engineering/2013/08/designing-dashboardsand-reports-for-force-com-implementations-with-large-data-volumes.html
https://developers.google.com/chart/interactive/docs/gallery
https://github.com/developerforce/Force.com-JavaScript-REST-Toolkit
https://code.google.com/apis/ajax/playground/?type=visualization
http://www.salesforce.com/us/developer/docs/api_analytics/index.htm
D3.JS
http://view.jquerymobile.com/1.3.2/dist/demos/intro/rwd.html
https://developers.google.com/chart/interactive/docs/reference
http://d3js.org
https://github.com/mbostock/d3/wiki/API-Reference
http://biovisualize.github.io/d3visualization/
http://www.youtube.com/user/d3Vienno
SVG
http://www.w3schools.com/svg/

19. Ramanathan
Pachaiyappan
Comity Designs Inc, Sr.
Software Engineer
@rpachaiyappan