Top-X Example

An example of a Google Top-X Column Chart.

by fkhairzad

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="top_x_div" style="width: 800px; height: 600px;"></div>

JavaScript

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Move', 'Move2', 'Percentage'],
          ["A", 'B', 44],
          ["A", 'B', 31],
          ["A", 'B', 12],
          ["A", 'B', 10],
          ["A", 'B', 3]
        ]);

        var options = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'Chess opening moves',
            subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'bottom', } // Top x-axis.
            }
          },
          "bar": { "groupWidth": "95%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };