I have a bar chart on a ASPX (vb.net) page. I also have a print button. On pressing the print button, I want to diplay only the graph for printing by using the innerHTML method.
innerHTML does display text but does not displar the Bar Chart.
Please help
<script type="text/javascript">
function printChart() {
var html = '<HTML>\n<HEAD>\n';
html += '<link rel="stylesheet" type="text/css" href="../../../Styles/print.css" media="print"> \n';
html += '\n</HEAD>\n<BODY>\n';
html += '\n<div>';
var printReadyElement = document.getElementById("cChart");
if (printReadyElement != null) {
html += printReadyElement.innerHTML;
}
else {
alert("Trouble printing Chart");
return;
}
html += '\n</div>';
html += '\n</BODY>\n</HTML>';
var printWin = window.open("Yearly Comparison", "printSpecial");
printWin.document.open();
printWin.document.write(html);
printWin.document.close();
//alert("Printing");
printWin.print();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="cYear">
<table width="50%">
<tr>
<td>Year From </td>
<td>
<asp:TextBox ID="txtFrom" runat="server"></asp:TextBox>
<asp:RangeValidator ID="RangeValidator1" runat="server" Type="Integer" ControlToValidate="txtFrom" MaximumValue="3000" MinimumValue="2023"
ValidationGroup="form" ForeColor="Red" ErrorMessage="Must be between 2024 and 2090" />
</td>
<td>
<asp:Button ID="btnYearly" runat="server" Text="Yearly" />
</td>
</tr>
<tr>
<td>Year To</td>
<td>
<asp:TextBox ID="txtTo" runat="server"></asp:TextBox>
<asp:RangeValidator ID="RangeValidator2" runat="server" Type="Integer" ControlToValidate="txtTo" MaximumValue="3000" MinimumValue="2023"
ValidationGroup="form" ForeColor="Red" ErrorMessage="Must be between 2024 and 2090" />
</td>
<td>
<asp:Button ID="btnMonthly" runat="server" Text="Monthly" />
<input type="button" value="Print" onclick="printChart()" style="width: 99px; height: 26px;" /></td>
</tr>
</table>
<br />
<br />
<br />
</div>
<div id="cChart">
<asp:Chart ID="grChart" runat="server" Height="465px" Width="1053px" ViewStateContent="All">
<Series>
<asp:Series Name="Series1" Legend="Legend1">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
<Legends>
<asp:Legend Name="Legend1">
</asp:Legend>
</Legends>
</asp:Chart>
</div>
</form>
</body>
</html>
