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