Google Charts API with AJAX Callback

by mikeys4u

HTML

<script src="https://www.google.com/jsapi?sensor=false&amp;dummy=.js"></script>
<div id="contr_graph" style="width: 900px; height: 500px;"></div>

CSS

body {
    font-family: Helvetica, Sans, Arial;
}
p, ul {
    padding: 10px;
}
ul {
    margin: 5px;
    border: 2px dashed #999;
}

JavaScript

// Load the Visualization API and the linechart package.

google.load('visualization', '1', {
    'packages': ['corechart']
});

var options = {
    title: 'T pikkuse ja vahe graafik (viimane 60 min)',
    backgroundColor: '#fdf3e9',
    colors: ['#FF7F00', '#437C17'],
    curveType: 'function',
    enableInteractivity: true,
    legend: {
        position: 'bottom'
    },
    vAxis: {
        direction: -1
    },
    hAxis: {
        direction: -1
    },
    chartArea: {
        width: '85%'
    }
};

function drawChart() {
    var jsonData = $.ajax({
        url: "/echo/json/",
        dataType: "json",
        success: function(response) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Minutit tagasi');
            data.addColumn('number', 'T pikkus');
            data.addColumn('number', 'T vahe pikkus');
            
            var jsonData = "[['2012-11-18', 33, 2], ['2012-11-19', 162, 11], ['2012-11-20', 140, 13]]";
            var jsonArray = [['2012-11-18', 33, 2], ['2012-11-19', 162, 11], ['2012-11-20', 140, 13]];
            data.addRows(jsonArray);
            var chart = new google.visualization.LineChart(document.getElementById('contr_graph'));
            chart.draw(data, options);
        }
    });
}

google.setOnLoadCallback(drawChart);