How do I remove the value from a gauge chart?

1,909 views
Skip to first unread message

Bevan

unread,
Mar 18, 2014, 12:55:41 AM3/18/14
to google-visua...@googlegroups.com
I have a gauge chart that uses a locally sourced variable '@conv'.
Here is the code:
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['', @conv],
]);

var options = {
width: 150, height: 200,
redFrom: 0, redTo: 0.50,
yellowFrom:0.50, yellowTo: 0.59,
minorTicks: 10,
max: 1, greenFrom:0.60,
greenTo:1
};

var chart = new google.visualization.Gauge(document.getElementById('conv_dial'));
chart.draw(data, options);
}
</script>
As you can see, I've taken the Label off by passing an empty value for it: ''. 
The gauge works fine, but it also displays the value in text, right across the bottom of the gauge. As the value is a percentage with 10 decimal places... its really messy.

How do I remove the text from the visualisation? Or format it, even?

Thanks in advance.

Bevan

unread,
Mar 18, 2014, 1:35:32 AM3/18/14
to google-visua...@googlegroups.com
Attached: an image of the current, messy, result.
gauges.JPG

asgallant

unread,
Mar 18, 2014, 3:42:29 PM3/18/14
to google-visua...@googlegroups.com
Set the formatted value of your data to an empty string:

var data = google.visualization.arrayToDataTable([
     ['Label', 'Value'],
     ['', {v: @conv, f: ''}],
]);

Bevan

unread,
Mar 19, 2014, 3:34:27 AM3/19/14
to google-visua...@googlegroups.com
Perfect. Thanks!

Bevan

unread,
Sep 28, 2014, 6:12:42 PM9/28/14
to google-visua...@googlegroups.com
Is there documentation somewhere about this formatting stuff? I now want to have it format as a dollar figure.

Andrew Gallant

unread,
Sep 29, 2014, 7:51:42 PM9/29/14
to google-visua...@googlegroups.com
The easy way to do that is to use a NumberFormatter:

var formatter = new google.visualization.NumberFormat({pattern: '$#.00'});
// format column 1 of DataTable data
formatter.format(data, 1);

Specifying the formatted value of cells when constructing the DataTable is described in the DataTable JSON structure.  The object specification ({v: value, f: formattedValue}) also happens to work with the arrayToDataTable function, but I do not believe it is documented anywhere.

zxtonizx

unread,
May 11, 2016, 6:32:39 AM5/11/16
to Google Visualization API
This also really helped me. Thank you

Andreas Reitberger

unread,
Aug 7, 2019, 6:39:45 AM8/7/19
to Google Visualization API
Is it possible to hide the min and max value in this chart?
Reply all
Reply to author
Forward
0 new messages