How can I highlight regions on my ChartData2D line plot and requesting help on my project?

[NeymarTehkor]

First I need to know if it is possible to show highlighted regions like this on the ChartData2d graph, the closest thing I found to it was the HighlightDataPoints function.
I referred to this post for help https://community.appinventor.mit.edu/t/chartdata2d-and-highlightdatapoints-shows-no-highlighted-data/94205 but I do not know how to implement to the line graph that updates live every second with only 10 data points at one time with random y values generated by the random number function.

I attempted to integrate but I do not know why it does not work.
Here is the .aia file for reference.
realtimeXHighlight vlaues.aia (4.0 KB)

Initially, the random integer range was 60-100 and I wanted to highlight values from 75-80 but it did not work. I decreased the range to 73-76 and attempted to highlight 75 only on any x value and eventually gave up and set the data point to (1,75) and waited for that coordinate to appear there but it still did not get highlighted which I do not know why anymore.

At the end of the day, if I have the above figured out, I want to integrate to my main project which would be displayed the float values received via bluetooth onto the chart, highlighting any values between 60-90 green and 30-60 orange.

Here is .aia file of my current main project:
main_project.aia (287.3 KB)

One more key feature of the main project would be calculating the percentage of green since the beginning of the timer so that it can be an indication of the score (more green = better score). The score will be displayed on like a pie chart maybe or just a label in a circle saying the percentage score of greens. I think the main idea is taking the total time that was green divided by the total time since start of timer multiply by 100%. That is the idea but I do not know what are the MIT app inventor steps.

I have questions like how do I find the time that it was green when it happened at several intervals. I do not have an idea on where to start yet so I was hoping to get some advice on this. Do I use a tiny database to store all the values since the start?

That is all, thank you if you have read all the way, any help is appreciated, thank you for sharing your knowledge with me!

[ABG]

I took a whack at this, and I am convinced the HighlightDataPoints function doesn't work for more than one point.

The color assigned to the data range keeps overwriting the highlights.

charts_drunkard_walk_range_colored.aia (5.5 KB)

I am thinking of redoing this by partitioning the data series into three parts, by y range, and assigning them different colored ChartData components on the same graph.

The partitioned data can be kept for statistical analysis, as I have done in this sample in the three colored Labels at the top.

Here's my Cherts and Graphs FAQ.
Every one and his brother has done charts and graphs.

FAQ Section: Charts and Graphs

AI2 Charts Component AI2 Charts Component Help - MIT Oct 2022 AI2 Charts Usage Guide - @elatoskinas Charting CSV Data by DateTime in the AI2 DataFile component - ABG Charting from TinyDB by Date - ABG Realtime Chart sample - @Kevinkun Charting from ESP32 via Bluetooth - @Patryk_F Javascript based Chart..js examples / Spanish / Juan Antonio How to generate an animated Pie Chart using the Chart.js library Gauge Charts Plotly JS file to display real time data - Giriraj Pawar Highcharts Se…

[ABG]

charts_drunkard_walk_multirange_colored.aia (5.6 KB)

This should do it.

[NeymarTehkor]

Hello ABG! First off, I would like to say thank you to your prompt reply, sorry for the late reply, have been spending the last few days intermittently trying to figure out how your code works and how I could implement it into my project. I have successfully managed to integrate the code into my project by deleting and changing very few lines though it took me really long because I am unfamiliar with MIT but anyways, thank you! I will share my project file so you could see how I integrated it and if there are any improvements to be made.

However, I still have some questions regarding my understanding of your code:

1. There were two .aia project files that you sent, I want to clarity that the first file was the one that you mention that it was not working right? Because it was only one chart with a single chart data and through this, you found out that the highlight data function could only highlihg ONE colour at a time on ONE chart data?
   Because I also got a no-colour chart like your attached picture, is that what you meant by [quote="ABG, post:2, topic:137655"]
   The color assigned to the data range keeps overwriting the highlights
   [/quote] I tried changing the clock period because I thought it was the reason the colours were not showing but that was not the problem.

2. [quote="ABG, post:2, topic:137655"]
   The partitioned data can be kept for statistical analysis, as I have done in this sample in the three colored Labels at the top.
   [/quote]
   About this, how can I use this to create my score pie chart? I have a feeling that it is using the length of the lists like "redEntries"/"yellowEntries"/"greenEntries". But it looks like currently it is only saving 20 points? (im not sure) How do I make sure it saves all the points since the start of the bluetooth connection, and then taking the "total number of green points" divided by the "total number of points" multiply by 100% and display this percentage on a pie chart or circle score (I think this is better right, a picture with a number in the center).
   

   
   .

By score pie chart, I mean my previous project description [quote="NeymarTehkor, post:1, topic:137655"]
One more key feature of the main project would be calculating the percentage of green since the beginning of the timer so that it can be an indication of the score (more green = better score). The score will be displayed on like a pie chart maybe or just a label in a circle saying the percentage score of greens. I think the main idea is taking the total time that was green divided by the total time since start of timer multiply by 100%. That is the idea but I do not know what are the MIT app inventor steps.

I have questions like how do I find the time that it was green when it happened at several intervals. I do not have an idea on where to start yet so I was hoping to get some advice on this. Do I use a tiny database to store all the values since the start?
[/quote]

For greater clarity, here is the sketch of the app interface.

So you can see I want like an overall score update of the good posture using the statistics. The overall score is updated every 5 minutes so it will not keep changing all the time like the graph.

3. I have a few more questions regarding the code but I will understand it at a later time. It took me a while to realise that your code was a shortened version of the real time charting in this post https://community.appinventor.mit.edu/t/how-do-you-use-the-chart2d-plugin-to-create-a-chart-with-time-as-the-horizontal-axis/88373
   
   

