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:


  • 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


mqttcogs_drawgoogle options don’t seem to work when mqttcogs v1.3 is plugged into WordPress Version 4.7.11 with php v7. Any suggestions as to a fix? Thanks.

Hi Ian,

Sorry I didn’t get back to you sooner – I’ve only just found this post. My fault.

I had problems with php7 but mostly this error:
[04-May-2018 11:01:01 UTC] PHP Warning: Declaration of MySubscribeCallback::publish($mqtt, $publish_object) should be compatible with sskaje\mqtt\MessageHandler::publish(sskaje\mqtt\MQTT $mqtt, sskaje\mqtt\Message\PUBLISH $publish_object) in /home/bbbeabea/ on line 1074

Which I fixed and did another release. Can you let me know which options are not working and I’ll try and focus in on that.


Leave a Reply

Your email address will not be published. Required fields are marked *