Formatting Google Charts axes - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

  1. HOME
  2. Javascript
  3. Google Chart
  4. Chart Configuration

Description

Formatting Google Charts axes

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Top-X Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> 
      <div id="top_x_div" style="width: 900px; height: 500px;"></div> 
      <script type="text/javascript">
      google.setOnLoadCallback(drawStuff);
        function drawStuff() {//from w  ww  .j  ava 2 s. co m
        var data = new google.visualization.arrayToDataTable([
            ['Move', 'Percentage'],
          ["King's pawn (e4)", 4400000000],
          ["Queen's pawn (d4)", 3100000000],
          ["Knight to King 3 (Nf3)", 1200000000],
          ["Queen's bishop pawn (c4)", 200000000],
          ['Other', 100000000]
        ]);
        var ranges = data.getColumnRange(1);
        function byteFormatter(options) {
            var log1024 = Math.log(1024);
            this.scaleSuffix = [
                "B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"
            ];
            this.formatValue = function ( value ) {
                var scale = Math.floor(Math.log(value)/log1024);
                var scaleSuffix = this.scaleSuffix[scale];
                var scaledValue = value / Math.pow(1024, scale);
                return Math.round( scaledValue * 100 ) / 100 + " " + scaleSuffix;
            };
            this.format = function( dt, c ) {
                var rows = dt.getNumberOfRows();
                for ( var r = 0; r < rows; ++r ) {
                    var v = dt.getValue(r,c);
                    var fv = this.formatValue(v);
                    dt.setFormattedValue(r,c,fv);
                }
            };
        }
        var formatter = new byteFormatter();
        formatter.format(data,1);
        var max = ranges.max * 1;
        var options = {
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: { subtitle: 'popularity by percentage' },
          allowHtml: true,
            vAxis: {
                ticks: [
                    { v:0 },
                    { v:max*0.2, f:formatter.formatValue(max*0.2) },
                    { v:max*0.4, f:formatter.formatValue(max*0.4) },
                    { v:max*0.6, f:formatter.formatValue(max*0.6) },
                    { v:max*0.8, f:formatter.formatValue(max*0.8) },
                    { v:max, f:formatter.formatValue(max) }
                ]
            },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            },
          },
          bar: { groupWidth: "90%" }
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('top_x_div'));
        chart.draw(data, options);
      };

      </script>  
   </body>
</html>

Related Tutorials