JQuery AJAX Call

Shows how to make AJAX call in JS Fiddle with Google Chart

by Joel Lubrano

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<div id="chart_div"></div>

JavaScript

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

function drawChart(rows)
{
    var dt = new google.visualization.DataTable();

    dt.addColumn('string', 'Year');
    dt.addColumn('number', 'Balance');
    dt.addRows(rows);
    
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    
    chart.draw(dt);
}

function makeAjaxCall()
{
    // Note: The data in this case must be the result data in order for the JS Fiddle
    //       AJAX API to function properly.  In reality, the server would return JSON data
    //       and data might be user input parameters.
    var data = {
        json: JSON.stringify([['2014', 100],['2015', 110]])
    };
    $.ajax({
        type: "POST",
        data: data,
        url: '/echo/json/',
        success: function(json) {
            drawChart(json);
        },
        error: function(jxqhr) {
            alert("There was an error");
            console.log(jxqhr);
        }
    });
}