This is a migrated thread and some comments may be shown as answers.

[Solved] Print on Chrome black color

3 Answers 104 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

Mattia asked on 27 May 2014, 09:33 AM

chromebug.png

Hi
I'm trying to copy into a new div my htmlchart and print it with Chrome (Version 35.0.1916.114 m).
My page structure is the following:
- RadSplitter
        |_ RadPane
                   |_ Div (id = pieContainer)
                                   |_ RadHtlmChart

- Div (id=newDiv)

On print button click

function PrintableVersion() {

//find telerik object container

var pieContainer = $telerik.$("#pieDiv");

//append pie

$("#newDiv").append(pieContainer.clone(true));

//imposto la pagina come A4 orizzontale

$(".A4Page").css({ width: "29.7cm", "min-height": "19cm", "margin-top": "10px", "padding-top": "10px", visibility: "visible" });

//hide splitter

var splitter = $find("<%=RadSplitter1.ClientID %>");

splitter.set_visible(false);

//lancio la stampa

window.print();

//reset page

$("#newDiv").empty();

$(".A4Page").css({ height: "0", visibility: "hidden" });

splitter.set_visible(true);

}

</script>

See the attach for the result
pie chart is black

If I changed this row
     $("#newDiv").append(pieContainer.clone(true));
with
     $("#newDiv").append($get("pieDiv").innerHTML);
same problem

If I changed with (no clone)
     $("#newDiv").append(pieContainer);
it works but I lost the pie into the original page

thanks

3 Answers, 1 is accepted

answered on 30 May 2014, 07:06 AM

PieChart-Print.zip

Hello Stefania,

I have tried to reproduce the mentioned issue but to no avail - the Pie chart is properly printed in Chrome version 35.0.1916.114 m. You can watch the short video test and then tell me what I am missing.

Could you please try to reproduce the issue with the attached VS example and then tell us what changes you have made, so that I can proceed further with the investigation?

Regards,
Danail Vasilev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 30 May 2014, 01:32 PM

Hi Danail,
thanks for the example

I made two example but I can't attach the zip
The selected file(s) cannot be attached because it may exceed the maximum attachment size (2 MB) or is from not allowed type (allowed: .jpg, .jpeg, .gif, .png).

Anyway.. this the code (there is no code-behind just .aspx)
Both of my example return a black pie

1. create and remove the print div directly from js function

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/jscript">

function PrintableVersion() {

var $div = $('<div />').appendTo($("#form1"));

$div.attr('id', 'divPrintableArea');

$div.css({

width: "29.7cm",

"vertical-align": top,

"min-height": "19cm",

"margin": "10px",

"padding": "10px",

visibility: "visible"

});

//recupero gli oggetti da stampare

var pieContainer = $telerik.$("#pieDiv");

pieContainer.css({ float: "none", width: "90%" });

//aggiungo la torta

$ = $telerik.$;

//$("#newDiv").append(pieContainer.clone(true));

$div.append(pieContainer.clone(true));

//nascondo lo splitter principale

var splitter = $find("<%=RadSplitter1.ClientID %>");

splitter.set_visible(false);

//lancio la stampa

window.print();

//svuoto il contenitore da stampare e resetto il css nascondendo il div

$div.remove();

//$("#newDiv").empty();

//rivisualizzo lo splitter principale

splitter.set_visible(true);

}

</script>

</telerik:RadScriptBlock>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="90%" SplitBarsSize="5px"

meta:resourcekey="RadSplitter1Resource1">

<telerik:RadPane ID="RadPane3" runat="server" Width="20%" Index="0" meta:resourcekey="RadPane1Resource1">

<div style="margin: 5px;">

filter

</div>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" Index="1"

meta:resourcekey="RadSplitbar1Resource1" ResolvedRenderMode="Classic">

</telerik:RadSplitBar>

<telerik:RadPane ID="Radpane4" runat="server" Width="80%" Index="2" meta:resourcekey="Radpane2Resource1"

Visible="true">

<telerik:RadAjaxPanel runat="server" ID="PivotAndChartPanel" LoadingPanelID="RadAjaxLoadingPanelMain"

