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.
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:
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 } ] } });
$('#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 new Kendo UI DataViz Linear and Radial Gauge controls are highly configurable 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 is the founder of Carrot Pants Press, a maker education and publishing company, the founder and CEO of Tangible Labs and an avid tinkerer.