NorfiPC
NorfiPC » Códigos » Crear gráficos con Chart.js

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


Compartir en Google Compartir en Facebook Compartir en Twitter Pinear imágenes en Pinterest
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 solo es necesario subir a nuestro servidor un pequeño script del mismo nombre "Chart.js".
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 emplearlos 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.



Como mostrar gráficos con Chart.js


Usar Chart.js es algo sencillo, solo debemos insertar un script que haga referencia al script, un contenedor DIV en el lugar exacto donde necesitamos mostrar el gráfico y un código con los datos.
Por ejemplo para mostrar un gráfico circular con solo dos datos, seria de la siguiente forma:

Podemos usar distintos tipos de gráficos, como barras, columnas, circular, anillo, líneas, radial y otros, además personalizarlos completamente.
Los gráficos pueden ser adaptables o sea reducir 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 dos de los que se insertan en esta página.



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


Los dos primeros gráficos, circular y de anillo usan la misma serie de datos, que son los correspondientes a las estadísticas de los navegadores usados para acceder a este sitio web en el momento de crear esta página.
El tercero es un gráfico de barras y el cuarto es uno de líneas, estos dos usan la misma serie de datos.
También son adaptables, es decir se adaptan al ancho de la pantalla del dispositivo.




Descargar Chart.js


Los archivos y toda la información para usar Chart.js de forma elemental y avanzada se puede descargar gratis desde Github
La información está en inglés, por eso detallamos en esta página como utilizarlo.



Ejemplos para descargar de gráficos usando Chart.js


En el siguiente enlace se puede descargar gratis un archivo HTML para ver los gráficos que se muestran en esta página, pero que funciona offline, sin conexión.
Se incluye el archivo Chart.js que puedes usar en tus proyectos.
El código de la página se puede modificar fácilmente e introducir tus propios datos.







Páginas relacionadas



Síguenos en las redes sociales


Norfi Carrodeguas en Google+ Trucos de NorfiPC en Facebook @NorfiPC en Twitter NorfiPC en Pinterest

Buscar en este sitio

 
Inicio | Mapa del sitio | Sobre mí | RSS