Crear gráficos usando Node.js

Esta guía le enseñará cómo usar la biblioteca de gráficos Node.js para producir gráficos impresionantes.

Ya existen numerosas bibliotecas para crear representaciones visuales de datos debido a la facilidad de uso y el diseño sencillo de billboard.js.

Descripción general de billboard.js

Las listas de Billboard inspiraron el nombre de la biblioteca de listas conocida como billboard.js. El billboard.js es un marco de gráfico de interfaz avanzado, reutilizable y estéticamente agradable construido sobre D3 v4+.

Es un paquete JavaScript que permite a los desarrolladores generar inmediatamente un gráfico para ver los datos.

Requisitos previos para billboard.js

Necesitaremos lo siguiente para utilizar la biblioteca billboard.js:

1. Se debe instalar en el sistema Node.js versión 10 o posterior y npm versiones 5.2 o posterior.
2. Se requiere una comprensión fundamental de HTML, JavaScript y cómo trabajar con bibliotecas.

Usando uno de los CDN, no necesitaremos instalar la biblioteca billboard.js para utilizarlo. Podemos usar npm para instalar la biblioteca billboard.js.

1. Navegue por el terminal hasta la ubicación donde guardamos nuestros archivos de proyecto.
2. Ejecutar el siguiente comando generará los archivos package.json y package.lock.json requeridos por Node.js para administrar bibliotecas de terceros utilizadas por los proyectos Node.js.

$ npm init

$ npm install billboard.js

Ejemplo para implementar un gráfico usando Node.js

El siguiente fragmento de código generará un gráfico de barras con dos valores de datos, Waqar's Gold y Sam's Silver.

1. gráfico.html

   En la plantilla chart.html, crea un div con el id barChart_1 y colócalo dentro de la etiqueta body.

   <!-- Load D3.js -->
   <script src="https://d3js.org/d3.v4.min.js"></script>
   
   <!-- Load billboard.js with style -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/1.4.1/billboard.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/1.4.1/billboard.css">
   
   <div id="barChart_1"></div>
   

2. gráfico.js

   En este ejemplo, las entradas suministradas a bb.generate() hacen que construya un gráfico.

   var chart = bb.generate();
   

   La variable, conocida como datos, almacena un objeto que contiene toda la información necesaria para generar el gráfico.

   data: {columns: [
            ['Waqar\'s Gold', 10, 20, 30, 40, 50, 60],
            ['Sam\'s Silver', 130, 100, 140, 200, 150, 50]
          ],
   

   El término "tipo" denota el tipo particular de gráfico que se utilizará. En nuestro ejemplo, solíamos crear un gráfico de barras.

   type: 'bar'
   }
   , bar: {width: {ratio: 0.1}}
   

   El bindto: "#barChart_1" almacena el div id en nuestro archivo HTML correspondiente a la ubicación donde se mostrará el gráfico.

   bindto: '#barChart_1';
   

Código fuente completo:

gráfico.html:

<div id="barChart_1"></div>

gráfico.js:

var chart = bb.generate({
  data: {
    columns: [
      ['Waqar\'s Gold', 10, 20, 30, 40, 50, 60],
      ['Sam\'s Silver', 130, 100, 140, 200, 150, 50],
    ],
    type: 'bar',
  },
  bar: {
    width: {
      ratio: 0.1,
    },
  },
  bindto: '#barChart_1',
});

Producción: