Highcharts – Estadísticas por un tubo con Javascript

highchart Js - librería de gráficas javascript

highchart Js - librería de gráficas javascriptEn Internet lo más importante es tener siempre presente las estadísticas de nuestro negocio en todo momento para cotejar valores en alza y baja.

Esta vez quiero presentar una librería Javascript que dependiendo de la finalidad que queramos darle, nos puede servir de mucho. Se trata de Highcharts JS una librería javascript desde la que podemos implementar multitud de opciones para estadísticas, desde la típica gráfica de barras con histórico a complejas composiciones para detallar valores. Cuenta con multitud de tipos de gráficas, entre las que encontramos:

  • Line  & Scatter Charts
  • Area Charts
  • Column & Bar Charts
  • Pie Charts
  • Dynamic Charts
  • Combination Charts
  • Angular gauge
  • Clock
  • Rango de Áreas…

¿Como se utiliza?

Para conseguir insertar la estadística que se ajuste más a nuestra finalidad bastará con incluir la librería JS y definir una nueva instancia de Highcharts y añadir la configuración en la instancia creada javascript, en el siguiente ejemplo se puede apreciar la manera de hacerlo:

Incluimos las librearías

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

 Configuramos la instancia javascript

$(function () {
 var chart;
 $(document).ready(function() {
 chart = new Highcharts.Chart({
 chart: {
 renderTo: 'container'
 },
 title: {
 text: 'Combination chart'
 },
 xAxis: {
 categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
 },
 tooltip: {
 formatter: function() {
 var s;
 if (this.point.name) { // the pie chart
 s = ''+
 this.point.name +': '+ this.y +' fruits';
 } else {
 s = ''+
 this.x +': '+ this.y;
 }
 return s;
 }
 },
 labels: {
 items: [{
 html: 'Total fruit consumption',
 style: {
 left: '40px',
 top: '8px',
 color: 'black'
 }
 }]
 },
 series: [{
 type: 'column',
 name: 'Jane',
 data: [3, 2, 1, 3, 4]
 }, {
 type: 'column',
 name: 'John',
 data: [2, 3, 5, 7, 6]
 }, {
 type: 'column',
 name: 'Joe',
 data: [4, 3, 3, 9, 0]
 }, {
 type: 'spline',
 name: 'Average',
 data: [3, 2.67, 3, 6.33, 3.33],
 marker: {
 lineWidth: 2,
 lineColor: Highcharts.getOptions().colors[3],
 fillColor: 'white'
 }
 }, {
 type: 'pie',
 name: 'Total consumption',
 data: [{
 name: 'Jane',
 y: 13,
 color: '#4572A7' // Jane's color
 }, {
 name: 'John',
 y: 23,
 color: '#AA4643' // John's color
 }, {
 name: 'Joe',
 y: 19,
 color: '#89A54E' // Joe's color
 }],
 center: [100, 80],
 size: 100,
 showInLegend: false,
 dataLabels: {
 enabled: false
 }
 }]
 });
 });
});

Resultado gráfico

Ejemplo de gráfica creada con Highchart JS

Ejemplo de gráfica creada con Highchart JS

 

sitio web: Highcharts Js

Esto te interesa:

