Using Chartnew in app and saving to pdf

[webguy262]

I'm using chartnew in an iOS app built using Phonegap Build.

The app builds 12 bar charts based on input data. Once charts are drawn, I am saving to PDF (using iText & html2pdf).

First time thru, the charts appear in the PDF. Subsequent PDF saves, however, are missing bars and just capturing axes. An iOS restart (iPad) gets the bars back in the saved PDF.

Here's the html/js/css: http://beckerguerry.info/DSM/ovn/gestation.html

Any thoughts or suggestions o getting bars in the PDF every time?

[markosko]

Cant test whats problem cause "gestation.html:858 Uncaught ReferenceError: pdf is not defined"

[webguy262]

Hi Mark... thanks for looking. PDF is not defined b/c it's the function that creates the PDF. That function is defined in a Phonegap plugin that's embedded when you build the app.

Have you ever had an instance where chartnew charts were only partially drawn? If so, was it a memory issue? Like I said, I'm often getting x & y axes in my PDFs but no bars.

[markosko]

Never used ChartNew in mobile apps only on sites but would it be problem if u send me code of that plugin to mail?

[webguy262]

The plugin is here: https://github.com/moderna/cordova-plugin-html2pdf

It also needs iText which I got here: https://github.com/itext/itextpdf/releases

[FVANCOP]

Message from @webguy262 (copied from issue #378)

See answer at the bottom :

François

I'm using chartNew in a phonegap app. Works great! But when I try to save the charts to PDF, almost always, only the axes appear; no bars show up.

The "almost always" has me puzzled... any thoughts why bars would appear occasionally, but usually not? Do the bars get painted in a 'second pass' thru your code? Might the app think the PDF has been created when only the axes are done? Love to hear your thoughts!

BTW, I'm using two plugins for saving PDFs -- iText & html2pdf -- and they are the most popular tools as far as I can tell.

So unless you have a 'silver bullet' solution ; ), I'm thinking about making PNGs from the canvas charts, and then saving those to the PDF. Using CSS, I would hide the PNGs on "screens," but show them for "print" while hiding the canvases. A theory at least!

Have you seen any code that generates PNGs from chartnew canvas elements in the flow of the document? I've tried, but I get blank, transparent PNGs of the matching canvas size. I think my canvas.toDataURL() is firing before the canvas is painted?

I'm doing

 <img src="" id="canvasImg">
 <script>
 var img = document.getElementById('canvasImg');
 img.onload = function(){
     var canvas = document.getElementById('canvas_gest_va');
     var dataURL = canvas.toDataURL();
     alert(dataURL);
     document.getElementById('canvasImg').src = dataURL; 
 };
 </script>

Thoughts?`

Answer

Hi,

I really do not understand why the chart is "truncated" when you export it to a PDF. In the process, by default, the pieces of chart are drawn after the scales; You can invert the process by settting option scaleOverlay to true (https://github.com/FVANCOP/ChartNew.js/wiki/100_030_Axis#scaleoverlay). The result will not be the same, but can you perform a test with this change ?

Other idea : what did you put as color for the bars "# hexa color", "rgb color", "rgba color" ? Perhaps is the problem related to the way colors are defined ?

To force the execution of a function when the chart is completely displayed, you can associate a function to option onAnimationComplete (see : https://github.com/FVANCOP/ChartNew.js/wiki/100_010_Animation#onanimationcomplete).

In the code of ChartNew.js, a function for saving a chart to a PNG has been created; Perhaps can you use this function ?

Regards, François

PS : if you have additional questions about this problem, please, take contact by mail.