HTML5 Oscilloscope

Question

I need a free real-time chart (preferably HTML5) which can plot incoming signals like an oscilloscope. I found two examples which are very close to what I want:

• http://flotcharts.org/
• http://smoothiecharts.org/

Both can display incoming data in real-time, but they scroll the data from right to left, and I try to accomplish exactly the opposite: draw new data from left to right, and when at the end of the page, overwrite the previous data in a sweep (like most oscilloscopes). If the chart can do both modes, sweeping and scrolling, that's even better. But all components I found untill now support only the lather.

Here is a video of the kind of display I'm after: http://www.youtube.com/watch?v=chZqN605Iz4

Answer 1

Tried to alter the source of SmoothieCharts to reverse the direction, but wasn't successful. However, that doesn't mean it's not possible with some more time and effort. It seems to be based on timestamps, so it's possible that you can just reverse the timestamps (starting with higher values and reversing).

Otherwise an idea would be to simply flip the HTML5 canvas as a post-processing step. That way you don't have to jump into the library as much. Just at the end of the render step add something like:

canvasContext.translate(width, 0);
canvasContext.scale(-1, 1);
this.canvasContext.drawImage(image, 0, 0);

Taken from this SO question. Hope that helps you along.

Answer 2

Any movement in the data is achieved by shifting the values through the array and refreshing the chart. The data appears to be coming from the right as its added to the end of the array. Rather than using push() to add data to your array, use unshift() and the data will be added to the start or appear to be added to the left.

Answer 3

Into SmoothieCharts set scrollBackwards=true;