Top-X Example

An example of a Google Top-X Bar Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
       <div id="top_x_div" style="width: 900px; height: 300px;"></div>

JavaScript

google.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Opening Move', 'Percentage'],
          ["King's pawn (e4)", 24]
        ]);

        var options = {
          title: 'Chess opening moves',
          width: 600,
          legend: { position: 'none' },
          chart: { title: 'Chess opening moves',
                   subtitle: 'popularity by percentage' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top', label: 'Percentage'}, // Top x-axis.
            }
          },
          hAxis: {
              viewWindow: {
                  max: 200
              },
              ticks: [0,50,100]
          },
          bar: { groupWidth: "90%" }
        };
        
        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        chart.draw(data, options);
      };