PrimeFaces print doesn't work with p:chart - jsf

Question

I'm using primeface print just like below
<ui:define name="content" id="content">
<h:form id="common_chart_form" prependId="flase">
<p:growl id="growl" showDetail="true" autoUpdate="true"
sticky="false" />
<p:outputLabel id="labelvalue" value="aaaaaaaaaa"/>
<p:chart id="chart" type="bar"
model="#{commonChartController.barModel}" style="height:300px" />
<p:commandButton value="Print" type="button" icon="ui-icon-print">
<p:printer target="chart" />
</p:commandButton>
<p:commandButton value="Back" action="admin_sales_reports" />
</h:form>
</ui:define>
i need to print the chart but unfortunately it cannot print. then to test the print target i tried to print the "labelvalue" it printed what is the wrong thing that im doing in this code
this is the screen shot of the page

Answer 1

You can do it in a more elegant way, without the need of the outputPanel declared in the page:
Javascript function:
function print(component){
var out = document.createElement('div');
out.appendChild(PF(component).exportAsImage());
var innerHTML = out.innerHTML;
var openWindow = window.open('', 'Report', '');
openWindow.document.write(innerHTML);
openWindow.document.close();
openWindow.focus();
openWindow.print();
openWindow.close();
}
Define widgetVar for chart:
<p:chart widgetVar="chart2" type="bar" model="#{chartsBean.barModel2}" />
Call the print function:
<p:commandLink id="lnk" onclick="print('chart2')"/>

Answer 2

Here is how you do it - found a thread from Brazil that showed it:
1 - Create a dialog like this:
<p:dialog widgetVar="outputDialog" showEffect="fade" modal="true" header="Header Name">
<p:outputPanel id="output" layout="block" style="width:860px;height:540px"/>
</p:dialog>
2 - Create your charts with a widgetVar like this:
<p:chart widgetVar="chart1" type="bar" model="#{chartsBean.barModel1}" style="height:300px;width:800px;"/>
<p:spacer height="40px"/>
<p:chart widgetVar="chart2" type="bar" model="#{chartsBean.barModel2}" style="height:300px;width:800px;"/>
<p:spacer height="40px"/>
<p:chart widgetVar="chart3" type="bar" model="#{chartsBean.barModel3}" style="height:300px;width:800px;"/>
<p:spacer height="40px"/>
<p:chart widgetVar="chart4" type="line" model="#{chartsBean.lineModel1}" style="height:300px;width:800px;"/>
<p:spacer height="40px"/>
<p:chart widgetVar="chart5" type="line" model="#{chartsBean.lineModel2}" style="height:300px;width:800px;"/>
<p:spacer height="40px"/>
<p:chart widgetVar="chart6" type="line" model="#{chartsBean.lineModel3}" style="height:300px;width:800px;"/>
3 - Create a javascript function like this:
function print() {
$('#output').empty().append(PF('chart1').exportAsImage());
$('#output').append(PF('chart2').exportAsImage());
$('#output').append(PF('chart3').exportAsImage());
$('#output').append(PF('chart4').exportAsImage());
$('#output').append(PF('chart5').exportAsImage());
$('#output').append(PF('chart6').exportAsImage());
//PF('outputDialog').show();
var innerHTML = $('#output')[0].innerHTML;
if (innerHTML != null){
var openWindow = window.open("", 'Report', "");
openWindow.document.write(innerHTML);
openWindow.document.close();
openWindow.focus();
openWindow.print();
openWindow.close();
}
}
4 - Create a menubar, command button, or any other way of invoking the print() function. Here is my way:
<p:menubar>
<p:menuitem value="Print" icon="ui-icon-print" action="javascript.void(0);" onclick="print();"/>
<p:menuitem value="Email" icon="ui-icon-mail-closed" action="javascript.void(0);" onclick="alert('email');"/>
</p:menubar>

Answer 3

Only put this (onclick="print();").
<p:commandButton value="Print" type="button" icon="ui-icon-print" style="display:block;margin-bottom: 20px" onclick="print();"/>
Thats it.

Answer 4

According to this post, it's not possible to print a chart. A solution is given in the last post.

Answer 5

You can use script to export chart as image to a panel which has same height with chart and z-index property value less than chart. Exp:
<h:form>
<p:commandButton value="Print" style="margin:10px;"
onclick="$('#output').empty().append(PF('chart').exportAsImage());">
<p:printer target="output"></p:printer>
</p:commandButton>
</h:form>
<p:outputPanel id="output" layout="block"
style="position:absolute;height:300px;z-index:1" />
<p:chart widgetVar="chart" type="bar" model="#{bean.barModel}"
style="height:300px;z-index:1000;background:#fff"></p:chart>