Top-X Example

An example of a Google Top-X Column Chart.

by Robert Tome

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: 500px;"></div>

JavaScript

// google charts : "classic" column chart example
google.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.arrayToDataTable([
        ['Move', 'Percentage'],
        ["King's pawn (e4)", 44],
        ["Queen's pawn (d4)", 31],
        ["Knight to King 3 (Nf3)", 12],
        ["Queen's bishop pawn (c4)", 10],
        ['Other', 3]
    ]);
    
    var options = {
        title: 'Chess opening moves',
        backgroundColor: 'cyan',
        width: 900,
        legend: {
            position: 'none'
        },
        chart: {
            subtitle: 'popularity by percentage'
        },
        axes: {
            x: {
                0: {
                    side: 'top',
                    label: 'White to move'
                } // Top x-axis.
            }
        },
        bar: {
            groupWidth: "90%"
        }
    };
    
    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));
};