markhomans supports this item


This author's response time can be up to 2 business days.

17 comments found.

I follow all the instructions – load all files, no display, no gauge man! firefox show the canvas place holder, but that’s about it, what’s next?

are you creating the instance after the page has loaded?

if you are using jquery for example: $(document).ready(function() { var gm = new GaugeMeter({ ElementId: “gaugemeter” }); });

let me know if this works because it shouldn’t be that hard to use

ooo man this is a waste of money, would you consider a refund for me please, this thing is useless plus, it’s all over the net for free. i got lazy and wanted something quick, but this is not it!

Great product !!! This is exactly I need . Is there responsive version, or any other way to change the width? Thank you .

Hi barbarina! I’ll look into the possibility of setting the width somewhere this week. Thanx for the purchase!

Hi Barbarina, I have made the Gauge Meter size responsice to the containing div its in. I think you will be notified when CodeCanyon has approved the change. If you want the files before that, let me know and i will email you the changed version

Very nice i love it

Is there a way to set the value to the total scores that are taken from a form? The form has a function that collects the points that each answer is worth. So say at the end the user scores a 50…is there anyway to calibrate the gauge so it corresponds with this?

New at this, so I apologize for the lack of detail!

Hi Skaterkep, Sure it’s possible! Lets say your grades go from 0 to 100, create a guage meter:

[div id='divGradeGauge' ] (regular div but the comments wont let me make div tags)
//creating the Gauge Meter
var gmGrade = new GaugeMeter(
    ElementId   : "divGradeGauge",
    MinValue    : 0,
    MaxValue    : 100,
    Text        : "Grade" 

Now, somewhere in your function that collects the points that each answer is worth:

function collectAnsweres() //<- this is your function!
    //do stuff
    var grade = 60;
    //set the new gauge value:

That is basically it. If the above scenario does not reflect your situation (e.g. because your grade function is done server side) let me know and i’ll sketch a new scenario.

Thanks for the purchase!

Hi, I’m using it. It is good. However, I’m confused about the NoData options. I thought if I SetValue(undefined) or () it might go to NoData state but it does not. Having to rebuild it with different parameters is not too convenient. Is this something you can change or am I reading the docs wrong. thanks.

Hi nyc863, i see what you mean and i’ll try to fix it tomorrow. thanx for the purchase!

Hi nyc863, I’ve updated the package. You can download it again once it gets through the CodeCanyon review. By setting a value that is not a number (e.g. undefined, “123abc”, etc) the NoData state will be triggered. Thanx for your input!

thank you for doing it very quickly

Do you have a simple html file that shows a gauge embedded within it. I want to set the width of the gauge to 500 pixels. I purchased the gauge, but I am having trouble implementing it.



Can I change the start angle and end angle of the gauge. Your samples have 180 degrees …. Can i change this to 80 for example?

Hi John, I added the option of setting the GaugeAngle (default 140 degrees). As soon as code canyon validates my change you will get a notification. Thanks for your input!

Hi John, Here is a simple example as you requested in your first comment:

        <script src="gauge-meter.js"></script>
            function loadMeter()
                new GaugeMeter(
                    ElementId   : "johnsMeter",
                    MinValue    : 0,
                    MaxValue    : 10,
                    Value       : 8,
                    NoDataText  : "Enter value",
                    Text        : "Sample" 
    <body onload="loadMeter();">
        <div id="johnsMeter" style="width:500px" />

As for your second question, i’m sorry to say you can’t change the angle of the gauge. It will always be 140 degrees from left to right. What you could do is alter the script a bit. In the function DrawBackground(), look for var part = 140 / Colors.length; and var from = -160 + (part*i); and change it to var part = 80 / Colors.length; and var from = -130 + (part*i);. And in the function function DrawValue(value) look for var rotation = (140 * (val/(max - min)))-70; and change it to var rotation = (80 * (val/(max - min)))-40;

Now the angle is 80 degrees. I’ll consider adding an option to set the total degrees in the gauge meter options. Hope this will help you for now.

Thanks for the purchase!

Great! it worked and thanks for the quick response. Next, do you happen to have a sample you can post that has every parameter? I used your table and you reference RGB values in the table, but your samples use HEX. Also the table for FONT did not have the ’ ’ quotes so it would not run properly. Instead of adding each parameter and testing to see if it runs i would like to have a complete html file with all parameters in their…. If you have one. Thanks! BTW – Here is a link for a gauge I built. I am trying to duplicate it with your script. Yours is lighter weight, etc.

Hi John, If you could send me an email at, then i’ll try to create the full example html somewhere this weekend or early next week. Happy easter!

Everything is working perfectly. I was using SeaMonkey Composer and it corrupted the file. Switched to Notepad and it works great. Thanks for all the help!

Hi Again. I’ve a new problem. Changing the refresh rate from the default of 12ms up to 100ms makes the needle move at 10fps but it also jumps around strangely, going off the end of the scale and other things even though the values provided are still exactly the same : between 0 and 100 and nothing else.

Perhaps your timing for needle moves is not quite right when the refresh rate is different?

Also, when no data is set and nothing is going on, the gauge is still hammering away at 60fps and someone reported leaving it like that for 20 minutes caused the browser tab to crash. I’ve no idea if that was the reason but after I destroyed the gauge object, the flood of events stopped, and nobody has complained about tabs crashing out.

Perhaps you can have a stop start method, to turn on and off the high frequency update, or look into this?


Hi nyc863. i will look into this shortly but most probably not this week (i just became a father). Does everything work fine if you leave the fps to the default? And with what browser are you getting the issue? I’ll use requestAnimationFrame in the next update. Thanx for reporting the bug!

Hi, Congratulations on becoming a father!

This is unimportant but if you get back to these issues, I had to disable use of the widget.

A problem showed up on Chrome under Windows 7+. (not Chrome under OSX). With the widget created, even with no updates to it, memory use climbed without bounds. And cpu usage was high as well under IE11. 25% cpu.

But mainly the memory use was the problem. After a minute or two, Chrome would take over 1gb of memory and it just kept increasing.

Unfortunately I’m not able to debug it, but there is some kind of huge memory leak from the 60fps refresh. It is strange it is only Chrome but Chrome+Windows is the most popular combination.


Hi nyc863! Thanx, the little one is depriving me of all my sleep, but still, it’s quite amazing :) I am planning on putting all my codecanyon savings into an account for his education.

I’ve adjusted the gauge meter to work with requestAnimationFrame. This means that the browser will determine how many fps it can handle so you will always get the best performance.

If the browser does not support requestAnimationFrame (IE7,8,9), it will fall back on the RefreshRate option. Maybe the documentation is a bit unclear on this option, but the lower the value, the smoother the results. The number is actually the amount of time is ms between two renders. So if you want it smooth, use a low number (10), or for a low end machine, use a higher number (100).

The leak in memory came from the eazing part where the needle would move in such small steps to its target value, that it would never reach its true value (causing the animation to never stop). This is fixed by giving the needle a minimum of 0,1% of the moving distance.

Let me know if this fixes you problem (after codecanyon approves the change).

Kind regards, Mark

Hi there,

Can I increase or decrease the gauge though CHECKBOXES (eg.: with value 10, 20, 30,... up to 100) selectable by users?

Thank you.

Thank you for reply ! but I need to increase or decrease the value (adding and subtracting).

eg.: if I check first and second (checkbox) the value will be the sum of both. 10 + 20 = 30. (or the sum of singular value from two different radio buttons of two diffrent groups of radio buttons).

I hope I explained and thank you for patience :)

Hi Xrdm, Here is the html that suites your example:

< html> <head> <script src="gauge-meter.js"></script> <script> var meter; function loadMeter() { meter = new GaugeMeter( { ElementId : "xrdmsMeter", MinValue : 0, MaxValue : 10, Value : 0, }); } function setValue() { var cb2 = document.getElementById('cb2'); var cb3 = document.getElementById('cb3'); var cb4 = document.getElementById('cb4'); var value = 0; if(cb2.checked) value += parseInt(cb2.value); if(cb3.checked) value += parseInt(cb3.value); if(cb4.checked) value += parseInt(cb4.value); meter.SetValue(value); } </script> </head> <body onload="loadMeter();"> <div id="xrdmsMeter" style="width:200px" /> value:<br /> <input id="cb2" type='checkbox' value='2' onChange='setValue()'>2 <input id="cb3" type='checkbox' value='3' onChange='setValue()'>3 <input id="cb4" type='checkbox' value='4' onChange='setValue()'>4 </ body> </ html>

