diff --git a/README.txt b/README.txt index 5f962fb..0d37717 100644 --- a/README.txt +++ b/README.txt @@ -16,20 +16,27 @@ Installation Just include the Javascript file after you've included jQuery. -Note that you need to get a version of Excanvas (e.g. the one bundled -with Flot) which is canvas emulation on Internet Explorer. You can +Generally, all browsers that support the HTML5 canvas tag are +supported. + +For support for Internet Explorer < 9, you can use Excanvas, a canvas +emulator; this is used in the examples bundled with Flot. You just include the excanvas script like this: - + If it's not working on your development IE 6.0, check that it has -support for VML which excanvas is relying on. It appears that some +support for VML which Excanvas is relying on. It appears that some stripped down versions used for test environments on virtual machines lack the VML support. - -Also note that you need at least jQuery 1.2.6 (but at least jQuery -1.3.2 is recommended for interactive charts because of performance -improvements in event handling). + +You can also try using Flashcanvas (see FlashCanvas.net), which uses +Flash to do the emulation. It might be faster with charts with many +points. Flot contains some wrapper code for activating Excanvas which +Flashcanvas is compatible with. + +You need at least jQuery 1.2.6, but try at least 1.3.2 for interactive +charts because of performance improvements in event handling. Basic usage diff --git a/jquery.flot.js b/jquery.flot.js index 1cbe72d..f558dbd 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -697,15 +697,6 @@ } function constructCanvas() { - function makeCanvas(width, height) { - var c = document.createElement('canvas'); - c.width = width; - c.height = height; - if (!c.getContext) // excanvas hack - c = window.G_vmlCanvasManager.initElement(c); - return c; - } - canvasWidth = placeholder.width(); canvasHeight = placeholder.height(); placeholder.html(""); // clear placeholder @@ -715,17 +706,32 @@ if (canvasWidth <= 0 || canvasHeight <= 0) throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight; - if (window.G_vmlCanvasManager) // excanvas hack - window.G_vmlCanvasManager.init_(document); // make sure everything is setup + if (window.G_vmlCanvasManager) // excanvas hack, make sure everything is setup + window.G_vmlCanvasManager.init_(document); + + function makeCanvas(skipPositioning) { + var c = document.createElement('canvas'); + c.width = canvasWidth; + c.height = canvasHeight; + + if (!skipPositioning) + $(c).css({ position: 'absolute', left: 0, top: 0 }); + + $(c).appendTo(placeholder); + + if (!c.getContext) // excanvas hack + c = window.G_vmlCanvasManager.initElement(c); + + return c; + } // the canvas - canvas = $(makeCanvas(canvasWidth, canvasHeight)).appendTo(placeholder).get(0); + canvas = makeCanvas(true); ctx = canvas.getContext("2d"); // overlay canvas for interactive features - overlay = $(makeCanvas(canvasWidth, canvasHeight)).css({ position: 'absolute', left: 0, top: 0 }).appendTo(placeholder).get(0); + overlay = makeCanvas(); octx = overlay.getContext("2d"); - octx.stroke(); } function bindEvents() {