Analizar el rendimiento de las consultas SQL en aplicaciones PHP con FirePHP

FirePHP

FirePHP

FirePHP

FirePHP es un complemento para Mozilla Firefox, el cual permite registrar en la consola de Firebug usando una simple llamada a un método en PHP. Toda la información es enviada por medio de cabeceras de respuesta y no interfiere con el contenido de su página. FirePHP es apropiado para el desarrollo con AJAX donde se requieren respuestas JSON y XML.

Instalar los complementos para Firefox

El primer paso es instalar el complemento Firebug en Firefox, el cual se puede descargar de Firebug 1.11.2.

Luego, se tiene que instalar el complemento FirePHP, el cual se puede descargar de FirePHP 0.7.1.

Para abrir FireBug presiona las teclas Ctrl + F12, posteriormente lo puedes acoplar a la ventana principal de Mozilla FireFox. Al principio el panel de Red (Network) por defecto está desactivado, por tanto se tiene que activar el panel de Red para mostrar algunas salidas de FirePHP en la consola de Firebug.

FireBug: Panel desactivado

Instalar la librería en el servidor

Se tiene que descargar la versión más reciente de la librería FirePHPCore, la cual se puede descargar de FirePHPCore.

Luego, descomprime el archivo y mueve el contenido del directorio lib/FirePHPCore a una carpeta en tu servidor.

Para el ejemplo, se sugiere la siguiente estructura de archivos:

FirePHP: archivos

Registrar las consultas SQL ejecutadas

Como todo buen desarrollador, de seguro tienes una clase PHP que permite establecer la conexión con tu base de datos y ejecutar las consultas. Por tanto, se puede incluir las funciones que se muestran a continuación en clase.

Primero incluimos la clase FirePHP y FB.

if (!class_exists('FirePHP')) {
  require_once(dirname(__FILE__) . DIRECTORY_SEPARATOR . "FirePHPCore/FirePHP.class.php");
  }
if (!class_exists('FB')) {
    require_once('FirePHPCore/fb.php');
}

En la función que permite ejecutar consultas SQL, calculamos el tiempo que duró la ejecución de la consulta. Además declaramos una variable global $allQuery en la cual se irá almacenando todas las consultas sql.

Nota.- La siguiente función deberá ser empleada sólo en consultas de selección (SELECT)

public function executeSelectQuery($query) {
    global $allQuery;
    $time_ini = microtime(true);
    $this->id_query = mysql_query($query, $this->id);
    $time_fin = microtime(true);
    $timeProcess = $time_fin - $time_ini;
    $totRows = ($this->id) ? $this->numRecords() : 0;
    $allQuery[] = array("query" => $query, "time" => $timeProcess, 'totalRows' => $totRows);
    return $this->id_query;
}

La siguiente función estática permite calcular el número total de consultas, tiempo total de ejecución de todas las consultas y la consulta con mayor duración. Además muestra el detalle de todas las consultas ejecutadas:

Nota.- Se recomienda emplear la función ob_start () si output_buffering no está establecido en “on” en el archivo php.ini, .htaccess, etc.

Revise los permisos del archivo, esté seguro de que los archivos a los que está accediendo puedan ser leídos por el servidor.

static function firePhpShowQueries() {
    global $allQuery;
    ob_start();
    $firephp = FirePHP::getInstance(true);
    $expensive_query_time = 0;
    $expensive_query = "";
    $total_time = 0;

    $query_time = 0;
    $query_arr = array();
    $query_arr[] = array('Num', 'Total Rows', 'Time', 'SQL Statement');
    $query_c = 0;
    foreach ($allQuery as $query) {
        $query_time+=$query['time'];
        $query_arr[] = array(++$query_c, $query['totalRows'], round($query['time'], 5), $query['query']);
        if ($query['time'] > $expensive_query_time) {
            $expensive_query_time = $query['time'];
            $expensive_query = $query['query'];
            $total_time += $query['time'];
        }
    }
    // Display the query summary 
    $firephp->group('Query Summary', array('Collapsed' => false,'Color' => '#000'));
    $firephp->log(count($allQuery), 'Total Queries');
    $firephp->log($total_time, 'Time');
    $firephp->log($expensive_query, 'Expensive Query Time');
    fb(array(count($allQuery) . ' SQL queries took ' . ($query_time) . ' seconds', $query_arr), FirePHP::TABLE);
}

