CODEWITHSUNDEEP
javascriptprintingsvgraphael
Ben
Ben

Reputation: 1787

Print large Raphael JS chart accross multiple pages

I have a large chart produced with Raphael, that I want to display in a printer-friendly page. With smaller charts this works beautifully even down to IE7 (min requirement).
But if the chart is too long vertically it doesn't split across pages, instead the bottom is just cut off; this happens in all browsers.

Any suggestions as to how I might solve this problem? Preferably without just making it smaller.

Thanks

Upvotes: 0

Views: 594

Answers (1)

Shamasis Bhattacharya
Shamasis Bhattacharya

Reputation: 3502

What you want to achieve is not directly possible. Raphael container element marks overflow:hidden style and as such for browsers that considers partial page split as overflow, it would be very difficult to split the output - especially if the overflow is horizontal.

As a workaround, you may convert Raphael's SVG into canvas by using the canvg JS library. Canvas, being a single raster element, will allow seamless overflow.

You can have a look at this fiddle where I use FusionCharts' (internally using Raphael) SVG to output to a canvas.

canvg("myCanvasElementId", myRaphaelPaper.canvas.parentNode.innerHTML);

In the above code snippet, I assume that you already have a canvas element with id myCanvasElementId and a Raphael paper called myRaphaelPaper.

Refer to this fiddle where I have rendered Raphael SVG and exported it to canvas and then made it visible only for CSS print media. The Raphael element is made to render 15in by 15in to overflow document.

Note that this will be limited to modern browsers supporting canvas.

Upvotes: 1

Related Questions