Sign in to follow this  

Writing Chart to Child Window

Recommended Posts

Hi there,


Long time user first time poster.


I've been given a requirement to do some formatting and subsequent printing of a report. The long and short of which being that part of the process is taking the contents of my report main data div (ReportDataContainer) and writing it to a child window (drill).


On the base report the charts are rendering without any issue.

On the new print window when testing on my local instance the chart renders without issue.

After deployment to our development branch the charts no longer render.


Here's the JS code that's being used: -

function PrintDrill() {
    var cssArray = document.getElementsByTagName('style');
    var css = "";
    for (var i = 0; i < cssArray.length; i++) {
        css += "<style type='text/css'>" + cssArray[i].innerHTML + "</style>";
    drill =;
    drill.document.write("<html>" +
        "<head>" + css +
        "<script type='text/javascript'>" +
        "function FC_Rendered(DOMId) { $(\"#\" + DOMId.split(\"_\")[0] + \"Loaded\").val('true'); } " +
        "<\/script>" +
        "<script type=\"text/javascript\" src='/CTWebScripts/Libraries/jquery-1.5.min.js'><\/script>" +
        "<script type=\"text/javascript\" src='/CTWebScripts/Libraries/jquery.color.js'><\/script>" +
        "</head>" +
        "<body>" +
        "<input type='hidden' id='divActualYearGraphLoaded' name='actualYearGraphLoaded' value='false' />" +
        "<input type='hidden' id='divParcGraphLoaded' name='parcGraphLoaded' value='false' />" +
        $("#ReportDataContainer").html() +

    setTimeout(finishedRendering, 2000);

var drill = null;

function finishedRendering() {
    var loadedActualYear = $('#divActualYearGraphLoaded', drill.document).val();
    var loadedParc = $('#divParcGraphLoaded', drill.document).val();
    if (loadedActualYear == 'true' && loadedParc == 'true') {
        setTimeout(printMyChild, 3000);
    } else {
        setTimeout(finishedRendering, 1000);

function printMyChild() {

Now one would imagine if it works one place and not the other - it would imply the code is either correct or not handling a possible eventuality that probably it should. It COULD be related to settings on the hosting site.... and the one thing it shouldn't be is IE settings.


Sooooo.... any thoughts on what could cause this behavior?

Share this post

Link to post
Share on other sites

Some additional information - this is the difference in the chart div contents AFTER copying to the new window.


Local instance (the one that works): -

<div id="divActualYearGraph_Control_ChartDivDiv">
	<object width="100%" height="430" class="FusionCharts" id="divActualYearGraph_Control_ChartDiv" data="/CTWebCharts/V3/StackedColumn3DLine.swf" type="application/x-shockwave-flash" lang="EN" style="visibility: visible;">
		<param name="scaleMode" value="noScale">
		<param name="scale" value="noScale">
		<param name="wMode" value="opaque">
		<param name="bgColor" value="#ffffff">
		<param name="allowScriptAccess" value="always">
		<param name="quality" value="best">
		<param name="flashvars" value="*snip*">

The development instance (the one that doesn't): -

<DIV id=divActualYearGraph_Control_ChartDivDiv>
	<OBJECT lang=EN id=divActualYearGraph_Control_ChartDiv class=FusionCharts style="VISIBILITY: visible" classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width="100%" height=430>
		<PARAM NAME="_cx" VALUE="10081">
		<PARAM NAME="_cy" VALUE="11377">
		<PARAM NAME="FlashVars" VALUE="*snip*">
		<PARAM NAME="Movie" VALUE="/CTWebCharts/V3/StackedColumn3DLine.swf">
		<PARAM NAME="Src" VALUE="/CTWebCharts/V3/StackedColumn3DLine.swf">
		<PARAM NAME="WMode" VALUE="Opaque">
		<PARAM NAME="Play" VALUE="0">
		<PARAM NAME="Loop" VALUE="-1">
		<PARAM NAME="Quality" VALUE="High">
		<PARAM NAME="Menu" VALUE="-1">
		<PARAM NAME="Base" VALUE="">
		<PARAM NAME="AllowScriptAccess" VALUE="always">
		<PARAM NAME="Scale" VALUE="NoScale">
		<PARAM NAME="DeviceFont" VALUE="0">
		<PARAM NAME="EmbedMovie" VALUE="0">
		<PARAM NAME="SWRemote" VALUE="">
		<PARAM NAME="MovieData" VALUE="">
		<PARAM NAME="SeamlessTabbing" VALUE="1">
		<PARAM NAME="Profile" VALUE="0">
		<PARAM NAME="ProfileAddress" VALUE="">
		<PARAM NAME="ProfilePort" VALUE="0">
		<PARAM NAME="AllowNetworking" VALUE="all">
		<PARAM NAME="AllowFullScreen" VALUE="false">
		<PARAM NAME="AllowFullScreenInteractive" VALUE="false">
		<PARAM NAME="IsDependent" VALUE="0">

UPDATE: So while writing this I worked out it was compatibility mode causing the issue. I'm not sure why exactly yet. I had been changing the compatibility mode of the print (drill) window NOT that of the base report. But obviously its the base report that renders the div and then copy's it verbatim across. So - it works fine in non-compatibility mode. However if you have it in compatibility mode it then doesn't render. WHY exactly? Not sure - as the opened window is in compatibility mode also when I checked so you'd like to think with no special metadata being set on the base report and none being set in the window it should behave the same.


But no.


Oh well. Unfortunately I need this working in both compatibility and non-compatibility so I'm going to have to keep looking.

Share this post

Link to post
Share on other sites



Welcome to FusionCharts Forum.


After going through your code we realized that you are using a very old version of FusionCharts and we strongly recommend you to upgrade because the version you are using is no longer supported, also FusionCharts have upgraded to JavaScript only rendering which is supported across PCs, Macs, iPads, iPhones or Android devices. Flash is no longer supported in FusionCharts.


You can download the latest trial version of FusionCharts here:



Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this