IE : exception thrown and not caught - measureText() not supported

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Simple Gauge on IE9

What is the expected output? What do you see instead?
The Gauge do in fact get rendered ok. But it takes forever and this error shows 
up in the console. Problem does not show up in FF and Chrome. 

exception that is not caught is thrown at 
gauge.js, row 172 
I've also tried using gauge.min.js which generates the same error. 

What version of the product are you using? On what operating system?
jsgauge 0.4.2. 
Windows 7
IE 9

Please provide any additional information below.
$(document).ready(function(){
   $("#test_overflow_max").gauge('init', {'min': -50, 'max': 50, 'value' : 10}); 
}); 

Original issue reported on code.google.com by bassam.s...@gmail.com on 7 Apr 2012 at 5:40

[GoogleCodeExporter]

Do you still get the exception with the latest demo? 
http://jsgauge.googlecode.com/svn/trunk/src/example/gauge.html

Original comment by dragos.tihauan on 29 Apr 2012 at 10:02

• Changed state: Started

[GoogleCodeExporter]

I dont get error with your demopage. 

But I still get wrong with my own simple example I posted earlier with jsgauge 
0.4.4. Error is the same but on a different row: 501. 

SCRIPT5022: Undantag thrown och inte caught 
gauge.js.xhtml?ln=js, rad 501 tecken 5

However I realized that the error only shows up in IE9's compatability mode. 
Hope this piece of information is helpful =) Havn't tested for IE8 nor IE7.

Original comment by bassam.s...@gmail.com on 29 Apr 2012 at 11:23

[GoogleCodeExporter]

I'm getting this error using IE8 - and the labels are not rendering for me in 
IE8.

Original comment by lj1...@gmail.com on 2 Aug 2012 at 7:09

[GoogleCodeExporter]

Dont know if it helps, but even it an error is thrown, it seems to be able to 
render one Gauge, but not two... 

I see that the status of this bug is "started", but since its been such a long 
time i must ask if soneone working on this bug? If not, I need to start 
considering another solution or framework... which is a shame since I really 
like this one! 

Heres the full code again. 

$(document).ready(function(){
        $("#canvas_gauge_total")            .gauge('init', {'min': -50, 'max': 50, 'value' : dataGauge[5], 'minorTicks' : 0, 'majorTicks' : ['','','',''], 'colorOfText': '#eee', 'colorOfFill': [ '#111', '#ccc', '#ddd', '#eee' ],'bands': [{'color': '#DC3912', 'from': -50, 'to': -17},{'color': '#FF9900', 'from': -16, 'to': 16},{'color': '#109618', 'from': 17, 'to': 50}]}); 
    }); 

<canvas id="canvas_gauge_total" height="120" width="120" 
style="float:left;margin-left:10px;"></canvas>

Original comment by bassam.s...@gmail.com on 15 Aug 2012 at 12:50

[GoogleCodeExporter]

Had the same problem.

See if you're version of excanvas.js have the method measureText() (Don't 
remember if the jsGauge's excanvas if outdated or something, but remember that 
worked for me) 

For my part, I downloaded the last version, and it's works perfectly in IE 9, 8 
& 7 !

Original comment by aymeric....@gmail.com on 16 Aug 2012 at 9:51

[GoogleCodeExporter]

Thanx for the feedback! I want it to work for me too =) 

Downloaded the latest excanvas + latest jsgauge, but still same error. My 
excanvas.js do not have method measureText()... however my gauge.js do have 
that method.

Not even the included example of jsgauge works for IE 8 (compatability mode in 
IE9). Example works totally fine in FF, Chrome and IE9. 

After several hours of debugging... I did find a workaround. I realized that 
since I dont want labels or text on my gauge... I can add a couple of rows of 
code to gauge.js and get it working after all!! Huzza!!! =) Perhaps it will 
help others. 

    function measureText(context, text) {
        if (context.measureText) {
            return context.measureText(text).width; //-->
        } else if (context.mozMeasureText) { //FF < 3.5
            return context.mozMeasureText(text); //-->
        } else {
            return 0;  //Added else-clause
        }
        throw "measureText() not supported!";
    }

    function fillText(context, text, px, py) {
        var width;
        if (context.fillText) {
            return context.fillText(text, px, py);
        } else if (context.mozDrawText) { //FF < 3.5
            context.save();
            context.translate(px, py);
            width = context.mozDrawText(text);
            context.restore();
            return width;
        } else {
            return 0;   ///Added else-clause
        }
        throw "fillText() not supported!";
    } 

Original comment by bassam.s...@gmail.com on 16 Aug 2012 at 12:12

[GoogleCodeExporter]

the zipped file r3 is not the real "last updated" version of excanvas.js

That's maybe why you don't have this method.
I know that jsGauge have the method, but in fact it's just use to call the 
excanvas's one.

You can find the last version (r73) there:
http://code.google.com/p/explorercanvas/source/browse/trunk/excanvas.js

I noticed that i also change some code to the gauge.js:
Gauge.prototype.draw = function() {
    var r, g, y;

    if ( ! this.canvas.getContext ) {
        return; //-->
    }

is becoming:
Gauge.prototype.draw = function() {

    if (this.canvas.getContext == undefined)    // IE
        G_vmlCanvasManager.initElement(this.canvas);

Original comment by aymeric....@gmail.com on 16 Aug 2012 at 1:09

[GoogleCodeExporter]

OMG!! why do explorercanvas project have a "download" link if they just gonna 
have more than 3 year old data there? Sure confused me completely! Im amazed 
you know I was using r3. Great thanx to you =) With version r73 I could even 
remove my added code in gauge.js and still get it working for IE8. Im as happy 
as a kid on christmas morning yaaay =)

Thanx a million for your time and help. =D

Original comment by bassam.s...@gmail.com on 16 Aug 2012 at 3:49

[GoogleCodeExporter]

I did the same mistake, that's why i supposed that you have the r3 zipped file !

Did you change the:
if ( ! this.canvas.getContext ) {
        return; //-->
    }

to
if (this.canvas.getContext == undefined)    // IE
        G_vmlCanvasManager.initElement(this.canvas);

Without that, i have problem in IE 7 & 8.

Original comment by aymeric....@gmail.com on 17 Aug 2012 at 7:50

[GoogleCodeExporter]

Now its changed =) Thanx a million again! You are the gift that keeps on giving 
=) 

Original comment by bassam.s...@gmail.com on 17 Aug 2012 at 10:27