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.

Contenido relacionado: