Las muchas formas de obtener datos en los gráficos | Programar Plus ▷ Tutoriales

Los datos están disponibles en todas partes hoy en día, ya sea en un archivo de texto sin formato, una API REST, una hoja de Google en línea… ¡lo que sea! Es esa variedad de contexto lo que hace que la creación de gráficos sea más que simplemente tener una base de datos en su proyecto local: donde hay datos, hay una manera.

Eso es más o menos lo que vamos a ver en esta publicación: hacer visualizaciones de datos de JavaScript utilizando datos de una variedad de fuentes.

Si desea seguir y realizar cualquiera de las visualizaciones que estamos cubriendo aquí, usaremos Chart.js, así que tome eso e inclúyalo en su propio entorno:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

Fuente 1: tabla de datos HTML

Montones y montones de sitios web tienen tablas de datos, y ¿por qué no? Son una excelente manera de mostrar datos y para eso fueron creados. Pero, si pudiera tener una visualización impulsada por los datos que contiene, y sin mucho más esfuerzo, ¿no sería aún mejor?

Con un poco de JavaScript, los datos de una tabla HTML pueden aislarse del HTML y prepararse para un gráfico. Observa la siguiente tabla de datos:

Año	Cosas vendidas	Facturación ($)	Beneficio ($)
2016	10	200	89
2017	25	550	225
2018	55	1200	600
2019	120	2450	1100

Contiene datos de ventas de una empresa. Ahora, si pudiéramos graficar esto, sería visualmente convincente y ayudaría a los usuarios a obtener información. ¡Hagamoslo!

En primer lugar, definamos una función para nuestro gráfico. Esto viene directamente de la biblioteca Chart.js, por lo que vale la pena hacer una referencia cruzada de esto con la documentación si algo parece poco claro. He agregado algunos comentarios para señalar partes clave.

function BuildChart(labels, values, chartTitle) {
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels, // Our labels
      datasets: [{
        label: chartTitle, // Name the series
        data: values, // Our values
        backgroundColor: [ // Specify custom colors
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [ // Add custom color borders
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1 // Specify bar border width
      }]
    },
    options: {
      responsive: true, // Instruct chart js to respond nicely.
      maintainAspectRatio: false, // Add to prevent default behavior of full-width/height 
    }
  });
  return myChart;
}

Ahora que tenemos una función para crear un gráfico para los datos de la tabla, escribamos el HTML para la tabla y agreguemos un elemento de lienzo que Chart.js puede usar para inyectar su magia de gráficos. Estos son exactamente los mismos datos del ejemplo de la tabla anterior.

<table class="table" id="dataTable">
  <thead>
    <th>Year</th>
    <th>Items Sold</th>
    <th>Turnover ($)</th>
    <th>Profit ($)</th>
  </thead>
  <tbody>
    <tr>
      <td>2016</td>
      <td>10</td>
      <td>200</td>
      <td>89</td>
    </tr>
    <tr>
      <td>2017</td>
      <td>25</td>
      <td>550</td>
      <td>225</td>
    </tr>
    <tr>
      <td>2018</td>
      <td>55</td>
      <td>1200</td>
      <td>600</td>
    </tr>
    <tr>
      <td>2019</td>
      <td>120</td>
      <td>2450</td>
      <td>1100</td>
    </tr>
  </tbody>
</table>

<div class="chart">
  <canvas id="myChart"></canvas>
</div>

Luego, necesitamos analizar la tabla en JSON con JavaScript estándar. Esto es lo que usará Chart.js para completar los cuadros y gráficos.

var table = document.getElementById('dataTable');
var json = []]; // First row needs to be headers 
var headers =[];
for (var i = 0; i < table.rows[0].cells.length; i++) {
  headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
}

// Go through cells 
for (var i = 1; i < table.rows.length; i++) {
  var tableRow = table.rows[i];
  var rowData = {};
  for (var j = 0; j < tableRow.cells.length; j++) {
    rowData[headers[j]] = tableRow.cells[j].innerHTML;
  }

  json.push(rowData);
}

console.log(json);

Lanzamos esa última línea para que podamos verificar el resultado en la consola de DevTools. Esto es lo que se registra en la consola:

