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":"Paul","type":"string"}],"rows":[{"c":[{"v":new Date(1564485214000)},{"v":{"_type":"location","acc":4,"alt":128,"batt":34,"conn":"w","lat":53.90525389999999816836862009949982166290283203125,"lon":-1.749858300000000088658680397202260792255401611328125,"tid":"id","tst":1564485214,"vac":8,"vel":0,"Desc":"Speed:0kph At:2019-07-30 11:13:34"}}]},{"c":[{"v":new Date(1564421498000)},{"v":{"_type":"location","acc":3,"alt":125,"batt":73,"conn":"w","lat":53.906377800000001343505573458969593048095703125,"lon":-1.74596280000000003695959094329737126827239990234375,"t":"p","tid":"id","tst":1564421498,"vac":4,"vel":34,"Desc":"Speed:34kph At:2019-07-29 17:31:38"}}]},{"c":[{"v":new Date(1564419309000)},{"v":{"_type":"location","acc":3,"alt":125,"batt":74,"conn":"w","lat":53.906377800000001343505573458969593048095703125,"lon":-1.74596280000000003695959094329737126827239990234375,"t":"p","tid":"id","tst":1564419309,"vac":4,"vel":34,"Desc":"Speed:34kph At:2019-07-29 16:55:09"}}]},{"c":[{"v":new Date(1564417461000)},{"v":{"_type":"location","acc":3,"alt":125,"batt":75,"conn":"w","lat":53.906377800000001343505573458969593048095703125,"lon":-1.74596280000000003695959094329737126827239990234375,"t":"p","tid":"id","tst":1564417461,"vac":4,"vel":34,"Desc":"Speed:34kph At:2019-07-29 16:24:21"}}]},{"c":[{"v":new Date(1564417461000)},{"v":{"_type":"location","acc":3,"alt":125,"batt":75,"conn":"w","lat":53.906377800000001343505573458969593048095703125,"lon":-1.74596280000000003695959094329737126827239990234375,"t":"p","tid":"id","tst":1564417461,"vac":4,"vel":34,"Desc":"Speed:34kph At:2019-07-29 16:24:21"}}]}]}

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

[ mqttcogs_drawgoogle 
ajax="true" 
charttype="Table"
options="{width: '100%', height: '100%'}]
       [ mqttcogs_data 
          limit="5"
          order="DESC"
          topics="owntracks/another/ckandroid"]
[/mqttcogs_drawgoogle]

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 *