Cómo Dibujar Gráficas de Barra Usando JavaScript y Canvas HTML5

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

En un tutorial anterior cubrimos cómo dibujar una gráfica de pastel o dona usando el canvas HTML5. En este tutorial te mostraré cómo usar JavaScript y el canvas de HTML5 como un modo de mostrar gráficamente datos usando gráficas de barras.

Hay maneras más sencillas para crear gráficas que codificar una desde cero, por ejemplo esta completa librería de graficación desde CodeCanyon.

Infographic charts and graphics HTML tags library — Librería de Gráficas Infográficas desde CodeCanyon

Pero si quieres saber qué toma crear una librería como esta, este tutorial es para ti.

¿Qué Es una Gráfica de Barra?

Las gráficas de barra son herramientas muy comunes usadas para representar datos numéricos. Desde reportes financieros hasta presentaciones PowerPoint hasta infografías, las gráficas de barra son usadas muy frecuentemente ya que ofrecen una vista de datos numéricos que es muy sencilla de entender.

Las gráficas de barra representan datos numéricos usando barras, las cuáles son rectángulos con sus anchos y altos proporcionales a los datos numéricos que representan.

Hay muchos tipos de gráficas de barras:

gráficas de barra horizontal y gráficas de barra vertical dependiendo de la orientación de la gráfica
gráficas de barras apiladas o gráficas de barra clásicas para representar múltiples series de datos
gráficas de barra 2D o 3D
etc.

¿Cuáles Son los Componentes de una Gráfica de Barra?

Echemos un vistazo a los componentes que conforman una gráfica de barra independientemente de su tipo:

Los datos de la gráfica: estos son conjuntos de números y categorías asociadas que las cuáles son representadas por la gráfica.
Nombre de la serie de datos (1)
La cuadrícula de gráfica (2): dando un sistema de referencia para que la representación visual pueda ser entendida fácilmente.
Las barras (3): rectángulos rellenos de color con dimensiones proporcionales a los datos representados.
Leyenda de gráfica (4): muestra la correspondencia entre los colores usados y los datos que representan.

Ahora que conocemos los componentes de una gráfica de barra, veamos cómo podemos escribir el código JavaScript para dibujar una gráfica como esta.

Dibujando la Gráfica de Barra Usando JavaScript

Configurando el Proyecto JS

Para comenzar a dibujar usando JavaScript y el canvas HTML5, necesitaremos configurar nuestro proyecto como esto:

Crea una carpeta para contener los archivos del proyecto; nombremos a esta carpeta bar-chart-tutorial.
Dentro de la carpeta de proyecto, crea un archivo y nómbralo index.html. Este contendrá nuestro código HTML.
También dentro de la carpeta de proyecto, crea un archivo y nómbralo script.js. Este contendrá el código JavaScript para dibujar la gráfica de barra.

Mantendremos las cosas bastante sencillas y agregaremos el siguiente código dentro de index.html:

<html>
<body>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

Tenemos el elemento <canvas> con el ID myCanvas para que podamos referenciarlo en nuestro código JS. Después cargamos el código JS vía la etiqueta <script>.

Agrega el siguiente código en el archivo script.js:

var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 300;
myCanvas.height = 300;
 
var ctx = myCanvas.getContext("2d");

Esto obtiene una referencia al elemento canvas y después establece el ancho y alto a 300px. Para dibujar sobre el canvas, solo necesitamos una referencia a su contexto 2D, el cuál contiene todos los métodos de dibujo.

Agregando unas Cuántas Funciones de Ayuda

Dibujar la gráfica de barra solo requiere saber cómo dibujar dos elementos:

dibujar una línea: para dibujar las líneas de la cuadrícula
dibujar un rectángulo con color de relleno: para dibujar las barras de la gráfica

Creemos las funciones JS de ayuda para estos dos elementos. Agregaremos las funciones en nuestro archivo script.js.

function drawLine(ctx, startX, startY, endX, endY,color){
    ctx.save();
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.stroke();
    ctx.restore();
}

La función drawLine toma seis parámetros:

ctx: referencia al contexto de dibujo
startX: la coordenada X del punto de inicio de la línea
startY: la coordenada Y del punto de inicio de la línea
endX: la coordenada X del punto final de la línea
endY: la coordenada Y del punto final de la línea
color: el color de la línea

