B4J Tutorial ThingSpeak Data Viewer Tutorial (updated)

I made a few useful (in my biased opinion :) updates to the very interesting project by Mark Read: ThingSpeak Data Viewer
Thank you Mark and thank you Klaus for xChart

ThingSpeak Data Viewer.png


The features listed in the original post are all still there.

The tool now accommodates any scan rate for the data and more precisely displays one day, one week or one month worth of data, with useful placement of time ticks.
The tool also lets you add and delete channels from the drop down list and the channel numbers are accompanied by the channel description for easier reference.

1718568189656.png


There are further comments in the source code.

I have also attached the Arduino code for the D1 mini that I use to send data. The device helps me track the operating conditions of my salt water chlorine generator. Note that I am still working on this project (need to add pool temperature and cell voltage).

The D1 mini is one of the easiest Arduino module (small and cheap) to use if you want to upload data to ThingSpeak, the downside is that it has only one ADC input.
The ESP32-WROOM is the next easiest (a bit larger and more expensive but still cheap). It has more IOs with multiple ADC inputs and an ESP32 CPU with Bluetooth LE.
Both are trivial to program, requiring only a USB cable without the need for an adapter board, to press buttons or move switches.
 

Attachments

  • ThingSpeak.zip
    54.7 KB · Views: 31
  • Test.zip
    2 KB · Views: 30
Last edited:

Mark Read

Well-Known Member
Licensed User
Longtime User
Nice to see that someone has used my code! Just a couple of points which you could look into:

1. The maximum points you can dowload from Thingspeak is 8000 which you are using for each time button (Day, week etc). If you use the xChart library instead of the class, you can use the zoom function to zoom in on a day etc AND scroll backwards. It also means you only load data once.

1718608025007.png


2. You have the same problem I had. If you move the mouse over the colored field buttons, the text changes to black. I never found a solution to this. It doesn_'t affect the chart but it is annoying.

3. The x-axis description takes up 50% of the chart. Maybe the year and/or month is not so important. Or you turn the description 45 degrees.

Good work.
Regards
 

Didier9

Well-Known Member
Licensed User
Longtime User
Yes on all 3. Actually for #1, I don't have to redownload the data if I just change the time span but that's the way the code was laid out and I did not change that because it's "fast enough" as it is, at least from my location :)

Also it looks like the xChart library puts a black line on the value "0" over the data if it's within the window. I need to fix that because it comes over the data if the data happens to be 0.

Anyhow I had fun playing with your code over the weekend. It already did all the heavy lifting. Thank you!
 

klaus

Expert
Licensed User
Longtime User
Also it looks like the xChart library puts a black line on the value "0" over the data if it's within the window. I need to fix that because it comes over the data if the data happens to be 0.
Yes.

I see that you are using the xChart class version 8.0.
You may jump to the latest version and use the b4xlib library.

Coming back to your problem, can you test attached version 9.9 ?
Now I draw the highlighting before drawing the chart.

This is how it looks like now, the red line covers the black line.

1718633824518.png
1718634176279.png


There is also a YZeroAxisHighlight property, you can set this to False, right image
In that case only a black line with 1dip will be displayed otherwise the width of the line is 2dip.
 

Attachments

  • xChart.b4xlib
    46.5 KB · Views: 16
  • xChart.bas
    328.3 KB · Views: 16

Didier9

Well-Known Member
Licensed User
Longtime User
Yes.

I see that you are using the xChart class version 8.0.
You may jump to the latest version and use the b4xlib library.

Coming back to your problem, can you test attached version 9.9 ?
Now I draw the highlighting before drawing the chart.

This is how it looks like now, the red line covers the black line.

View attachment 154684 View attachment 154688

There is also a YZeroAxisHighlight property, you can set this to False, right image
In that case only a black line with 1dip will be displayed otherwise the width of the line is 2dip.

Indeed, the problem at zero is eliminated with xChart class v9.9, thank you Klaus!

1718826392908.png
 

Didier9

Well-Known Member
Licensed User
Longtime User
I fixed the text color on the buttons. In my project, replace the LoadButton function as below:
B4X:
Sub LoadButton( btn As Button, field As String )
    If channel.ContainsKey( field ) Then
        btn.Text = channel.Get( field )
        btn.TooltipText = btn.Text
        Dim i As Int = field.SubString( field.Length-1 )
        btn.Style = color( i-1 ) ' where color is defined as "xui.Color_DarkGrey" for instance
    Else
        btn.Text = "N/A"
        btn.TooltipText = ""
    End If
End Sub ' LoadButton()
 
Top