¡Perfecto! Nuestros encabezados de tabla se convierten en variables y se asignan al contenido de las celdas de la tabla.

Todo lo que queda por hacer es asignar las etiquetas de año y los valores de los artículos vendidos a la matriz (que Chart.js requiere para su objeto de datos) y luego pasar los datos a la función de gráfico.

Este script asigna los valores JSON a una matriz de años. Podemos añadirlo directamente después de la función anterior.

// Map JSON values back to label array
var labels = json.map(function (e) {
  return e.year;
});
console.log(labels); // ["2016", "2017", "2018", "2019"]

// Map JSON values back to values array
var values = json.map(function (e) {
  return e.itemssold;
});
console.log(values); // ["10", "25", "55", "120"]

Llama a BuildChart función de nuestro primer fragmento (incluido un nombre para el gráfico) y obtenemos una hermosa visualización de los datos de la tabla HTML.

var chart = BuildChart(labels, values, "Items Sold Over Time");

¡Y eso es todo! Los datos de los gráficos ahora se han aislado y pasado a la visualización de JavaScript y se han renderizado.

ver la pluma
Gráfico de barras cargado desde una tabla HTML por Danny Englishby (@DanEnglishby)
en CodePen.

Fuente 2: una API en tiempo real

Hay muchas, muchas API públicas disponibles en el mundo, muchas de las cuales son ricas en datos útiles y ordenados. Usemos uno de ellos para demostrar cómo se pueden usar los datos en tiempo real para completar un gráfico. Voy a utilizar la API de la Lista enriquecida de Forbes 400 para representar gráficamente a las 10 personas más ricas del mundo. Lo sé, genial, ¿eh? Siempre encuentro interesantes las clasificaciones de riqueza, y hay muchos más datos que proporciona esta API. ¡Pero por ahora, solicitaremos datos para mostrar un gráfico con nombres y valor neto en tiempo real usando JavaScript puro!

En primer lugar, queremos volver a definir una función de gráfico, esta vez con algunas opciones más.

function BuildChart(labels, values, chartTitle) {
  var data = {
    labels: labels,
    datasets: [{
      label: chartTitle, // Name the series
      data: values,
      backgroundColor: ['rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
      ],
    }],
  };
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: {
      responsive: true, // Instruct chart JS to respond nicely.
      maintainAspectRatio: false, // Add to prevent default behavior of full-width/height 
      scales: {
        xAxes: [{
          scaleLabel: {
            display: true,
            labelString: '$ Billion'
          }
        }],
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Name'
          }
        }]
      },
    }
  });
  return myChart;
}

A continuación, necesitaremos el mismo elemento de lienzo HTML para el lugar donde se representará el gráfico:

<div class="chart" style="position: relative; height:80vh; width:100vw">
  <canvas id="myChart"></canvas>
</div>

Ahora para obtener algunos datos en tiempo real. Veamos qué se devuelve en la consola desde la llamada a la API de Forbes:

Como puede ver por el JSON devuelto, hay mucha información valiosa que se puede inyectar en un gráfico. Entonces, ¡hagamos nuestras clasificaciones!

Con un poco de JavaScript ligero, podemos solicitar los datos de la API, seleccionar y asignar los valores que pasamos a las variables de matriz y, finalmente, pasar nuestros datos y representar el gráfico.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    var json = JSON.parse(this.response);
    // Map JSON labels  back to values array
    var labels = json.map(function (e) {
      return e.name;
    });
    // Map JSON values back to values array
    var values = json.map(function (e) {
      return (e.realTimeWorth / 1000); // Divide to billions in units of ten
    });
    BuildChart(labels, values, "Real Time Net Worth"); // Pass in data and call the chart
  }
};
xhttp.open("GET", "https://forbes400.herokuapp.com/api/forbes400?limit=10", false);
xhttp.send();

ver la pluma
Gráfico cargado desde RichListAPI por Danny Englishby (@DanEnglishby)
en CodePen.

Fuente 3: una hoja de Google

Hasta ahora, hemos analizado datos en tablas HTML estándar y API para completar gráficos. Pero, ¿qué pasa si ya tenemos una Hoja de cálculo de Google existente que contiene una gran cantidad de datos? Bueno, ¡también podemos usar eso para hacer un gráfico!

