How to Output a Table

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 DataTables, for example!

Firstly we’ll have a little look at some Mqtt data from the database. You can dump the JSON data directly to the browser by using an mqttcogs_data shortcode on it’s own.

[ mqttcogs_data limit="5" order="DESC" topics="owntracks/another/ckandroid"]

and here is the output. As you can see, the data is JSON formatted ready to be used by the Google Visualizations

{"cols":[{"id":"utc","label":"utc","type":"datetime"},{"id":"owntracks\/another\/ckandroid","type":"string"}],"rows":[{"c":[{"v":new Date(1595234271000)},{"v":{"_type":"lwt","tst":1595233521}}]},{"c":[{"v":new Date(1595233523000)},{"v":{"_type":"lwt","tst":1595233480}}]},{"c":[{"v":new Date(1595233482000)},{"v":{"_type":"lwt","tst":1595232568}}]},{"c":[{"v":new Date(1595231779000)},{"v":{"_type":"lwt","tst":1595231717}}]},{"c":[{"v":new Date(1595231436000)},{"v":{"_type":"lwt","tst":1595231242}}]}]}

Creating a table is straightforward. Simply pass in the relevant charttype to the shortcode like this.

[ mqttcogs_drawgoogle 
options="{width: '100%', height: '100%'}]
       [ mqttcogs_data 

The result will look something like this. Not particularly pretty, even with the width and height specifiers the table doesn’t fill the window.

No Comments

You can leave the first : )

Leave a Reply

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