I’m trying to export a dhtmlxChart created via an XSL to an image so people can save it.
The chart is build properly and works fine, so i added a button “Save as pic” that should create a canvas from the body and append it to the bottom of the page.
Here is my xsl code:
[code]<xsl:stylesheet version=‘2.0’ xmlns:xsl=‘XSLT Namespace’>
<xsl:decimal-format name=“format” grouping-separator=“.” decimal-separator=“,”/>
<xsl:variable name="VarMaand"><xsl:value-of select="//rows/row[last()]/@Maand" /></xsl:variable>
<xsl:variable name="VarJaar"><xsl:value-of select="//rows/row[last()]/@Jaar" /></xsl:variable>
<xsl:template match="/">
<html>
<style>
td { border:1px;
border-style:solid;
border-color:#000000;
height:20px;
text-align:center;
}
</style>
<head>
<script src="/LIB/JS/dhtmlxSuite/dhtmlxChart/codebase/dhtmlxchart.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="/LIB/JS/dhtmlxSuite/dhtmlxChart/codebase/dhtmlxchart.css"/>
<script src="/LIB/JS/html2canvas.js" type="text/javascript"></script>
<script>
var chart;
window.onload = function() {
chart = new dhtmlXChart({
view:"stackedBar",
container:"chart1",
value:"#Value1#",
width:10,
xAxis:{lines: false,template:function(obj, common, data){
if (obj.Maand%2)
{if (obj.Maand < 10) return "0"+obj.Maand+"/"+(obj.Jaar-2000);
return obj.Maand+"/"+(obj.Jaar-2000);}
return "";
}},
yAxis:{start:27000,step:500,end:37500},
color:"#0070C0"
});
chart.addSeries({value:"#Value2#",color:"#00B0F0"});
chart.addSeries({value:"#Value3#",color:"#00B050"});
chart.addSeries({value:"#Value4#",color:"#92D050"});
chart.addSeries({value:"#Value5#",color:"#C3D69B"});
chart.addSeries({value:"#Value6#",color:"#D9D9D9"});
chart.addSeries({value:"#Value7#",color:"#BFBFBF"});
chart.addSeries({value:"#Value8#",color:"#7F7F7F"});
chart.addSeries({view:"spline",item:{radius:0,type:"square",color:"#000000"},line:{color:"#000000",width:2},value:"#Value9#"});
chart.load("../../../ProcessDescriptor/descriptor/L1/HRB/HRB_Foto_Grafiek_Data.xml",function(){},"xml")
}
function Capture()
{
html2canvas(document.body, {
logging:true,
onrendered: function(canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
}
</script>
</head>
<body>
<div id="main" style="width:100%;height:100%;">
<div id="Picture" style="width:20%;height:75%;float:left;text-align:center;">
<button onclick="Capture()">Save as Pic</button>
</div>
<div id="chart1" style="width:75%;height:75%;float:right;font-family:sans-serif;"></div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>[/code]
I’ve noticed that my page automatically loads in IE9 Quirks mode and my html2canvas doesn’t work then (if I click the button nothing happens). If I change to IE9 standards, the html2canvas is working but my graph isn’t working then, so my image is not what it should be.