building mobile dashboards with d3 and google charts
DESCRIPTION
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.TRANSCRIPT
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