jQuery chart or graph printing cross browser

Hi all,

sometimes we want to produce a fancy graph or charts on our client side code. There are numerous libraries out there to assist with this requirement. 

Having used jQuery, when searching for a plugin you will first notice the free jqPlot. In fact this is what has been used in the website I work with. The graph looks fine when generated. When the users asked for a printing functionality - this is where all the fun begins, the graphs screw up (either not showing or position has shifted) in certain browsers.

There are three factors to look at when you encounter this issue:
1. Your print.css file
2. Whether you show your graph in a modal window (such as jQuery UI dialog)
3. Cross-browser issue

Normally what we want is to just use window.print instead of specific print functionality provided by the 3rd party library if they exist. This is because we want to print other content as well and not just the chart.

After searching for alternative library, I came across FusionCharts. Looking at the size of their team and documentation this brings me a little bit of hope.

After playing around with it - I can say that it's the way to go. It renders the charts through their swf files - making the charts look fine when printing. 

However, Firefox likes to make our lives hard because of their flash issue. Luckily, the FusionCharts team implemented ManagePrint functionality to address this issue. 
When enabling this functionality you might want to just enable this for Firefox.




so the other browsers don't have this extra overhead.

Modal window issue
Now, if you don't use modal popup this should work very straightforward. If you do using modal popup, this will create problem with the transparent IE background when printing and Firefox also has some issues with the white display. 
The workaround that I did is that when 'Print' button is clicked, just close the dialog, move the chart div to the top of the page and hide everything else then call window.print() - this will print as if you are printing the normal page.

Non-firefox:
When showing the chart div, it takes a few seconds for the chart to get rendered so you might want to delay the window.print() a little bit using setTimeOut function.

Firefox:
The documentation suggests you disable print button until the printManager is ready. However using my workaround, since we are showing the chart on the page when printing and do not want the users to do anything else, I will just try printing it when it's ready.




This should do it. I have tested in IE8/9, Firefox, Chrome and Safari.


HTH,
Andreas

Comments

Popular posts from this blog

SharePoint 2013 anonymous access add attachments to list item

CRM Plugin - Parent and Child Pipeline

Sitecore custom publish agent from specific node and at a specific time