RenderMode="Inline" meta:resourcekey="PivotAndChartPanelResource1">

<telerik:RadSplitter ID="RadSplitter3" runat="server" Width="100%" Height="100%"

SplitBarsSize="5px" Orientation="Horizontal" FullScreenMode="True" meta:resourcekey="RadSplitter2Resource1"

ResolvedRenderMode="Classic">

<telerik:RadPane ID="RadPane5" runat="server" Height="50%" Width="100%" Index="0"

meta:resourcekey="RadPane3Resource1" ResolvedRenderMode="Classic">

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanelPivotGrid" RenderMode="Inline"

Visible="true" meta:resourcekey="RadAjaxPanelChartsResource1">

<div style="margin: 5px;">

<div id="buttons">

<telerik:RadButton runat="server" ID="RadButton1" Text="Print" AutoPostBack="false"

meta:resourcekey="PrintButtonResource1" OnClientClicked="PrintableVersion">

</telerik:RadButton>

</div>

<div style="width: 98%; vertical-align: top" id="pivotContainer">

grid

</div>

</telerik:RadAjaxPanel>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Both" Index="1"

meta:resourcekey="RadSplitbar2Resource1">

</telerik:RadSplitBar>

<telerik:RadPane ID="PaneCharts" runat="server" Height="50%" Width="100%" Index="2"

meta:resourcekey="PaneChartsResource1">

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanelCharts" RenderMode="Inline"

Visible="true" meta:resourcekey="RadAjaxPanelChartsResource1">

<div style="float: left; width: 50%; margin-bottom: 5px;" id="stackedDiv">

stacked

</div>

<div style="float: right; width: 50%; margin-bottom: 5px;" id="pieDiv">

<telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="400px"

Height="400px">

<PlotArea>

<Series>

<telerik:PieSeries StartAngle="90">

<LabelsAppearance Position="Center" DataFormatString="{0} %" />

<TooltipsAppearance DataFormatString="{0} %" />

<SeriesItems>

<telerik:PieSeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer"

Y="18.3" />

<telerik:PieSeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" Y="35.8" />

<telerik:PieSeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" Y="38.3" />

<telerik:PieSeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" Y="4.5" />

<telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" Y="2.3" />

</SeriesItems>

</telerik:PieSeries>

</Series>

</PlotArea>

<ChartTitle Text="Browser Usage for April 2012">

</ChartTitle>

</telerik:RadHtmlChart>

</div>

</telerik:RadAjaxPanel>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadAjaxPanel>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

2. print pie and pivotgrid

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/jscript">

function PrintableVersion() {

//recupero gli oggetti da stampare

var pivot = $telerik.$("#pivotGrid");

var pieContainer = $telerik.$("#pieDiv");

pieContainer.css({ float: "none", width: "90%" });

//aggiungo la torta

$ = $telerik.$;

$("#newDiv").append(pieContainer.clone(true));

$("#newDiv").append(pivot.clone(true));

//nascondo lo splitter principale

var splitter = $find("<%=RadSplitter1.ClientID %>");

splitter.set_visible(false);

//lancio la stampa

window.print();

//svuoto il contenitore da stampare e resetto il css nascondendo il div

$("#newDiv").empty();

//rivisualizzo lo splitter principale

splitter.set_visible(true);

}

</script>

<div id="newDiv"></div>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="90%" SplitBarsSize="5px"

meta:resourcekey="RadSplitter1Resource1">

<telerik:RadPane ID="RadPane3" runat="server" Width="20%" Index="0" meta:resourcekey="RadPane1Resource1">

<div style="margin: 5px;">

filter

</div>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" Index="1"

meta:resourcekey="RadSplitbar1Resource1" ResolvedRenderMode="Classic">

</telerik:RadSplitBar>

<telerik:RadPane ID="Radpane4" runat="server" Width="80%" Index="2" meta:resourcekey="Radpane2Resource1"

Visible="true">

<telerik:RadAjaxPanel runat="server" ID="PivotAndChartPanel" LoadingPanelID="RadAjaxLoadingPanelMain"