A continuación, se muestra el archivo database.php

<?php
if (!class_exists('FirePHP')) {
  require_once(dirname(__FILE__) . DIRECTORY_SEPARATOR . "FirePHPCore/FirePHP.class.php");
  }
if (!class_exists('FB')) {
    require_once('FirePHPCore/fb.php');
}
class DataBase {
    var $host;
    var $user;
    var $password;
    var $database;
    var $id;
    var $id_query;

    public function __construct() {
        $this->host = "localhost";
        $this->user = "root";
        $this->password = "";
        $this->database = "bd_prueba";
        $this->id_query = 0;
        $this->Conectar();
    }

    private function Conectar() {
        if (!($this->id = mysql_connect($this->host, $this->user, $this->password))) {
            echo "Error conectando a la base de datos.";
            exit();
        }
        if (!mysql_select_db($this->database, $this->id)) {
            echo "Error seleccionando la base de datos.";
            exit();
        }
        mysql_query("SET NAMES 'utf8'");
        return $this->id;
    }

    function numRecords() {
        return @mysql_num_rows($this->id_query);
    }

    public function executeSelectQuery($query) {
        global $allQuery;
        $time_ini = microtime(true);
        $this->id_query = mysql_query($query, $this->id);
        $time_fin = microtime(true);
        $timeProcess = $time_fin - $time_ini;
        $totRows = ($this->id) ? $this->numRecords() : 0;
        $allQuery[] = array("query" => $query, "time" => $timeProcess, 'totalRows' => $totRows);
        return $this->id_query;
    }
    static function firePhpShowQueries() {
        global $allQuery;
        ob_start();
        $firephp = FirePHP::getInstance(true);
        $expensive_query_time = 0;
        $expensive_query = "";
        $total_time = 0;

        $query_time = 0;
        $query_arr = array();
        $query_arr[] = array('Num', 'Total Rows', 'Time', 'SQL Statement');
        $query_c = 0;
        foreach ($allQuery as $query) {
            $query_time+=$query['time'];
            $query_arr[] = array(++$query_c, $query['totalRows'], round($query['time'], 5), $query['query']);

            if ($query['time'] > $expensive_query_time) {
                $expensive_query_time = $query['time'];
                $expensive_query = $query['query'];
                $total_time += $query['time'];
            }
        }
        // Display the query summary
        $firephp->group('Query Summary', array('Collapsed' => false,'Color' => '#000'));
        $firephp->log(count($allQuery), 'Total Queries');
        $firephp->log($total_time, 'Time');
        $firephp->log($expensive_query, 'Expensive Query Time');
        fb(array(count($allQuery) . ' SQL queries took ' . ($query_time) . ' seconds', $query_arr), FirePHP::TABLE);
    }
}
?>

Nota.- Recuerda que solo puedes insertar las nuevas funciones en tu clase con la cual conectas y realizar tus consultas a tu base de datos.

A continuación se presenta un archivo de ejemplo, index.php, en el cual se incluye la el archivo database.php, se realizan algunas consultas de prueba y una vez ejecutadas todas las consultas se realiza una llamada al método estático DataBase::firePhpShowQueries().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Queries</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <?php
        include("lib/database.php");
        $db = new DataBase();
        $min = 1;
        $max = 10;
        $inicio = rand($min, $max);
        $fin = rand($inicio, $max);
        for ($i = $inicio; $i <= $fin; $i++) {
            switch(rand(0,2)){
                case 0; $query = "select round(RAND()*100000) as c1,round(RAND()*100000) as c2"; break;
                case 1: $query = "SELECT DATE(NOW()) as c1, DATE(DATE(NOW())-10) as c2"; break;
                case 2: $query = "SELECT ADDTIME(HOUR(now()), '02:00:00.999998') as c2, ADDTIME('01:00:00.999999', '02:00:00.999998') as c2"; break;
            }
            $result = $db->executeSelectQuery($query);
            echo "<h1>Consulta - ".$i."</h1>";
            echo "<table>";
            echo "<tr><th>Columna 1</th><th>Columna 2</th></tr>";
            while ($r = mysql_fetch_array($result)) {
                echo "<tr>";
                echo "<td>".$r[0] . "</td><td>".$r[1] . "</td>";
                echo "</tr>";
            }
            echo "<table>";
        }
        DataBase::firePhpShowQueries();
        ?>
    </body>
</html>

Resultado

A continuación se muestra el detalle de todas las consultas en la consola de Firebug.

FirePHP: resultados en consola

Conclusión

FirePHP es una herramienta bastante útil en el desarrollo de aplicaciones PHP porque permite verificar si las consultas SQL que construye dinámicamente la aplicación están correctas, además permite medir el rendimiento de las consultas al realizar las pruebas y el mantenimiento del sistema. Sin embargo, cabe mencionar que este es un simple ejemplo de lo que se puede conseguir con FirePHP debido que este complemento otras funcionalidades las cuales se puede investigar.

Referencias:

http://www.ecartservice.net/04082009/using-firephp-firebug-with-prestashop/
http://www.firephp.org/HQ/Use.htm
http://agileadam.com/firephp-introduction
http://www.codediesel.com/mysql/benchmarking-wordpress-sql-using-firephp/

3 exelentes plugins jQuery para crear layouts responsive

Ahora es el turno para que los usuarios sean capaces de navegar de manera satisfactoria gracias al Responsive Design de Jquery, independientemente del dispositivo en el que se encuentren.

Es la solución para reducir la tasa de rebote, haciendo que el usuario pase más tiempo en la página por su facilidad de lectura y óptima visualización de los contenidos (se acabo la molestosa tarea de pellizcar la pantalla para hacer zoom).

A continuación se presentan 3 muy importantes plugins especialmente seleccionados de jQuery para realizar sliders, galerías, elementos de navegación, etc. Todo ello con la vista puesta en que dichos elementos tengan un comportamiento responsive y se adapten a la resolución del dispositivo desde el que serán visualizados.

Responsive Image Gallery with Thumbnail Carousel

Crea una galería de imágenes sensible, con un carrusel miniatura con Elastislide. Inspirado en “galería de usuario” , muestra una integración de Elastislide, Implementa una galería de respuesta que se adapta al ancho de la visión del dispositivo mobil. La galería tiene un interruptor de vista que permite verlo con el carrusel en miniatura o sin ella. También añade la posibilidad de navegar con el teclado.

Responsive Image Gallery with Thumbnail Carousel

plugin jquery

PhotoSwipe

Se puede integrar fácilmente en sus sitios web para móviles. Está muy optimizado para los navegadores móviles webkit. Sin embargo, si necesita un apoyo más amplio navegador de escritorio o si está utilizando jQuery Mobile, PhotoSwipe viene empaquetado con una implementación de jQuery también.

PhotoSwipe

PhotoSwipe

jQuery Masonry

jQuery Masonry es un plugin que nos permite organizar los elementos-hijos flotantes de un elemento principal CSS. Tiene una forma peculiar de ordenar, pues es como si se pusiera ladrillo por ladrillo en la construcción de un muro, tal como se observa en la imagen siguiente.

jQuery Masonry

jQuery Masonry

Calibre una opción para leer tus libros electrónicos

 calibre_0

Que es Calibre?

Calibre es un gestor/lector de libros electrónicos que nos permite leer gran cantidad de formatos para libros como ser el mas conocido epub. Calibre es soportado en diferentes sistemas orepativos como: Windows, IOs y Linux.

En que nos ayuda?

  • Permite organizar nuestros libros por:
    • Título
    • Autor
    • Fecha
    • Editor
    • Clasificación
    • Tamaño (tamaño máximo de todos los formatos)
    • Serie
  • Buscar y descargar Libros Gratuitos y de Paga.
  • Mantener nuestra lectura donde la dejamos (recuerda pagina leída)
  • Convierte un documento pdf a peub (esto ns ayudara para poder leerlo en nuestros dispositivos móviles con mas facilidad).

calibre_3calibre_2calibre_4

Ademas les recomiendo Moon Reader para Android que va muy bien con Calibre.

Escrito por: Gaston Nina

Olijprivé – Barcode scanner

Nuestro cliente Holandés; Olijprivé, adicionalmente al desarrollo PDA y de su sitio web, nos ha encargado el desarrollo de un sistema de scaneo de Barcode. enbolivia.com ha implementado el módulo “Barcode scanner”, un módulo mediante el cual se pueden realizar pedidos de productos de manera más sencilla, el módulo desarrollado permite al cliente utilizar un scanner inalámbrico como entrada de datos y realizar pedidos mientras va caminando, el módulo también permite imprimir una tarjeta con códigos EAN-13 para facilitar las ordenes. Lo mejor es que este módulo puede implementarse a otros sistemas desarrollados previamente, por lo que integrar un barcode scanner no representa ningún problema.

Frameworks Responsive Web Design (RWD)

El “Responsive Web Design” es algo que toda empresa comercial aspira tener. Día a día el número de dispositivos móviles  va incrementando (desde computadores “desktop”, portátiles, teléfonos, tabletas e incluso televisores) y la gente los utiliza para buscar recursos e información en la web.

Todos estos dispositivos tienen diferentes resoluciones de pantalla y por tanto el diseños también cambia, y si no se tiene las herramientas necesarias, el ajustar manualmente la configuración de sitio web para todos los dispositivos, puede volverse un cáos.  Y es así como los frameworks CSS para la creación de diseños web receptivo fueron creados.

A continuación se describen algunos frameworks CSS para “Responsive Web Design”. Algunos ya son bastante conocidos y otros que recién fueron creados en las necesidades de las nuevas tendencias de diseño web.

Less+ Framework
http://lessframework.com/

less

Este Framework permite a los diseñadores crear sitios “sensibles” con capacidad de adaptar su contenido en función de la resolución de la pantalla, utilizando jQuery.

Responsive Grid System
http://responsive.gs/

Responsive-Grid-System

Éste es un framework CSS de cuadricula fluida que permite el desarrollo rápido de sitios web. Está listo para ser utilizado en 12, 16 y 24 columnas. También ofrece reajuste clearfix y de forma opcional un archivo de “reset” .

1 Kb CSS Grid 
http://www.1kbgrid.com/

1kb

Esta es una solución fácil de implementar sistemas de grillas, “reset” de estilo, tipografía y estilos básicos de formulario y todo en 1Kb, algo realmente importante.

Boostrap
http://twitter.github.com/bootstrap/

bootstrap

Éste framework fue creado por Twitter para los desarrolladores Web, renderea los contenendores tanto en navegadores de escritorio, como así también en tablets y teléfonos inteligentes. Cuenta con 12-columna de la grilla principal, tambien posee varios plugin Javascript para aumentar su funcionalidad.

Titan Framework
http://titanthemes.com/titan-framework-a-css-framework-for-responsive-web-designs

Titan-Framework

Éste utiliza las mismas clases CSS como 960.gs, por lo que el cambio entre las dos es muy fácil. Esto lo destaca a Titan Framework del resto.

320 and Up
http://stuffandnonsense.co.uk/projects/320andup/

320andup

320 and Up contiene 5 CSS3 Media Querys incrementales. Está construido con LESS y Sass, CSS mixins.

