CODEWITHSUNDEEP
javascriptchartsgoogle-visualizationgauge
gaccerboni
gaccerboni

Reputation: 57

How can I format Google Chart Gauge with decimal % on min, max?

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);
  }

Upvotes: 3

Views: 1272

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

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>

Upvotes: 5

Related Questions