For an index to all my stories click this text
As we have seen with cloud based IOT services like Thingspeak and IoTtweet it is easy to have a graphical representation of the data of your sensors. With Thingspeak you can create bar-charts and gauges for visualisation of your data. And you can do the same with IoTtweet. We have been using these in previous stories and adressing them in ESP-Basic. You can find the weblog entry about Thingspeak here:
And about IoTtweet I wrote two stories which you can find in the next links:
A Gauge just displays a value at a certain moment, like what is the temperature at this moment. When the data changes the Gauges pointer moves and the old value is forgotten. With a line chart you can get a historical view of the data.
The linechart is also made with Google Charts. This is the same library with which the Gauge was made.
If you want to try this code copy it and paste it in the notebook editor. Then save it as Gauge.HTML in a folder on your computer.
Opening the folder will show you a webpage with the HTML file Gauge. Click on it and your browser will open displaying the Gauge. Press the button and see the value change.
Lets have a look at the program so you'll understand how it works.
Here we start the library and tell it that we want to use the Gauge function. The second line starts the drawGauge function in which the Gauge is drawn initially on the webpage.
This line tells the library that the gauge's scale starts at -5 and ands at 50. This will be the range of degrees Celsius we want to use. Next there will be a yellow marking from 18 to 24 degrees which I consider as a safe zone in which I am comfortable to work in. The red zone goed from 25 to 50 degrees and that is what I definitely consider as to warm. The scale is divided in small steps of 5 after which a larger indicator follows. Alter these to your own liking.
Then the drawGauge() function starts in which the gauge is actually put on the screen.
The Gauge library gets its data out of a table. The table can have many rows and colums and these could be used for pre-defined values. In reality this is part of the overall library and the colums can be filled with multiple data for displaying a line or bar-chart.
in this case only 1 row is used.
The first row is filled with initial data. The first column is for numbers (the actual temperature) and the second column is used for the legend which I defined as 'Deg. C'
A row is added and that row is actually row 0. Row 0 column 9 (first column) is filled with the value 19. The setCell command is the important command that allows us to put or own data in the table. We can achieve that also with setValue which we will use further on in the program.
These lines make sure that the Gauge is intialised with the Data list we choose (in this case there is only one) and put on the webpage in the pre-defined div (gauge div) using the options for the scale defined in gaugeOptions.
The next function is the changeTemp() function. This will be activated when we press the button which is defined further on.
In the changeTemp function the first cell in the table which contains the value of the temperature is changed.
This part of that line calculates a new random temperature. Math.random() gives a figure between 0 and 1. So we multiply it by 50 and then round it to an integer.
The last two things we have to do is to create a place on the webpage where the Gauge will be displayed and this is inside the <div> In this <div> we also define the width and height of the Gauge.
And we need to define a button which calls the function to re-draw the Gauge with a new random value.
Just copy the code into your notebook editor. Save it as a non-txt file with the extention html like for example gauge.html and it will turn into a webpage. Click on that and the Gauge will appear in a new browser tab or window.
To port this to an ESP you will need to put this in a webserver and make sure that the formula Math.round(Math.random()*50) is altered in a real sensor reading. This is what we are going to cover in an upcoming story.
As stated above a Gauge only displays the current or last supplied value. Sometimes we want to see some history. That is when a linechart comes in handy.
The linecharts are build by using the same Google Charts library as the Gauge does. So the basics are the same. I'll give you the complete code first.
These are the starting lines of almost any webpage. We define that it is build on HTML code. The heading of the page stays empty although you may fill in the ususla credentials. Next the body of the webpage's background color is defined. As ususla I use my favorite which is powderblue.
Here we start the library and tell it that we want to use the Gauge function. The second line starts the drawGauge function in which the Gauge is drawn on the webpage.
Then follows the function drawChart() which puts all data we want to display in a table. The first entries called Time and Temp are to be displayed as the legend of the chart. The next entries all define a timestamp and the measured temperature at that time.
As you can see I defined 10 entries (0 to 9). You may add or delete entries as you like. By adding more entries the time indication at the bottom of the chart may get cramped. Widening the screen eand the width of the chart may bring relief but remember that will have an impact on displayi8ng the chart on a mobile phone or tablet.
I splitted the options out in multiple lines for clarity.
The title of the chart will be "Mancave Temperature" and the name of what we measured (temp) will be placed at the bottom of the chart.
Next the width and height of the chart are defined.
The last line defines how much space the chart will use within the defined area. I used 90% for width and 75% for height. If you do not specify these percentages there will be a lot of whitespace next to the chart.
These 2 lines actually put the chart on the webpage and in the <div> with the name "temp_chart"
This last line defines some space on the webpage with the name "temp_chart" in which the chart will be drawn.
Again like with the Gauge code, copy this code paste it into a texteditor like Notepad and save it as a non-text file with a name like charts.html
locate the file on your computer and click on it. Your preferred web-browser wil open and a webpage with the line chart will appear.
Altering the charts.
Both the Gauges and the Linechart code have a variable with options in the name (or as the name). Altering this variable can modify the charts in all kinds of ways. You can alter the background, line colors, texts, width and height etc etc etc.
There ate tons of options to play with.
You can find all details here:
I have done a complete tutorial on building webpages on the ESP line of micro-controllers. Now lets bring the Gauges and charts to the ESP !!! so keep on coming back to see how it's done.
Till tnext time.