Cylinder Printing

[tbrinegar]

I have a project that is using the cylinders using percentages.  I have verified that the print feature does not work whatsoever when rendering the fill color.  This is also true on the FusionCharts website demos.  Is this an issue with using the HTML5 variant and not the Flash version?  Any way to correct?

 

Thanks in advance.

 

~Thomas

[Sanjukta]

I have a project that is using the cylinders using percentages.  I have verified that the print feature does not work whatsoever when rendering the fill color.  This is also true on the FusionCharts website demos.  Is this an issue with using the HTML5 variant and not the Flash version?  Any way to correct?

 

Thanks in advance.

 

~Thomas

Hi Thomas,

 

Welcome to FusionCharts Forum!

 

Could you please confirm if you have set "manageResize" attribute to '1' in the <chart> element of the XML?

 

Also, please provide us with the XML data so that we might test it.

 

Hope this helps.

[tbrinegar]

Thanks for the reply Sanjukta,

 

I have confirmed that the manageResize attribute is set to 1.  Here is a sample of the XML that is being fed from our API:

 

Note: We are relying on jQuery to parse out each of the chart nodes and rendering a separate graph for each on the page--which is working fine as each of the 5 cylinders render on the page with no problems.  It's only when we go to print the page content that we notice there is no fill on the cylinders.

 

<Root>
<chart caption="0-59 Days" manageResize="1" bgColor="FFFFFF" bgAlpha="0" showBorder="0" lowerLimit="0" upperLimit="100" showTickMarks="1" showTickValues="1" showLimits="0"numberSuffix="%" decimals="1" cylFillColor="82CF27" baseFontColor="82CF27" chartLeftMargin="10" chartRightMargin="10" chartTopMargin="10">
<value>0.1</value>
</chart>
<chart caption="60-89 Days" manageResize="1" bgColor="FFFFFF" bgAlpha="0" showBorder="0" lowerLimit="0" upperLimit="100" showTickMarks="1" showTickValues="1" showLimits="0"numberSuffix="%" decimals="1" cylFillColor="8BBA00" baseFontColor="8BBA00" chartLeftMargin="10" chartRightMargin="10" chartTopMargin="10">
<value>4.4</value>
</chart>
<chart caption="90-119 Days" manageResize="1" bgColor="FFFFFF" bgAlpha="0" showBorder="0" lowerLimit="0" upperLimit="100" showTickMarks="1" showTickValues="1" showLimits="0"numberSuffix="%" decimals="1" cylFillColor="F6BD0F" baseFontColor="F6BD0F" chartLeftMargin="10" chartRightMargin="10" chartTopMargin="10">
<value>38.2</value>
</chart>
<chart caption="120-149 Days" manageResize="1" bgColor="FFFFFF" bgAlpha="0" showBorder="0" lowerLimit="0" upperLimit="100" showTickMarks="1" showTickValues="1" showLimits="0"numberSuffix="%" decimals="1" cylFillColor="F48D36" baseFontColor="F48D36" chartLeftMargin="10" chartRightMargin="10" chartTopMargin="10">
<value>32.0</value>
</chart>
<chart caption="150+ Days" manageResize="1" bgColor="FFFFFF" bgAlpha="0" showBorder="0" lowerLimit="0" upperLimit="100" showTickMarks="1" showTickValues="1" showLimits="0"numberSuffix="%" decimals="1" cylFillColor="B40001" baseFontColor="B40001" chartLeftMargin="10" chartRightMargin="10" chartTopMargin="10">
<value>25.3</value>
</chart>
</Root>

Again, thanks for taking a look into this.

 

[tbrinegar]

I think this may be an issue with the chart itself--you can see this same behavior taking place on your own demo pages at:

 

http://www.fusioncharts.com/demos/gallery/chart_barebone.asp?cylinder_9

 

Whenever I print (in any browser), and zoom way in on the print preview--You can see a slight outline of where the cylinder should be filled.  It almost looks like it is layered wrong and the color does not show through.

[Swarnam]

Hi,

 

The Cylinder gauge is being displayed with fill colors while printing the demo gallery link page.

 

Please find the attached screenshot using FireFox browser. Can you please attach your results for further testing?

[tbrinegar]

I've gone through and checked browsers

• Firefox (working)
• Opera (working)
• Safari (working)
• IE [10] (working)
• Chrome (not working)

Here is a link to the screenshot of the print preview page of the demo on your site: 
https://dl.dropboxusercontent.com/u/64288206/chrome-screenshot.png

 

This is also true on the physical print out of the page when printing from Google Chrome.

Edited August 22, 2013 by tbrinegar

[tbrinegar]

Any ideas as to why this is not supported for Chrome or any workarounds?

Edited August 23, 2013 by tbrinegar

[Swarnam]

Hey,

 

This is a known issue with Chrome browser. Any SVG element with gradient are distorted during print(even in print preview). Hence,it is a browser limitation.

 

Issue id https://code.google.com/p/chromium/issues/detail?id=99458

 

Hope this helps.

[tbrinegar]

According to the link you sent, that issue was fixed August 23rd.  And if it were purely a browser limitation, I would expect the other graphs we are using not to work while printing--yet they do.  With gradients applied.

Edited August 27, 2013 by tbrinegar