Javascript charting with YUI-Flot

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

Introduction Who, what, why?
YUI-Flot Charting on the web
Enlightenment YUI-Flot

$ ﬁnger philip

Philip Tellis
philip@bluesmoon.info
tech.bluesmoon.info
@bluesmoon
yahoo
geek



What’s this talk all about?

Charting options for web developers
Javascript charting with YUI-Flot
Things I learnt
How you can contribute



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



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)



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



Flash based charts

Quite pretty and ﬂashy
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



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



CSS only charts

http://icant.co.uk/csscharts/
Very simple code
Data needs to be encoded twice
Only vertical bar charts



What is ﬂot?

A pure javascript charting library
Uses the HTML Canvas tag for drawing
Really smooth, and very pretty
Uses excanvas to work on IE



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



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


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



Series plots

X-axis contains Date objects or
timestamps
Resolution is in seconds
strftime formatting
yui-examples/timeseries.html



Multiple series

3 series with a common X value
Schema style data structure – out of a DB
yui-examples/multiseries.html



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


1. Include code into your HTML

<div id="placeholder"></div>


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


2. Get your data from somewhere

var data = [ [10, 20], [15, 5], [8, 32], [13, 97] ];



3. Set your chart’s parameters

var data = [ [10, 20], [15, 5], [8, 32], [13, 97] ];

var config = { lines: {show: true}, points: {show: true} };



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);



Flot => YUI-Flot

Based off ﬂot 0.5, ﬂot 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



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


Introduction Future
YUI-Flot Things I learnt
Enlightenment How to contribute

Move up to ﬂot 0.6

I like the plugin model in ﬂot 0.6
The thresholds feature is great
Stacked bars are useful
Stepped line charts are useful


Introduction Future

More additions

Add error bars & candlesticks
Pie charts
Add a smoothing plugin (local regression)
Upgrade to YUI 3
Move it into the YUI gallery


Introduction Future

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;
} }


Introduction Future

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


Introduction Future

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);
}


Introduction Future

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


Introduction Future

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


Introduction Future

YUI-Flot
http://github.com/bluesmoon/yui-ﬂot


Introduction
YUI-Flot
Enlightenment

Thanks, Merci, Bedankt, Danke Schön

Jochen Maes & Philip Paeps
Ole Laursen & IOLA
Yahoo! Developer Network
The YUI team


Introduction
YUI-Flot
Enlightenment

contact me

Philip Tellis
philip@bluesmoon.info
tech.bluesmoon.info
@bluesmoon
yahoo
geek


Javascript charting with YUI-Flot

More Related Content

Similar to Javascript charting with YUI-Flot (20)

More from Philip Tellis (20)

Recently uploaded (20)

Javascript charting with YUI-Flot