PerpetuumSoft does not currently provide support for this item.

13 comments found.

can these be used in a type of dashboard with real time data? Or data from a file that is updated periodically and then the guage would reflect new values?

I am thinking of a Data Quality application that would display the “health” of a database regarding certain measurements (like % of records with post codes) ... the guage would show the measurement value whcih might change in a week’s time as new records are added to database and a new &=% is calculated …

Or are these just badges/displays that show static guages and values?

Sure. These gauges are quite interactive. Realtime data is supported (moreover, showing realtime data is the main purpose of these widgets).

The gauges are controlled by the plain JavaScript. So you need to get the value you need in JS and use a code like


You can review the behavior here: (please note that this application is just a demonstration of how these widgets look like and is not related to the current package)

Hi there,

great file, if i buy this file do you have an example of how i can have a callback function to post the value in a SQL database ?

If so then i’ll be happy to buy it. Thx

Hello! You can use addValueChangedHandler events

<script type=”text/javascript”>

window.onload = function ()
  var model = { <Widget Description Object> }; 
  var widget = new PerfectWidgets.Widget("widget", model); 
  var slider = widget.getByName("Slider1");
  slider.addValueChangedHandler( function (sender, e) {
      //send an Ajax request to post sender.getValue() to DB
  } )


Also you can use addAnimationValueChangedHandler, addAnimationStartingHandler and addAnimationFinishedHandler

Don’t works in IE8 …

You are right. IE8 doesn’t support SVG . We are sorry for this error in ‘Compatible Browsers’ section. We’ve just changed system requirements.

Hi, PerpetuumSoft… Just wondering, can we easily customize colors only with basic knowledge of HTML, CSS and JavaScript ?


Yes, sure. To change the appearance of the gauges is easy. I would like to provide you a link to the complete documentation of the package where you can find the detailed instructions on changing the gauges appearance. Please note the the “Gauge customization with CSS” section there:

Works on IE10, nice..

Yes they do :). Also the widgets can be embedded in JavaScript applications for Windows 8.

Hi, I took the standard gauge you provided (the red one with a percentage in the middle) , and used the following section of code to change the color of the gauge from red to black:

var fill = new PerfectWidgets.Framework.Drawing.LinearGradientFill(); fill.setStartColor(PerfectWidgets.Framework.Drawing.Color.fromArgb(255, 10, 10, 10)); fill.setEndColor(PerfectWidgets.Framework.Drawing.Color.fromArgb(255, 10, 10, 10)); widget.getByName(“RingSector2”).setFill(fill);

Now when I load a page with this gauge on it, it starts out red, and only changes to black when i scroll over it with the mouse. Is there a solution where the gauge would start black without having to manipulate the jSON directly? Unfortunately this is a deal breaker for me.

Thank you for the question!

It is a known problem and we will fix it in the next version of Perfect Widgets library.

For now we’d suggest you the following workaround – to run redraw method of the element manually:

var ringSector2 = widget.getByName(“RingSector2”); var fill = new PerfectWidgets.Framework.Drawing.LinearGradientFill(); fill.setStartColor(PerfectWidgets.Framework.Drawing.Color.fromArgb(255, 10, 10, 10)); fill.setEndColor(PerfectWidgets.Framework.Drawing.Color.fromArgb(255, 10, 10, 10)); ringSector2.setFill(fill);

ringSector2.setNeedRepaint(true); ringSector2.refreshElement();


This could be a total novice and I am missing something simple, but if customization occurs in the JSON parameter, then how in the world can I read it and understand the JSON. It isn’t in a format I can read in the samples files and there was no documentation in what I downloaded to explain the JSON values. What am I missing?

Hi, I want to use SVG based Guages in SVG files, how can i do it? The reason I do this is to use the precise location coordinates. Thanks.

2 things:

First: out of the box when trying to use included json, This error is thrown:

TypeError: PerfectWidgets.Framework.Utilities.BuiltIn.netFormat is not a function

Second: Is there a published API for this package? I appears that all the gauge main settings are in the json files which pretty much draws, sizes, and adds labels to everything. All the js does is add the canvas, and add live action functionality. I havn’t seen any kind of args to pass params directly to the json to override the defaults in the js as of yet, but again ive been reading through your code for all of 15 mins.

Not to be a smart$$$ but, if i have to backwards engineer and manually configure code I just bought from you, wouldn’t that be considered a fork and break your license agreement?



disregard first comment. Tho do add your website for additional information to the attached pdf.

For API and other documentation please visit:

Disregard my previous post some what. I did find a fix for my own issues and more documentation then what comes with this package.

First, the js packages are broken, but the ones hosed on the devs website work fine. And for additional docs and help see this

why on earth this information is not included with the package I have no idea.

And the reason they give you the “novice” warning is simply put, if you cant read the wheel blueprint to see were the bolts go to hold the wheel to the cart, then your SOL with this package.. buyer beware.

Hello! is there any demo I could see to know if I can customize the gauges with the basic knowledge I have in JavaScript?

GLWS nice work!