Blog


Making a Gauge Chart

This post explains how to create a Google Visualization Gauge chart.

Extracting Data for a Google Visualization Gauge

Google Visualization Gauges need a bit of thought. If you look at the documentation for the Gauge chart here, there is a sneaky little comment that reads:

At the moment there’s no way to specify the title of a gauge chart as you can with other Google Charts

That makes things difficult. We’ll do our best to create a gauge but it won’t have a title. I’ve instead used a plugin to create 2 columns in my WordPress page and added a title above the Gauge. It’s the best I can do!

Here’s the shortcode for one of the Gauges. I simply get the top 1 row for my one of my probes.

[ mqttcogs_drawgoogle options="{height:200}"
	charttype="Gauge" 
	ajax="true" ]
		[ mqttcogs_data limit="1" topics="mysensors_out/92/1/1/0/0" ]
[ /mqttcogs_drawgoogle ]

Soil Temperature

Air Temperature

There’s obviously a bit of work for me to do here. There is no way currently of getting the maximum/min/average value for today!




Visualizing Mqtt JSON Payload 1

This post describes how to visualize Mqtt data when the Mqtt payload is JSON. I updated this post on 26th May 2019 for version 2.2. The example in this post will not work for versions prior to 2.2!

How is MqttCogs data stored?

Recall that data arriving from the Mqtt broker is persisted to a WordPress table. The data from my MySensors projects looks something like this. You can see that my data is pretty simple – numeric temperature and moisture levels.

By default, when I visualize this data I see a graph that plots utc against payload. Here is the graph that plucks out temperature data for probe 95. I’ve removed all the axes formatting to make the shortcode more readable. (Underneath the surface Mqttcogs returns a datetime and a number/string for each row of data for the Google Visualization)

[ mqttcogs_drawgoogle options="{height:300}" ajax="true" ] 
	[ mqttcogs_data from="-3" limit="99999" topics="mysensors_out/95/1/1/0/0"] 
[ /mqttcogs_drawgoogle ]

So now lets examine some data that has arrived from the Mqtt broker with a JSON payload. I’ve manually added a couple of rows. As you can see they contain latitude and longitude – can you see where this is going?

To extract and plot the values from my json payload I need to instruct MqttCogs how these should be extracted from the JSON data. Prior to version 2.2 this was done server-side. This wasn’t very flexible and only worked with very simple ‘flat’ JSON.

Version 2.2 provides the ability to manipulate the JSON in the client browser using a script. In this simple example we don’t even need to do this!

The default JSON script that is bundled with version 2.2 looks for a longitude and latitude in the JSON data (it’ll scan for lon, longitude, lng and lat, latitude) and uses that to plot the data. It also constructs a simple flag using the the topic name and datetime.

[ mqttcogs_drawgoogle charttype="Map" options="{height:300}"  ]
  [ mqttcogs_data 
	limit="99999" 
	topics="jsontest/a" ] 
[ /mqttcogs_drawgoogle ]

This great! I can now plot lat, lng on a google map. I could even get the map to update if something was moving!

The above is a really simple example introducing JSON payloads. Take a look at Part 2. This shows how we can use the ‘script’ attribute to properly manipulate the JSON data before we use it in our visualization.