Building Mobile Dashboards With D3 and Google Charts
-
Upload
salesforce-developers -
Category
Technology
-
view
107 -
download
1
description
Transcript of Building Mobile Dashboards With D3 and Google Charts
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