Blog


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: