Search code examples
javascriptchartsgoogle-visualizationgauge

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

Solution

  • 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>