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(1580317742000)},{"v":{"_type":"location","acc":500,"alt":76,"batt":92,"conn":"m","lat":53.797812,"lon":-1.5356807,"tid":"id","tst":1580157421,"vac":13,"vel":0}}]},{"c":[{"v":new Date(1580317442000)},{"v":{"_type":"location","acc":500,"alt":76,"batt":92,"conn":"m","lat":53.797812,"lon":-1.5356807,"tid":"id","tst":1580157421,"vac":13,"vel":0}}]},{"c":[{"v":new Date(1580317142000)},{"v":{"_type":"location","acc":500,"alt":76,"batt":92,"conn":"m","lat":53.797812,"lon":-1.5356807,"tid":"id","tst":1580157421,"vac":13,"vel":0}}]},{"c":[{"v":new Date(1580316842000)},{"v":{"_type":"location","acc":500,"alt":76,"batt":92,"conn":"m","lat":53.797812,"lon":-1.5356807,"tid":"id","tst":1580157421,"vac":13,"vel":0}}]},{"c":[{"v":new Date(1580316542000)},{"v":{"_type":"location","acc":500,"alt":76,"batt":92,"conn":"m","lat":53.797812,"lon":-1.5356807,"tid":"id","tst":1580157421,"vac":13,"vel":0}}]}]}

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 *