Scrolling graph values


I am still very new to Snap!. I would like to graph the values of the micro:bit that I showed you in another topic. But I want that to do in a live graph that keeps scrolling, like in the Gif below.

Does anyone have a bit of example code I could use to make this work?

Peek 2024-05-29 06-25

I built this: Snap! Build Your Own Blocks, it works ok

It can’t do more than one graph though

Thank you very much, that looks very promising.

A first test showing the x tilt of the micro:bit/calliope mini 3.
Peek 2024-05-29 08-26

It seems to always show the last moving graph and color or am I doing something wrong.

Hi Peter, great question and challenge! @borkmaster, wow, cool project!

FWIW here's my quick shot at continuously graphing incoming data: Snap! Build Your Own Blocks. Let me know if you need some explanations...

Hi Jens,

Thank you for your project.

This could be a great challenge for the community. I won't be the only one who would wants to show incoming data.

Maybe some explanation would be in order since I am not that familiar with Snap! :wink:

That was one of the problems with mine. It couldn't do more than one graph since the forever loops were included and would continuously clear the screen and redraw the line.

Oh yes, you wrote that. Ok, good to know.

Peek 2024-05-29 09-17

For a single dataset it is a great solution with just a few blocks.

I really am trying to read the code but it is to difficult for now.

The microbit or calliope mini 3 can send 7 values to Snap! so your solution would work. I will wait for your explanation. :grin:

Hi Peter,

my example uses a fixed size buffer, so it doesn't accumulate all the data it gets all the time. That's the "complicated" part of the code, I think. If you just wish to always plot a moving window of the last n values you can use this little custom block:

and you can hook it up to an event to continuously plot a stream of incoming data following this pattern:

(just remember to initialize the "a list of numbers" variable to be a list).

Here's a little trick you can use to keep the "a list of numbers" from growing, because eventually it might overflow the memory of the receiving client (that's the "complicated" buffer part of my example). Just always set the list to its last n items, and then add the latest one. That way it'll always stay the same size:



command draws a single line of values evenly distributed horizontally across the entire stage. If you want to draw several lines in different colors, you can keep a list of sublists and do something like this:

plotting several lists

(I've updated the project with these examples, so you can play with them and reuse it)

Does this help? Do you need / want more?

Thank you @jens,

I will start using the code and see if I can make it work for me.