Which I took a while understanding it and that's how I managed to integrate it by removing the old code I had in my project below:

@NeymarTehkor

Here is .aia file of my current main project:
main_project.aia (287.3 KB)

Anyways, I would love to understand more another time as I am in a rush to get this project done, here is my current project file that connects to the device that sends the angle value to the phone and then plots it on the graph where you had helped separate the values into their respective colour categories which I am thankful for!

Project file:
PROJECT POSTURE.aia (289.5 KB)

It also notifies the user at angles 30-60, but the notification keeps appearing even after the user presses ok once and that is also something I want to fix. Multiple dialog comes out and I want it to only come out once and have a grace period after the user presses it once so that even if the angle is 30-60, the dialog wont appear for another 10s?

I hope to hear from you soon thank you ABG!

[ABG]

@NeymarTehkor

There were two .aia project files that you sent, I want to clarity that the first file was the one that you mention that it was not working right? Because it was only one chart with a single chart data and through this, you found out that the highlight data function could only highlihg ONE colour at a time on ONE chart data?

Correct.

I posted it in case any one (included me) might think the problem was worth pursuing.

[ABG]

@NeymarTehkor

It also notifies the user at angles 30-60, but the notification keeps appearing even after the user presses ok once and that is also something I want to fix. Multiple dialog comes out and I want it to only come out once and have a grace period after the user presses it once so that even if the angle is 30-60, the dialog wont appear for another 10s?

This will let the first alarm sound immediately, but delay subsequent alarms to 10s apart.

[ABG]

@NeymarTehkor

I have questions like how do I find the time that it was green when it happened at several intervals. I do not have an idea on where to start yet so I was hoping to get some advice on this. Do I use a tiny database to store all the values since the start?

Do you need to track posture by date and time over a number of days?

That would require a TinyDB Readings Namespace, using the SystemTime as the tag and the numerical float as that time's y value.

Since each entry is a point in time, a pie chart could be made by counting the number of entries by y range (as done in the coloring code.)

Make new procedures that can work off the new TinyDB namespace instead of off an input ChartData.

[ABG]

PROJECT_POSTURE1.aia (290.0 KB)

This is as close as to a pie chart as the native AI2 chart component can come.
I am unable to test it for lack of a data source.

[NeymarTehkor]

(post deleted by author)

[NeymarTehkor]

@ABG

Correct.

I posted it in case any one (included me) might think the problem was worth pursuing.

I understand thanks!

@ABG

This will let the first alarm sound immediately, but delay subsequent alarms to 10s apart.

Thanks!

@ABG

Do you need to track posture by date and time over a number of days?

That would require a TinyDB Readings Namespace, using the SystemTime as the tag and the numerical float as that time's y value.

Since each entry is a point in time, a pie chart could be made by counting the number of entries by y range (as done in the coloring code.)

Make new procedures that can work off the new TinyDB namespace instead of off an input ChartData.

Yep I need the number of green points saved since the start of the timer. Not just limited to 20 points like currently. I think it can be unlinked from time right? because right now, every point is plotted every second on the graph, so each point represents a second in time, and then taking the "saved" greenEntries over the total entries to calculate the overall posture score. Like I what I mean below:

@NeymarTehkor

About this, how can I use this to create my score pie chart? I have a feeling that it is using the length of the lists like "redEntries"/"yellowEntries"/"greenEntries". But it looks like currently it is only saving 20 points? (im not sure) How do I make sure it saves all the points since the start of the bluetooth connection, and then taking the "total number of green points" divided by the "total number of points" multiply by 100% and display this percentage on a pie chart or circle score (I think this is better right, a picture with a number in the center).

@ABG

This is as close as to a pie chart as the native AI2 chart component can come.
I am unable to test it for lack of a data source.

I understand. I will now try the file that you have sent, thank you for help again ABG!

[NeymarTehkor]

So this is how the pie chart looks like but it is not really what I want. I feel the solution is really tinyDB so I am going to refer to your FAQs for now to figure it out.

This is how I want the score to look like actually. If it is a pie chart and not a changing picture then the green portion of the chart would be the "total greenEntries since the start of the connection" and the red portion would be the "total number of redEntries + total number of yellowEntries since the start of the connection".

On the bright side, the 10s grace period for the notification works thanks!

[ABG]

What ever pie chart you pick from the charts FAQ, the basic idea is to save up all your y readings in a list somewhere, then for the pie chart you will need 3 counters, one per color.

Check the docs of what ever pie Chart you pick.

The counters should hold how many readings were in which ranges.

Do you need help on how to count?

[NeymarTehkor]

Yes unfortunately I am struggling with the counting part, I have understood the list part but I have been trying to implement it.

Latest project code:
POSTURE_PROJECT_pie chart.aia (291.4 KB)

I failed as the values start to increase exponentially after connection.

[ABG]

How to count

At start of counting set counter(s) to zero.

Arrange for your counting process to intercept incoming data as it arrives.

As each datum arrives,

• Decide which counter should be incremented for that datum
• Set that counter to (1 + (that counter))

[ABG]

P.S.

You are doing it in the wrong place.

Do it upstream in the clock Timer to avoid maximum count clipping logic.

Further thoughts...

Code a value procedure to encapsulate conversion of a y value to a text classification (red/yellow/green)

A dictionary can hold counters.

This would reduce the number of if then else if ladders in your code.

[ABG]

Your pie chart has too many labels.
You added one for every data point (dozens), instead of one for every summary count (two or three)

See my posts on how to count.