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.)
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 was also wondering why this is done with canvas rather than SVG.