Google Charts: Area Chart Ejemplo Simple

This entry is part 2 of 2 in the series Google Charts API

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.

google-chart-2

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.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

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.

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

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.
      function drawChart() {
        // 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);
      }

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.


<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.

Series Navigation<< Google Charts: Introduccion a la Visualizacion de Datos, Graficas, Mapas y Mas

Posted by Agustin Ramos

Soy un apasionado desarrollador de software, ingeniero, creativo, geek, me gusta crear proyectos open source, y dar cursos sobre programacion, soy fundador de InFlask Solutions una empresa donde vendo licencias comerciales de mi software.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.