Charting in your browser with html5 and java script
Download as PPTX, PDF0 likes235 views
This document outlines a plan to discuss charting in the browser using HTML5 and JavaScript. It will cover use cases for charts, available tools including JavaScript libraries like D3.js and Dimple.js, and why charts should be done in JavaScript rather than other technologies. An example of a polar clock chart built with D3.js is shown, and the document concludes with a demonstration of creating basic and multiple data source charts with Dimple.js.
![The Plan
• What are the use cases for charts?
• What tools are available today?
• Why do charts in JavaScript rather than [OTHERTECH]?
• What is d3.js?
• Exploring Dimple.js](https://image.slidesharecdn.com/chartinginyourbrowserwithhtml5andjavascript-141217081723-conversion-gate02/85/Charting-in-your-browser-with-html5-and-java-script-3-320.jpg)
Charting in your browser with html5 and java script
- 1. Charting in your browser with HTML5 and JavaScript
- 2. Who I am • Maxime Rouiller • ASP.NET/IIS MVP • 10 years of experience doing web development • Freelancer • Twitter: @MaximRouiller • Blog: http://blog.decayingcode.com
- 3. The Plan • What are the use cases for charts? • What tools are available today? • Why do charts in JavaScript rather than [OTHERTECH]? • What is d3.js? • Exploring Dimple.js
- 4. Back to basics:What’s the uses of charts? • Easily display information • “An image is worth a 1000 words” • Understanding what’s going on
- 5. With or without charts…
- 6. With or without charts…
- 7. What kind of tools are available? • 100% online • JavaScript libraries (100% HTML) • SaaS-type of library • Flash-based tool
- 8. Flash-Based tools • I don’t know and I don’t care • Why? Not mobile friendly, not tablet friendly, only IE6 friendly.
- 9. Online tool • RAW by Density Design • Other $$$ options
- 10. JavaScript libraries • Chartist • DimpleJS • NVD3 • Rickshaw • Polychart • Google Charts • …
- 11. JavaScript libraries • All based on D3.JS
- 12. What is D3.js
- 13. What is D3.js • JavaScript SVG manipulation • JavaScript CSV/TSV/etc. manipulation • All around “make data look pretty” kind of tool
- 14. Example of D3.js
- 15. Polar Clock
- 18. OK… it’s amazing but… how hard is it? • 305 lines of JavaScript code for the simplest example
- 20. RELAX!
- 22. Demo Beginning charts with DimpleJS
- 23. Demo Multiple Data source with DimpleJS
- 24. Questions? • Contact me onTwitter: @MaximRouiller • Blog: http://blog.DecayingCode.com • Add me to LinkedIn • www.MaximeRouiller.com • Or speak to me at the break!