Javascript charting with YUI-Flot

IntroductionYUI-Flot

Enlightenment

Javascript charting with YUI-Flot

Philip Tellis / [email protected]

FOSDEM 2010 / 2010-02-07

FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot

http://fosdem.org/2010/



Enlightenment

Who, what, why?Charting on the webYUI-Flot

$ finger philip

Philip [email protected]

tech.bluesmoon.info@bluesmoonyahoogeek


http://tech.bluesmoon.info/

http://twitter.com/bluesmoon



Enlightenment


What’s this talk all about?

Charting options for web developersJavascript charting with YUI-FlotThings I learntHow you can contribute




Enlightenment


Why do we need charting on the web?

There’s so much data on the webIt’s easy for users to access your data over the webIt’s a little more portable than emailing Excel spreadsheets




Enlightenment


Alternatives for charting on the web

Static images generated on the serverFlash based dynamic charts with lots of interactivityJavascript + Canvas based charts with some interactivityProgressively enhanced CSS only chartsNon-semantic, HTML Table only charts (don’t do this)




Enlightenment


Image based charts

Many charting libraries availableWorks on all browsers (kind of)Static images can be downloaded and pasted into a reportCannot interact with the data, or easily drill-down




Enlightenment


Flash based charts

Quite pretty and flashyWorks across most GUI based browsers (with a plugin)Does not work on the iPhoneGrabs focus - still a problem on linuxFast, but JS-Flash bridge is slowCan progressively enhance a data table




Enlightenment


Javascript+Canvas based charts

Easy for any Javascript developer to hackBased on Open standardsDoes not natively work with Internet ExplorerEasy to integrate with other javascript librariesCan progressively enhance a data table




Enlightenment


CSS only charts

http://icant.co.uk/csscharts/Very simple codeData needs to be encoded twiceOnly vertical bar charts


http://icant.co.uk/csscharts/



Enlightenment


What is flot?

A pure javascript charting libraryUses the HTML Canvas tag for drawingReally smooth, and very prettyUses excanvas to work on IE




Enlightenment


Why I like it

Looks good – very important based on your targetaudienceGood event modelFast at drawing and redrawingAbility to “zoom in” to sections of the data




Enlightenment


Why I ported it to YUI

My Javascript library of choice is YUIMy project required a charting widgetFlash based charts caused me problems on linuxFlot seems to have a good community around itMost important – I already knew and was using Javascript




Enlightenment

What can it do?How to use it?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


http://bluesmoon.github.com/yui-flot/yui-examples/scatter.html



Enlightenment


Series plots

X-axis contains Date objects ortimestampsResolution is in secondsstrftime formattingyui-examples/timeseries.html


http://bluesmoon.github.com/yui-flot/yui-examples/timeseries.html



Enlightenment


Multiple series

3 series with a common X valueSchema style data structure – out of a DByui-examples/multiseries.html


http://bluesmoon.github.com/yui-flot/yui-examples/multiseries.html



Enlightenment


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



Enlightenment


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>


Enlightenment


2. Get your data from somewhere

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




Enlightenment


3. Set your chart’s parameters

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

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




Enlightenment


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




Enlightenment


Flot => YUI-Flot

Based off flot 0.5, flot is now at 0.6Added log scales for all axes (also in Flot 0.6)Allow more than two axes in each directionAdd axis labelsDrop points to make plot more readableUse tabs instead of spaces for indentation




Enlightenment


Timeseries changes

Accepts Date objects as values for a timeseriestimestamps are in seconds and not in millisecondsFull strftime based date formatterlocale support for time series




Enlightenment

FutureThings I learntHow to contribute

Move up to flot 0.6

I like the plugin model in flot 0.6The thresholds feature is greatStacked bars are usefulStepped line charts are useful




Enlightenment


More additions

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




Enlightenment


Javascript objects are passed by reference

Badfunction fixData(d) {

var i, l=d.length;

for(i=0; i<l; i++) {d[i] = fix(d[i]);

}

return d;}

Goodfunction fixData(d) {

var i, l=d.length;var d_c=[];for(i=0; i<l; i++) {

d_c[i] = fix(d[i]);}

return d_c;}




Enlightenment


There’s more to charts than drawing lines

Understanding statistics helpsDifferent visualisations for different types of datahttp://www.perceptualedge.com/articles/Whitepapers/Communicating_Numbers.pdf

Charts need to summarise data visuallyYou can plot more than two dimensions on a 2d canvaseg: Dot pitch in a scatter plot or error bars


http://www.perceptualedge.com/articles/Whitepapers/Communicating_Numbers.pdf



Enlightenment


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

}




Enlightenment


Fork the project on github

Fork the project on githubMake your own changes (BSD Licensed)Tell me about them through a pull requestThis code is available to everyone




Enlightenment


Sign the YUI CLA

YUI CLA: You’re commiting legal codeie: 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




Enlightenment


YUI-Flothttp://github.com/bluesmoon/yui-flot


http://github.com/bluesmoon/yui-flot/



Enlightenment

Thanks, Merci, Bedankt, Danke Schön

Jochen Maes & Philip PaepsOle Laursen & IOLAYahoo! Developer NetworkThe YUI team




Enlightenment

contact me

Philip [email protected]

tech.bluesmoon.info@bluesmoonyahoogeek


http://tech.bluesmoon.info/

http://twitter.com/bluesmoon


Javascript charting with YUI-Flot

Technology

Transcript of Javascript charting with YUI-Flot