Javascript Print Charts In Div Element Under Ie 8

GWild · May 11, 2012

Hello.

I use the latest commercial version of FusionCharts at my workplace, and I'm still learning. It's great.

My workplace uses IE 8. FF or some other browser is not an option.

I have a page which renders several charts in the single page. The charts are rendered as XML based and they are inside an html table. The table is wrapped in a <DIV> element with a unique ID.

I want to have a button on the page which using javascript will print only the <DIV> element containing the rendered charts. I already have the javascript to isolate the containing <DIV>, and it reads the innerHTML into a new document in preparation for printing.

My problem:

The charts will not render in the window.

I have tried wrapping the innerHTML content in markup to create a fully formed web page - it doesn't work. I have tried placing only the innerHTML in the new window - it doesn't work. I can see the containing table in the print window, but the charts are not present.

The javascript I'm using to capture the chart container innerHTML (the page container name is "dashContent") is below. It works fine.

What can I do to get these charts to render for printing?

 
<script type="text/javascript">

function printContent() {  

   var DocumentContainer = document.getElementById('dashContent'); 
   var WindowObject = window.open('', "PrintWindow", "width=600,height=400,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");  
   WindowObject.document.write('<html><head></head><body>');
   WindowObject.document.writeln(DocumentContainer.innerHTML);
   WindowObject.document.write('</body></html>');
   WindowObject.document.close();
   WindowObject.focus();
   WindowObject.print();
   WindowObject.close();
}
</script>

May 14, 2012

Hello.

I use the latest commercial version of FusionCharts at my workplace, and I'm still learning. It's great.

My workplace uses IE 8. FF or some other browser is not an option.

I have a page which renders several charts in the single page. The charts are rendered as XML based and they are inside an html table. The table is wrapped in a <DIV> element with a unique ID.

I want to have a button on the page which using javascript will print only the <DIV> element containing the rendered charts. I already have the javascript to isolate the containing <DIV>, and it reads the innerHTML into a new document in preparation for printing.

My problem:

The charts will not render in the window.

I have tried wrapping the innerHTML content in markup to create a fully formed web page - it doesn't work. I have tried placing only the innerHTML in the new window - it doesn't work. I can see the containing table in the print window, but the charts are not present.

The javascript I'm using to capture the chart container innerHTML (the page container name is "dashContent") is below. It works fine.

What can I do to get these charts to render for printing?
 
<script type="text/javascript">

function printContent() {  

   var DocumentContainer = document.getElementById('dashContent'); 
   var WindowObject = window.open('', "PrintWindow", "width=600,height=400,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");  
   WindowObject.document.write('<html><head></head><body>');
   WindowObject.document.writeln(DocumentContainer.innerHTML);
   WindowObject.document.write('</body></html>');
   WindowObject.document.close();
   WindowObject.focus();
   WindowObject.print();
   WindowObject.close();
}
</script>

Hi,

Could you please try using the Managed Print feature to print the charts?

FusionCharts JavaScript class offers a separate Print Manger class to take care of this. The implementation of Print Manager is fairly simple. You would just need to add a single line of code in JavaScript which enables Print Manager for all charts present in a web page. Once enabled, all the charts present in a page are prepared to print correctly.

For more information, refer this: http://docs.fusionch...intManager.html

You would need to enable the PrintManger.

Ref. Code:

<script type="text/javascript">
FusionCharts.printManager.enabled(true);

function printContent() {  

   var DocumentContainer = document.getElementById('dashContent'); 
   var WindowObject = window.open('', "PrintWindow", "width=600,height=400,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");  
   WindowObject.document.write('<html><head></head><body>');
   WindowObject.document.writeln(DocumentContainer.innerHTML);
   WindowObject.document.write('</body></html>');
   WindowObject.document.close();
   WindowObject.focus();
   WindowObject.print();
   WindowObject.close();
}
</script>

Hope this helps.

GWild · May 14, 2012

Thank you for the response.

Unfortunately placing that statement in that location in the printContent routine causes a "FusionCharts.printManager is null or not an object" error.

In an attempt to prevent this, I placed the line in my initial include of the FusionCharts.js into my page. While the null error stopped, printing was no better.

I also read the docs and inserted an event listener. No affect.

I'll see if I can figure out some other way.

Thank you.

Hi,

Could you please try using the Managed Print feature to print the charts?

FusionCharts JavaScript class offers a separate Print Manger class to take care of this. The implementation of Print Manager is fairly simple. You would just need to add a single line of code in JavaScript which enables Print Manager for all charts present in a web page. Once enabled, all the charts present in a page are prepared to print correctly.

For more information, refer this: http://docs.fusionch...intManager.html

You would need to enable the PrintManger.

Ref. Code:
<script type="text/javascript">
FusionCharts.printManager.enabled(true);

