Javascript charting with YUI-Flot

  • 4,731 views
Uploaded on

FOSDEM2010 talk about javascript charting. 12:00pm on 2010-02-07

FOSDEM2010 talk about javascript charting. 12:00pm on 2010-02-07

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Thanks Philip!
    Are you sure you want to
    Your message goes here
  • Very helpful - thanks.
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
4,731
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
30
Comments
2
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Introduction YUI-Flot Enlightenment Javascript charting with YUI-Flot Philip Tellis / philip@bluesmoon.info FOSDEM 2010 / 2010-02-07 FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 2. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot $ finger philip Philip Tellis philip@bluesmoon.info tech.bluesmoon.info @bluesmoon yahoo geek FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 3. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot What’s this talk all about? Charting options for web developers Javascript charting with YUI-Flot Things I learnt How you can contribute FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 4. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Why do we need charting on the web? There’s so much data on the web It’s easy for users to access your data over the web It’s a little more portable than emailing Excel spreadsheets FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 5. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Why do we need charting on the web? There’s so much data on the web It’s easy for users to access your data over the web It’s a little more portable than emailing Excel spreadsheets FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 6. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Why do we need charting on the web? There’s so much data on the web It’s easy for users to access your data over the web It’s a little more portable than emailing Excel spreadsheets FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 7. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Alternatives for charting on the web Static images generated on the server Flash based dynamic charts with lots of interactivity Javascript + Canvas based charts with some interactivity Progressively enhanced CSS only charts Non-semantic, HTML Table only charts (don’t do this) FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 8. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Image based charts Many charting libraries available Works on all browsers (kind of) Static images can be downloaded and pasted into a report Cannot interact with the data, or easily drill-down FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 9. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Flash based charts Quite pretty and flashy Works across most GUI based browsers (with a plugin) Does not work on the iPhone Grabs focus - still a problem on linux Fast, but JS-Flash bridge is slow Can progressively enhance a data table FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 10. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Javascript+Canvas based charts Easy for any Javascript developer to hack Based on Open standards Does not natively work with Internet Explorer Easy to integrate with other javascript libraries Can progressively enhance a data table FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 11. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot CSS only charts http://icant.co.uk/csscharts/ Very simple code Data needs to be encoded twice Only vertical bar charts FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 12. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot What is flot? A pure javascript charting library Uses the HTML Canvas tag for drawing Really smooth, and very pretty Uses excanvas to work on IE FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 13. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Why I like it Looks good – very important based on your target audience Good event model Fast at drawing and redrawing Ability to “zoom in” to sections of the data FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 14. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Why I ported it to YUI My Javascript library of choice is YUI My project required a charting widget Flash based charts caused me problems on linux Flot seems to have a good community around it Most important – I already knew and was using Javascript FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 15. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot Draw basic x/y scatter plots Random set of x,y points [[10, 20], [15, 13], [8, 32], [12, 7], [17, 19], [23, 8], [3, 5]] yui-examples/scatter.html FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 16. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot Series plots X-axis contains Date objects or timestamps Resolution is in seconds strftime formatting yui-examples/timeseries.html FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 17. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot Multiple series 3 series with a common X value Schema style data structure – out of a DB yui-examples/multiseries.html FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 18. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot Multiple series { x: 1, temp: 16, hg: 3, vol: 40 }, { x: 2, temp: 18, hg: 4, vol: 30 }, { x: 3, temp: 12, hg: 6, vol: 20 }, ... FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 19. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot 1. Include code into your HTML <div id="placeholder"></div> <!--[if IE]><script type="text/javascript" src="excanvas.min.js"></script><![endif]--> <script type="text/javascript" src="http://yui.yahooapis.com/combo ?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js &2.7.0/build/datasource/datasource-min.js"> </script> <script type="text/javascript" src="yui.flot.js"></script> FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 20. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot 2. Get your data from somewhere var data = [ [10, 20], [15, 5], [8, 32], [13, 97] ]; FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 21. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot 3. Set your chart’s parameters var data = [ [10, 20], [15, 5], [8, 32], [13, 97] ]; var config = { lines: {show: true}, points: {show: true} }; FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 22. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot 4. Instantiate the chart var data = [ [10, 20], [15, 5], [8, 32], [13, 97] ]; var config = { lines: {show: true}, points: {show: true} }; YAHOO.widget.Flot("placeholder", [data], config); FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 23. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot Flot => YUI-Flot Based off flot 0.5, flot is now at 0.6 Added log scales for all axes (also in Flot 0.6) Allow more than two axes in each direction Add axis labels Drop points to make plot more readable Use tabs instead of spaces for indentation FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 24. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot Timeseries changes Accepts Date objects as values for a timeseries timestamps are in seconds and not in milliseconds Full strftime based date formatter locale support for time series FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 25. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute Move up to flot 0.6 I like the plugin model in flot 0.6 The thresholds feature is great Stacked bars are useful Stepped line charts are useful FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 26. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute More additions Add error bars & candlesticks Pie charts Add a smoothing plugin (local regression) Upgrade to YUI 3 Move it into the YUI gallery FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 27. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute Javascript objects are passed by reference Bad Good function fixData(d) { function fixData(d) { var i, l=d.length; var i, l=d.length; var d_c=[]; for(i=0; i<l; i++) { for(i=0; i<l; i++) { d[i] = fix(d[i]); d_c[i] = fix(d[i]); } } return d; return d_c; } } FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 28. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute There’s more to charts than drawing lines Understanding statistics helps Different visualisations for different types of data http://www.perceptualedge.com/articles/Whitepapers/Communicating_Numbers.pdf Charts need to summarise data visually You can plot more than two dimensions on a 2d canvas eg: Dot pitch in a scatter plot or error bars FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 29. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute You can rotate HTML elements using CSS or SVG DIV.vertical { -moz-transform:rotate(270deg); /* Gecko */ -webkit-transform:rotate(270deg); /* Webkit */ writing-mode:tb-rl; /* IE */ filter:flipV flipH; /* alternate for IE */ filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 30. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute Fork the project on github Fork the project on github Make your own changes (BSD Licensed) Tell me about them through a pull request This code is available to everyone FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 31. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute Sign the YUI CLA YUI CLA: You’re commiting legal code ie: You own the code, you haven’t stolen it, etc. This code can also get into the YUI gallery Available for use through the Yahoo! CDN FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 32. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute YUI-Flot http://github.com/bluesmoon/yui-flot FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 33. Introduction YUI-Flot Enlightenment Thanks, Merci, Bedankt, Danke Schön Jochen Maes & Philip Paeps Ole Laursen & IOLA Yahoo! Developer Network The YUI team FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 34. Introduction YUI-Flot Enlightenment contact me Philip Tellis philip@bluesmoon.info tech.bluesmoon.info @bluesmoon yahoo geek FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot