HighCharts: Librería para creación de gráficos

1. ¿Qué es HighCharts?

highcharts

HighCharts es una librería escrita en Javascript que permite la creación de gráficas. La librería ofrece un método fácil e interactivo para insertar graficas en su sitio web o aplicación web.

2. Características

Browsers

Browsers

La librería es compatible con todos los navegadores modernos incluyendo iPhone/iPad e Internet Explorer desde su versión 6.

No es comercial, no se necesita el permiso de los autores para su implementación en sitios web personales o sin fines de lucro.

Es abierto, todas las características pueden ser personalizadas permitiendo una gran flexibilidad además HighCharts está escrito solamente con código Javascript, sólo se requiere incluir el archivo highcharts.js y cualquiera de los tres frameworks más populares de Javascript (jQuery, MooTools o Prototype).

3. Ejemplo práctico: creación de una gráfica a través de la información obtenida de una base de datos de MySql.

El siguiente ejemplo muestra la implementación de la librería HighCharts para la generación de gráficas dinámicas a partir de los datos recibidos de una base de datos de MySql en un servidor con lenguaje de programación web Php.

3.1. Instalación de los archivos

La implementación de la librería highCharts requiere la inclusión previa de cualquiera de los frameworks de javascript JQuery, MooTools o Prototype. En el ejemplo, se incluye el framework jQuery por tanto se debe descargar el archivo jquery.js del sitio oficial: http://www.jquery.com, o bien incluir el siguiente código en la sección <head> de su página web.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Posteriormente, se debe descargar el archivo highcharts.js del sitio oficial: http://www.highcharts.com, o bien incluir el siguiente código en la sección <head> de su página web.

<script src="http://code.highcharts.com/highcharts.js/"></script>

En caso de haber descargado los archivos .js mencionados, la secciónde su página web debería incluir el siguiente código haciendo referencia a la ruta donde ha copiado los archivos.

<script src="/js/jquery.min.js"></script>
<script src="/js/highcharts.js"></script>

3.2. Creación de la base de datos

A continuación se muestra el código sql para la creación de la base de datos “bd_bolivia” y la tabla “departamentos” con la inserción de 9 registros.

CREATE DATABASE IF NOT EXISTS `bd_bolivia` ;
USE `bd_bolivia`;
CREATE TABLE IF NOT EXISTS `departamentos` (
  `id_departamento` int(10) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(50) DEFAULT NULL,
  `poblacion_masculino` int(11) DEFAULT NULL,
  `poblacion_femenino` int(11) DEFAULT NULL,
  `poblacion_total` int(11) DEFAULT NULL,
  KEY `id_departamento` (`id_departamento`)
) ENGINE=MyISAM AUTO_INCREMENT=10 DEFAULT CHARSET=latin1;
INSERT INTO `departamentos` (`id_departamento`, `nombre`, `poblacion_masculino`, `poblacion_femenino`, `poblacion_total`) VALUES
	(1, 'Chuquisaca', 345255, 343254, 688509),
	(2, 'Cochabamba', 985321, 985302, 1970623),
	(3, 'La Paz', 1254552, 1252751, 2507303),
	(4, 'Santa Cruz', 1369815, 1369124, 2738939),
	(5, 'Oruro', 280589, 290365, 570954),
	(6, 'Potosí', 358965, 358991, 717956),
	(7, 'Tarija', 198621, 220545, 419166),
	(8, 'Beni', 128565, 135684, 264249),
	(9, 'Pando', 53568, 51355, 104923);

3.3. Código en el servidor

En este ejemplo se crea un simple script de PHP, en el cual se establece la conexión al servidor (localhost) y se selecciona la base de datos (bd_bolivia), se realiza una consulta con la cual mediante su resultado se crea un array con los valores de los registros. El array generado permite el envío de la información obtenida en formato JSON.

ajax_json.php