Primero, hay algunas reglas para acceder a una hoja de cálculo de Google:

La Hoja de Google debe estar publicada
La hoja de cálculo de Google debe ser pública (es decir, no debe estar configurada para visualización privada)

Siempre que estos dos puntos sean ciertos, podemos acceder a una hoja de cálculo de Google en forma de JSON, lo que significa, por supuesto, que podemos graficarla.

Aquí hay una hoja de cálculo de Google con algunos datos inventados que he publicado públicamente. Consta de tres campos de datos: MachineId, Date y ProductsProduced.

Ahora, si tenemos la URL de la hoja, querremos anotar todo después de la última barra:

https://docs.google.com/spreadsheets/d/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg

Esta es la hoja de identidad y lo que necesitamos para la GET solicitud que enviamos a Google. Hacer un GET solicitud de JSON, insertamos esa cadena en la URL en otra URL:

https://spreadsheets.google.com/feeds/list/[ID GOES HERE]/od6/public/full?alt=json

Eso nos da la siguiente URL:

https://spreadsheets.google.com/feeds/list/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg/od6/public/full?alt=json

Y aquí está la respuesta que obtenemos en la consola:

La pieza importante es la feed.entry matriz de objetos Esto contiene datos vitales de la hoja, que se ven así cuando los profundizamos:

Observe los elementos subrayados en rojo. La API de Hojas de cálculo de Google ha precedido a cada uno de los nombres de columna con gsx$ (p.ej gsx$date). Así es exactamente como diseccionaremos los datos del objeto, utilizando estos nombres generados de forma única. Entonces, sabiendo esto, es hora de insertar los datos en algunos arreglos aislados y pasarlos a nuestra función de gráfico.

function BuildChart(labels, values, chartTitle) {
  var data = {
    labels: labels,
    datasets: [{
      label: chartTitle, // Name the series
      data: values,
      backgroundColor: ['rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
        'rgb(54, 162, 235)',
      ],
    }],
  };

  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
      responsive: true, // Instruct chart js to respond nicely.
      maintainAspectRatio: false, // Add to prevent default behavior of full-width/height 
      scales: {
        xAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Date'
          }
        }],
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Produced Count'
          }
        }]
      },
    }
  });

  return myChart;
}

Y, lo adivinaste, el siguiente es el elemento Canvas:

<div class="chart" style="position: relative; height:80vh; width:100vw">
  <canvas id="myChart"></canvas>
</div>

…entonces la GET request, mapeando nuestra matriz de etiquetas y valores y finalmente llamando al gráfico pasando los datos.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var json = JSON.parse(this.response);
    console.log(json);

  // Map JSON labels  back to values array
  var labels = json.feed.entry.map(function (e) {
    return e.gsx$date.$t;
  });
      
  // Map JSON values back to values array
  var values = json.feed.entry.map(function (e) {
    return e.gsx$productsproduced.$t;
  });

  BuildChart(labels, values, "Production Data");
  }
};
xhttp.open("GET", "https://spreadsheets.google.com/feeds/list/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg/od6/public/full?alt=json", false);
xhttp.send();

¡Y bum!

ver la pluma
Gráfico cargado desde una hoja de Google por Danny Englishby (@DanEnglishby)
en CodePen.

¿Qué harás con los datos?

Probablemente entienda que hay una variedad de formas en que podemos obtener datos para completar cuadros y gráficos atractivos. Mientras tengamos algunos números formateados y una biblioteca de visualización de datos, entonces tenemos muchos poderes al alcance de la mano.

¡Esperemos que ahora esté pensando en dónde podría tener datos y cómo conectarlos a un gráfico! Ni siquiera cubrimos todas las posibilidades aquí. Aquí hay algunos recursos más que puede usar ahora que tiene habilidades para hacer gráficos.

Algunas bibliotecas de gráficos más

Gráfico.js
NVD3 (para D3.js)
amCharts
CanvasJS

Algunos lugares más para almacenar datos

Mesa de aire
Noción
Trello

(Visited 24 times, 1 visits today)