Gráficas interesantes con highcharts

Gráficas interesantes con highcharts, este plugin permite crear gráficas de todo tipo inclusive de barra, en linea, pastel, de área, etc.

Si lo que estas buscando es un plugin que te ayude a tener unas buenas gráficas en linea y que no sea difícil e implementar, aquí tienes a highcharts, con demostraciones y una documentación completa y fácil.

En la siguiente dirección te puedes encontrar varios ejemplos: http://www.highcharts.com/demo en los que tendrás a disposición el código corriendo en jsfiddle y otra opción que te permite ver las opciones manejadas en dicho gráfico, sin duda una alternativa muy amigable a la hora de tener problemas con gráficos.

La librería es gratuita si lo usas en proyectos personales, pero en una implementación de software comercial tendrás que pagar una cierta cantidad por uso.
Puedes ver los costos aquí: http://shop.highsoft.com/highcharts.html

Puedes ver las demostraciones aquí: http://www.highcharts.com/demo

El funcionamiento es relativamente sencillo.
1.- Solo necesitas 3 archivos javascript:

 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>

2.- Agrega el contenedor que mostrara el resultado del gráfico.

<div id="contenedor"></div>

3.- Agrega el código de las gráficas como por ejemplo el siguiente fragmento (Este muestra ejemplo de temperaturas):

$(function ($) {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});

El resultado que obtendrás sera muy gratificante para tu sistema.
Puedes ver el ejemplo corriendo en la siguiente dirección: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/

 

Tambien si lo que quieres es implementar ajax, puedes ver el ejemplo en el siguiente enlace: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-ajax/

Donde se hace una petición get con jQuery.

You may also like...

  • gerardo pacheco

    otra alternativa que estoy utilizando
    http://www.amcharts.com/ no veo mucha diferencia
    pero aqui se los publico por si alguien quiere usarla

    saludos

  • Develoteca

    Muy buen plugin Gerardo, la verdad es que hoy en día la mayoría de los plugins con gráficas tienden a ser similares, si estas interesado en plublicar tu plugin o software lo puedes hacer desde este enlace: http://develoteca.com/promociona-o-participa/

    Saludos, gracias por comentar y por compartir la información.