Help implementing data into chart

0 for 4! But I shall continue to shout into the abyss as the bubble forum is much like my childhood–I ask a question (I’m sure it’s idiotic and beneath everyone’s level) which gets ignored, and I progress on! I say this with out a hint of cynicism as I am continuing to learn and move forward but here we are again!

I am building a real time stock chart by tick and currently…

I have the data from the websocket multiline input broken out into two text boxes one with the time stamp to use for the x-axis and one with the current price to use for the y-axis but cant get them to populate the chart.

Again any help is much appreciated

What plug-in?

What’s that?

Why not? At what point does it break? This could mean anything from the websocket isn’t receiving data to the chart isn’t refreshing

Thank you George your reply is greatly appreciated! I’ve taken screen shots to hopefully best illustrate the answers to your questions.

Here is the plug in page:

When the info from my data provider is entered, it returns (and quite impressively a steady stream, of the stocks info)

This is the multiline input from the bubble editor page that the plug in instructed to use to receive the data.

Here is the multiline input in preview when the data is received

In regards to the final question, I did not express my issue properly, I don’t think, but what I did and what I will attempt to cogently show you is, I took the data from the above multiline input and put it into two Repeating Groups. One which displays the timestamp and one which displays the current price, and ultimately be the data for the x and y axis respectively.

I labeled the screen grabs and put notes in the pictures in an attempt to clarify as best as possible.

I hope it makes sense, and you are able to help, but regardless much respect for taking the time to reply and have a look.

Addendum: (in response to your last note)

When I save the data and do a search for in the X and Y axis, I am able to get pretty close to what I need but I have the page creating a new thing every second and it’s constantly refreshing.

Here’s probably the problem. There’s actually no data in your multiline input. The ‘placeholder’ field is purely visual - if you want to use Multiline input’s value, you’re referencing the Initial content field which is where you probably want your Websocket dynamic expression to be (I’m not familiar with the plug-in but right now your input is 100% empty which is why there’s no data)

At least, if the data is coming from the multiline input ^ if your RGs directly reference the websocket and the input is purely for debugging it’ll be something else…

1 Like

Roger that and thank you sir! I will make that adjustment first thing when the market opens.

All the best

Saving a stock feed in Bubble’s database would be expensive, so only do this if you want to process the data on the backend.

In the X and Y axis you could use the websocket list of text as a main source, :filtered to get only the data messages, then do your magic with regex or whatever to expose the X or Y value list.

Do you mean the chart flickers and redraws whenever the X and Y lists get a new item? Which chart plugin are you using?
There might be a way (eg. workflow action or exposed JS function) to add values with a smooth update.

1 Like

Hi mishav, thank you so much for taking some time to give this thought, I am grateful for your insights. With that, I have a couple of follow up questions if you happen to see and can spare the extra time, if not I obviously completely understand.

In regards to the database storage, I appreciate this advice and just want to be sure I make the most economical decision both fiscally and functionally. So if I create a workflow on the backend, ie create a new thing there, this would be a feasible option? Meaning it would run smoother and not be overly costly? To your point I will not save the data by creating a thing in the front end.

I really like what you are suggesting with the x and y axis, and please excuse my redundancy, I just what to make sure I am comprehending correctly… Does this mean I can take the data directly from the websocket list, follow your instructions and it will populate the x and y axis?

And finally, exactly, the chart flickers and redraws when there is a new item (ie a new stock price, which is being received every second) The chart plugin I am using is from the ChartJS, specifically the bar, line, area, but open to use any line chart, but I will test various workflow options to try and add the values with a smooth update (not sure if it relates but I’ve seen similar questions answered in the forum by creating a state) anyway that suggestion is very helpful! As I am sure so is using an exposed JS function but I’m not certain what that entails and probably wouldn’t be able to execute, that said I will research it!

All in thank you. I know this is a pedantic reply but I know how important everyone’s time therefore wanted to take the extra time to express gratitude and also convey any follow up questions as comprehensive as possible as to have anyone willing to offer advice, spend as little time as possible deciphering the question.

All the best,


Used real time bitcoin data and this worked! Thanks again!

Along with the previous tip, this did it! Thanks! I just need to figure out the workflow/JS fix for the flickering and im set! I believe you solved something similar for another user so gonna try and work off that. Thanks again!

Hi @michael27

There are a lot of plugins based around ChartJS, can you specify the exact plugin?

I should clarify, writing to Bubble’s db every second is expensive in Work Units (WU). I listed “backend processing” as a potential reason to justify such an expense, as several people have attempted this before WU was a billing measure. I didn’t mean to suggest it for your project.

Great you got the chart and webhook data working!