Printing Flot graphs in IE7

[GoogleCodeExporter]

Hi I'm having problems printing out pages with Flot graphs in IE7. The Flot 
graphs seem to move to the right of the placeholder.

Sample of code:
<!--[if IE]><script language="javascript" type="text/javascript" 
src="layout/excanvas.pack.js"></script><![endif]-->
<script language="javascript" type="text/javascript" 
src="layout/jquery.js"></script>
<script language="javascript" type="text/javascript" 
src="layout/jquery.flot.js"></script>

<div id="flot_graph" style="width:100%; height:300px;"></div>

<script id="source" language="javascript" type="text/javascript">
        $(function () {
var options = {  
                lines: { show: false },
                bars: { show: true, fill: .8, barWidth: .5, 
align: "center" },
                xaxis: { tickSize: 1, ticks: [ <?=$ticks?> 
] },
                yaxis: { tickFormatter: function( val, axis 
){
                        num = 
strip(val.toString(),',');
                        thou_sep = ',';
                        num = num.toString();
                        var decpoint = ".";
                        var sep = thou_sep;
                        a = num.split(decpoint);

                        x = a[0]; 
                        y = a[1]; 
                        z = "";

                        if (typeof(x) != 
"undefined") {

                            for (i=x.length-
1;i>=0;i--)
                              z += x.charAt(i);

                            z = 
z.replace(/(\d{3})/g, "$1" + sep);
                            if (z.slice(-
sep.length) == sep)
                              z = z.slice(0, -
sep.length);
                            x = "";

                            for (i=z.length-
1;i>=0;i--)
                              x += z.charAt(i);

                            if (typeof(y) != 
"undefined" && y.length > 0)
                              x += decpoint + 
y;
                        }

                        return x;
                    }
                },
                legend: { 
                    position: "nw", 
                    backgroundOpacity: 0,
                    labelFormatter: function( label ) {
                        return '<div style="text-
align: left">' + label + '</div>';
                    }
                }
            }
$.plot($("#flot_graph"), data, options );
</script>

Original issue reported on code.google.com by jobo.san...@gmail.com on 26 Oct 2009 at 5:44

• Merged into: #222

[GoogleCodeExporter]

Does this occur for one of the bundled examples too? And is this with Flot 0.6?

Original comment by olau%iol...@gtempaccount.com on 27 Oct 2009 at 1:15

[GoogleCodeExporter]

I was having the same issue with this on my chart, bars also. I found that I 
had set
it to "center" <div align="center"></div> after removing that formatting, the
printing problem was fixed.

Original comment by thertze...@gmail.com on 25 Jan 2010 at 9:03

[GoogleCodeExporter]

I had that problem too except my whole document was in a <center> tag. Adding
align="left" to the flot placeholder solved it. Thanks a lot :)

Original comment by zee...@gmail.com on 24 Feb 2010 at 1:39

[GoogleCodeExporter]

If someone can reproduce it and come up with a quick little patch, which sounds 
like
it shouldn't be too hard (sounds like text-align: left on placeholder would 
fix),
then we can add it to Flot and close this bug.

Original comment by olau%iol...@gtempaccount.com on 22 Mar 2010 at 11:05

[GoogleCodeExporter]

I got this same problem on IE8 when it's using IE7 rendering mode (aka 
Compatibility Mode).  Adding the following line to r259 at around line 2430 
fixes it:
    $(placeholder).css({'text-align':'left'});

So it looks like this:

    $.plot = function(placeholder, data, options) {
        $(placeholder).css({'text-align':'left'});
        //var t0 = new Date();
        var plot = new Plot($(placeholder), data, options, $.plot.plugins);
        //(window.console ? console.log : alert)("time used (msecs): " + ((new Date()).getTime() - t0.getTime()));
        return plot;
    };

Alternatively, adding the following line inside the <head> section of the HTML 
tells IE8 to use IE8 mode instead of IE7 mode, which also fixes it for IE8:
<meta http-equiv="X-UA-Compatible" content="IE=8"/>

Original comment by vpa...@gmail.com on 23 Jun 2010 at 6:49

[GoogleCodeExporter]

Original comment by dnsch...@gmail.com on 7 May 2012 at 11:27

• Changed state: Duplicate