Google Charts: Area Chart Ejemplo Simple
La grafica tipo Area o Area Chart es una grafica que visualmente muestra la diferencia de areas respecto a otros valores, veamos un ejemplo simple usando Google Charts.
En este ejemplo simple vamos a crear una grafica con una serie de valores, ejemplificando años/visitas, vamos a empezar.
Vamos a llamar la libreria javascript de Google que renderizara las graficas y otras cosas,la cual definira la variable global google.
[code language=”html”] <script type="text/javascript" src="https://www.google.com/jsapi"></script>[/code]
Ahora configuramos el acceso a las herramientas de visualizacion de graficas y definimos el callback(una funcion que se ejecuta como consecuencia o despues de un evento) para dibujar las graficas.
[code language=”javascript”] google.load("visualization", "1", {packages:["corechart"]});google.setOnLoadCallback(drawChart);
[/code]
Como vemos la funcion drawChart es la que se ejcutara para dibujar la grafica, por lo tanto vamos a escrbir su codigo.
Recordando que estamos usando el paquete “visualization”:
- google.visualization.arrayTiDataTable: funcion que obtiene un array y lo convierte en un objeto tipo google.visualization.DataTable.
- google.visualization.DataTable: clase generica que sirve para almacenar y relacionar valores para ser visualizados en las graficas.
- google.visualization.AreaChart: clase que sirve para renderizar la grafica tipo Area Chart.
// array/objeto con los datos para la grafica
var data = google.visualization.arrayToDataTable([
[‘Year’, ‘Sales’],[‘2013’, 360],[‘2014’, 665],[‘2015’, 228],[‘2016’, 158],[‘2017’, 211],[‘2018’, 170],[‘2019’, 296] ]);
// array de opciones de la grafica
var options = {
title: ‘Visitas’, // titulo de la grafica
hAxis: {title: ‘Year’, titleTextStyle: {color: ‘#333’}},//(y) el eje de altura, titulo y color del texto
vAxis: {minValue: 0} // (x) eje de valores, define el valor minimo
};
// creamos un objeto tipo AreaChart y le asignamos el contexto de un elemento div para que se renderize ahi
var chart = new google.visualization.AreaChart(document.getElementById(‘chart’));
// le cargamos los datos y las opciones
chart.draw(data, options);
}
[/code]
Codigo completo
A continuacion les dejo el codigo completo para que lo copien y peguen(o escriban), lo guarden en un archivo .html y lo ejecuten.
[code language=”html”]<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘Year’, ‘Sales’],[‘2013’, 360],[‘2014’, 665],[‘2015’, 228],[‘2016’, 158],[‘2017’, 211],[‘2018’, 170],[‘2019’, 296]
]);
var options = {
title: ‘Visitas’,
hAxis: {title: ‘Year’, titleTextStyle: {color: ‘#333’}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById(‘chart’));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart" style="width: 100%; height: 500px;"></div>
</body>
</html>
Espero les ayude estas explicaciones y ejemplos.
Saludos.