1

I'm looking for a solution about highcharts export to PDF with jsPDF. I used this solution to export my graph as image to my pdf -> Export Highcharts to PDF (using javascript and local server - no internet connection)

It's working fine, but for some graph i could not generate the image because of this error :

Uncaught TypeError: undefined is not a function -- canvg.js:2000
svg.Element.text.getAnchorDelta -- canvg.js:2010
svg.Element.text.renderChild -- canvg.js:1989
svg.Element.text.renderChildren -- canvg.js:679
svg.Element.ElementBase.render -- canvg.js:698
svg.Element.ElementBase.renderChildren -- canvg.js:679
svg.Element.ElementBase.render -- canvg.js:698
svg.Element.ElementBase.renderChildren -- canvg.js:679
svg.Element.ElementBase.render -- canvg.js:2723
svg.loadXmlDoc.draw -- canvg.js:2733
svg.loadXmlDoc -- canvg.js:2646
svg.loadXml -- canvg.js:62
canvg -- indicateurs.js:3237
$.bind.H.Chart.createCanvas -- indicateurs.js:3171
(anonymous function) -- jquery-1.10.2.min.js:4
x.extend.each -- indicateurs.js:3164
_indicateurs.hightcharts.graph_to_pdf -- indicateurs.js:3262
(anonymous function) -- jquery-1.10.2.min.js:5
x.event.dispatch -- jquery-1.10.2.min.js:5
x.event.add.v.handle

Following, the canvas method throwing the error (canvg.js) :

        this.getAnchorDelta = function (ctx, parent, startI) {
            var textAnchor = this.style('text-anchor').valueOrDefault('start');
            if (textAnchor != 'start') {
                var width = 0;
                for (var i=startI; i<parent.children.length; i++) {
                    var child = parent.children[i];
                    if (i > startI && child.attribute('x').hasValue()) break; // new group
                    width += child.measureTextRecursive(ctx);       // ######## PROBLEM LOCATED ON THIS LINE
                }
                return -1 * (textAnchor == 'end' ? width : width / 2.0);
            }
            return 0;
        }

Any first ideas about what could be make this error ?

Community
  • 1
  • 1
abenevaut
  • 768
  • 1
  • 9
  • 23
  • can you let us know the error you are receiving – Kushal Apr 13 '15 at 11:13
  • W.onerror : error : Uncaught TypeError: undefined is not a function on page: /js/library_bower/canvg/dist/canvg.js on line: 2000 on column: 22 on object: TypeError: undefined is not a function – abenevaut Apr 13 '15 at 11:20
  • The firefox error seem more readable : TypeError: child.measureTextRecursive is not a function canvg.js:2000:15 – abenevaut Apr 13 '15 at 11:27
  • It would be better if you can provide a fiddle – Kushal Apr 13 '15 at 11:36
  • I could not reproduce it on jsfiddle. I tried to make the more simple exemple. I copied the svg that highcharts provide but it doesn't fail on jsfiddle.... http://fiddle.jshell.net/dct9tfvn/78/ – abenevaut Apr 14 '15 at 11:22
  • Cool .. so the problem is solved :p – Kushal Apr 14 '15 at 11:48
  • ^^ troll-ed! Unfortunately, I can not put all online scripts to reproduce exactly the problem ... That sucks . – abenevaut Apr 14 '15 at 12:38
  • Finally, i used highcharts server side image generation http://www.highcharts.com/docs/export-module/render-charts-serverside – abenevaut Apr 21 '15 at 13:08

2 Answers2

2

Use this bower package:

"canvg-gabelerner": "*"

And make sure you include these 3 dependencies:

<script src="bower_components/canvg-gabelerner/rgbcolor.js"></script>
<script src="bower_components/canvg-gabelerner/StackBlur.js"></script>
<script src="bower_components/canvg-gabelerner/canvg.js"></script>

The canvg bower package is old. It was created because original repo was stored on Google code service (now dead).

I hope it helps! :)

Marçal Juan
  • 1,302
  • 14
  • 20
2

It is one of the common issues in HighCharts. This is due to the wrapped text that is found within the <title></title> tag. This usually occurs if your axis labels are too long and they are wrapped to multiple lines. The simple way to resolve this error is to remove all the title elements before exporting to PDF. This doesn't affect any part of your chart.

To remove the title element within your chart container, use JQuery

("#chart_container_id title").remove();

Insert this line at the beginning of the exporting module. Now try to export and this will work fine.

samuellawrentz
  • 1,662
  • 11
  • 23