MqttCogs Wordpress Plugin

This example shows how to create simple LineChart using the smallest amount of code. Lets start by taking a look at the shortcode. As with all the examples, I’ve added a space after/before any square brackets to make sure that the shortcode is not processed. You need to remove this if you are copying this […]

The Really Simple example showed how to create simple LineChart using a tiny amount of code. The graph showed some data but was missing horizontal and vertical axes. It was also missing a title. This example shows how to use the options attribute to make your graph look a bit more presentable. Lets recap. We’ve […]

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 […]

Updated for version 2.3 – mqttcogs_get shortcode is deprecated and replaced with the mqttcogs_drawhtml shortcode There are instances where a graph might not be appropriate. I might simply want to display the current temperature outside. I don’t want any fancy formatting I simply want to embed the value in one of my posts. Which value […]

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 […]

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 […]

I wrote a really basic example here that showed how to plot some GPS points onto map. The example works well but you may have noticed that it relies on the data in the Mqtt message payload formatted in a particular way. Remember what it looked like? If you’ve worked with GPS devices before you […]

This post describes how to visualize Mqtt data from the OwnTracks App. For this experiment I installed OwnTracks onto my phone and filled in my credentials for my Mqtt broker. Problem 1: My Mqtt broker uses port 14027. Outgoing data to this port wasn’t allowed on the particular Wifi network I was using. This took […]

This example shows how to take an action based on a time or schedule. It uses the excellent WP Control plugin. This plugin allows you to easily set the time window or repeating schedule that you want to use. Here is my logic that I would like to implement. I’ve highlighted my criteria in green […]

In a Create a Time Triggered Action we were able to schedule an Mqtt Message (the action) to be sent at a given time or interval. This example shows how to take an action based on an incoming message. I’ve highlighted my criteria in green and my action in red When I receive a moisture […]

This post shows how to output a Google Visualization Table. This is useful for a simple data dump of Mqtt data. I’ve tried to use this visualization in other projects but I found that the table is a little difficult to format and doesn’t include features that other table libraries do a lot better. See […]

This post describes how to manipulate the Mqtt payload when it contains JSON data. You must be using Version 2.2 or greater for this example to work! For this example, we’ll use some owntracks data. See Visualizing Owntracks Data for an introduction. Firstly, lets remind ourselves of what the data looks like in our database. […]

Version 2.2 includes the ability to group and aggregrate data. This is really useful, it allows you slice data by day and apply operations like MIN, MAX and AVG. We’re going to work through an example that will show the MINimum temperature and the MAXimum temperature for each day for one of my sensors. The […]

We’ve already seen that it is possible to show a simple plot of longitude and latitudes from a JSON payload. See Visualize OwnTracks GPS Data. If you like simple Google maps this works but isn’t particularly flexible. You can only display points on the Google map using the very limited Google Map Visualization. If you […]

Not only can you visualize data using Mqttcogs but it is also possible to publish data to your Mqtt broker using the shortcode. The ability to publish data is useful, here are a couple of reasons I wanted to do this. This article is based on Version 2.3 of the the MqttCogs plugin. Number 1: […]

This is another post that describes how to manipulate the Mqtt payload. The JSON payload in this example comes from a commercial Minew BLE gateway. You must be using Version 2.3 or greater for this example to work! For this example, we’ll use some data from a Minew gateway. The data coming from the Minew […]

Version 2.3 comes with some very simple css classes. In this post we are going to use a single css class group-card. Using this class you can now very easily create a ‘card’ layout that flows using the Gutenburg editor. The mqtt-card css must be applied to a Gutenberg container, as you can’t apply custom […]

This post is based on Version 2.3 of mqttcogs. Have you tried using the Google Visualization Table chart? It isn’t great. Just about acceptable, if you want to dump some data but is difficult to style and is missing a lot of features that you get with other table components. In this post we’ll compare […]

Version 3.0 is finally here. Here’s a brief overview of some of the new features. Settings Added a new tab ‘Mqtt Data’. This shows the last mqtt received messages order by utc desc. This is really useful for debugging. Thing Page Type Rather than just using short codes to display mqtt data. I added in […]