Column Chart Example

An example of a Google Column Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<select id="galaxy-dropdown"></select>
<div id="tooltip_div" style="width: 900px; height: 500px;"></div>

JavaScript

google.setOnLoadCallback(drawStuff);

function populateSelect(data, column) {
    var select = document.getElementById('galaxy-dropdown');
    var values = data.getDistinctValues(column);
    for (var i = 0; i < values.length; i++) {
        var option = document.createElement('option');
        option.value = values[i];
        option.textContent = values[i];
        select.appendChild(option);
    }
}

function drawStuff() {

    var data = new google.visualization.arrayToDataTable([
        ['Category', 'Galaxy', 'V1', {
            label: 'T1',
            role: 'tooltip'
        }, 'V2', {
            label: 'T2',
            role: 'tooltip'
        }],
        ['G1', 'Ursa Major II Dwarf', 30000, 14.3, 30000, 14.3],
        ['G2', 'Lg. Magellanic Cloud', 50000, 0.9, 50000, 0.9],
        ['G2', 'Bootes I', 60000, 13.1, 60000, 13.1],
        ['G2', 'Canis Major Dwarf', 8000, 23.3, 8000, 23.3],
        ['G3', 'Sagittarius Dwarf', 24000, 4.5, 24000, 4.5]
    ]);

    var options = {
        width: 900,
        chart: {
            title: 'Tooltip Demo',
            subtitle: 'every data column having a tooltip of its own'
        }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_div'));

    var selectValueChanged = function () {
        var value = document.getElementById('galaxy-dropdown').value;
        var view = new google.visualization.DataView(data);
        view.setColumns([1, 2, 3, 4, 5]);
        view.setRows(data.getFilteredRows([{
            column: 0,
            value: value
        }]));
        chart.draw(view, options);
    };


    document.getElementById('galaxy-dropdown').onchange = selectValueChanged;
    populateSelect(data, 0);
    selectValueChanged(); // Also draws the chart.


};