Highcharts – Creación de gráficas interactivas fácilmente en tu web

Name: Highcharts – Creación de gráficas interactivas fácilmente en tu web
Brand: Jose Aguilar
SKU: joseaguilarblog-6641
Availability: InStock
Rating: 5 (6 reviews)

Highcharts es una biblioteca de gráficos escrito en JavaScript puro que ofrece una manera fácil de agregar gráficos interactivos en tu sitio o aplicación web. Highcharts actualmente dispone de muchos tipos de gráficos: lineal, área, columnas, barras, circulares, etc.

Funciona en todos los navegadores y se adapta correctamente a todos los dispositvos. En iOS y Android tiene soporte multitouch ofreciendo una experiencia de usuario sin fisuras.

Una de las características clave de Highcharts es que en ninguna de las licencias, gratuita o no, se le permite descargar el código fuente y hacer sus propias ediciones. Esto permite modificaciones personales y una gran flexibilidad.

Highcharts se basa únicamente en las tecnologías de navegadores nativos y no requiere plugins secundarios como Flash o Java. Además no es necesario instalar nada en tu servidor. Highcharts necesita sólo dos archivos de JS para ser ejectuado: El núcleo highcharts.js y, o bien el jQuery, MooTools o marco Prototype.

A pesar de ser código Javascript, se puede crear gráficas dinámicas recogiendo información de base de datos o de archivos fácilmente incrustando PHP dentro de Javascript.

Para instalarlo en tu página Web tan solo tienes que acceder a la página Web de Hightcharts y descargar el paquete para gráficas. Dentro hay infinidad de ejemplos. Además, en la página del autor hay una API muy completa.

En este artículo vamos hacer una gráfica lineal donde vamos a representar las ventas y los beneficios de una posible empresa.

Para instalar esta gráfica en tu página Web lo primero que tendrás que hacer es incluir en la cabecera o pie de página la librería jQuery, en nuestro caso, y los archivos necesarios para disponer del objeto que crea las gráficas.

Source code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

En el <body> de vuestra página allí donde queráis mostrar la gráfica tendréis que añadir el contenedor. En nuestro caso:

Source code

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Y ahora solo falta la clave del asunto. Fíjate que sencillo es el código siguiente:

Source code

<script>
$(function () {
    $('#container').highcharts({
        title: {
            text: 'Resumen de ventas',
            x: -20 //center
        },
        subtitle: {
            text: 'Tienda Demo',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Ventas (€)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '€'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Ventas',
            data: [85.36, 92.55, 79.55, 125.25, 180.35, 210.55, 250.25, 260.55, 203.35, 108.35, 130.95, 90.65]
        }, {
            name: 'Beneficios (70%)',
            data: [59.75, 64.78, 55.68, 87.67, 126.24, 147.38, 175.17, 182.38, 142.34, 75.84, 91.66, 63.45]
        }]
    });
});
</script>

A simple vista ya se entiende como podemos ir modificando y adaptando nuestros datos a la gráfica.

Ver ejemplo en funcionamiento

Autor

Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.

Te ha servido? Valora esta entrada!

(6 votos, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

3 respuestas a “Highcharts – Creación de gráficas interactivas fácilmente en tu web”

VALERIA GRANADOS dice:

04/11/2018 a las 20:47

Me interesa esta información, pero como lo puedo llamar desde una base de datos y que al seleccionar las actividades me arroje una gráfica como estas que muestran que se resalten de un color(azul). Pero que me muestre todas las actividades aunque no las haya seleccionado pero esas que no selecciones salgan de otro color(rojo)

Responder
- Jose Aguilar dice:
  
  05/11/2018 a las 11:22
  
  Hola,
  
  Los valores PHP para la gráfica sacados de la base de datos los deberás trasladar al JavaScript en tu caso particular. Al data del atributo series de la gráfica debes pasarle una cadena con todos los valores separados por coma.
  
  Saludos
  
  Responder
Jose Garcia dice:

15/12/2016 a las 0:18

Muy interesante esta información, pero ¿como puedo poner los datos recuperados de una consulta mysql con php?

Gracias y Saludos

Responder