<?php
extract($_GET);
switch ($caso) {
    case 'grafico1':
        if (!($cn = mysql_connect("localhost", "root", ""))) {
            echo "Error conectando a la base de datos.";
            exit();
        }
        if (!mysql_select_db("BD_Bolivia", $cn)) {
            echo "Error seleccionando la base de datos.";
            exit();
        }
        mysql_query("SET NAMES 'utf8'");

        $sql = "SELECT id_departamento, nombre, poblacion_masculino as cm, poblacion_femenino as cf, poblacion_total as ct
FROM departamentos
ORDER BY nombre ASC";
        $res = mysql_query($sql, $cn);
        $arrayX = array();
        while ($dep_rows = mysql_fetch_array($res)) {
            $arrayX[$dep_rows["nombre"]][] = (int) ($dep_rows["ct"]);
            $arrayX[$dep_rows["nombre"]][] = (int) ($dep_rows["cm"]);
            $arrayX[$dep_rows["nombre"]][] = (int) ($dep_rows["cf"]);
        }
        // solo para ver cambios en la grafica
        $v1 = (int)(rand(1000,2000000));
        $v2 = (int)(rand(1000,2000000));
        $arrayX["Litoral"][] = $v1 + $v2;
        $arrayX["Litoral"][] = $v1;
        $arrayX["Litoral"][] = $v2;
        // solo para ver cambios en la grafica

        echo json_encode($arrayX);
        break;
    // case n // otras opciones
}
?>

3.4. Código en el cliente

Highcharts utiliza la estructura de objetos de javascript para definer las opciones. El objeto options, es usado por su contructor Highcharts.Chart para indicar los valores para el gráfico y la personalización de la presentación. Los principales atributos se definen de la siguiente manera:

var chart1 = new Highcharts.Chart({
chart: { 
renderTo: 'container', // div contenedor
type: 'bar' // tipo de grafico
},
title: {
text: 'Redes sociales' // título  del gráfico
},
xAxis: { // eje x
categories: ['Facebook', 'Twitter', 'Myspace'] // categorías en el eje x
},
yAxis: { // eje y
title: { text: 'Nro. usuarios' } // título del  eje y
},
series: [ // valores de las series a graficar
{
name: 'America',
data: [12311, 12321, 4334]
}, {
name: 'Europa',
data: [23242, 23427, 3433]
}
]
});

O bien:

var options = {
             chart: { 
             renderTo: 'container', // div contenedor
              type: 'bar' // tipo de grafico
              },	
              xAxis: [],
        	series: [],
              yAxis: {
              title: { text: 'Nro. usuarios' }
},
…
}
var chart = new Highcharts.Chart(options);

En ejemplo que se está desarrollando, se crea un archivo scripts.js el cual contiene la única función “recarga()”.

scripts.js

