I know there is an option like min, max (number type) to configure the values but i would like to know if there is possible to set them like...
0.00% to 100.00%
I know there is possible to do on GoogleSheets graph, but im not sure how to do it on javascript or if its possible.
var formatnumbers = new google.visualization.NumberFormat({
suffix: '%',
fractionDigits: 2
});
formatnumbers.format(data, 1);
That worked for the middle value only.
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['ALCANCE', 80],
['OBJETIVO', 55],
['MEDICOS TOP', 68]
]);
var options = {
width: 600, height: 220,//400,120
redFrom: 0, redTo: 75,
yellowFrom:75, yellowTo: 85,
greenFrom:85 , greenTo:100,
minorTicks: 5,
min:0,
max:100
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
//----------------new--------------//
var formatnumbers = new google.visualization.NumberFormat({
suffix: '%',
fractionDigits: 2
});
formatnumbers.format(data, 1);
//--------------------------------//
chart.draw(data, options);
setInterval(function() {
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 13000);
setInterval(function() {
data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 5000);
setInterval(function() {
data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
chart.draw(data, options);
}, 26000);
}
use the majorTicks
ticks option to add the labels...
majorTicks: ['0.00%', '100.00%'],
see following working snippet...
google.charts.load('current', {
packages: ['gauge']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['ALCANCE', 80],
['OBJETIVO', 55],
['MEDICOS TOP', 68]
]);
var options = {
width: 600, height: 220,//400,120
redFrom: 0, redTo: 75,
yellowFrom:75, yellowTo: 85,
greenFrom:85 , greenTo:100,
minorTicks: 5,
majorTicks: ['0.00%', '100.00%'],
min: 0,
max: 100
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
var formatnumbers = new google.visualization.NumberFormat({
suffix: '%',
fractionDigits: 2
});
formatnumbers.format(data, 1);
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>