Fundation
http://foundation.zurb.com/

fundation

Un rápido y flexible framework, destinado especialmente para front-end. Sitios web creados con este framework funcionará en casi cualquier dispositivo sin importar el tamaño de la resolución.

Gridiculous – A Fully Responsive Grid Boilerplate
http://gridiculo.us/

gridiculous

Este es un texto modelo de grillas con columnas variables (ancho máximo de 1200px, 960px, 640px, 320px ancho y también dispone de pantalla completa). Gracias a este framework, el desplazamineto de las columnas esta asegurado, por lo que las columnas anidadas y fotos y los vídeos permanecerá totalmente “sensible”, independientemente del tamaño de la pantalla.

Simple Grid
http://simplegrid.info/

simple_grid

Simplegrid es un sistema de grillas basada en “una clase por elemento” asi de simple. Este framework  libera de las barras de desplazamiento horizontales.

Viceministerio de Ciencia y Tecnología

Ciencia y tecnología

Viceministerio de Ciencia y tecnología

El Sistema Web Integrado de Información Científica y Tecnológica, es un sistema desarrollado por enbolivia.com mediante el cual los usuarios pueden integrar sus conocimientos científicos y tecnológicos desde cualquier parte del país o el mundo a través de internet y con la ayuda de Micrositios a los cuales acceden previo registro en el sistema. Un Micrositio es un conjunto de módulos pre configurados por los Gestores de Redes quienes definen en el sistema los módulos (sean estos Noticias, Eventos, Enlaces, Encuestas, Foros, Chat, etc) para su comunidad según el perfil de sus usuarios finales.

La gran ventaja de este sistema es que anula las restricciones impuestas por las distancias entre los sectores generadores de conocimiento, logrando optimizar el tiempo en el que se comparte información importante. El sistema apoya de esta manera la creación, aplicación y difusión del desarrollo científico y tecnológico en Bolivia.

Gantter como alternativa a Microsoft Project

Gantter

Gantter es una extensión de Google Chrome que permite crear diagramas de Gantt al estilo de Microsoft Project.

Con la noticia de que Microsoft Office 365 será directamente instalado en los equipos por Internet y que la licencia deberá renovarse cada 1 año o cada mes, algunos de sus usuarios seguramente pensaran en otras opciones como LibreOffice u opciones en la nube como Google Drive, todas estas perfectamente funcionales en cuanto se refiere a procesador de texto, hoja de cálculo y diseño de presentaciones pero una de las herramientas dentro de la suite de Microsoft Office que tiene pocas alternativas en el mundo del software libre es Microsoft Project, razón  por la cual hoy quiero mencionar a Gantter, esta extensión de Google Chrome permite crear diagramas Gantt con gran facilidad tomando en cuenta a los recursos que se desean indicar así como personalizar los calendario, indicar las horas de trabajo y los horarios.

Lo primero que debemos hacer es instalar la aplicación en nuestro navegador para ello pueden presionar sobre este enlace o dirigirse al Google Web Store y buscar Gantter.

Tareas: Las tareas en Gantter tienen los siguientes datos.

Gantter - tareas

En cuanto al campo Duración los parámetros aceptados son: valores enteros y decimales.

Como verán el formulario aunque no tan completo como el de MS Project tiene lo necesario para registrar la información básica de una ping tarea.

Recursos: Los recurso son los elementos humanos o de inmobiliario con los que se contara para desarrollar las tareas creadas.

Gantter - recursos

Calendarios: Se pueden personalizar los calendarios  estableciendo los horarios de trabajo, los días no laborales, de esta manera se puede establecer un mejor cronograma de trabajo.

Gantter - calendario

A su vez Gantter permite importar archivos de MS Project y exportar los proyectos en formato XML los cuales son perfectamente leídos por MS Project, además cabe recalcar que los archivos generados se guardan en la cuenta de Google Drive personal.

Aquí tienen una vista previa de un resultado de Gantt:

Gantter - vista previa

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