Making a Gauge Chart

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 ]

Soil Temperature

Air Temperature




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?

Leave a Reply

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