Blog


Roadmap or something…

  • December 28, 2016
  • FAQs

Hmm, don’t like the word roadmap. Sounds a bit management. Thought I’d jot down a few ideas about what it might be possible to implement for mqttcogs. The bottom line is that i want to easily be able to visualize ‘data’ on my blog. Data from all different types of sources. It would also be nice if I could update selected data as well…

I’ve moved the content of this page to github.┬áSee here




Outside

This sensor is shoved into the ground in my vegetable bed. It’s actually quite useful. Come spring I’ll know when the soil has warmed up enough to start planting my summer seeds. I also like the way the soil temperature lags behind the air temperature. Obvious, but interesting to watch!

 




My Umbrella Plant

This page is devoted to my Umbrella Plant. I don’t love my Umbrella Plant as much as my Basil. It has some flaws. It’s not edible and it doesn’t really grow fast. It also collects a lot of dust. It also appears to be able to tolerate large periods of drought as i’m not very good at watering it.

[ mqttcogs_drawgoogle options="{
  series: {1:{labelInLegend: 'Air'},0:{labelInLegend: 'Soil'}},
  animation:{startup:true,duration:5},
  curveType:'function',
  title:'(8) Umbrella Plant Temperature',
  height:300,
  hAxis: { title: 'DateTime(UTC)',format:'dd MMM HH:mm' },
  vAxis: { title: 'Temp (F)' }}" 
  charttype="LineChart" ]
          [ mqttcogs_data limit="100" topics="mysensors_out/8/1/1/0/0,mysensors_out/8/2/1/0/0"]
 [/mqttcogs_drawgoogle]

[ mqttcogs_drawgoogle options="
 {series: {1:{labelInLegend: 'Air'},0:{labelInLegend: 'Soil'}},
 animation:{startup:true,duration:5},
 curveType:'function',
 title:'(8) Umbrella Plant Moisture',
 height:300,
 hAxis: { title: 'DateTime(UTC)',format:'dd MMM HH:mm' },
 vAxis: { title: 'Moisture' }}"
 charttype="LineChart"]
                [ mqttcogs_data limit="100" topics="mysensors_out/8/0/1/0/37"]
 [/mqttcogs_drawgoogle]

 




My Basil

This page is entirely devoted to my Basil plant.  The plant sits on my kitchen windowsill and is south facing. I love my Basil plant. I use it for Pizza and Tomato sauces. It has very green leaves and smells fantastic. It’s not growing very fast at the moment as it’s winter and we are only getting about 8 hours of light.

[ mqttcogs_drawgoogle 
	options="{
				series: {1:{labelInLegend: 'Air'},0:{labelInLegend: 'Soil'}},
				animation:{startup:true,duration:5},
				curveType:'function',
				title:'(92) My Kitchen Basil Temperature',
				height:300,
				hAxis: { title: 'DateTime(UTC)',format:'dd MMM HH:mm' },
				vAxis: { title: 'Temp (C)' }}"]

	[ mqttcogs_data limit="9999" topics="mysensors_out/92/1/1/0/0,mysensors_out/92/2/1/0/0"]
[/mqttcogs_drawgoogle]

Here’s another graph that shows moisture. The moisture is measured by a capacitive sensor. The units are arbitrary. This is work in progress!

[ mqttcogs_drawgoogle 
	options="{   
			series: {1:{labelInLegend: 'Air'},0:{labelInLegend: 'Soil'}},
			animation:{startup:true,duration:5},
			curveType:'function',
			title:'(100) My Kitchen Basil Moisture',
			height:300,
			hAxis: { title: 'DateTime(UTC)',format:'dd MMM HH:mm' },
			vAxis: { title: 'Moisture' }}"]
	[ mqttcogs_data limit="100" topics="mysensors_out/92/0/1/0/37"]
[/mqttcogs_drawgoogle]



Multiple Series

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:




Labelling Axes

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 got a graph on the screen using the following code:

[ mqttcogs_drawgoogle ]
       [ mqttcogs_data topics="mysensors_out/100/1/1/0/0" ]
[ /mqttcogs_drawgoogle ]

We are going to extend this and add a legend and axis labels to our graph. Here is the example updated to include some labelling

[ mqttcogs_drawgoogle options="{  series: {0:{labelInLegend: 'Soil'}},  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" ] 
[/mqttcogs_drawgoogle ]

There aren’t any secrets here, the options attribute is a javascript object literal that is passed into the Google Visualization graph constructor. Here is a link to show the options attribute explained for the Google LineChart. The result is:

Notes:

  • I haven’t specified a width as the chart will automatically grow to fit the container.
  • I’ve changed the curveType to ‘function’ to smooth out the graph



Really Simple

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 code!

[ mqttcogs_drawgoogle charttype="LineChart" options="{}" ] 
      [ mqttcogs_data topics="mysensors_out/100/1/1/0/0" ]
[ /mqttcogs_drawgoogle ]

There are two shortcodes you need to use. The outer shortcode mqttcogs_drawgoogle  to tell the plugin that you want to draw a graph and the inner shortcode mqtt_data to tell the plugin what data you want to use.

As you can see from the example, the only required at attribute you need to draw a graph is the topic you want to use as your series. Any attribute that is not specified is set to it’s default value.

The topic that I want to graph is mysensors_out/100/1/1/0/0. This is the standard MySensors format for sensor id 100’s temperature. You don’t have to use MySensors you can graph any MQTT data stream!

The output of this looks like this: