You are on page 1of 25

Building Mobile Dashboard

Using D3.js & Google Charts


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

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.

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

Progressive Enhancement
IE 6!

Like Un-obstrusive Javascript, provide basic! HTML feature which is accessible across all! browser and enhance user experience using! CSS & Javascript based on Browser Grade! (JQM grades browser as A, B, C)! IE 10 !

IE 7/8

IE 9

JQuery Mobile(JQM) Why?


!

Based on Responsive 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

JQM Page

JQM Multi-Page    

Popups, Navbars, DataTheme, Panel

Charts/Visualization Google Charts


! Google Charts Based on HTML/JS/CSS/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.

Google Charts

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

Bar Chart in D3

Bar Chart in D3

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) Its 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

Demo

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

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 cant be done using standard analytics snapshots)

Resources
Source Code Github https://github.com/ramanathansj/mobile-dashboard-dreamforce-2013 Force.com Reference http://www2.developerforce.com/en/mobile/getting-started http://blogs.developerforce.com/developer-relations/2013/09/using-thesalesforce-analytics-api-on-a-visualforce-page.htm http://www.salesforce.com/us/developer/docs/pages/ http://blogs.developerforce.com/engineering/2013/08/designing-dashboardsand-reports-for-force-com-implementations-with-large-data-volumes.html https://github.com/developerforce/Force.com-JavaScript-REST-Toolkit http://www.salesforce.com/us/developer/docs/api_analytics/index.htm JQM http://api.jquerymobile.com http://view.jquerymobile.com/1.3.2/dist/demos/ RWD http://alistapart.com/article/responsive-web-design http://view.jquerymobile.com/1.3.2/dist/demos/intro/rwd.html Google Charts https://developers.google.com/chart/interactive/docs/gallery https://developers.google.com/chart/interactive/docs/reference https://code.google.com/apis/ajax/playground/?type=visualization D3.JS 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/ https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute

Dreamforce Demo JQM, Google Charts & D3.js

Demo JQM & Google Charts

Demo JQM & Google Chart

Demo JQM Flex Grid & Google Charts

D3 Demo Bar chart & Line graph

D3 Demo- Tree Chart of Salesforce Analytics API Metadata & Data