Building Mobile Dashboards With D3 and Google Charts
Upcoming SlideShare
Loading in...5
×
 

Building Mobile Dashboards With D3 and Google Charts

on

  • 1,663 views

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 ...

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.

Statistics

Views

Total Views
1,663
Views on SlideShare
1,663
Embed Views
0

Actions

Likes
0
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Building Mobile Dashboards With D3 and Google Charts Building Mobile Dashboards With D3 and Google Charts Presentation Transcript

  • Building Mobile Dashboard Using D3.js & Google Charts Ramanathan Pachaiyappan Sr. Software Engineer Comity 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 Design RWD consist of 1. CSS Media Queries, 2. Fluid Grid, 3. Flexible Image/Media (as per JQM site)
  • 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
  • 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, DataTheme, 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 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
  • 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 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
  • Resources Source Code Github JQM https://github.com/ramanathansj/mobile-dashboard-dreamforce-2013 http://api.jquerymobile.com Force.com Reference http://view.jquerymobile.com/1.3.2/dist/demoshttp://view.jquerymobile.com/1. 3.2/dist/demos/ http://www2.developerforce.com/en/mobile/getting-started RWD http://blogs.developerforce.com/developer-relations/2013/09/using-thesalesforce-analytics-api-on-a-visualforce-page.htm http://alistapart.com/article/responsive-web-design http://www.salesforce.com/us/developer/docs/pages/ Google Charts http://blogs.developerforce.com/engineering/2013/08/designing-dashboardsand-reports-for-force-com-implementations-with-large-data-volumes.html https://developers.google.com/chart/interactive/docs/gallery https://github.com/developerforce/Force.com-JavaScript-REST-Toolkit https://code.google.com/apis/ajax/playground/?type=visualization http://www.salesforce.com/us/developer/docs/api_analytics/index.htm D3.JS http://view.jquerymobile.com/1.3.2/dist/demos/intro/rwd.html https://developers.google.com/chart/interactive/docs/reference 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/
  • Ramanathan Pachaiyappan Comity Designs Inc, Sr. Software Engineer @rpachaiyappan