12 Comentarios

  1. Cityonbag

    Es bastante buena esta librería JS, lo mejor es que es gratuita y muy facil de implementar.
    Felicidades por el artículo.

  2. MAJO

    como le doy yo misma el color osea que no sea x deaful? alguien sabe? xfa me ayude???

    1. Francisco (Publicaciones Autor)

      Hola Majo, a la hora de inicializar el objeto highchart puedes pasarle el parametro colors indicando la cadena de colores como array, de la siguiente manera:

      $(“#container”).highcharts({
      chart: ‘pie’,
      colors: [
      ‘#2f7ed8′,
      ‘#0d233a’,
      ‘#8bbc21′,
      ‘#910000′,
      ‘#1aadce’,
      ‘#492970′,
      ‘#f28f43′,
      ‘#77a1e5′,
      ‘#c42525′,
      ‘#a6c96a’
      ],
      label: ‘estadistica de pruebas’,
      series: ….

      });

      Espero que sea de ayuda, un saludo :)

  3. Jason

    buenas …. gustaría saber como modificar el espacio entre tickPositions: [0, 80, 90, 100], ya que si se representa de esta manera se ve un espacio muy grande entre 0 y 80 …… quiero que salga el 0 pero que ese espacio sea minimo… para que se vean bien representadas las lineas entre 80 y 100.. de ante mano gracias y saludos desde Costa Rica

    1. Francisco (Publicaciones Autor)

      Hola Jason, has probado a poner en la configuración de tu objeto highchart el parámetro “minorTickInterval” en la opción xAxis?, creo que es lo que estas buscando. De todos modos te paso enlace a la documentación del API que habla sobre ese tipo de parámetros:

      http://api.highcharts.com/highcharts#xAxis.minorTickInterval

      Espero que sea lo que estás buscando, un saludo.

      1. Jason

        Muchas Gracias Francisco. pero el mintickinterval no me modifica el tamaño de los intervalos…. disculpa la molestia te envió mi código por si he de estar haciendo algo erróneo… mil gracias

        $(function () {
        $(‘#container’).highcharts({
        chart: {

        borderColor: ‘#025577′,
        borderWidth: 4,
        borderRadius: 10,
        zoomType: ‘xy’,
        spacingBottom: 30
        },
        title: {
        text: ‘PORCENTAJE DE APROBACIÓN EN I Y II CICLOS,SEGÚN AÑO CURSADO,PERIODO 2001-2012′,
        x: -20 //center
        },
        subtitle: {
        text: ”,
        x: -20
        },
        credits: {
        text:’FUENTE: Jason’,
        href: ‘#’
        ,
        style: {
        cursor: ‘pointer’,
        color: ‘#000000′,
        fontSize: ’12px’,
        fontWeight: ‘bold’,
        padding: ’50px’

        },
        position: {
        align: ‘left’,
        x: 40,

        }

        },
        xAxis: {
        categories: [ ‘2001’, ‘2002’, ‘2003’, ‘2004’, ‘2005’, ‘2006’, ‘2007’, ‘2008’, ‘2009’, ‘2010’, ‘2011’, ‘2012’],tickInterval: 2,
        },
        yAxis: {
        min: 0,

        tickPositions: [80, 80, 90, 100],/*si aqui cambio el pimer 80 por 0 se ve el grafico como quieropero ocupo que se represente el 0 como inicio del eje Y*/
        title: {
        text: ‘TASA’
        },
        plotLines: [{
        value: 0,
        width: 1,
        color: ‘#808080′
        }]
        },
        tooltip: {
        valueSuffix: ‘%’
        },
        legend: {
        layout: ‘vertical’,
        align: ‘right’,
        verticalAlign: ‘middle’,
        borderWidth: 0
        },
        series: [{
        name: ‘1º’,
        data: [85.5, 85.6, 84.9, 85.3, 84.3, 83.7, 83.3, 88.5, 86.5, 86.3, 86.7, 86.9 ]
        }, {
        name: ‘2º’,
        data: [91.3, 91.2, 90.9, 90.9, 89.6, 89.7, 90.2, 93.3, 90.9, 91.6, 92.4, 92.8 ]
        }, {
        name: ‘3º’,
        data: [92.1, 92.6, 91.8, 91.4, 90.3, 90.0, 90.6, 94.2, 93.0, 92.8, 93.5, 93.9 ]
        }, {
        name: ‘4º’,
        data: [89.5, 89.8, 88.9, 88.5, 86.5, 85.8, 87.1, 90.8, 89.8, 89.6, 90.2, 90.1 ]
        },{
        name: ‘5º’,
        data: [91.5, 92.0, 91.8, 91.7, 90.2, 90.5, 91.5, 94.9, 93.9, 93.5, 94.0, 93.5
        ]
        }, {
        name: ‘6º’,
        data: [96.9, 97.3, 97.2, 96.5, 92.7, 93.9, 94.6, 96.8, 95.9, 95.3, 95.4, 96.0
        ]
        }
        ]
        });
        });

        1. Francisco (Publicaciones Autor)

          Hola Jason, he estado haciendo varias pruebas y no he conseguido la finalidad que buscas y pensándolo un poco para alcanzar lo que buscas, sería algo como si del valor 0 al 80 que se redujera el espaciado (el alto) para que centrara la gráfica, pero dudo que se pueda conseguir ese efecto. Yo lo que haría sería pasar del valor 0 de inicio y quizás lo anotaría justo donde pones el label lateral del yAxis, que quedara tal que así. “TASA (0~100)”. Siento no poder ser de más ayuda, no me había encontrado con este caso tan particular. Saludos

          1. Jason

            igual muchas gracias…. es para un trabajo de estadística.. y “según” los libros de estadística todos los gráficos deben iniciar en cero… igual excelente me acabas de dar una idea genial … voy a quitar el label que dice TASA coloco un 0 y le cambio la posición al label al inicio del cuadro… justo debajo del 80… asi se veria como un falso inicio de grafico …… sumamente agradecido con tu aporte

          2. Francisco (Publicaciones Autor)

            De nada, igualmente si consigo alguna solución lo publicaré por si a alguien más le sirve. Un saludo Jason

  4. marco

    hola francisco necesito descargar la grafica como imagen y guardarlo en el servidor para poder usarlo e pdf (agregando nombre de la empresa …….) como logro solucionarlo?
    he leido que es con exporting server pero aun no se como ijjij salds se te agradece

  5. mattisbmx

    Hola, es posible enviar el html en el cuerpo de un correo electrónico ?

  6. Francisco (Publicaciones Autor)

    Bienvenido mattisbmx, El cuerpo de un correo electrónico puede ser perfectamente un HTML, eso si, bastante limitado. Puedes enviarlo como HTML plano, por ejemplo, no puedes incluir código javascript para que se ejecute en el cliente del destinatario. Pero si puedes hacer un diseño HTML y enviarlo por correo, pero cualquier estilo CSS tendrás que hacerlo dentro de la etiqueta afectada (table style=padding-left:4px;font-size:12px;…) y a la hora de enviarlo indicar en el envío que se debe interpretar como texto html -> “Content-type: text/html”.
    Creo que esto a lo que te refieres, si no es así, ya me cuentas..

Deja tu comentario