This is not the first time I've felt the need to visualize some sort of data with the help of basic line-graphs. Last time I didn't even try doing it in javascript but went directly at pythons matplotlib which in all fairness is really nice. Another alternative has been Googles Charts, but that's relying on a third part, and even if we are talking a company as reliable as Google it still leaves me with a slightly sour taste. So enter Flot, a jQuery (yes, I know.) based plotting library that is very simple to use and produces pretty decent results.
var plot = $.plot($("#placeholder"), [d1,d2,d3]);
Where d1,d2,d3 being arrays on the form [[x,y],[x,y], ...]. For your basic plot that's about all you need to do, not much hassle at all. But what if you want to do something more advanced? Such as add legen labels, decide on showing lines, fill, points. And what about axis-enumerations? Well, it's still pretty simple, here's an example from the DoF calculator below.
var plot = $.plot($("#placeholder"), [
{ data: d1},
{ label: "In focus", data: d2, color:'green', lines : {show:true, fill:true,lineWidth: 0}},
{ label: "Focus Limit", data: d3, color:'red', lines : {show:true}},
],
{
xaxis: {
ticks: 10,
min: plotStart/1000,
max: plotEnd/1000,
},
yaxis: {
ticks: 6,
min: 0,
max: plotMaxCoc,
}
}
);
So what are we doing? Yes, xaxis and yaxis specifies the respective axis enumeration, you can specify transform functions for the enumeration if you need it in some special format (it's all in the API if you don't mind digging some). Label defines the legend, and well. I guess it really explains itself. Check out the examples the Flot page, they are a great foundation (the API is however a bit messier).
Here's what I felt the need to use it for, Depth of Field calculator. A depth of Focus Calculator. Yes, photo being one of my hobbies and for shooting street on film keeping a reasonable track of your zone-focus is a good idea. Though don't look to closely at the code, it's quite a mess. And no, it won't work in Internet Explorer because I was to lazy to add the canvas-fix (Flot comes with one of those so no problem if you need compatibility).
COMMENTS