Export graph with html2canvas - Problem with IE9 Quirks mode

Suite and Optimus Suite 5
#1

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 &lt; 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.

#2

Hello,

Canvas is not supported in old IE versions. Therefore, the library does not work in Quirks Mode.

#3

Hey,

I know html2canvas won’t work in quirks mode, the problem is that my graph won’t work in standard mode, unless i make the divs height and width fixed instead of working with percentages. But even if i work with px and not with % (and my graph loads in IE9 standards), if i try to export the graph as an image, it does’t work properly. My x-asis and y-axis loads fine, my legend loads fine, but the data of the graph isn’t shown. Any idea why?

Thanks

#4

Hello,

unless i make the divs height and width fixed instead of working with percentages.

Make sure that document body has 100% height:

html, body{ height: 100%; }