Number Format Presets Example

A demonstration of the number format presets.

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <select id="format-select">
      <option value="">none</option>
      <option value="decimal" selected>decimal</option>
      <option value="scientific">scientific</option>
      <option value="percent">percent</option>
      <option value="currency">currency</option>
      <option value="short">short</option>
      <option value="long">long</option>
    </select>
    <div id="number_format_chart">

JavaScript

google.charts.load('current', {packages:['corechart']});
      google.charts.setOnLoadCallback(drawStuff);

        function drawStuff() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Country');
          data.addColumn('number', 'GDP');
          data.addColumn('number', 'Country 2');

          data.addRows([
            ['US', 16768100,0.4],
            ['China', 9181204,0.9],
            ['Japan', 4898532,0.2],
            ['Germany', 3730261,0.4],
            ['France', 2678455,0.6]
          ]);

         var options = {
           title: 'GDP of selected countries, in US $millions',
           width: 500,
           height: 300,
           legend: 'none',
           bar: {groupWidth: '95%'},
           series:{
           0:{targetAxisIndex: 0},
           1:{targetAxisIndex: 1,format:'percent'}
           },
           vAxis: {
           	0:{ gridlines: 
            		{ count: 5 }
             },
            1:{ gridlines:
            	{count : 5}
            }
            }
         }

         var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
         chart.draw(data, options);

         document.getElementById('format-select').onchange = function() {
         
           options['vAxis']['format'] = this.value;
          
           chart.draw(data, options);
         };
      };