How do I remove the value label from a Google Visualizations gauge? - google-visualization

Question

I'm using the Google Visualizations gauge on a page, but it's important that the value its displaying is not shown as a label right below the needle.
I've found two ways of doing this. Once you navigate through the DOM to the gauge widget, and navigating into the SVG pieces, you can either set the textContent element to be an empty string, or you can delete that whole text label entity, entirely.
function removeLabel(widget) {
var gauge_label_parent = widget.getElementsByTagName("g")[1];
var gauge_label = gauge_label_parent.getElementsByTagName("text")[0];
gauge_label.textContent = "";
// Another way of getting rid of the text: remove the element
// gauge_label_parent.removeChild(gauge_label);
}
The problem is: both of those techniques work only on the first time. If I re-draw the gauge with updated values, then the label re-appears, and trying to remove the label element or set textContent="" does nothing.
So, instead of just being able to update the value with:
data.setValue(0, 1, newValue);
chart.draw(data, options);
I have discovered that I have to change the options a little bit, like:
data.setValue(0, 1, newValue);
options.minorTicks = 3; // Change the options somehow
chart.draw(data, options); // Tell gauge to draw that
options.minorTicks = 2; // Change the options back to what they were
chart.draw(data, options); // Draw again
Here's a fiddle to see how it works or doesn't. Set the fixLabel to true or false depending upon whether you want the label problem to be present or not. Keep in mind that the label will (properly) be missing the first time. It re-appears when you update its value.
http://jsfiddle.net/jemenake/72dMt/2/
So, a few questions:
Any idea why it's doing this?
Is there a way to remove the label without having to go through this option-changing business?
Bonus question: Am I unclear about how minorTicks is supposed to work, or is it broken? The docs say that it's supposed to be the number of minor ticks between majors, but setting it to 2 gives me only 1 minor tick, 3 gives me 2, etc. And, if I set it to 0 or 1, I get "Problem parsing d=''" in the console.

Answer 1

Adding to Madthews answer:
To those of you who are trying to remove the label from the Google Gague Chart.
If you add the following code into your page (i have placed it in the header to keep things tidy) then you can set the font size of the Label to whatever you want.
<style>
* {text-rendering: optimizeLegibility; font-size:100%;}
svg g g {font-size:0px;}
</style>
I have been toying around with this for a while now and the top line of the css above is essential otherwise it will not work!

Answer 2

Ok I'll try to answer:
1) Label options are not managed by current API release
https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge
Workaround: try with this CSS
svg g g {
font-size:0px;
}
http://jsfiddle.net/Madthew/72dMt/17/
Above fiddle explains you the meaning of the minorThicks. It's correct that if you set 2 you get 3 "spaces". Minor thicks represent the number of "BLANK" spaces between two major thicks. In the example you will se the perfect matching between your arrow and the thin line representing the minor thick.

Answer 3

Instead of messing with styles, you could just insert the value with a blank formatted field.
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Unitless Indicator', {v:counter, f:''} ]
]);
This also works with addRows.
jsfiddle here: https://jsfiddle.net/08x2m4vo/2/

Answer 4

Use this. This is also labelled by Google.
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['', {v: <Your_own_value_of_the_gauge_meter>, f: ''}],
]);
In place of "<Your_own_value_of_the_gauge_meter>" use your value variable. That's it.

Answer 5

What about this?
['Label', 'Value'],
['', 80]