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