Introducing Smoothie Charts
There’s tons of great JavaScript charting libraries out there. Too many to choose from. I’ve just made it worse by adding yet another to the mix.
Before I go on, I want to balance karma a little – if you’re looking for a JavaScript charting library, just use Flot. I don’t know anything about your requirements, but I like my chances – everyone loves Flot (including me). It’s small, simple, great looking and flexible.
So why another library? Well, I had a very specific problem… I want to show real time streaming data pushed over a WebSocket. Although many of the charting libraries allow you to dynamically update data, none have really been optimized for a constant stream of data. I tried many (seriously, at least 40 libraries) and the constant updates just looked too jerky.
So Smoothie Charts was born. It’s not big, and it’s not clever. And it only works on Chrome and Safari. And it doesn’t support legends. Or pie-charts. In fact, it’s inferior in virtually every way to a library like Flot. But, it’s very good at displaying streaming data.
I use it for building web dashboards monitoring active system load (that look something like this).
Use it, hack on it, and contribute back.
Joe Walnes 
Looks interesting… However dose have some issues rendering on the iPad’s Safari browser….
“It currently only works in Chrome and Safari 5.”
Seems to work in Opera for me, too! :)
nice work! the streaming charts look great.
Looks interesting. I’ve been able to use flot for live charting although the smoothie api is more intuitive.
A video of my example is viewable here:
and the source code:
http://github.com/mcarter/hookbox/tree/master/examples/python_scope/
Perhaps you might be interested in porting my example to use smoothie?
good work. But up to now none can compete with highchart. Can you develop further up to that extent
Works for me in Opera (10.61) rather well too.
Hey Joe,
I like your charts, they´re running completely smooth and are pure JavaScript.
However there are a few features missing :)
We´re also working on a real-time charting solution, offering streaming charts for load, cpu, memory and similar stuff (check out http://cronimon.com/sm_examples.php).
Our charts are not “streaming” as smoothely as yours ;)
On the other hand side you can do a bite more stuff with it (embedding, zooming, different values etc…)
Would be glad to hear about your thoughts.
Hi Joe, good job! I like the implementation.
Is there any special reason why you have left out the timeout parameter of the setInterval() function of the SmoothieChart.prototype.streamTo method?
What I can tell, is that by leaving it out for Chrome, the interval is being called continuously, whereas in Firefox 3 the interval is only being called once which in effect leaves out the animation.
Btw, Firefox (under Windows 7) do draw the graphs correctly.
Cheers!
/Peter
Just what I needed, thanks.
I got it working in IE9 (beta) by adding to the html files and using a closure for the call to setInterval in smoothie.js instead of passing “this”.
Whoops, no markup allowed in posts.
>by adding “!DOCTYPE html” to the html files…
Currently using this for a live gold price feed – works brilliantly, thank you!