0

I'm new to the Stackoverflow and new to the programming..

In my project we are generating diff charts dynamically..

My requirement is adding a exporting as jpeg functionality for the gauge charts.. As part of my project we have added download button for dynamically generated each chart.when user click on the download button it is showing JPEG IMAGE ICON, and when user clicks on that JPEG IMAGE ICON, Image has to download..

MY chart code is:

<div id="podContent_0" class="widget-body chart">
<div id="gaugeCount_0" align="center" style="overflow: hidden;">
<div id="glossyGauge0" style="float: left;padding-right: 5px;" widgetid="glossyGauge0">
<div class="dojoxGaugeContent" style="width: 150px; height: 150px;">
<svg overflow="hidden" width="150" height="150">
........
........
</svg>
</div>
</div>
<div id="glossyGauge1" style="float: left;padding-right: 5px;" widgetid="glossyGauge1">
<div class="dojoxGaugeContent" style="width: 150px; height: 150px;">
<svg overflow="hidden" width="150" height="150">
........
........
</svg>
</div>
</div>
<div id="glossyGauge2" style="float: left;padding-right: 5px;" widgetid="glossyGauge2">
<div class="dojoxGaugeContent" style="width: 150px; height: 150px;">
<svg overflow="hidden" width="150" height="150">
........
........
</svg>
</div>
</div>
</div>
</div>

So My chart code contains svg tags. im new to this SVG..

I have used canvg for this functionality

But getting error like : ERROR: Element 'parsererror' not yet implemented. canvg.js:2619

My code Is:

I created a canvas

<canvas id="myCanvas" width="400px" height="200px"></canvas>

and

var svg = document.getElementById('#podContent_'+i).innerHTML.trim();
var canvas = document.getElementById("myCanvas");
canvg(canvas, svg, { renderCallback: function () {
  var img = canvas.toDataURL("image/png");
  window.open(img);
});

But finally i'm getting a BLANK IMAGE with error saying:

ERROR: Element 'parsererror' not yet implemented. canvg.js:2619

Please Anyone help me.....

Thanks in advance........

java developer
  • 393
  • 2
  • 7
  • 20

3 Answers3

1

It's possible that your SVG content, while understood by your browser, cannot be parsed by canvg.

Does your example work as you expect when you use an extremely simple SVG, like this, or does that also throw the parsererror?

<svg >
   <circle cx="75" cy="75" r="25"  stroke="black"  />
</svg>
Nate from Kalamazoo
  • 426
  • 2
  • 6
  • 1
    this is the right answer; since canvas cannot load SVG natively, canvg is literally trying to parse and draw the file onto the canvas, and your SVG simply contains instructions that canvg hasn't been made aware of by its authors yet. Filing a canvg bug report would probably be a good idea. – Mike 'Pomax' Kamermans Jun 13 '13 at 14:52
  • Thanks for replying Nate. I added Circle is coming fine But my gauge image is not coming and im adding the url of Gauge Charts http://dojotoolkit.org/reference-guide/1.9/dojox/gauges/GlossyCircularGauge.html – java developer Jun 13 '13 at 18:44
  • @santhosh, can you please post the SVG code that's generated by `document.getElementById('#podContent_'+i).innerHTML.trim();` – Nate from Kalamazoo Jun 13 '13 at 20:16
1

This solved it for me: 

var svg = document.querySelector('svg');
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svg);
var canvas = document.getElementById("test");
canvg(canvas, svgString);

thanks to: canvg doesn't work with svg already placed in body?

Community
  • 1
  • 1
skittledev
  • 21
  • 4
0

Try this :

var svg = document.getElementById('#podContent_'+i).innerHTML.trim().replace('&nbsp;',' ');

XML Parser doesn't like &nbsp; and GWT Chart format number label with &nbsp; (ex. 1000 is writing in svg element like this : 1&nbsp;000)

skalimer0
  • 1
  • 2