Building Mobile DashboardUsing D3.js & Google Charts

Ramanathan PachaiyappanSr. Software EngineerComity Designs Inc. @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 DesignRWD consist of 1. CSS Media Queries, 2. Fluid Grid, 3. Flexible Image/Media (as per JQM site)

Progressive EnhancementLike Un-obstrusive Javascript, provide basicHTML feature which is accessible across allbrowser and enhance user experience usingCSS & Javascript based on Browser Grade(JQM grades browser as A, B, C)

IE 6

IE 7/8

IE 9 IE 10

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

JQM Page

JQM Multi-Page

Popups, Navbars, Data-Theme, Panel

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.

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

Force.com FeaturesVisualforce 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

Demo

Limits1. Script Limit/CPU Timeout2. Analytics API 2K rows3. 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 50K5. Viewstate 6MB

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

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

ResourcesSource Code Githubhttps://github.com/ramanathansj/mobile-dashboard-dreamforce-2013

Force.com Referencehttp://www2.developerforce.com/en/mobile/getting-startedhttp://blogs.developerforce.com/developer-relations/2013/09/using-the-salesforce-analytics-api-on-a-visualforce-page.htmhttp://www.salesforce.com/us/developer/docs/pages/http://blogs.developerforce.com/engineering/2013/08/designing-dashboards-and-reports-for-force-com-implementations-with-large-data-volumes.htmlhttps://github.com/developerforce/Force.com-JavaScript-REST-Toolkithttp://www.salesforce.com/us/developer/docs/api_analytics/index.htm

JQM http://api.jquerymobile.comhttp://view.jquerymobile.com/1.3.2/dist/demoshttp://view.jquerymobile.com/1.3.2/dist/demos/RWD http://alistapart.com/article/responsive-web-designhttp://view.jquerymobile.com/1.3.2/dist/demos/intro/rwd.htmlGoogle Chartshttps://developers.google.com/chart/interactive/docs/galleryhttps://developers.google.com/chart/interactive/docs/referencehttps://code.google.com/apis/ajax/playground/?type=visualizationD3.JShttp://d3js.orghttps://github.com/mbostock/d3/wiki/API-Referencehttp://biovisualize.github.io/d3visualization/http://www.youtube.com/user/d3ViennoSVGhttp://www.w3schools.com/svg/

Ramanathan Pachaiyappan

Comity Designs Inc, Sr. Software Engineer@rpachaiyappan