Chart.js e jQuery: caricare dati JSON in un grafico

Pubblicato il 29 Settembre 2016

Chart.js è un’ottima libreria JavaScript per la creazione di grafici, una delle mie preferite. Open source, responsive, 8 tipi di grafico e una vasta gamma di opzioni che ne fanno una libreria utile per qualsiasi rappresentazione statistica su web e mobile.

Nel seguente esempio ti mostro come caricare dati JSON in un grafico, utilizzando il metodo getJSON di jQuery:

var data = [];

$.getJSON("http://example_api", function( json ) {
	
    var myChart = document.getElementById("canvas").getContext("2d");
	
    var jsonData =
    {
        value: json.response,
        color:"#20B2AA",
	highlight: "#79D1CC",
	label: "Stats"
    };
	
    data.push(jsonData);

    var pieChart = new Chart(myChart).Pie(data,{
        responsive: true
    });

});

Autore: emawebdesign

Full Stack Developer, SEO Specialist, esperto della trasformazione digitale con oltre 20 anni di esperienza.

Pubblicato in: