5 ms·

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

148 points by gbaygon 15y ago

mmisu 15y ago
Looks neat. What about browsers support ? Can you use it from IE8 ?
- gbaygon 15y ago
  It works on Chrome, FF and Opera. It doesn't seem to work on ie8/9 (maybe canvas issues).
  - mmisu 15y ago
    I think IE8 doesn't have the canvas element.
    - joelbirchler 15y ago
      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/ http://code.google.com/p/explorercanvas/
      - gbaygon 15y ago
        Just tried it, renders nicely but it doesn't animate.
novalis 15y ago
Lovely stuff sir. Thanks for sharing.
catshirt 15y 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 15y 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 15y 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 15y ago
    Cool-- please do release the webgl one, if you finish it.
  - mmaunder 15y ago
    This is awesome, thanks Joe I'll very likely use this in my next product.
TazeTSchnitzel 15y 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 15y 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/ http://bost.ocks.org/mike/path/
ndcrandall 15y 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 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 15y ago
What advantage does this have over flot?

148 points by gbaygon 15y ago

mmisu 15y ago

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

gbaygon 15y ago
It works on Chrome, FF and Opera. It doesn't seem to work on ie8/9 (maybe canvas issues).
- mmisu 15y ago
  I think IE8 doesn't have the canvas element.
  - joelbirchler 15y ago
    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/ http://code.google.com/p/explorercanvas/
    - gbaygon 15y ago
      Just tried it, renders nicely but it doesn't animate.

novalis 15y ago

Lovely stuff sir. Thanks for sharing.

catshirt 15y 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 15y 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 15y 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 15y ago
  Cool-- please do release the webgl one, if you finish it.
- mmaunder 15y ago
  This is awesome, thanks Joe I'll very likely use this in my next product.

TazeTSchnitzel 15y 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 15y 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/ http://bost.ocks.org/mike/path/

ndcrandall 15y 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 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 15y ago

What advantage does this have over flot?