Download to read offline
![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/75/Charting-in-your-browser-with-html5-and-java-script-3-2048.jpg)
Uploaded byMaxime Rouiller
Charting in your browser with html5 and java script
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.
Charting in your browser with html5 and java script
- 1. Charting in yourbrowser 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 • Whatare 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’sthe uses of charts? • Easily display information • “An image is worth a 1000 words” • Understanding what’s going on
- 5. With or withoutcharts…
- 6. With or withoutcharts…
- 7. What kind oftools are available? • 100% online • JavaScript libraries (100% HTML) • SaaS-type of library • Flash-based tool
- 8. Flash-Based tools • Idon’t know and I don’t care • Why? Not mobile friendly, not tablet friendly, only IE6 friendly.
- 9. Online tool • RAWby Density Design • Other $$$ options
- 10. JavaScript libraries • Chartist •DimpleJS • NVD3 • Rickshaw • Polychart • Google Charts • …
- 11. JavaScript libraries • Allbased on D3.JS
- 12.
- 13. What is D3.js •JavaScript SVG manipulation • JavaScript CSV/TSV/etc. manipulation • All around “make data look pretty” kind of tool
- 14.
- 15.
- 17.
- 18. OK… it’s amazingbut… how hard is it? • 305 lines of JavaScript code for the simplest example
- 20.
- 22. Demo Beginning charts withDimpleJS
- 23. Demo Multiple Data sourcewith DimpleJS
- 24. Questions? • Contact meonTwitter: @MaximRouiller • Blog: http://blog.DecayingCode.com • Add me to LinkedIn • www.MaximeRouiller.com • Or speak to me at the break!