Gráficos de Google: sintaxis de configuración

En este capítulo, mostraremos la configuración necesaria para dibujar un gráfico utilizando la API de Google Chart.

Paso 1: crear una página HTML

Cree una página HTML con las bibliotecas de Google Chart.

googlecharts_configuration.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
   </body>
</html>

aquí containerdiv se utiliza para contener el gráfico dibujado con la biblioteca de Google Chart. Aquí estamos cargando la última versión de la API corecharts usando el método google.charts.load.

Paso 2: crear configuraciones

La biblioteca de Google Chart usa configuraciones muy simples usando la sintaxis json.

// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);

Aquí los datos representan los datos json y las opciones representan la configuración que utiliza la biblioteca de Google Chart para dibujar un gráfico dentro del contenedor div usando el método draw (). Ahora configuraremos los diversos parámetros para crear la cadena json requerida.

título

Configure las opciones del gráfico.

// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
   'width':550,
   'height':400};

Tabla de datos

Configure los datos que se mostrarán en el gráfico. DataTable es una colección estructurada de tabla especial que contiene los datos del gráfico. Las columnas de la tabla de datos representan las leyendas y las filas representan los datos correspondientes. El método addColumn () se usa para agregar una columna donde el primer parámetro representa el tipo de datos y el segundo parámetro representa la leyenda. El método addRows () se usa para agregar filas en consecuencia.

// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
   ['Firefox', 45.0],
   ['IE', 26.8],
   ['Chrome', 12.8],
   ['Safari', 8.5],
   ['Opera', 6.2],
   ['Others', 0.7]
]);

Paso 3: Dibuja el gráfico

// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);

Ejemplo

A continuación se muestra el ejemplo completo:

googlecharts_configuration.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Browser');
            data.addColumn('number', 'Percentage');
            data.addRows([
               ['Firefox', 45.0],
               ['IE', 26.8],
               ['Chrome', 12.8],
               ['Safari', 8.5],
               ['Opera', 6.2],
               ['Others', 0.7]
            ]);
               
            // Set chart options
            var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};

            // Instantiate and draw the chart.
            var chart = new google.visualization.PieChart(document.getElementById ('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

El siguiente código llama a la función drawChart para dibujar el gráfico cuando la biblioteca de Google Chart se carga por completo.

google.charts.setOnLoadCallback(drawChart);

Resultado

Verifique el resultado.

↰ Previous page Next page ↱