Post on 18-May-2015
description
IntroductionYUI-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
IntroductionYUI-Flot
Enlightenment
Who, what, why?Charting on the webYUI-Flot
$ finger philip
Philip Tellisphilip@bluesmoon.info
tech.bluesmoon.info@bluesmoonyahoogeek
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
Who, what, why?Charting on the webYUI-Flot
What’s this talk all about?
Charting options for web developersJavascript charting with YUI-FlotThings I learntHow you can contribute
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
Who, what, why?Charting on the webYUI-Flot
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
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
Who, what, why?Charting on the webYUI-Flot
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
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
Who, what, why?Charting on the webYUI-Flot
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
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
Who, what, why?Charting on the webYUI-Flot
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)
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
Who, what, why?Charting on the webYUI-Flot
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
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
Who, what, why?Charting on the webYUI-Flot
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
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
Who, what, why?Charting on the webYUI-Flot
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
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
Who, what, why?Charting on the webYUI-Flot
CSS only charts
http://icant.co.uk/csscharts/Very simple codeData needs to be encoded twiceOnly vertical bar charts
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
Who, what, why?Charting on the webYUI-Flot
What is flot?
A pure javascript charting libraryUses the HTML Canvas tag for drawingReally smooth, and very prettyUses excanvas to work on IE
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
Who, what, why?Charting on the webYUI-Flot
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
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
Who, what, why?Charting on the webYUI-Flot
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
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
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
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
What can it do?How to use it?Differences from Flot
Series plots
X-axis contains Date objects ortimestampsResolution is in secondsstrftime formattingyui-examples/timeseries.html
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
What can it do?How to use it?Differences from Flot
Multiple series
3 series with a common X valueSchema style data structure – out of a DByui-examples/multiseries.html
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
What can it do?How to use it?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
IntroductionYUI-Flot
Enlightenment
What can it do?How to use it?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
IntroductionYUI-Flot
Enlightenment
What can it do?How to use it?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
IntroductionYUI-Flot
Enlightenment
What can it do?How to use it?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
IntroductionYUI-Flot
Enlightenment
What can it do?How to use it?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
IntroductionYUI-Flot
Enlightenment
What can it do?How to use it?Differences from Flot
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
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
What can it do?How to use it?Differences from Flot
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
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
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
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
FutureThings I learntHow to contribute
More additions
Add error bars & candlesticksPie chartsAdd a smoothing plugin (local regression)Upgrade to YUI 3Move it into the YUI gallery
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
FutureThings I learntHow to contribute
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;}
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
FutureThings I learntHow to contribute
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
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
FutureThings I learntHow 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
IntroductionYUI-Flot
Enlightenment
FutureThings I learntHow to contribute
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
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
FutureThings I learntHow to contribute
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
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
FutureThings I learntHow to contribute
YUI-Flothttp://github.com/bluesmoon/yui-flot
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
Thanks, Merci, Bedankt, Danke Schön
Jochen Maes & Philip PaepsOle Laursen & IOLAYahoo! Developer NetworkThe YUI team
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
IntroductionYUI-Flot
Enlightenment
contact me
Philip Tellisphilip@bluesmoon.info
tech.bluesmoon.info@bluesmoonyahoogeek
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot