Smoothie Charts: a small javascript charting library for live streaming data

http://smoothiecharts.org/

by gbaygon • 14 years ago

148 15 14 years ago

smoothiecharts.org

mmisu2• 14 years ago

Looks neat. What about browsers support ? Can you use it from IE8 ?

gbaygon2• 14 years ago

It works on Chrome, FF and Opera. It doesn't seem to work on ie8/9 (maybe canvas issues).

mmisu2• 14 years ago

I think IE8 doesn't have the canvas element.

novalis• 14 years ago

Lovely stuff sir. Thanks for sharing.

catshirt• 14 years ago

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!

benohear• 14 years ago

Nice, but beware that this kind of thing can be quite resource intensive (the triple chart demo takes over 60% of CPU on Chrome running on a netbook).

I was also wondering why this is done with canvas rather than SVG.

joewalnes• 14 years ago

(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.

pfraze• 14 years ago

Cool-- please do release the webgl one, if you finish it.

mmaunder• 14 years ago

This is awesome, thanks Joe I'll very likely use this in my next product.

TazeTSchnitzel• 14 years ago

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.

mbostock• 14 years ago

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/

ndcrandall• 14 years ago

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?

phob• 14 years ago

What advantage does this have over flot?

Smoothie Charts: a small javascript charting library for live streaming data

Related Stories