Realtime Chart

[Tenobaal]

Hello there,

 

this will be my first post and I want to excuse all of my beginners questions. I will work on it.

 

At the moment I want to create a real-time chart and there a several questions about a good “way” to realize that.

 

1) My first try is really simple: Draw a line between the Points with the “graphics.lineTo” function. Then shift the graphics object position to the left. The Problem is, that the graphicsData will grow until there is no shift of the array of the data. If I use a CanvasRenderer I can shift the graphicsData but it do not work in the WebGlRenderer.

Are there any method to shift the Data?

 

http://jsfiddle.net/Tenobaal/7m6u9q2n/

 

2) The second try is to redraw the lines. So I put everything in an array and draw the lines in a for-loop after I clear() the graphics object. But this method is really bad for the performance.

 

http://jsfiddle.net/Tenobaal/wvtmg3ze/

 

3) The third try is to use the polygon object. But later I want to use the bezier-function, so the polygon object might be not the best option. There is another problem with the triangulate of the lines if you have a fast switching graph. So not really a good choice at the moment.

I will post later Version in jsfiddle.

 

4) The last try is to generate a texture from the graphics object and paste it in as sprite. So I clear the graphics object and begin to draw at the origin. The sprite will shift to the left, too. The texture looks different because of the anti-aliasing? Another problem is, that I need two graphics objects, because if I shift the position of graphics object the generate Texture will lose the data of the "shift". So the performance is not so good because of the two objects and the view is not the best. I will post later Version in jsfiddle, too.

 

Maybe you can help me out with an idea, how I can realize a good looking and nice performing real-time chart. I would be happy to learn. Sorry for my english, it is not my first language.

 

Many thanks tenobaal

[msha]

I'd suggest to have 2 graphics objects: you start by drawing on graphics#1, simultaneously moving it to left; after it occupies the whole screen, switch to drawing on graphics#2, moving both graphics to left. After #2 occupies the whole screen, you clear #1, put it to the right of #2 and switch to drawing on it, and so on.

[Tenobaal]

First thank you msha for your answer.

Here are the result with 2 graphics object and 40 charts width random data:

 

http://jsfiddle.net/Tenobaal/gbxoLo5z/

 

It works better than any other solution from me. Than I tried to draw the charts width Bezier curves, but than there is again a problem with the performance. In my case, I do not really need Bezier curves because of the "data speed". Here is a version width 6 charts:

 

http://jsfiddle.net/Tenobaal/agcae3kz/

 

So I tried to draw lines as a texture and manipulate them. Until now, this is the best performance I think. But there is no option to draw Bezier curves. Here is a version width 40 charts:

 

http://jsfiddle.net/Tenobaal/24v8sod7/

 

Is there any chance to get a better performance than that or is this the "end"?

 

Thank you for you help!