Estamos modificando los ajustes de color para el strokeStyle. Esto determina el color usado para dibujar la línea. Usamos ctx.save() y ctx.restore() de manera que no afectamos los colores usados fuera de esta función.

Dibujamos la línea llamando a beginPath(). Esto informa al contexto de dibujo que estamos comenzando a dibujar algo nuevo sobre el canvas. Usamos moveTo() para establecer el punto de inicio, llamaos a lineTo() para indicar el punto final, y después hacemos el dibujo llamando a stroke().

Otra función de ayuda que necesitamos es una función para dibujar una barra---la cuál es un rectángulo con color de relleno. Agreguémoslo a script.js:

function drawBar(ctx, upperLeftCornerX, upperLeftCornerY, width, height,color){
    ctx.save();
    ctx.fillStyle=color;
    ctx.fillRect(upperLeftCornerX,upperLeftCornerY,width,height);
    ctx.restore();
}

La función drawBar toma seis parámetros:

ctx: referencia al contexto de dibujo
upperLeftCornerX: la coordenada X de la esquina superior izquierda de la barra
upperLeftCornerY: la coordenada Y de la esquina superior izquierda de la barra
width: el ancho de la barra
height: la altura de la barra
color: el color de la barra

El Modelo de Datos de la Gráfica de Barra

Ahora que tenemos las funciones de ayuda en posición, continuemos al modelo de datos de la gráfica. Todos los tipos de gráfica, incluyendo gráficas de barra, tienen un modelo de datos detrás de ellas. El modelo de datos es un conjunto estructurado de datos numéricos. Para este tutorial usaremos una serie de datos de categorías y sus valores numéricos asociados representando el número de discos de acetato en mi colección de discos agrupados por género musical:

Música clásica: 10
Rock alternativo: 14
Pop: 2
Jazz: 12

Podemos representar esto en JavaScript en la forma de un objeto. Agreguemos este a nuestro archivo script.js:

var myVinyls = {
    "Classical music": 10,
    "Alternative rock": 14,
    "Pop": 2,
    "Jazz": 12
};

Implementando el Componente de Gráfica de Barra

Implementemos el componente que hará el dibujo de nuestra gráfica de barra. Haremos esto agregando el siguiente objeto JavaScript a nuestro archivo script.js:

var Barchart = function(options){
    this.options = options;
    this.canvas = options.canvas;
    this.ctx = this.canvas.getContext("2d");
    this.colors = options.colors;
 
    this.draw = function(){
        var maxValue = 0;
        for (var categ in this.options.data){
            maxValue = Math.max(maxValue,this.options.data[categ]);
        }
        var canvasActualHeight = this.canvas.height - this.options.padding * 2;
        var canvasActualWidth = this.canvas.width - this.options.padding * 2;

        //drawing the grid lines
        var gridValue = 0;
        while (gridValue <= maxValue){
            var gridY = canvasActualHeight * (1 - gridValue/maxValue) + this.options.padding;
            drawLine(
                this.ctx,
                0,
                gridY,
                this.canvas.width,
                gridY,
                this.options.gridColor
            );
            
            //writing grid markers
            this.ctx.save();
            this.ctx.fillStyle = this.options.gridColor;
            this.ctx.font = "bold 10px Arial";
            this.ctx.fillText(gridValue, 10,gridY - 2);
            this.ctx.restore();

            gridValue+=this.options.gridScale;
        }
 
        //drawing the bars
        var barIndex = 0;
        var numberOfBars = Object.keys(this.options.data).length;
        var barSize = (canvasActualWidth)/numberOfBars;

        for (categ in this.options.data){
            var val = this.options.data[categ];
            var barHeight = Math.round( canvasActualHeight * val/maxValue) ;
            drawBar(
                this.ctx,
                this.options.padding + barIndex * barSize,
                this.canvas.height - barHeight - this.options.padding,
                barSize,
                barHeight,
                this.colors[barIndex%this.colors.length]
            );

            barIndex++;
        }
 
    }
}

La clase comienza almacenando las options pasadas como parámetros. Esta almacena la referencia canvas y crea un contexto de dibujo también almacenado como un miembro de clase. Después almacena el arreglo colors pasado como opciones.

