Highcharts – Estadísticas por un tubo con 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

10 thoughts on “Highcharts – Estadísticas por un tubo con Javascript

  • 12 julio, 2013 at 07:54
    Permalink

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

    Reply
  • 5 noviembre, 2013 at 17:22
    Permalink

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

    Reply
    • 6 noviembre, 2013 at 00:24
      Permalink

      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 :)

      Reply
  • 13 diciembre, 2013 at 14:59
    Permalink

    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

    Reply
    • 16 diciembre, 2013 at 12:05
      Permalink

      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.

      Reply
      • 16 diciembre, 2013 at 18:00
        Permalink

        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
        ]
        }
        ]
        });
        });

        Reply
        • 16 diciembre, 2013 at 20:05
          Permalink

          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

          Reply
          • 16 diciembre, 2013 at 21:17
            Permalink

            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

          • 17 diciembre, 2013 at 09:59
            Permalink

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

  • 15 enero, 2014 at 19:37
    Permalink

    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

    Reply

Deja un comentario