The Really Simple example showed how to create simple LineChart and show one series. It’s possible to show multiple series on the same graph. In this example I’m going to show the air temperature and soil temperature for my basil plant that sits on my kitchen window sill. This example shows how to use the topics attribute.
Lets recap. We’ve got a graph on the screen using the following code:
[ mqttcogs_drawgoogle ]
[ mqttcogs_data topics="mysensors_out/100/1/1/0/0" ]
[ /mqttcogs_drawgoogle ]Adding another series to the same graph is pretty easy. The topics attribute accepts a comma delimited list of topics. So I can simply change my shortcode to include the second temperature sensor that I have on this probe:
[ mqttcogs_drawgoogle ]
[ mqttcogs_data topics="mysensors_out/100/1/1/0/0,mysensors_out/100/2/1/0/0" ]
[ /mqttcogs_drawgoogle ]The output looks like this:
Obviously, we can tidy things up a bit by setting the options attribute as well as described in Labelling Axes. Our shortcode then becomes:
[ mqttcogs_drawgoogle
options="{
series:{0:{labelInLegend: 'Soil'},1:{labelInLegend: 'Air'}},
curveType:'function',
title:'(100) My Kitchen Basil Temperature',
height:300,
hAxis: {title: 'DateTime(UTC)',format:'dd MMM HH:mm' },
vAxis: { title: 'Temp (C)' }}" ]
[ mqttcogs_data limit="100" topics="mysensors_out/100/1/1/0/0,mysensors_out/100/2/1/0/0" ]
[/mqttcogs_drawgoogle ]The pretty excellent result looks like this:
4 Comments
hi
We are in the middle of working on a project and we encountered a malfunction
When we publish information it works (we checked it)
But the data does not reach the database of the plugin so we cant use the information in our website
We thought that perhaps the problem was that during the installation stages we did not follow the first step that you wrote in the instructions because our site is installed on the Raspberry Pi and to this day we did not need to use a management panel
We look forward to your assistance
Thanks in advance
Naama and shira
hi,
Can you check the data makes it to the mqtt broker?
If it does, turn on MQTT Debug in the MQTTCogs settings page. Then take a look at the following files which should be in the root directory of your wordpress installation
error.log
php_errors.log
Chris
Hi Naama,
You will need to check the contents of errors.log and php_errors.log in the root of the wordpress installation – let me know if there are any relevant errors?
Chris
Ok, I worked it out.
Depending on the google chart type you need to use the correct amount of columns.
For example, you can get it to draw by specifying a field name and a then the value you want to plot.
[ mqttcogs_drawgoogle options=”{height:300,width:100}” ajax=”true”][mqttcogs_data limit="99999" topics="jsontest/a" jsonfields="name|string,lat|number"][/mqttcogs_drawgoogle ]
Regards,
Chris