La siguiente parte es la más consistente, la función draw(). Esta dibujará la gráfica dibujando primero las líneas de cuadrícula, los marcadores de cuadrícula y después las barras usando los parámetros pasados vía el objeto options.

Viendo la función draw(), podemos ver que primero calculamos el valor máximo para nuestro modelo de datos. Necesitamos este número porque necesitamos escalar todas las barras de acuerdo a este valor y de acuerdo al tamaño del canvas. De otro modo, nuestras barras podrían salir del área de visión, y no queremos eso.

Las variables canvasActualHeight y canvasActualWidth almacenan la altura y anchura del canvas ajustado usando el valor del padding pasado vía options. La variable padding indica el número de pixeles entre el borde del canvas y la gráfica dentro.

Entonces dibujamos las líneas de cuadrícula de la gráfica. La variable options.gridScale establece el paso usado para dibujar las líneas. Así que un gridScale de 10 significará dibujar líneas de cuadrícula cada 10 unidades.

Para dibujar las líneas de cuadrícula, usamos la función de ayuda drawLine(); para el color de las líneas de cuadrícula, lo tomamos de la variable options.gridColor. Por favor nota que las coordenadas del canvas comienzan desde 0,0 en la esquina superior izquierda y se incrementan hacia la derecha y abajo, mientras que nuestros valores de cuadrícula se incrementan en valor desde el fondo hacia arriba. Es por esto que usamos 1 - gridValue/maxValue en la formula calculando el valor gridY.

Para cada línea de cuadrícula, también dibujamos el valor de la línea de cuadrícula dos pixeles arriba de la línea de cuadrícula (es por eso que tenemos gridY - 2 para las coordenadas Y del texto).

Después dibujamos las barras usando la función de ayuda drawBar(). Las matemáticas para calcular el alto y ancho de cada barra son bastante sencillas; estas toman en cuenta el padding y el valor y color para cada categoría en el modelo de datos de la gráfica.

Usando el Componente de Gráfica de Barra

Ahora veamos cómo usar la clase Barchart implementada arriba. Necesitamos instanciar la clase y llamar la función draw(). Agrega el siguiente código al archivo script.js:

var myBarchart = new Barchart(
    {
        canvas:myCanvas,
        padding:10,
        gridScale:5,
        gridColor:"#eeeeee",
        data:myVinyls,
        colors:["#a55ca5","#67b6c7", "#bccd7a","#eb9743"]
    }
);
myBarchart.draw();

El código crea una nueva instancia de la clase Barchart con las opciones requeridas. Cargar el index.html en un navegador debería producir un resultado como este:

Agregando el Nombre de Serie de Datos y Leyenda de Gráfica

Para agregar el nombre de la serie de datos debajo de la gráfica, necesitamos agregar el siguiente código en el archivo script.js después del for-loop que dibuja la barra:

        ...
        //drawing series name
        this.ctx.save();
        this.ctx.textBaseline="bottom";
        this.ctx.textAlign="center";
        this.ctx.fillStyle = "#000000";
        this.ctx.font = "bold 14px Arial";
        this.ctx.fillText(this.options.seriesName, this.canvas.width/2,this.canvas.height);
        this.ctx.restore();  
        ...

También necesitamos cambiar la manera en que llamamos al componente Barchart de este modo:

var myBarchart = new Barchart(
    {
        canvas:myCanvas,
        seriesName:"Vinyl records",
        padding:20,
        gridScale:5,
        gridColor:"#eeeeee",
        data:myVinyls,
        colors:["#a55ca5","#67b6c7", "#bccd7a","#eb9743"]
    }
);
myBarchart.draw();

Y aquí está cómo luce el resultado:

Para agregar la leyenda, primero necesitamos modificar index.html para que luzca así:

<html>
<body>
    <canvas id="myCanvas" style="background: white;"></canvas>
    <legend for="myCanvas"></legend>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

La etiqueta leyenda será usada como un contenedor para la leyenda de la gráfica. El atributo for enlaza la leyenda al canvas conteniendo la gráfica. Ahora necesitamos agregar el código que crea la leyenda. Haremos esto en el archivo index.js después del código que dibuja el nombre de la serie de datos. El código identifica la etiqueta legend correspondiente a la gráfica, y agregará la lista de categorías desde el modelo de datos de la gráfica junto con el color correspondiente. El archivo index.js resultante lucirá como esto:

var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 300;
myCanvas.height = 300;
  
var ctx = myCanvas.getContext("2d");

function drawLine(ctx, startX, startY, endX, endY,color){
    ctx.save();
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.stroke();
    ctx.restore();
}

function drawBar(ctx, upperLeftCornerX, upperLeftCornerY, width, height,color){
    ctx.save();
    ctx.fillStyle=color;
    ctx.fillRect(upperLeftCornerX,upperLeftCornerY,width,height);
    ctx.restore();
}

var myVinyls = {
    "Classical music": 10,
    "Alternative rock": 14,
    "Pop": 2,
    "Jazz": 12
};

var Barchart = function(options){
    this.options = options;
    this.canvas = options.canvas;
    this.ctx = this.canvas.getContext("2d");
    this.colors = options.colors;
 
    this.draw = function(){
        var maxValue = 0;
        for (var categ in this.options.data){
            maxValue = Math.max(maxValue,this.options.data[categ]);
        }
        var canvasActualHeight = this.canvas.height - this.options.padding * 2;
        var canvasActualWidth = this.canvas.width - this.options.padding * 2;

        //drawing the grid lines
        var gridValue = 0;
        while (gridValue <= maxValue){
            var gridY = canvasActualHeight * (1 - gridValue/maxValue) + this.options.padding;
            drawLine(
                this.ctx,
                0,
                gridY,
                this.canvas.width,
                gridY,
                this.options.gridColor
            );
            
            //writing grid markers
            this.ctx.save();
            this.ctx.fillStyle = this.options.gridColor;
            this.ctx.textBaseline="bottom"; 
            this.ctx.font = "bold 10px Arial";
            this.ctx.fillText(gridValue, 10,gridY - 2);
            this.ctx.restore();

            gridValue+=this.options.gridScale;
        }      
 
        //drawing the bars
        var barIndex = 0;
        var numberOfBars = Object.keys(this.options.data).length;
        var barSize = (canvasActualWidth)/numberOfBars;

        for (categ in this.options.data){
            var val = this.options.data[categ];
            var barHeight = Math.round( canvasActualHeight * val/maxValue) ;
            drawBar(
                this.ctx,
                this.options.padding + barIndex * barSize,
                this.canvas.height - barHeight - this.options.padding,
                barSize,
                barHeight,
                this.colors[barIndex%this.colors.length]
            );

            barIndex++;
        }

        //drawing series name
        this.ctx.save();
        this.ctx.textBaseline="bottom";
        this.ctx.textAlign="center";
        this.ctx.fillStyle = "#000000";
        this.ctx.font = "bold 14px Arial";
        this.ctx.fillText(this.options.seriesName, this.canvas.width/2,this.canvas.height);
        this.ctx.restore();  
        
        //draw legend
        barIndex = 0;
        var legend = document.querySelector("legend[for='myCanvas']");
        var ul = document.createElement("ul");
        legend.append(ul);
        for (categ in this.options.data){
            var li = document.createElement("li");
            li.style.listStyle = "none";
            li.style.borderLeft = "20px solid "+this.colors[barIndex%this.colors.length];
            li.style.padding = "5px";
            li.textContent = categ;
            ul.append(li);
            barIndex++;
        }
    }
}


var myBarchart = new Barchart(
    {
        canvas:myCanvas,
        seriesName:"Vinyl records",
        padding:20,
        gridScale:5,
        gridColor:"#eeeeee",
        data:myVinyls,
        colors:["#a55ca5","#67b6c7", "#bccd7a","#eb9743"]
    }
);

Lo que producirá un resultado final que luce como esto:

Felicidades

Hemos visto que dibujar gráficas usando el canvas HTML5 de hecho no es tan difícil. Solo requiere un poco de matemáticas y un poco de conocimiento JavaScript. Ahora tienes todo lo que necesitas para dibujar tus propias gráficas de barra.

Si quieres una solución rápida y sencilla para crear no solo gráficas de barra, sino montones de otros tipos de gráficas, puedes descargar la Librería de Etiquetas HTML de Gráficas e Infografías o su contraparte de complemento WordPress Diseñador Visual de Gráficas WordPress.