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
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
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
0
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
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.
0
Stefania
Top achievements
Rank 2
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
2. print pie and pivotgrid
My final result should be print 2 charts and a pivot into a temporary div
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
>
</
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
>
</
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
0
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:
Regards,
Danail Vasilev
Telerik
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.