Building Mobile Dashboards With D3 and Google Charts


Published on

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 using the recently released REST Analytics API. We'll also cover best practices for scaling using Snapshots and Batch Apex.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building Mobile Dashboards With D3 and Google Charts

  1. 1. Building Mobile Dashboard Using D3.js & Google Charts Ramanathan Pachaiyappan Sr. Software Engineer Comity Designs Inc. @rpachaiyappan
  2. 2. Agenda Building Mobile Web Dashboards/Visualization app which works in multiple devices using Web Technologies. We use JQuery Mobile, Google Charts/D3, to build our app.
  3. 3. Responsive Design RWD consist of 1. CSS Media Queries, 2. Fluid Grid, 3. Flexible Image/Media (as per JQM site)
  4. 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. 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. 6. JQM Page
  7. 7. JQM Multi-Page
  8. 8. Popups, Navbars, DataTheme, Panel
  9. 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. 10. Google Charts
  11. 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. 12. Bar Chart in D3
  13. 13. 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. 14. Demo
  15. 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. 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. 17. All about Comity Designs Inc Salesforce CRM Product Development and Implementation Solution Provider. http://Salesforce CRM Product Development and Implementation Solution Provider. http: //
  18. 18. Resources Source Code Github JQM Reference 3.2/dist/demos/ RWD Google Charts D3.JS SVG
  19. 19. Ramanathan Pachaiyappan Comity Designs Inc, Sr. Software Engineer @rpachaiyappan