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 100. 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 limit="10" order="DESC" topics="mysensors_out/100/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,zoomLevel:12,charttype="Map" ]
   [ mqttcogs_data limit="99999" topics="jsontest/a"  ]

[ /mqttcogs_drawleaflet ]

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

• Don’t forget you’ll need to set a Google Maps API key in the plugin settings

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.