Google Charts
En PHP hay varias librerías para crear gráficas con datos dinámicos pero nos sorprende la completa y sencillísima librería de Google Chart.
Google Charts ofrece una forma perfecta para visualizar los datos en su sitio web. De los gráficos de líneas simples a los mapas de árboles jerárquicos complejos, la librería gráfica ofrece un gran número de tipos de gráficos y listas para su uso.
La forma más común para usar Google Charts es con JavaScript simple incrustado en tu página web.
Las gráficas son expuestas como clases de JavaScript, y Google Charts proporciona muchos tipos de gráficos para su uso. La apariencia por defecto suele ser todo lo que necesitas, y siempre se puede personalizar un gráfico para adaptarse a la apariencia de tu sitio web. Los gráficos son muy interactivos y exponen los acontecimientos que te permiten conectar para crear cuadros de mando complejos u otras experiencias integradas en su página web. Los gráficos se representan mediante la tecnología HTML5 / SVG para proporcionar compatibilidad entre navegadores (incluyendo VML para versiones anteriores de IE) y la portabilidad multiplataforma para iPhones, iPads y Android.
Tampoco es necesario ser un experto en JavaScript para implementar este tipo de gráficas en su página Web. Es muy fácil implementarlo.
Lo primero que necesitarás es incrustar la librería Javascript de Google dentro de la etiqueta <head> de tu página. Lo puedes invocar directamente desde Google:
O descargar el código fuente de:
https://www.google.com/jsapi
En el <body> de tu página tendrás que añadir el div o contendor que contedrá la gráfica:
Y ahora solo queda ver el código Javascript principal que hace todo el trabajo. Esto lo pondríamos antes de la etiqueta de cierre </body>:
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawSales);
function drawSales() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Euros');
data.addRows([
[new Date(2015, 0), 78],
[new Date(2015, 1), 98],
[new Date(2015, 2), 125],
[new Date(2015, 3), 45],
[new Date(2015, 4), 50],
[new Date(2015, 5), 148],
[new Date(2015, 6), 278]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
hAxis: {
title: 'Meses'
},
vAxis: {
title: 'Ventas'
},
width: 980,
height: 450,
timeline: {
groupByRowLabel: true
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>Todos los tipos de gráficos se rellenan con los datos que utilizan la clase DataTable, por lo que es fácil cambiar entre tipos de gráficos a medida que experimenta buscando la apariencia ideal. El DataTable proporciona métodos para clasificar, modificar y filtrado de datos, y se puede rellenar directamente desde su página web, una base de datos, o cualquier proveedor de datos que soporte el protocolo de origen de datos Herramientas de gráficos.
Ver documentación completa para crear gráficas con Google Chart
Autor
¿Buscas trabajo de programador?
4 respuestas a “Google Charts”
Deja una respuesta
4 artículos que te podrían interesar
Ver más sobre
Hola les consulto como se pueden ingresar los datos para realizar los gráficos desde una hoja de Google sheet ?
Y no sea un ingreso manual como esta en el ejemplo.
Gracias
Hola Luis,
Lo que comentas se puede pero dependiendo del lenguaje de programación que utilices del lado del servidor se hará de una forma u otra. Yo he llegado a hacerlo con PHP.
Las variables PHP se pueden incrustar en el código JavaScript.
También he conseguido hacerlo con Smarty y Twig
Saludos
Que tal, buen día, me gustaría saber si me puede indicar como puedo poner una gráfica dentro de una celda de un data table de acuerdo con los datos de una tabla en mysql.
Gracias de antemano por su tiempo.
Saludos.
Dejaremos la cuestión abierta por si alguien sabe como hacerlo.