Scrolling bar graph of incoming data

Julian's icon

I'm porting an existing OSX app to Max where I need to graph incoming data in real time into a rolling bar graph. So far I managed getting the JSON data and parsing it so that I have each value I'm interested as a separate message.

What I need is some guidance in how I could achieve the "rolling" graph. When I get a new value I need to push it into the graph and it will show up to the far right represented as a vertical line (short if the value is low and tall if the value is big). As I add more values, the old ones should move over to the left until they become offscreen.

Here's a screenshot of one of the graphs in the current app.

I'm not looking for actual code (I think I can figure that part out). What I AM looking for are ideas on what objects I could be using. I'm sure Max has some built in objects that I can use for this but being new to the platform I don't know where to look.

Any recommendations will be greatly appreciated.

Floating Point's icon

have a look at the multislider help patch

metamax's icon

Yep.. use the "setstyle" message or change the setting in the inspector.

Max Patch
Copy patch and select New From Clipboard in Max.

Julian's icon

The multislider works beautifully for now and it was extremely easy to set up. For my initial version this will do just fine.

Down the road I will need to "mark" some of the values that exceed a threshold in another color (the semi-transparent yellow lines in the original screenshot). I don't see the multislider supporting this in the Help but I've read that there are objects that will allow me to do my own custom rendering (using Jitter). I also read that I can make objects with javascript which is great as this is a language that I'm proficient in. With these two things in mind, what objects would you think I'd need to read up on first in order to achieve this?

I'm looking at the Jitter family of objects but it's huge and I don't think I've found what I need just yet. Looks that either jit.gl.render, jit.gl.graph, or jit.lcd might be good candidates. Am I in the right path?

Floating Point's icon

just put 1 multislider on top of another with the top one its alpha channels set to semi-transparent

metamax's icon

just put 1 multislider on top of another with the top one its alpha channels set to semi-transparent

This was my first thought too but transparency doesn't work the same in scrolling modes with [multislider]. It affects both the sliders and the background instead of just the background. Not sure why that is. Either I can't see the sliders or multiple overlays are difficult to read.

Julian, if UI display is important, you can use [zl stream] to update [multisliders] in bar or line mode.... and [vexpr] for peaks and troughs. Then overlay them like FP suggested.

Max Patch
Copy patch and select New From Clipboard in Max.

Julian's icon

That's a great idea. Thank you very much (the pasted patches helped a lot!).