Google Chart API Sample

Google Chart API Sample

HTML

<script src="https://www.google.com/jsapi"></script>
<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"></div>

JavaScript

// google material bar chart sample
google.load('visualization', '1.1', {
    packages: ['bar']
});

function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.arrayToDataTable([
        ['Opening 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',
        chartArea:{backgroundColor:"red"},
        width: 900,
        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.
            }
        },
        bar: {
            groupWidth: "90%"
        },
    };

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

}

google.setOnLoadCallback(drawVisualization);