function recarga()
{
    var options = {
        chart: {
            renderTo: 'container_highchart',
            type: 'column',
            margin: [ 50, 50, 120, 80]
        },
        title: {
            text: 'Población en Bolivia'
        },
        xAxis: [],
        yAxis: {
            min: 0,
            title: {
                text: 'Número de habitantes'
            }
        },
        legend: {
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            align: 'left',
            verticalAlign: 'top',
            x: 80,
            y: 40,
            floating: true,
            shadow: true
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>' + this.series.name + ': ' + this.y + ' habitantes';
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: []
    }
    var url = 'ajax_json.php?caso=grafico1';
    var xAxis = {
        categories: [],
        labels: {
            rotation: -45,
            align: 'right',
            style: {
                fontSize: '12px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    };
    var seriesTotal = {
        data: []
    };
    seriesTotal.name = 'Total';
    var seriesMasculino = {
        data: []
    };
    seriesMasculino.name = 'Masculino';
    var seriesFemenino = {
        data: []
    };
    seriesFemenino.name = 'Femenino';
    jQuery.getJSON(url, function(data) {
        jQuery.each(data, function(key1,val1) {
            xAxis.categories.push(key1);
            jQuery.each(val1, function(key2,val2) {
                if(key2 == 0){
                    seriesTotal.data.push(val2);
                }
                else if(key2 == 1){
                    seriesMasculino.data.push(val2);
                }
                else if(key2 == 2){
                    seriesFemenino.data.push(val2);
                }
            });
        });
        options.xAxis.push(xAxis);
        options.series.push(seriesTotal);
        options.series.push(seriesMasculino);
        options.series.push(seriesFemenino);
        var chart = new Highcharts.Chart(options);
    });
    return false;
}

3.5. Vista HTML

En el archivo index.html, se incluyen los archivos js en el orden indicado y se debe insertar un elemento <div> con el mismo id al cual se hace referencia en el atributo “chart” en su opción renderTo.

index.php

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/highcharts.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>
    </head>
    <body>
        <input type="button" id="btn_genera" onclick="javascript: recarga()" value="Ver gráfico" />
        <br/>
        <div id="container_highchart"></div>
    </body>
</html>

3.6. Resultado

El gráfico se genera al hacer la llamada a la función “recarga()” el cual está insertado en el botón “Ver gráfico”.

Resultado: Gráfica generada con highcharts

Resultado: Gráfica generada con highcharts

4. Conclusiones

La implementación de la librería Highcharts, como se pudo observar, es bastante sencilla, la cual consiste en generar el objeto options y pasarlo como parámetro a su constructor. Se recomienda revisar los ejemplos que existen en el sitio http://www.highcharts.com/demo/ , en el cual están todos los tipos de gráficos que se puede generan con la librería, además se cuenta con la herramienta jsfiddle con la cual se puede editar el objeto options y ejecutarlo en tiempo real.

jsfiddle

jsfiddle

Anuncios

13 pensamientos en “HighCharts: Librería para creación de gráficos

  1. Hola excelente tu post, estuve estudiandolo y adaptandolo xq lo necesito para la comparacion en un grafico “Pie” de las poblaciones (solo total). la cantidad de habitantes y las proporciones carga perfecto de la BD, pero los nombres no los he podido mostrar, me salen “Slice”, si pudieses ayudarme te agradeceria enormemente, te voy a pasar los archivos scripts.js y ajax_json.php
    como los tengo actualmente:

    [ARCHIVO ajax_json.php]

    [ARCHIVO scripts.js]
    function recarga()
    {
    var options = {
    chart: {
    renderTo: ‘container_highchart’,
    type: ‘pie’,
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
    },
    title: {
    text: ‘Población en Bolivia’
    },
    xAxis: [],
    yAxis: {
    min: 0,
    title: {
    text: ‘Número de habitantes’
    }
    },
    legend: {
    layout: ‘vertical’,
    backgroundColor: ‘#FFFFFF’,
    align: ‘left’,
    verticalAlign: ‘top’,
    x: 80,
    y: 40,
    floating: true,
    shadow: true
    },
    tooltip: {
    formatter: function() {
    return ‘‘+ this.x +’‘ + this.series.name + ‘: ‘ + this.y + ‘ habitantes’;
    }
    },
    plotOptions: {
    pie: {
    allowPointSelect: true,
    cursor: ‘pointer’,
    dataLabels: {
    enabled: false
    },
    showInLegend: true
    }
    },
    series: []
    }
    var url = ‘ajax_json_modificando.php?caso=grafico1’;
    var xAxis = {
    categories: [],
    labels: {
    rotation: -45,
    align: ‘right’,
    style: {
    fontSize: ’12px’,
    fontFamily: ‘Verdana, sans-serif’
    }
    }
    };
    var seriesTotal = {
    data: []
    };
    seriesTotal.name = ‘Total’;

    jQuery.getJSON(url, function(data) {
    jQuery.each(data, function(key1,val1) {
    xAxis.categories.push(key1, val1);
    jQuery.each(val1, function(key2,val2) {
    if(key2 == 0){
    seriesTotal.data.push(val2);
    }

    });
    });
    options.xAxis.push(xAxis);
    options.series.push(seriesTotal);

    var chart = new Highcharts.Chart(options);
    });
    return false;
    }

    MUCHAS GRACIAS POR ESTE EXCELENTE POST ESPERO QUE PUEDAS AYUDARME, SALUDOS !!

    • Para generar un grafico “Pie” solo es necesario un
      array[name:’…’, y:un_numero], bueno lo que quiero decir es que no se requeriria ningun proceso con javascript. Bueno, siguiendo el mismo ejemplo y tomando el formato de la pagina oficial de Highcharts, una alternativa sería la siguiente:

      function recarga()
      {
          var options = {
              chart: {
                  renderTo: 'container_highchart',
                  type: 'pie',
                  plotBackgroundColor: null,
                  plotBorderWidth: null,
                  plotShadow: false
              },
              title: {
                  text: 'Población en Bolivia'
              },
              legend: {
                  layout: 'vertical',
                  backgroundColor: '#FFFFFF',
                  align: 'left',
                  verticalAlign: 'top',
                  x: 80,
                  y: 40,
                  floating: true,
                  shadow: true
              },
              tooltip: {
                  pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                  percentageDecimals: 1
              },
              plotOptions: {
                  pie: {
                      allowPointSelect: true,
                      cursor: 'pointer',
                      dataLabels: {
                          enabled: false
                      },
                      showInLegend: true
                  }
              },
              series: []
          }
          var url = 'ajax_json.php?caso=grafico1';
          var seriesTotal = {        
              type: 'pie',
              name: 'Browser share',
              data: []
          };
          seriesTotal.name = 'Total';
      
          jQuery.getJSON(url, function(data) {
              jQuery.each(data, function(key1,val1) {
                  jQuery.each(val1, function(key2,val2) {
                      if(key2 == 0){
                          var ccc = {
                              name:key1, 
                              y:val2
                          }
                          seriesTotal.data.push(ccc);
                      }
      
                  });
              });
              options.series.push(seriesTotal);
              var chart = new Highcharts.Chart(options);
          });
          return false;
      }
      
  2. Hola, trate de seguir el ejemplo pero parece que algo anda mal 😦
    ——— index.php ——–

    ————————- scripts.js ————–
    function recarga()
    {
    var options = {
    chart: {
    renderTo: ‘container_highchart’,
    type: ‘column’,
    margin: [ 50, 50, 120, 80]
    },
    title: {
    text: ‘Población en Bolivia’
    },
    xAxis: [],
    yAxis: {
    min: 0,
    title: {
    text: ‘Número de habitantes’
    }
    },
    legend: {
    layout: ‘vertical’,
    backgroundColor: ‘#FFFFFF’,
    align: ‘left’,
    verticalAlign: ‘top’,
    x: 80,
    y: 40,
    floating: true,
    shadow: true
    },
    tooltip: {
    formatter: function() {
    return ‘‘+ this.x +’‘ + this.series.name + ‘: ‘ + this.y + ‘ habitantes’;
    }
    },
    plotOptions: {
    column: {
    pointPadding: 0.2,
    borderWidth: 0
    }
    },
    series: []
    }
    var url = ‘ajax_json.php?caso=grafico1’;
    var xAxis = {
    categories: [],
    labels: {
    rotation: -45,
    align: ‘right’,
    style: {
    fontSize: ’12px’,
    fontFamily: ‘Verdana, sans-serif’
    }
    }
    };
    var seriesTotal = {
    data: []
    };
    seriesTotal.name = ‘Total’;
    var seriesMasculino = {
    data: []
    };
    seriesMasculino.name = ‘Masculino’;
    var seriesFemenino = {
    data: []
    };
    seriesFemenino.name = ‘Femenino’;
    jQuery.getJSON(url, function(data) {
    jQuery.each(data, function(key1,val1) {
    xAxis.categories.push(key1);
    jQuery.each(val1, function(key2,val2) {
    if(key2 == 0){
    seriesTotal.data.push(val2);
    }
    else if(key2 == 1){
    seriesMasculino.data.push(val2);
    }
    else if(key2 == 2){
    seriesFemenino.data.push(val2);
    }
    });
    });
    options.xAxis.push(xAxis);
    options.series.push(seriesTotal);
    options.series.push(seriesMasculino);
    options.series.push(seriesFemenino);
    var chart = new Highcharts.Chart(options);
    });
    return false;
    }
    ———- ajax_json.php — > tal y como esta explicado en el ejemplo (con los datos para accesar a mi base de datos)
    – Como puedes ver el jquery y highcharts.js los estoy tomando de sus sitios respectivamente y en mi carpeta raiz tengo el scripts.js y el ajax_json.php.
    – No se si me hace falta incluir el ajax_json.php en algun lugar o algo así.

    Ojalá puedas orientarme =D
    Gracias!!

    • Bueno, en cada ejemplo de HighCharts se tiene un enlace Edit in jsFiddle en el cual observas el codigo en incluso puede ejecutarlo, sin embargo para generar los datos de forma dinamica desde una base de datos, es mejor emplear un array json. En la documentación existe un pequeño ejemplo. Se debe procesar la informacion de otra manera, escribiré un nuevo ejemplo mas complejo los próximos dias.

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s