This post explains how to create a Google Visualization Gauge chart.
Extracting Data for a Google Visualization Gauge
Google Visualization Gauges need a bit of thought. If you look at the documentation for the Gauge chart here, there is a sneaky little comment that reads:
At the moment there’s no way to specify the title of a gauge chart as you can with other Google Charts
That makes things difficult. We’ll do our best to create a gauge but it won’t have a title. I’ve instead used a plugin to create 2 columns in my WordPress page and added a title above the Gauge. It’s the best I can do!
Here’s the shortcode for one of the Gauges. I simply get the top 1 row for my one of my probes.
[ mqttcogs_drawgoogle options="{height:200}"
charttype="Gauge"
ajax="true" ]
[ mqttcogs_data limit="1" topics="mysensors_out/92/1/1/0/0" ]
[ /mqttcogs_drawgoogle ]
3 Comments
Great work on MQTT Cogs. Amazing!
Can I get any tips?
So I’ve been playing around with options listed on google.
Added yellow and red zones, changed the max value.
What I can’t do is label the Gauge..
Any tips?
[mqttcogs_drawgoogle options="{height:200, max:200, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90}"
charttype="Gauge"
ajax="true"]
[mqttcogs_data limit="1" topics="Solar/DailyAH"]
[/mqttcogs_drawgoogle]
hi.thanks for this great plugin.I love it.
i have a question,is there any way to change the color of charts?
Hi,
Do you mean the background or the colours of the lines?
Both can be changed. See for example the google documentation here:
https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options
Chris