great! I’m gone to purchase and rate it (5 star)... thanks

Hi, Thank you for this nice scripts.

How can I put 2 Gauge Meter on the same page? I have some trouble with js.

Thank you in advance, Cruxy

Hi Cruxy, Sure you can. Add 2 elements with each a unique id. And then initialize each gaugemeter with the unique id’s:
    <div id="gauge1" />
    <div id="gauge2" />
        var gm1 = new GaugeMeter(
            ElementId   : "gauge1",
            Text        : "Gauge 1" 
        var gm2 = new GaugeMeter(
            ElementId   : "gauge2",
            Text        : "Gauge 2" 


Thanks for the purchase!

Hi, the gauger isn’t shown in Safari 5 (excanvas.js enqueued)

hi xrdm, I just installled safari 5.1.7 for windows, and the gauge meter works normally. Could you give me an url or html where the gauge meter is not working so i can investigate the problem? thanx

Hi markhomans, I purchased the product..My requirement is need to make MinValue: 10.00 and MaxValue:13.00. then if I give Value : 10 it is not gving the proper result… What I suppose to do to resolve this

Hi Kirandas82, Your requirements aren’t very complicated, so i am curious why it isn ‘t working for you. Can you send me an email with the html showing your gauge meter? you can send it at Kind regards and thanks for the purchase, Mark Homans

I get gauges, but unfortunately the needle is all over the place .

What am I doing wrong ?

Images showing Meters/gauges:

Code: In Head: <script src="../js/meter/gauge-meter.js" type="text/javascript"></script> <script src="../js/meter/excanvas.js" type="text/javascript"></script> <!-- ONLY NEEDED FOR IE7/8 Compat --> In Body: <table border="1" width="100%"> <tr> <td><div style="width:240px;" id="B175_ALL"> </div><script> new GaugeMeter( { ElementId : 'B175_ALL', MinValue : -1, Animate : false, MaxValue : 37.16, Value : 18.58, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B175_AT1"> </div><script> new GaugeMeter( { ElementId : 'B175_AT1', MinValue : 5.5, Animate : false, MaxValue : 10.9, Value : 10.27, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B175_P016"> </div><script> new GaugeMeter( { ElementId : 'B175_P016', MinValue : 27.5, Animate : false, MaxValue : 37.5, Value : 36.3, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B175_P001"> </div><script> new GaugeMeter( { ElementId : 'B175_P001', MinValue : 3.5, Animate : false, MaxValue : 5.56, Value : 5.6, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B140_ALL"> </div><script> new GaugeMeter( { ElementId : 'B140_ALL', MinValue : -1, Animate : false, MaxValue : 71.38, Value : 35.69, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B140_AT1"> </div><script> new GaugeMeter( { ElementId : 'B140_AT1', MinValue : 5.5, Animate : false, MaxValue : 14.09, Value : 14.1, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B140_P016"> </div><script> new GaugeMeter( { ElementId : 'B140_P016', MinValue : 27.5, Animate : false, MaxValue : 39.82, Value : 39.8, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B140_P001"> </div><script> new GaugeMeter( { ElementId : 'B140_P001', MinValue : 3.5, Animate : false, MaxValue : 7.02, Value : 7, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B116_ALL"> </div><script> new GaugeMeter( { ElementId : 'B116_ALL', MinValue : -1, Animate : false, MaxValue : 57.32, Value : 28.66, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B116_AT1"> </div><script> new GaugeMeter( { ElementId : 'B116_AT1', MinValue : 5.5, Animate : false, MaxValue : 11.22, Value : 11.2, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B116_P016"> </div><script> new GaugeMeter( { ElementId : 'B116_P016', MinValue : 27.5, Animate : false, MaxValue : 40.75, Value : 40.7, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B116_P001"> </div><script> new GaugeMeter( { ElementId : 'B116_P001', MinValue : 3.5, Animate : false, MaxValue : 6.19, Value : 6.2, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B113_ALL"> </div><script> new GaugeMeter( { ElementId : 'B113_ALL', MinValue : -1, Animate : false, MaxValue : 49.06, Value : 24.53, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B113_AT1"> </div><script> new GaugeMeter( { ElementId : 'B113_AT1', MinValue : 5.5, Animate : false, MaxValue : 13.77, Value : 13.8, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B113_P016"> </div><script> new GaugeMeter( { ElementId : 'B113_P016', MinValue : 27.5, Animate : false, MaxValue : 37.5, Value : 35.08, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B113_P001"> </div><script> new GaugeMeter( { ElementId : 'B113_P001', MinValue : 3.5, Animate : false, MaxValue : 7.15, Value : 7.1, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B018_ALL"> </div><script> new GaugeMeter( { ElementId : 'B018_ALL', MinValue : -1, Animate : false, MaxValue : 64.78, Value : 32.39, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B018_AT1"> </div><script> new GaugeMeter( { ElementId : 'B018_AT1', MinValue : 5.5, Animate : false, MaxValue : 12.69, Value : 12.7, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B018_P016"> </div><script> new GaugeMeter( { ElementId : 'B018_P016', MinValue : 27.5, Animate : false, MaxValue : 37.9, Value : 37.9, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B018_P001"> </div><script> new GaugeMeter( { ElementId : 'B018_P001', MinValue : 3.5, Animate : false, MaxValue : 7.76, Value : 7.8, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B999_ALL"> </div><script> new GaugeMeter( { ElementId : 'B999_ALL', MinValue : -1, Animate : false, MaxValue : 52.64, Value : 26.32, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B001_ALL"> </div><script> new GaugeMeter( { ElementId : 'B001_ALL', MinValue : -1, Animate : false, MaxValue : 53.78, Value : 26.89, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B001_AT1"> </div><script> new GaugeMeter( { ElementId : 'B001_AT1', MinValue : 5.5, Animate : false, MaxValue : 10.9, Value : 9.26, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B001_P016"> </div><script> new GaugeMeter( { ElementId : 'B001_P016', MinValue : 27.5, Animate : false, MaxValue : 39.66, Value : 39.7, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> <tr> <td><div style="width:240px;" id="B001_P001"> </div><script> new GaugeMeter( { ElementId : 'B001_P001', MinValue : 3.5, Animate : false, MaxValue : 5.52, Value : 5.5, Text : 'MyID', GaugeColors : ['#00FF00','#DFFFAA','#FFFF00','#FFC100', '#FF0000'] }); </script></td> </tr> </table>

I also tried multiplying all values by 100 (so there wouldn’t be any decimals) and same results.

I did eventually get it working by doing some math so that everything fits in a percentage between 0-100 then placing the actual values as in the MaxLabel, MinLabel and Text fields.

I do like the script very much.

a nice feature would be to have a setting that allows you to stop the arm from extending past/below the max/min points. though :)

Is there a way to HIDE the value label in the middle of the chart (or replace it with the Text)

Hi Batchling! Good to hear you fixed the issue by limiting the values to the max. In the next release i will maximize and minimize the arm position (but the showing value might still be out of bounds, that is something the user needs to take care of themselves).

Also in the next release is the posibility to modify a the labels text, position, etc at runtime. e.g. you could write a function that changes the main value label to red and bold when the gauge reaches a certain value.

The next version will also contain support for major and minor tick marks, and labels per tick mark (also configurable at runtime).

Thanks for the purchase!

Beautiful work GLWS :)


great little script. so glad i found it. Is there a way to disable showing the value in the middle of the gauge? I’d prefer to manually draw it below the gauge so I have more control of font size and color.

Hi Colingarrett, Currently there is no way to disable it. But what you could do is go to gauge-meter.js, and find the method `DrawValue` and comment out the last line: c.fillText(settings.Value, center, 50 * sizePercent);

Kind regards, Mark