jueves, agosto 13, 2015

Exportar múltiples gráficas hihgcharts a PDF con javascript




"El tema es" que debia hacer un documento pdf apartir de una grafica hihgcharts,  con esto no hay problema pues hihgchart tiene la caracteristica de exportar habilitando exporting: {   enabled: false  }, bien el detalle es que tenia mas de una grafica las cuales debia poner en solo un documento PDF, Entonces esto fue o que me funciono:



Tengo las graficas:
http://jsfiddle.net/xola139/y8kwg5Lh/

Antes de seguir es necesario agregar las siguientes librerias para poder continuar

http://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.js
http://canvg.googlecode.com/svn/trunk/rgbcolor.js
http://canvg.googlecode.com/svn/trunk/canvg.js
http://code.highcharts.com/modules/exporting.js



//Vamos agregar la funcion para que podamos crear la grafica hihgcharts en canvas, esto se hace con el siquinte codigo:

(function (H) {
    H.Chart.prototype.createCanvas = function (divId) {
        var svg = this.getSVG(),
            width = parseInt(svg.match(/width="([0-9]+)"/)[1]),
            height = parseInt(svg.match(/height="([0-9]+)"/)[1]),
            canvas = document.createElement('canvas');

        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);

        if (canvas.getContext && canvas.getContext('2d')) {

            canvg(canvas, svg);

            return canvas.toDataURL("image/jpeg");

        }else {
            alert("Your browser doesn't support this feature, please use a modern browser");
            return false;
        }

    }
}(Highcharts));


//Agregamos el evento al boton que nos ayudara a exportar el pdf

$('#exporta').click(function () {});

Dentro del evento click vamos a seleccionar las graficas que comiencen con el class =chart, en este ejemplo asi empiezan las clases
de los div donde se dibujan las graficas esto lo hacemos con este pedazo de codigo:


$('.chart').each(function (index) {
            console.log(this.id);

});

Y para exportar con a pdf ya con el evento click configurado y con el ciclo que recorre cada grafica tenemos que poner mas o menos asi el siguiente codigo


var imageData = $(this).highcharts().createCanvas();
doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight);



Al final este es mi resultado:

http://jsfiddle.net/xola139/y8kwg5Lh/3/




Y claro como era de esperarse la mayoria de las cosas las investigue en la red y me encontre estas url que me fueron de mucha utilidad para hcer mi ejemplo y entender como funciona.


http://hayageek.com/generate-pdf-with-javascript/
https://github.com/hongru/canvas2image/blob/master/index.html
http://fiddle.jshell.net/8ypxW/3/show/
http://jsfiddle.net/8ypxW/3/
https://parall.ax/products/jspdf#
http://fiddle.jshell.net/leighking2/dct9tfvn/
http://stackoverflow.com/questions/19807870/how-to-export-the-html-tables-data-into-pdf-using-jspdf

2 comentarios:

  1. Anónimo11:07 a.m.

    Amigo, muchas gracias por tu aporte. Quería comentarte que el botón de graficar no funciona. Agradecería si pudieras revisar que pasó. Gracias.
    Alejandro

    ResponderEliminar
  2. Excelente, muy buena información justo lo que andaba buscando

    ResponderEliminar