One of the great advantages to Wijmo is that they are widgets for the extremely popular jQuery UI. This means there is a great deal of support for their underlying library--lots of support means lots of nice things. One of those nice things is the cool jsFiddle,which is a live HTML/CSS/JavaScript snippet editor of sorts. It's an awesome way to test small things quickly and with no overhead. We can, in fact, do live testing of Wijmo widgets, and here we'll see how. Because Wijmo gauges use SVG or VML based on the browser's capabilities, they are a great part of the "plugin-free web" (being promoted for mobile Safari on iOS and Metro IE in Windows 8 ) which is why we can fiddle with them like this. If you're building an ASP.NET MVC app, Wijmo Complete is included in the MVC Tools of Studio for ASP.NET Wijmo. If you're working in a different technology (like Ruby or PHP), you can go straight to the Wijmo site for the non-.NET packaging. Either way, for this post we'll be referring to the WIjmo site for the CDN links at http://wijmo.com/downloads/. In this post, we'll work with the gauge widget. Here we go! Step 1: Choose Framework Go to jsFiddle.net, and on the left side, chosoe jQuery 1.7.1 from the dropdown list. Wait a moment or two for the associated frameworks to appear, and check jQuery UI 1.8.16. It should look like below: Step 2: Add Wijmo references Slightly below the Choose Framework is the Add Resources. Here we add the Wijmo references. jQuery and jQuery UI are already taken care of, so we just need the Theme, Wijmo CSS and references to the Wijmo libraries. All we need to know is the URL to the library, jsFiddle takes care of the relation and the type. Just pasted the URL into the textbox and click the large + button. The order is important, and links will be added top-down as you add them. Follow the order shown in the Wijmo CDN docs and you'll be fine. The end result should look like this: Step 3: Add HTML and JavaScript To get started quickly, you can copy our samples from the Wijmo Explorer, or use the code in the Quick Start. Here we'll start with just the bare minimum code for a gauge and build up some styling. Another sweet feature of jsFiddle is that we don't Make your HTML pane look like this (click for larger view):  Then add the following JavaScript to the JavaScript pane: Now click the Run button at the top, and you'll see a very basic gauge appear in the Result pane!  Step 4: Getting fancy! Cool! We can now quickly test different styles and properties of the gauge. This gauge could be anything, from temperature to speed to RPM to order fill rate. Let's pretend we're a small warehouse, and we have two bonus goals each week--80 orders filled is one level of bonus, and 90 orders filled is a second level of bonus. So the warehouse workers can track their progress, we'll add some colored ranges and increase the maximum value on the face, plus a few other styling options. The options are all documented at http://wijmo.com/wiki/index.php/RadialGauge. Remember that "ranges" is an array because you can have more than one per gauge. To change the styling a little, we're going to extend the range, rotate the gauge slightly, and add our two ranges. Like all the features of the Wijmo gauge (and any Wijmo widget in general) the options are easily set in a properties array. Start by replacing the existing JavaScript code with the following snippet (hint: after pasting, click the TidyUp button in the top menu to fix the indenting):


$("#gauge").wijradialgauge({  
 value: 60,  
 max: 120,  
 startAngle: -33,  
 sweepAngle: 240,  
 width: 400,  
 height: 400,  
 ranges: [{  
 startWidth: 25,  
 endWidth: 25,  
 startValue: 80,  
 endValue: 90,  
 startDistance: 0.84,  
 endDistance: 0.84,  
 style: {  
 fill: "#FFFF00",  
 stroke: "#FFFF00",  
 "stroke-width": "0"}},  
 {  
 startWidth: 25,  
 endWidth: 25,  
 startValue: 90,  
 endValue: 100,  
 startDistance: 0.84,  
 endDistance: 0.84,  
 style: {  
 fill: "#FF0000",  
 stroke: "#FF0000",  
 "stroke-width": "0"}  
 }]  
 }  
);  

And now our gauge looks like the image below. It's readable, balanced, and provides clear goals for the warehouse personnel. Pretty good so far, but we can add a little nudge as they close in on their goal. Let's add a tapered green range from 65 to 80, just to build some enthusiasm as they get closer to their goals. Replace the code in your JavaScript pane with the code below:



$("#gauge").wijradialgauge({  
 value: 60,  
 max: 120,  
 startAngle: -33,  
 sweepAngle: 240,  
 width: 400,  
 height: 400,  
 ranges: [{  
 startWidth: 25,  
 endWidth: 25,  
 startValue: 80,  
 endValue: 90,  
 startDistance: 0.84,  
 endDistance: 0.84,  
 style: {  
 fill: "#FFFF00",  
 stroke: "#FFFF00",  
 "stroke-width": "0"}},  
 {  
 startWidth: 25,  
 endWidth: 25,  
 startValue: 90,  
 endValue: 100,  
 startDistance: 0.84,  
 endDistance: 0.84,  
 style: {  
 fill: "#FF0000",  
 stroke: "#FF0000",  
 "stroke-width": "0"}  
 },  
 {  
 startWidth: 1,  
 endWidth: 25,  
 startValue: 65,  
 endValue: 80,  
 startDistance: 0.98,  
 endDistance: 0.84,  
 style: {  
 fill: "#008000",  
 stroke: "#008000",  
 "stroke-width": "0"}  
 }]  
 }  
);  


And our gauge looks like this: Step 5: Mobile Testing Because this is all done with in-browser code and graphics rendering, you can run jsFiddle on an iPad or other mobile device. Below is a screenshot of this very fiddle running on my iPad: Sweet! Downtime at an airport just became a lot more productive. Step 6: Making a Real Application Because this is all client side code, the value in the gauge can be changed simply by supplying a new value to it. You may want to include a small function that polls a service connected to the warehouse management system for the up-to-date value. Just as a simple example, we'll wait 3 seconds and change the value to 78 (so the warehouse is getting closer to their bonus!). Add the following code to the very bottom of the JavaScript pane, outside of the gauge function:


window.setTimeout(function() {  
$("#gauge").wijradialgauge("option", "value", 78);},5000);  
window.setTimeout(function() {$("#gauge").wijradialgauge("option", "value", 78);},3000);  

Now, three seconds after the gauge renders, the value will change to 78. Easy! All of the code we build in jsFiddle can be copied directly into an HTML page, and it will just work. Don't forget to include the references! Put the contents of the jsFiddle HTML pane into the of the page, and the contents of the JavaScript inside of a script tag (and usually inside of a $('document').ready() block). I created a simple HTML page to show how this all works out: Download Wijgauge HTML sample. You can open this file directly in a browser or whatever HTML editor you like to work with the code a little. Conclusion We've done a few things here today. First, we've seen how nice jsFiddle is for quickly building and testing client side code. Secondly, we've seen how easy it is to work with the Wijmo gauges. You can fiddle with the final version of this sample at http://jsfiddle.net/rjdudley/TgNZX/9/, but hopefully you've built your own. Thank you jsFiddle team! A huge "thanks" goes to the jsFiddle team for creating such a cool tool! So simple, elegant, and just what we need in many cases.