Scrolling line chart

[RGV250]

Hi Steve,
The device sends readings every 4 seconds and I would like to do a "last hour" trend. I have no idea where I got the 2000 samples fom, probably a lack of beer:-)
At the worst case it would be 900 samples for the hour IE every 4 seconds but realistically it could be less. The only issue there I can foresee is do I miss every other sample or send the same number over say 8 or 10 seconds. The smart? meter display is so sluggish and misses out a lot of peaks, also only shows instant figures so unless you are looking at it constantly it is useless.
I would like the X axis to show the current time as the scale if that is possible.
Maybe I am expecting too much as I am used to working with PLC/HMI where they were connected over ethernet.

Regards,
Bob

[medelec35]

Hi Bob,
Some food for thought,
Rather than updating chart every 4 or 8 seconds, what about setting an hysteresis value and only update chart with the change if outside those values?
You can then have more details on the x axis of the chart.
Rather then seconds, the date and time perhaps?
Sill sample quickly e.g. every 4 seconds.

[Steve-Matrix]

I've had some initial investigation and you might not need a specific historic chart component. See the attached using existing charts.

The html is in the zip file. The slider sets the rate (1ms to 1s) and the combo is the width of the data shown.

I've quickly thrown it together and it's a bit buggy. You might need to reload the page if you see errors, but it's a start that you might be able to take further.

It includes a bar chart and a line chart. The bar chart might be more appropriate for you because you can set text for the x-axis (and thus show a time value) whereas the line chart's x-axis can only show an integer value.

[RGV250]

Hi Steve,
I am not sure if I should be able to simulate it, I don't seem to be ale to do anything?
Strange as well, when I open it in V11 I get this, I am all up to date as well.

V11.jpg (10.3 KiB) Viewed 582 times

Bob

[Steve-Matrix]

It may be that I created it with a latest development version of v11, but it should work ok. I've just tested it and it's fine.

To run this Web Developer project, you need to do the following:

1. Open the project file
2. Click "Create web page" from the "Build" menu
3. Click "View web page" from the "Build" menu
4. (or alternatively, find and open the generated html file in a browser)
5. Click one of the entries (20, 50 or 250) in the combo dropdown on the web page and set the switch to "on"

For these types of projects, the use of the simulation debugger within Flowcode is more complicated that a standard Embedded or PC Developer project. This is due to the nature of how JavaScript runs within a web browser. Most times you would not need to use it.

But if you do want to step through Web Developer projects, you have to understand how the project works. The "Main" macro will not have a loop as this is only executed when the web page is loaded. Instead, macros are executed in an "event-driven" way. So for this project, the "OnSwitch1Click" macro is executed whenever the switch is clicked and the "TimerMacro" macro is executed when the timer component event is triggered.

To use the debugger in this project, perform steps 1-3 above, then add breakpoints to the macro code where you want the project code to pause (e.g. near the start of the "OnSwitch1Click" macro). Then click the "debugger" icon on the webpage (or click "Enable Debugger" in the Debug menu). The project will now pause when a breakpoint is 'hit' (e.g. when the switch is clicked). When paused, you can step through the code and read/write variables to see how the code is executing.

[RGV250]

Hi Steve,
It is working now, I must have tried every permutation apart from the one that worked. I think I selected On first and then the combo. The other think I would mention is there is not a lot of contrast for the debugger controls (for me anyway).
I think the line chart will be best as I will have probably 3 lines, the only thing would be the time for the axis?
Anyway, thanks to the example, I have something to play with for the weekend.

Regards,
Bob

[Steve-Matrix]

Unfortunately, the line chart (currently) only displays a number on the x-axis, so you will have to use the other chart if you want text there (e.g. for a time value).

[RGV250]

Hi Steve,
Thanks for your example, I have managed to get what I want (I think), I am a bit puzzled why I could not get it to work the same and had to modify it.
The first issue was that I set the width to 600 (10 mins at 1 second) and it did not start to draw the chart until 10 minutes had expired IE a full chart. Then it worked fine until idx rolled over and then it had to wait again for the 10 mins.
I got over the first issue by pre-loading idx to width - 1 but this caused an issue when idx rolled over as it had to wait the 10 mins and then drew the chart from the opposite direction. I then changed the idx decision to a value that will never be reached and so far so good. I could have removed it but like to code for all eventualities.

Regards the x axis, is it possible to have it with no scale or rather no visible scale, if I cannot have the time I think it might be OK to just show the current time at the right hand of the chart?

WebApp_MQTT_Client_EcoEye3B.fcweb

(77.48 KiB) Downloaded 2 times

I have left the control in at the moment as I am thinking it might be useful for testing things.

Regards,
Bob

[Steve-Matrix]

Over time we will add and extend the features of the Web Developer controls and so we will probably offer more options for the x-axis in the future. As a workaround, you might be able to put a suitably-coloured rectangle over the x-axis to hide it.