RenderMode="Inline" meta:resourcekey="PivotAndChartPanelResource1">

<telerik:RadSplitter ID="RadSplitter3" runat="server" Width="100%" Height="100%"

SplitBarsSize="5px" Orientation="Horizontal" FullScreenMode="True" meta:resourcekey="RadSplitter2Resource1"

ResolvedRenderMode="Classic">

<telerik:RadPane ID="RadPane5" runat="server" Height="50%" Width="100%" Index="0"

meta:resourcekey="RadPane3Resource1" ResolvedRenderMode="Classic">

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanelPivotGrid" RenderMode="Inline"

Visible="true" meta:resourcekey="RadAjaxPanelChartsResource1">

<div style="margin: 5px;">

<div id="buttons">

<telerik:RadButton runat="server" ID="RadButton2" Text="Print" AutoPostBack="false"

meta:resourcekey="PrintButtonResource1" OnClientClicked="PrintableVersion">

</telerik:RadButton>

</div>

<div style="width: 98%; vertical-align: top" id="pivotContainer">

<telerik:RadPivotGrid runat="server" ID="pivotGrid"></telerik:RadPivotGrid>

</div>

</telerik:RadAjaxPanel>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Both" Index="1"

meta:resourcekey="RadSplitbar2Resource1">

</telerik:RadSplitBar>

<telerik:RadPane ID="PaneCharts" runat="server" Height="50%" Width="100%" Index="2"

meta:resourcekey="PaneChartsResource1">

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanelCharts" RenderMode="Inline"

Visible="true" meta:resourcekey="RadAjaxPanelChartsResource1">

<div style="float: right; width: 50%; margin-bottom: 5px;" id="pieDiv">

<telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="400px"

Height="400px">

<PlotArea>

<Series>

<telerik:PieSeries StartAngle="90">

<LabelsAppearance Position="Center" DataFormatString="{0} %" />

<TooltipsAppearance DataFormatString="{0} %" />

<SeriesItems>

<telerik:PieSeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer"

Y="18.3" />

<telerik:PieSeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" Y="35.8" />

<telerik:PieSeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" Y="38.3" />

<telerik:PieSeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" Y="4.5" />

<telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" Y="2.3" />

</SeriesItems>

</telerik:PieSeries>

</Series>

</PlotArea>

<ChartTitle Text="Browser Usage for April 2012">

</ChartTitle>

</telerik:RadHtmlChart>

</div>

</telerik:RadAjaxPanel>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadAjaxPanel>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

My final result should be print 2 charts and a pivot into a temporary div

answered on 03 Jun 2014, 10:54 AM

Hi Stefania,

Thank you for providing us with a runnable sample that reproduces the issue.

The clone method actually copies the DOM elements and not the JavaScript object itself, which leads to the mentioned issue with the chart printing when the 'mother' chart is hidden in Chrome. What I can suggest is that you follow the approach from HtmlChart - Chart Printing online demo. For example:

function PrintableVersion(sender, args) {

var chartContainer = $telerik.$("#pieDiv");

//save the original CSS rules that will be modified

var chartOriginalCSS = {

display: chartContainer.css("display"),

position: chartContainer.css("position"),

top: chartContainer.css("top"),

left: chartContainer.css("left"),

zIndex: chartContainer.css("zIndex"),

visibility: chartContainer.css("visibility")

};

//make sure the chart container is visible

chartContainer.css({

display: "block",

position: "absolute",

top: "6px",

left: "1px",

zIndex: 10000,

visibility: "visible"

}

);

var body = $telerik.$("body");

//store the original CSS rules for the body tag that will be modified

var bodyOriginalCSS = {

visibility: body.css("visibility"),

overflow: body.css("overflow"),

background: body.css("background"),

height: body.css("height")

};

//hide the body tag

body.css({

visibility: "hidden",

overflow: "hidden",

background: "transparent",

height: chartContainer.css("height")

});

//call the browser print() method

window.print();

//restore the original CSS properties

chartContainer.css(chartOriginalCSS);

body.css(bodyOriginalCSS);

}

Regards,
Danail Vasilev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.