Smoothie Charts: a small javascript charting library for live streaming data(smoothiecharts.org)
smoothiecharts.org
Smoothie Charts: a small javascript charting library for live streaming data
http://smoothiecharts.org/
8 comments
(I'm the author)
An initial version of SmoothieCharts used SVG, but I switched to Canvas because I got slightly better performance (which actually surprised me).
That's not strictly true - for very large charts, the SVG ones performed better, but I optimized for the common case.
Recently I've been experimenting with a WebGL version - it gives MUCH better performance than both Canvas (2D) and SVG, but only works on the most recent browsers.
An initial version of SmoothieCharts used SVG, but I switched to Canvas because I got slightly better performance (which actually surprised me).
That's not strictly true - for very large charts, the SVG ones performed better, but I optimized for the common case.
Recently I've been experimenting with a WebGL version - it gives MUCH better performance than both Canvas (2D) and SVG, but only works on the most recent browsers.
Nice; animated transitions are great for maintaining continuity when data is changing. Handling changes in the y-scale can be another source of distraction, so it's nice if you're able to fix the domain (as [0,1] in your example).
In January, I wrote a tutorial on how to implement this sort of real-time graph in D3.js, using transform transitions. (Don't get distracted by the top example; it's intentionally wonky.)
http://bost.ocks.org/mike/path/
In January, I wrote a tutorial on how to implement this sort of real-time graph in D3.js, using transform transitions. (Don't get distracted by the top example; it's intentionally wonky.)
http://bost.ocks.org/mike/path/
I was pleasantly surprised this worked fine on my 3DS. No "script execution taking too long", no "page content too large".
It's nice that not everything requires jQuery these days.
It's nice that not everything requires jQuery these days.
This library is very interesting. I have been working on an MVP for my startup that pushes and receives live data over a websockets. So far we have been unimpressed with most of the current libraries out there. The important thing is responsiveness, especially on mobile browsers.
I am currently using http://rgraph.net and redrawing the graph every so often to get the live feel. I would like to know how your graph performs compared to rgraph?
I am currently using http://rgraph.net and redrawing the graph every so often to get the live feel. I would like to know how your graph performs compared to rgraph?
i replied in an earlier thread about smooth.js, an interpolation library, about how it was something i was looking for a week ago.
really, that was only a small part of the problem. what i was actually looking for, was a small charting library for live streaming data. thanks!
really, that was only a small part of the problem. what i was actually looking for, was a small charting library for live streaming data. thanks!
Looks neat. What about browsers support ? Can you use it from IE8 ?
It works on Chrome, FF and Opera. It doesn't seem to work on ie8/9 (maybe canvas issues).
I think IE8 doesn't have the canvas element.
Explorercanvas will help you out here. I am not sure if it can keep up, but it performs very well. http://code.google.com/p/explorercanvas/
Just tried it, renders nicely but it doesn't animate.
Lovely stuff sir. Thanks for sharing.
What advantage does this have over flot?
I was also wondering why this is done with canvas rather than SVG.