Telerik blogs

Last week, Burke checked in with a killer overview of the new MVVM feature and ListView widget, two new Kendo UI features that you can try out in the Q1 Beta bits. Today, I'm going to follow-up with a new DataViz goodie: the new Gauge chart type. You'll find Radial Gauge support in the beta bits today, with Linear Gauge support coming with the release on March 22nd. By the way, did you sign up for the online event yet? If there is a hook, this event will be well off it (meaning it will be awesome, so you should register now so you can win that prize pack).

Gauges, right. Before I dive in, though, let's wax esoteric about the gauges in the context of data visualization. As in, what they are and when it makes sense to use them. This won't take long, I promise.

Gauges in Context

Gauges are a class of charting widget designed to map range data into a visualization that bears familiarity to the physical world. The two most common types of gauges are Radial and Linear gauges. Radial gauges tend to have a circular or semi-circular look--similar to a speedometer--while linear gauges are… well, linear-looking--like a thermometer or ruler. These two types often overlap, and can be used somewhat interchangeably, though linear gauges most-suited for progress data, and radial gauges for scale values.

That's the what, but how about then when? As in, when should I use gauges instead of one of the other chart types, or even nothing at all?

In general, you probably already know that data visualizations are ideal for communicating complex relationships, sets of numbers or critical value data in an easy-to-consume visual medium, and the same goes for gauge types. Once you've determined that some kind of visualization is needed for your application, consider a gauge type when you wish to illustrate:
  1. Progress towards a measurable goal (i.e. fundraising or sales goals);
  2. Current status of some value within a range of upper and lower bounds (i.e. current temperature of a measured object);
  3. An up-to-date (or real-time) summary of a fluctuating metric (i.e. current number of Twitter followers).
Of course, I'm no statistician, but these seem like a pretty reasonable categorization of the times you'd turn to a gauge for your data visualization needs (though if you have another, let me know in the comments).  

Getting Started with Radial Gauges in Kendo UI DataViz

What, when and why? check. Now let's talk about how you can build gauges with Kendo UI DataViz. Again, this assumes you're using the Q1 Beta or later, so go grab the bits if you haven't already.

One of the beautiful things about Kendo UI, in general, is that it's got a pretty predictable API. Want to use a control? Chances are you need an DOM element and a script to initialize the control in question, and that's no different here. So I'll add this HTML to my page:

    <div id='gauge'></div>

And then initialize the Radial gauge with a single line of JavaScript:

    $('#gauge').kendoRadialGauge();

 

This is all you need to create a basic gauge. You'll no doubt notice that the default look is a bit bare, and the gauge needle is sitting at zero. So, at the very least, we should provide a value for the pointer, like so:

    $('#gauge').kendoGauge({ pointer: { value: 55 } });​

 

Now, if I refresh the page, you can see that I'm getting somewhere:

Customizing and Working with Gauges

Beyond setting a simple value, the Kendo UI Gauge provides a ton of customization options. Let's move beyond the basic gauge configuration and talk about a real-world usage of a Radial Gauge: charting my daily intake of Sriracha "Rooster" Sauce.


Image by user "rexroof" on Flickr

Now I put Sriracha sauce on just about everything I eat. Sidebar: There is a clear correlation between the amount of Sriracha one consumes and one's ability to produce brilliant work, but that's another chart for another blog post. Seriously, though, I love the stuff. So much, in fact, that I probably need to be tracking my daily average intake before my heart explodes.

As such, I have a simple grid that I use each day to log the amount (in teaspoons) of Sriracha sauce I'm consuming. Check out the demo via the fiddle below (or click here if you can't see it).


My page consists of a simple grid, an input box and button, and a Gauge that displays my average daily Sriracha intake. When I enter new values in the textbox and click add, a new item is added to the grid, and the gauge value is updated. Of course, I could have made the grid more sophisticated and added inline editing, but since this is just a simple example with an array of local data, we'll take the easy route.

If you click on the JavaScript tab, you'll see my local data, the Grid configuration and the gauge initialization, which looks like this:

var srirachaMax = 20;

$('#srirachaGauge').kendoGauge({
  theme: "blueopal",
  
  pointer: {
    value: avgIntake()
  },
  
  scale: {
    majorUnit: 2,
    minorUnit: .25,
    startAngle: -30,
    endAngle: 210,
    max: srirachaMax,

    labels: {
      font: "10px arial, Helvetica, sans-serif",
      template: "#=value# tsp."
    },      
      
    ranges: [
      {
        from: 0,
        to: 10,
        color: "#00ab00" //green
      }, {
        from: 10,
        to: 16,
        color: "#d3ce37" //yellow
      }, {
        from: 16,
        to: srirachaMax,
        color: "#ae130f" //red
      }
    ]
  }
});

There's a lot of configuration here, so let's break down the options:

theme: this option allows me to specify the theme to use for styling the gauge (pointer, border, etc.).

pointer: Properties for customizing the pointer style, shape and value. Here I'm setting the value to a function (avgIntake) that calculates an average of all of the items in my Data Source.

scale: The scale object gives me complete control over the look of the gauge itself. majorunit and minorUnit specify where to place long and short tick marks on the gauge; startAngle and endAngle specify how wide to "spread" the gauge on the page; and max specifies the maximum value to depict on the gauge.

labels: Options for controlling the format of the gauge labels. In this case, I'm setting the font property to make the labels a bit smaller, and using the template property to convey my units of measure.

ranges: An array of values on the gauge to label with color bands. Here, I'm setting green, yellow and red values to signify when my pace of Sriracha consumption is trending into the danger zone.

The final piece of the puzzle here is my interaction. When I update my previous day's Sriracha intake each day, I want to update the Gauge accordingly. I do so by wiring up the following to the click event of my 'Add' button:

$('#add').bind('click', function() {
    var amt, intakeRecord, grid, gauge;

    amt = parseInt($('#dailyIntake').val()) || 0;
    intakeRecord = { date: getDate(), amount: amt }
    intakeData.add(intakeRecord);
    
    gauge = $("#srirachaGauge").data("kendoGauge");
    gauge.value(avgIntake());
});​

The key lines here are the last two. Like most Kendo UI controls, I'm able to fetch my gauge by requesting the "kendoGauge" property from my DOM element's data collection. Once I have the gauge object, I can set its new value by assigning its updated average value.

The new Kendo UI DataViz Linear and Radial Gauge controls are highly KendoUIDevicePackconfigurable and customizable, yet are easy to get up and running in your applications. Feel free to check out the Gauge documentation, play with the the Fiddles above and download the Q1 Beta bits to see this chart type in action.

Download the beta TODAY and don’t forget to register for the launch webinar March 22nd At 10 AM CST for your chance to win an iPad, a Galaxy Tab, a Blackberry Playbook and an iPod touch. Not just one, but all of them.  All you have to do to be eligible to win is register!


brandon-satrom
About the Author

Brandon Satrom

Brandon is the founder of Carrot Pants Press, a maker education and publishing company, the founder and CEO of Tangible Labs and an avid tinkerer.

Comments

Comments are disabled in preview mode.