Chart component on Weweb

Ask us anything How do I?
1

I am trying to link my data from the back end and link to a chart so as the data on the back end increases it automatically updates and change the structure of my chart
I would appreciate a detailed explanation of how to go about it, I would also appreciate link to videos that can help me achieve this
Thanks.

2

It is the front-end that has to request updates from the back-end when needed, but not the other way around. The front-end is running on many clients, so the back-end doesn’t know which one to send the updated data to.

There are ways to keep a permanent connection between front-end and back-end, such as “web sockets” (instant messaging apps and real-time multi-user games use them), but I wouldn’t use sledgehammers to crack nuts. Just make calls every X seconds to get the updated info. It’s not the most efficient way, especially if nothing has changed, but it’s the simplest way.

You could increase efficiency by sending the timestamp of the previous call to the back-end, so it will know if the data changed since the previous call, and if it did, the back-end will send you the updated data, but if it didn’t the back-end won’t send anything (just “null”).

3

Thanks asanzjones, I appreciate your reply. Could you please explain further about updating every second and also increasing the efficiency by sending the timestamp of the previous call to the back end, I would also appreciate it if you could send some images to explain further.
Thanks!!

4

  1. Calling and endpoint periodically. Make a global workflow (under the Actions tab) with a simple javascript code with a SetTimeOut() function. The SettimeOut() function takes two arguments: (1) the function to be executed, (2) the number of milliseconds from now to execute the function. The function to be executed must be recursive, so that it calls itself by including the SetTimeOut() function inside. To exit the recursive function you need to watch for a true/false global variable (let’s call it “keep_refreshing”) before calling SetTimeOut(). If keep_refreshing is true then call the endpoint (you can execute another workflow that does it if you don’t want to call the endpoint directly from javascript) and next the SetTimeOut() again, if not, then return (exit the recursive function). Now make an “on page load” workflow which sets “keep_refreshing” variable to true, and next executes the global workflow described before. Make sure to set “keep_refreshing” default value to false and don’t preserve it on navigation to make sure it’s set back to false when you change the page. In the javascript code you have two things, the recursive function definition, and the first execution of that recursive function. You can also use a shortcut by auto-executing the function definition by doing function{}().

  2. Sending the timestamp. The back-end must keep track of relevant data changes that affect the dashboard by saving an “update data” timestamp somewhere. The endpoint should have an additional input timestamp parameter called “previous call”. The first time the front-end reaches the endpoint this parameter is null. The back-end retrieves the data from its database and sends it back to the front-end INCLUDING the timestamp when the process is done. The front-end receives the data along with the timestamp that is saved in a variable in the front-end to remember the last time it called the endpoint. The next time the endpoint is called, send the saved timestamp in the “previous call” input parameter. The back-end will compare that “previous call” timestamp with the internal “update data” timestamp. If the “update data” timestamp is later than “previous call” then the back-end retrieves the new data and sends it back to the front-end. If not, then the back-end just returns nothing (or null).