Top-X Example

An example of a Google Top-X Column Chart.

by Beengie

HTML

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

JavaScript

function drawMargin() {
        var data = new google.visualization.arrayToDataTable([
          ['Sale', 'Margin'],
          ['Sale', 1.06]]);var options = {
          width: 200,
          legend: { position: 'none' },
          axes: {
            x: {
              0: { side: 'top', label: 'Margin'} // Top x-axis.
            }
          },
          bar: { groupWidth: '90%' }
        };var chart = new google.charts.Bar(document.getElementById('columnchart_Margin'));
                // Convert the Classic options to Material options.
                chart.draw(data, google.charts.Bar.convertOptions(options));
                    }
                google.setOnLoadCallback(drawMargin);