ZingChart jQuery AJAX Demo

A quick example of how to use the ZingChart jQuery Wrapper with AJAX for asynchronous charting.

by ZingChart Library

HTML

<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<h3>Loadin' up some AJAX data!&nbsp;</h3>
<div id="myChart"></div>
<button type="button">Load AJAX Data</button>
<a href="https://api.myjson.com/bins/530az" target="_blank">(Click here to see the raw JSON)</a>
<a id="docs" target="_blank" href='http://www.github.com/PINT/ZingChart-jQuery'>Check out our documentation on GitHub!</a>

CSS

body {
    font-family:Helvetica;
    padding:20px;
}
h3 {
    text-align:center;
}
#myChart {
    width:100%;
    height:300px;
    margin-bottom:20px;
}
a {
    color:#00BAF0;
    text-decoration:none;
    font-size:12px;
}
#docs {
    display:block;
    margin-top:20px;
    background-color:#00BAF0;
    color:#FFF;
    font-size:18px;
    padding:10px 20px;
    text-decoration:none;
    text-align:center;
}

JavaScript

// Data for the chart
var myData = {
    type: "line",
    plot:{
        aspect:"spline"
    },
    series: [
        {
            values: [3,4,10,2,6,5]
        }
    ]
};

// Make your chart
$("#myChart").zingchart({
    data: myData
});

// Bind a click event to the button
$("button").click(function(){
    
    // Issue a get request
    $.get( 'https://api.myjson.com/bins/530az', function() {})
    
    // Upon a successful get request...
    // (notice we haven't even touched the ZingChart API yet)
    .done(function(res){
        
        // Store the new data in a variable (totally optional)
        var newData = res.data;
        
        // Set the series values equal to the newData
        $("#myChart").setSeriesValues({
            "values": [newData]
        });
        
        // Tada! Your chart just used AJAX data. Begin the disco.
    });
});