norfipc.com
Códigos   Mapa del sitio   Informatica
NorfiPC » Códigos » Chart.js

Como crear e insertar gráficos con Chart.js en páginas web


Actualizado: 17 de noviembre del 2022
Por: Norfi Carrodeguas
Ejemplos de diagramas y graficas de barras, columnas, circulares, anillos, líneas y radiales insertados en esta página que funcionan offline. Archivos para descargar gratis y los códigos necesarios para mostrarlos en las páginas de internet.
Como crear e insertar gráficos con Chart.js en páginas web
Los gráficos son elementos muy útiles en las páginas web, cuando se necesita mostrar de forma visual y hacer más comprensibles los datos y la información.
Además las hacen mucho más vistosas y atractivas.
Los que publicamos en internet siempre andamos buscando el modo de agregarle elementos a nuestras páginas que las hagan más funcionales, siempre cuando no atenten contra su rendimiento.


Mostrar gráficos en las páginas web usando Chart.js


Chart.js es una solución para mostrar gráficos de forma sencilla.
En otro artículo indicamos como usar para este mismo propósito la API de Google Charts, pero Chart.js es totalmente diferente, más sencilla y además es software libre.
Con Google Charts se cargan desde los servidores de Google los archivos necesarios para mostrar los gráficos.
Con Chart.js tenemos dos opciones: descargar el archivo que incluye la librería "Chart.js" desde Github y subirla a nuestro servidor o cargarla desde un servicio en la red.
En este artículo mostramos como usarlo y agregamos algunos ejemplos prácticos.


Usar los gráficos de Chart.js offline sin conexión


Una de las ventajas de usar Chart.js es que podemos usar la librería en archivos HTML que funcionan offline sin conexión a internet.
De esa forma podemos crear gráficos para mostrarlos en presentaciones o en documentos que funcionan en cualquier computadora con cualquier sistema operativo, sin requisito alguno, solo que dispongan de un navegador web.
Más abajo se puede descargar un archivo HTML de ejemplo para ejecutarlo y reproducir el grafico que incluye.


Comparacion de navegadores usando Chart.js


Como mostrar gráficos con Chart.js


Usar Chart.js es algo sencillo, solo debemos cargar el script, crear un elemento canvas donde deseamos mostrar el grafico y agregar unas líneas de código con las instrucciones.
En el siguiente código se muestra como crear un grafico en forma de anillo, que muestra una comparación con el uso de los principales navegadores web.
Los datos no son nada exactos, es solo un ejemplo.
 <canvas id="myChart"></canvas>
<script src="chart.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'doughnut',
    data:{
	datasets: [{
		data: [60,18,10, 8, 4],
		backgroundColor: ['#42a5f5', 'red', 'green','blue','violet'],
		label: 'Comparacion de navegadores'}],
		labels: ['Google Chrome','Safari','Edge','Firefox','Opera']},
    options: {responsive: true}
});
</script>
Con Chart.js podemos usar distintos tipos de gráficos, como barras, columnas, circular, anillo, líneas, radial y otros, además personalizarlos completamente.
Los gráficos son adaptables o sea reducen su tamaño el cargar la página en un dispositivo con una pantalla pequeña como una tableta o teléfono celular.
Se puede comprobar con los que se insertan en esta página.
Mostramos el código en esta página usando el tema Sons of Obsidian de Prettify, un proyecto para resaltar el código en páginas web, disponible gratis en Github.
Lee más información detallada: Crear snipetts adaptables para mostrar código fuente en las páginas


Ejemplos de gráficos en esta página usando Chart.js


Gráfico de barras con Chart.js


Gráfico de líneas con Chart.js



Descargar Chart.js


En el sitio web de Chart.js se puede encontrar toda la documentación y ejemplos prácticos.
La librería Chart.js se puede descargar desde la página del proyecto en Github.
El script de la versión 2.8 se puede cargar directamente desde la siguiente dirección: https://cdn.jsdelivr.net/


Archivo HTML para usar Chart.js offline


Comparto a continuación con los interesados en esta funcionalidad, el código para crear un archivo HTML, con gráficos insertados, que puede funcionar offline.
Solo es necesario dos pasos:
1- Obtén la librería de Chart.js.
Para eso carga en el navegador la siguiente dirección desde el servicio en que se hospeda: Chart,js
Guarda el archivo Chart.js en tu equipo.
2- Copia el siguiente código y pégalo en un documento de texto creado con el Bloc de notas y renómbralo como "grafico.html"
3- Sitúa los dos archivos en la misma carpeta o directorio y abre grafico.html con el navegador.
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chart.js</title>
</head>
<body>
<h1>Chart.js</h1>
<h4>Comparacion de navegadores</h4>
<canvas id="myChart"></canvas>
<br>
<h4>Gráfico de barras</h4>
<canvas id="myChart1"></canvas>
<br>
<h4>Gráfico de líneas</h4>
<canvas id="myChart2"></canvas>
<br>
<script src="chart.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        datasets: [{
            label: 'Ingresos',
            backgroundColor: '#42a5f5',
            borderColor: 'gray',
            data: [7, 8, 5, 2, 8, 10, 7,-7,4,9,-8,5]
        },{
            label: 'Gastos',
            backgroundColor: '#ffab91',
            borderColor: 'yellow',
            data: [5, -8, 10, 3,-7,6,8,-2,-6,9,-7,2]
        }		
		]},
    options: {responsive: true}
});
var ctx1 = document.getElementById('myChart1').getContext('2d');
var chart = new Chart(ctx1, {
    type: 'line',
    data: {
        labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        datasets: [{
            label: 'Ganancias',
            backgroundColor: '#42a5f5',
            borderColor: 'gray',
            data: [7, 8, 5, 2, 8, 10, 7,-7,4,9,-8,5]
        }		
		]},
    options: {}
});
var ctx2 = document.getElementById('myChart2').getContext('2d');
var chart = new Chart(ctx2, {
    type: 'doughnut',
    data: 	
	{
				datasets: [{
					 data: [60,18,10, 8, 4],
					backgroundColor: ['#42a5f5', 'red', 'green','blue','violet'],
					label: 'Comparacion de navegadores'
				}],
				labels: [
					'Google Chrome',
					'Safari',
					'Edge',
					'Firefox',
					'Opera'
				]},
    options: {}
});
</script>
</body>
</html>    
El código se puede modificar libremente e ir probando diferentes parámetros.
Si vamos a probar el archivo HTML online, no necesitamos descargar el archivo Chart.js, solo enlazarlo.

Crear gráficos inline de forma sencilla


Varios servicios de internet facilitan crear gráficos de forma sencilla, solo introduciendo los datos. Entre ellos sobresale CreateaChartOnline
Este servicio permite crear sin registrarse, distintos tipos de gráficos en formato de líneas, barras, áreas, circular, de anillo y otros.
Solo se necesita seleccionar el tipo de grafico e introducir los datos manualmente.
El grafico resultante se puede exportar en formato de imagen PNG o insertarlo en una web como un enlace o en base64.
https://www.createachartonline.com/

Páginas relacionadas



Sobre el autor:

Norfi Carrodeguas es el fundador y webmaster del sitio web Norfipc, creado en el año 2010. Norfi es un ingeniero informático y desarrollador web cubano. Con más de 14 años de experiencia en la publicación en internet, comparte su tiempo con su consultoría SEO. Más información sobre el autor.

Comparta esta página
Facebook
Twitter

Sígueme en las redes sociales


Norfipc en Facebook Norfipc en Twitter Canales RSS con las últimas publicaciones

 
Inicio | Mapa del sitio | Buscar | Sobre mí