function printContent() {  

   var DocumentContainer = document.getElementById('dashContent'); 
   var WindowObject = window.open('', "PrintWindow", "width=600,height=400,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");  
   WindowObject.document.write('<html><head></head><body>');
   WindowObject.document.writeln(DocumentContainer.innerHTML);
   WindowObject.document.write('</body></html>');
   WindowObject.document.close();
   WindowObject.focus();
   WindowObject.print();
   WindowObject.close();
}
</script>
Hope this helps.

May 15, 2012

Thank you for the response.

Unfortunately placing that statement in that location in the printContent routine causes a "FusionCharts.printManager is null or not an object" error.

In an attempt to prevent this, I placed the line in my initial include of the FusionCharts.js into my page. While the null error stopped, printing was no better.

I also read the docs and inserted an event listener. No affect.

I'll see if I can figure out some other way.

Thank you.

Hi,

Please find attached illustration which is printing a chart along with the div contents.

Hope this helps.

ChartPrint_WithDiv.zip

GWild · May 15, 2012

Hi,

Please find attached illustration which is printing a chart along with the div contents.

Hope this helps.

Thank you again for the response.

Unfortunately not all of the charts in the <div> print, and those which do so render with corrupted data series lines (these are multiple line charts in a <div> element), or no chart body content at all.

I really like the product, and I appreciate your efforts. Please don't take any more of your time on this.

If it is of interest to anyone else with this problem (which to be honest I believe is primarily an IE issue), I did find an alternative method to do what I needed:

1. Set a CSS @media print style of visibility:hidden for a <div> which wraps the area of the page I don't wish to print.

2. Create an IFrame below the content container.

3. In the body onLoad I set the IFrame style to display: none to hide it.

4. When my print button is clicked, I pull the contents out of the 'regular' page <div> container innerHTML into a javascript variable (var object).

5. Write the <html> and <head> element open tags to the IFrame page.

6. Write the include of FusionCharts.js in the head element of the IFrame page (enabling of managed printing not required here).

7. Open the <body> element of the IFrame and set the innerHTML value to the innerHTML value of the page container <div>.

8. Close the <body> and <html> IFrame page elements.

9. Set the IFrame style to display:block so it can take focus(). This is required or IE will cause errors.

10. Focus() on the IFrame contentWindow.

11. Use window.print() to print the content. The CSS @media print settings force only the content portion to be printed.

12. Set the IFrame innerHTML value to "" to avoid content in the page which is no longer needed.

13. Reset the IFrame style to visibility:hidden to hide it.

While it may not be the method I preferred to use, it prints the charts exactly the way I want. Fully formed chart body content, all page charts on a printed page.

Outstanding documentation on the site by the way.

Edited May 15, 2012 by GWild

May 16, 2012

Thank you again for the response.

Unfortunately not all of the charts in the <div> print, and those which do so render with corrupted data series lines (these are multiple line charts in a <div> element), or no chart body content at all.

I really like the product, and I appreciate your efforts. Please don't take any more of your time on this.

If it is of interest to anyone else with this problem (which to be honest I believe is primarily an IE issue), I did find an alternative method to do what I needed:

1. Set a CSS @media print style of visibility:hidden for a <div> which wraps the area of the page I don't wish to print.

2. Create an IFrame below the content container.

3. In the body onLoad I set the IFrame style to display: none to hide it.

4. When my print button is clicked, I pull the contents out of the 'regular' page <div> container innerHTML into a javascript variable (var object).

5. Write the <html> and <head> element open tags to the IFrame page.

6. Write the include of FusionCharts.js in the head element of the IFrame page (enabling of managed printing not required here).

7. Open the <body> element of the IFrame and set the innerHTML value to the innerHTML value of the page container <div>.

8. Close the <body> and <html> IFrame page elements.

9. Set the IFrame style to display:block so it can take focus(). This is required or IE will cause errors.

10. Focus() on the IFrame contentWindow.

11. Use window.print() to print the content. The CSS @media print settings force only the content portion to be printed.

12. Set the IFrame innerHTML value to "" to avoid content in the page which is no longer needed.

13. Reset the IFrame style to visibility:hidden to hide it.

While it may not be the method I preferred to use, it prints the charts exactly the way I want. Fully formed chart body content, all page charts on a printed page.

Outstanding documentation on the site by the way.

Hi,

Appreciate your efforts.

Thanks for sharing the alternative.

It would be helpful for everyone.

Sign In

Javascript Print Charts In Div Element Under Ie 8

Recommended Posts

GWild

Share this post

Link to post

Share on other sites

Guest Sumedh

Share this post

Link to post

Share on other sites

GWild

Share this post

Link to post

Share on other sites

Guest Sumedh

Share this post

Link to post

Share on other sites

GWild

Share this post

Link to post

Share on other sites

Guest Sumedh

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity