Google Charts con jQuery Ajax

Si estás trabajando en un proyecto con estadísticas, necesitas un sistema para gráficas enriquecido para, lógicamente, mostrar los resultados. Google nos brinda una serie de herramientas para gráficas que puedes implementar en tu sitio web de manera muy simple. En este tutorial te explicaremos cómo implementar Google Charts con datos JSON mediante jQuery Ajax en tu proyecto. Esta herramienta posee muchos gráficos interactivos y herramientas para mostrar datos, por eso, gasta un poco de tu tiempo en aprender cómo funciona esta fabulosa herramienta.

Javascript

En esta parte del código puedes reemplazar la url de la API. Para este tutorial hemos cogido de ejemplo la densidad de población del mismo. Aquí tienes el código Javascript para conectar con la API y mostrar los gráficos.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script src="ajaxGetPost.js" ></script>
<script src="https://www.google.com/jsapi"></script>
<script>
$(document).ready(function () 
{
url='world-population-density.json'; // API URL
ajax_data('GET',url, function(data)
{
charts(data,"ColumnChart"); // Column Charts
charts(data,"PieChart"); // Pie Charts
charts(data,"BarChart"); // Bar Charts
charts(data,"GeoChart"); // Geo Charts
});
});
</script>

Google Charts

Aquí el objeto data referencia al resultado obtenido en formato JSON

function charts(data,ChartType)
{
var c=ChartType;
var jsonData=data;
google.load("visualization", "1", {packages:["corechart"], callback: drawVisualization});
function drawVisualization() 
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Population Density');
$.each(jsonData, function(i,jsonData)
{
var value=jsonData.value;
var name=jsonData.name;
data.addRows([ [name, value]]);
});

var options = {
title : "Word Population Density",
animation:{ 
duration: 3000, 
easing: 'out', 
startup: true
},
colorAxis: {colors: ['#54C492', '#cc0000']},
datalessRegionColor: '#dedede',
defaultColor: '#dedede'
};

var chart;
if(c=="ColumnChart") // Column Charts
chart=new google.visualization.ColumnChart(document.getElementById('chart_div'));
else if(c=="PieChart") // Pie Charts
chart=new google.visualization.PieChart(document.getElementById('piechart_div'));
else if(c=="BarChart") // Bar Charts
chart=new google.visualization.BarChart(document.getElementById('bar_div'));
else if(c=="GeoChart") // Geo Charts
chart=new google.visualization.GeoChart(document.getElementById('regions_div'));

chart.draw(data, options);
}
}

Código HTML

Los gráficos se mostrarán basándose en el id del div

<div id="chart_div"></div>
<div id="regions_div" ></div>
<div id="piechart_div" ></div>
<div id="bar_div" ></div>

JSON

Ejemplo de densidad de población mundial en formato JSON

[
{
"code": "GB",
"value": 257,
"name": "United Kingdom"
},
{
"code": "US",
"value": 34,
"name": "United States"
},
{
"code": "IN",
"value": 394,
"name": "India"
},
{
"code": "CN",
"value": 143,
"name": "China"
},
{
"code": "BR",
"value": 23,
"name": "Brazil"
},
{
"code": "WA",
"value": 152,
"name": "Qatar"
},
.............
.............
]

Opciones de los gráficos

Mediante la herramienta de Google Charts puedes personalizar tus estadísticas al más alto nivel. Desde el color de los gráficos, los tiles, vista 3D...

var options = {
title : "Word Population Density",
is3D: true, //Pie Charts
colors : ['#54C492','#f96302' ], //Bar of Pie Charts
animation:{ 
duration: 3000, 
easing: 'out', 
startup: true
},
vAxis: {title: "Vertical Axis Title"}, //Bar of Pie Charts
hAxis: {title: "Horizontal Axis Title "}, //Bar of Pie Charts
colorAxis: {colors: ['#54C492', '#cc0000']}, //Geo Charts
datalessRegionColor: '#dedede', //Geo Charts
defaultColor: '#dedede' //Geo Charts
};

ajax_data.js

Método jQuery ajax para uso común

function ajax_data(type, url, success)
{
$.ajax({
type:type,
url:url,
dataType:"json",
cache:false,
timeout:20000,
beforeSend :function(data) { },
success:function(data){
success.call(this, data);
},
error:function(data){
alert("Error In Connecting");
}
});
}

Y mediante estos códigos serás capaz de mostrar gráficos basándote en datos JSON, como has visto, de manera sencillo y súper rápida. Ya solo queda que los integres en tus proyectos de manera satisfactoria y que nos comentas qué tal te ha ido.

Fuente: 9lessons.info