Top-X Example

An example of a Google Top-X Bar Chart.

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="top_x_div" style="width: 900px; height: 400px; border: 1px solid #ccc; padding: 5px"></div>

JavaScript

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Program', 'Time Seconds (lower is better)'],
          ["scc", 7.811],
          ["scc (no complexity)", 7.069],
          ["scc (duplicates check)", 13.587],
          ["tokei", 13.363],
          //["loc", 22.363],
          //["gocloc", 32.664],
        ]);

        var options = {
          title: 'Benchmark - Redis',
          width: 900,
          legend: { position: 'none' },
          chart: { title: 'Benchmark Windows - Linux Kernel' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top', label: 'Time Seconds (lower is better)'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        chart.draw(data, options);
      };