gráfica

Gráfica con chart.js y Vue.js usando Webpack y NPM - Integración

Usar chart.js con Vue.js, Webpack y NPM

Hoy voy a enseñarte a usar chart.js (librería para crear gráficas en la web) con Vue.js cuando se programa en Webpack con NPM.

Te aviso desde ahora que probablemente esta no sea la manera de vue, es decir, lo haremos como lo haríamos sin usar el framework, pero esto me ha funcionado y te funcionará a ti para no tener tantos problemas al integrar Chart.js con Vue.

Nota: primero te invito a familiarizarte con chart.js, ya que aquí solo te enseñaré a usarlo con Vue a través de webpack con npm.

(más…)

Por parzibyte, hace
Reporte de visitas y visitantes en PHP - Contador de visitas web

PHP – Contador de visitas avanzado con gráficas y reporte

Hace un tiempo te mostré un contador de visitas simple en PHP. Ahora te traigo una versión avanzada que brinda además gráficas y reportes.

Reporte de visitas y visitantes en PHP - Contador de visitas web

Reporte de visitas y visitantes en PHP – Contador de visitas web

Como bien sabes, anteriormente hicimos un script para contar los visitantes y visitas, pero fue algo muy simple y no contaba con total precisión.

En el sistema que te mostraré ahora se van a contar las visitas y visitantes, además de mostrar una gráfica con la cantidad de visitas y visitantes que se hayan tenido en un período.

Del mismo modo se van a mostrar las páginas más vistas según determinada fecha, y del mismo modo vamos a ver cómo han visitado determinada página en un rango de fechas.

Todo el sistema que te presentaré es gratuito y open source, así que a través del post colocaré el código fuente.

(más…)

Por parzibyte, hace
AJAX, PHP y Chart.js para crear gráficas en la web

Gráficas con chart.js, AJAX y PHP

En este post sobre la creación de gráficas (de línea, barras, pastel, etcétera) usando la librería Chart.js te enseñaré cómo crear una gráfica con datos traídos con AJAX.

AJAX, PHP y Chart.js para crear gráficas en la web

AJAX, PHP y Chart.js para crear gráficas en la web

El lado del servidor estará escrito en PHP aunque estos datos pueden ser traídos desde cualquier API o endpoint. Así que básicamente lo que haremos es:

  1. En nuestro servidor mostrar los datos de la gráfica como JSON.
  2. Dentro del lado del cliente hacer una llamada AJAX al servidor y esperar la respuesta.
  3. Finalmente igualmente dentro del cliente crear la gráfica con Chart.js con los datos traídos con AJAX.

Esto que te muestro es un ejemplo, pero antes de leerlo te recomendaría ver el tutorial de Chart.js para ver más opciones de gráficas y entender los conceptos.

(más…)

Por parzibyte, hace
Gráfica creada con PHP

Crear gráfica con PHP y Chart.js

En este post te mostraré cómo crear gráficas en la web (gráficas de barras, de línea, circulares) usando el lenguaje PHP y la librería chart.js.

Estrictamente hablando, no vamos a usar el lenguaje en sí para crear la gráfica, sino que vamos a usar PHP para pasar los valores a JavaScript y luego dejar que éste último renderice la gráfica usando Chart.js

De hecho esto es como una combinación entre el post de cómo pasar variables de PHP a JavaScript y el tutorial de Chart.js.

(más…)

Por parzibyte, hace
Gráfica de línea con varios dataset usando chart.js - Tutorial con ejemplos

Chart.js – Tutorial con ejemplos para gráficas en la web

En este post te voy a mostrar un tutorial de chart.js para el manejo de gráficas en la web. Ya llevo bastante tiempo usando esta librería pero hasta ahora es que escribiré esta introducción con varios ejemplos acerca de esta maravillosa librería.

Lo único que necesitas para el tutorial son conocimientos básicos de JavaScript y HTML, aunque igual si estás aprendiendo puede que esto lo refuerce.

(más…)

Por parzibyte, hace

Monitorear temperatura con PHP, DHT22 y ESP8266

Hoy te mostraré cómo medir y guardar la temperatura y humedad del ambiente usando PHP, MySQL, un sensor de temperatura DHT22 y una tarjeta NodeMCU ESP8266. Lo que te voy a mostrar es un proyecto con estos componentes que te menciono, aunque siempre eres libre de reemplazarlos.

Al final vamos a tener un programa en donde la temperatura y humedad se van a registrar cada 30 segundos en una tabla de MySQL. Después vamos a tener una gráfica de línea en donde se mostrará la temperatura y humedad a lo largo del tiempo, por un rango de fechas.

El proceso va a ser sencillo. Primero vamos a programar la tarjeta para que lea el sensor cada determinado tiempo y envíe la humedad y temperatura a nuestro servidor con PHP.

Luego vamos a crear una aplicación web para consultar esos datos y mostrar una gráfica personalizada.

(más…)

Por parzibyte, hace

PHPWord: agregar marca de agua, TOC y gráficas a documento de Word con PHP

En este post vamos a ver cómo trabajar con documentos de Word usando el lenguaje de programación PHP y la librería PHPWord, parte de la familia de PHPOffice.

Lo que veremos será cómo:

  1. Agregar marca de agua a un documento
  2. Agregar un índice o tabla de contenido
  3. Trabajar con gráficas de barras, de pastel, de línea, etcétera

Este tutorial es la tercera parte de una serie de tutoriales sobre documentos de Word y PHP.

Recuerda ver la primera parte para ver cómo instalar la librería y su uso básico, así como la segunda parte para trabajar con listas, tablas e imágenes.

(más…)

Por parzibyte, hace

Generar color hexadecimal aleatorio con Javascript

Introducción Recientemente estuve generando algunas gráficas de barras para un pequeño proyecto. Debido a que las gráficas eran llenadas de forma dinámica, necesitaba una forma de generar colores aleatorios en hexadecimal. Recordemos que un color hexadecimal se compone de 6 caracteres que pueden ser: 0123456789ABCDEF Por ejemplo, un color hexadecimal Leer más…

Por parzibyte, hace

Reiniciar o limpiar gráfica de Chart.js

Introducción

Ayer estuve trabajando con Chart.js, una librería para generar gráficas. Debido a que la gráfica era actualizada cada que el usuario seleccionaba una opción distinta, a veces se mostraban algunas barras encima de otras, tooltips que no deberían estar y cosas de esas.

Así que investigando encontré la solución para reiniciar, limpiar y destruir una gráfica en Chart.js. En otras palabras, estaremos reiniciando la gráfica.

Nota: puedes ver un tutorial de cómo trabajar con gráficas en AngularJS aquí.

(más…)

Por parzibyte, hace