What part of the code controls the size of the gauge in the tile? I want to add a little more padding to @kampto tiles - someone in-between these and the original tile from @James
The size of the ‘chart’ div is what dictates the size of the gauge. So you would want to adjust the size / position of that div:
I think there was a minor typo in the original css – a trailing ; at the end of the html, body {} declaration. Something like the following would reduce the gauge to 80% of the original size and vertically and horizontally center it:
<style>
html, body { height: 100%; width: 100%; margin: 0; }
#chart {
height: 80%;
width: 80%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
</style>
Hi All, I’m very new to this so don’t chastise me.
I’m trying to change the colours on the tile gauge as I want to use them for temperature. I’m not having much success as I’m probably putting in the wrong code. Can someone help?
Thanks
The only colors I have been able to get to work are red, orange, green and blue. For blue you need to trick it by changing the color with HEX code as shown in your code. There’s also some layering like some color will go over the top of other. Its limited by the “Google” gauge script. If you dont need blue it becomes easier like this
Ok, thanks I’ll have another go at getting the colours correct.
Yes, If you have Hubitat and include the variable into Maker API. Sharptools can grab it into the custom gauge tile.
1 Like
I am looking for some guidance, please.
I am setting up a tile showing my solar battery State of Charge (as a %). I used the 24V battery template for this, changing the Gauge Boundaries as follows:
I.e. the dial should show res from 20 - 40%, Yellow from 40 - 50 etc.
However, the tile ends up looking like this:
The red ends up where the green should be etc.
What am I doing wrong?
Thank you
Your redColor is #109618 which is a greenish color: 
Your greenColor is #DC3912 which is a redish color: 
So you want to swap those values.
redColor: "#DC3912",
greenColor: "#109618",
Those colors are ‘hex’ color values. If you search Google for a hex value it shows a nice little color picker that you could use to find a different color value if you wanted:
1 Like
Much appreciated, thank you.
1 Like
Yeah, these google gauge charts aren’t very flexible so if you want to swap green/red you can trick it by assigning green HEX to Red and vice versa. Or keep red as red.
Another trick is to do something like this which is for my LiFePO4 25.6V battery, red on both sides.
1 Like
Is there a way to change the color of the gauge face, ie black or dark grey instead of white? TIA.
No way to change face or gauge border colors that I could find.
Thank you for you reply.
I get this error message intermittently.
Google visualization Gauge is not a constructor
Any way that i can fix this?
When and where do you see that message? Perhaps a screenshot would help.
Are you using a modified version of the original custom tile from the first post of this thread (by James)? Looking at the original code, it looks like the Gauge constructor is only called from the callback that says that the constructor is available, so I don’t see why that error would occur with the original code.
Hi Josh,
Actually, I’m currently using Kampto’s version of the gauges.
I use the battery and temp gauges to build my Tesla page.
Here are the error messages that I get intermittently. The error messages appear only momentarily but the gauges do not show up. I get it whenever I go to this dashboard and it happens randomly.
(Sorry for the ugly pic)
It looks like each of the gauge related custom tiles call initChart() from within the refresh() method which risks trying to setup the Gauge before the associated library has been loaded. Tagging @kampto for awareness.
1 Like
Hmm, I haven’t seen any issues. Will look at the custom tile code when I get home. Sharptools no longer loads my account while at work on that network!
1 Like
I made a change to the temperature gauge on github. Give it a shot as I can’t reproduce this problem. I go get custom tile red banner errors if my PC goes to sleep with the dashboard open and I wake it up, they clear next time MakerAPI data is polled.
1 Like