NorfiPC
NorfiPC » Códigos » Chart.js

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



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.

Páginas relacionadas



Sígueme en las redes sociales


Página de este sitio que te sugiero hoy
 
Inicio | Mapa del sitio | Buscar | Sobre mí