Seguro que alguna vez en tu aplicación web has necesitado hacer algún gráfico interactivo con los datos de tu base de datos (con las herramientas que existen en la actualidad es un delito hacer el gráfico en excel y pegarlo en tu web).
Hoy voy a enseñarte como hacer eso de una forma muy simple y rápida. Hay varias herramientas web que nos permiten hacer esta tarea. Yo en mi trabajo decidí usar la de google que cubre la mayoría de gráficos y es gratis, por ello te voy a explicar como usarla con un pequeño ejemplo de gráfico de columnas.
- <html>
- <head>
- <script type="text/javascript">
- google.load("visualization", "1", {packages:["corechart"]});
- google.setOnLoadCallback(drawChart);
- function drawChart() {
- var data = new google.visualization.DataTable();
- data.addColumn('string', 'Año');
- data.addColumn('number', 'Ventas');
- data.addColumn('number', 'Gastos');
- data.addRows(5);
- data.setValue(0, 0, '2006');
- data.setValue(0, 1, 1000);
- data.setValue(0, 2, 400);
- data.setValue(1, 0, '2007');
- data.setValue(1, 1, 1170);
- data.setValue(1, 2, 460);
- data.setValue(2, 0, '2008');
- data.setValue(2, 1, 660);
- data.setValue(2, 2, 1120);
- data.setValue(3, 0, '2009');
- data.setValue(3, 1, 1030);
- data.setValue(3, 2, 540);
- data.setValue(4, 0, '2010');
- data.setValue(4, 1, 1130);
- data.setValue(4, 2, 640);
-
- var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
- chart.draw(data, {width: 480, height: 240, title: 'Rendimiento de la Empresa',
- hAxis: {title: 'Año', titleTextStyle: {color: 'red'}}
- });
- }
-
- </script>
- </head>
-
- <body>
- </body>
- </html>
Una vez leído el código de arriba, podrás ver que es muy simple y metódico. Añades el link a la API, defines las barras con su leyenda y tipo de dato que va a llevar la tabla, pones el número de columnas e insertas los datos.
Pero esto no es todo, lo más seguro (y te lo digo por experiencia) es que necesites una imagen estática de esa gráfica. Bien para insertarla en un informe en pdf o porque haya gente que use internet explorer 6 o derivador, con lo cual el gráfico interactivo que hemos hecho no se va a ver. Google también tiene otra API para esto, un poco mas “cutre” y mas enrevesada, pero a cambio nos proporciona un wizard que nos crea el “código” online.
Me he tomado la molestia de hacer la gráfica con este wizard y el resultado (el código) es este:
- <img src="http://chart.apis.google.com/chart?chxl=0:|2006|2007|2008|2009|2010&chxr=0,100,1300|1,100,1300&chxt=x,y&chbh=a,0,20&chs=480x240&cht=bvg&chco=3366CC,C70000&chds=100,1300,100,1300&chd=t:1000,1170,660,1030,1130|400,460,1120,540,640&chdl=Ventas|Gastos&chtt=Rendimiento+de+la+empresa" width="480" height="240" alt="Rendimiento de la empresa" />
Espero que con esto ya no tengas problemas en crear tu propios gráficos con los datos que necesites. En la próxima entrada te enseñare a guardar la imagen que nos da google de nuestro gráfico mediante cURL y a cargar el gráfico interactivo por AJAX.
Por último añado un par de links que un amigo me recomendó que pusiera en el blog en los artículos sobre programación web:
| Demo | Download |
![]() |
![]() |





