Seventh Octave

We're Starters. We write about culture, design and the business of software.

We believe software should be beautiful and inspired. Follow us as we build @TechOctave.

jQuery Dashboard Gauges using Raphael, XHTML and CSS TVD Sep 06

11 comments Latest by TVD

Recently, we released our Dashboard Gauge Suite. They're perfect for engineering a business intelligence dashboard that gives Senior Management an intuitve pulse on the enterprise.

Our Gauge Suite includes a highly configurable API. Choose from over 40+ customizable properties to design the exact gauge you need. Build your own executive level dashboard. Beautifully illustrate your data. Start your engines!

They've been my passion and baby for almost three years now. It's an honor to share them with you. I hope you enjoy:

Beautiful dashboard gauges for the sophisticated developer.

Long Live JavaScript

The framework wars have long passed and we all know who won. Much good came out of those days. Developers learned the many intricacies of cross-browser development. But most importantly, we came to appreciate those frameworks which normalized that environment for us.

jQuery is one of those frameworks and I love it. But there are many other great frameworks out there too. I want our customers to use our dashboard gauges with whichever frameworks they choose.

That's why we based our Dashboard Gauge Suite on Six Core Principles. We felt they should be:

  1. Beautifully Illustrated
  2. Cross-Browser Compatible
  3. Lightweight footprint
  4. Vector Based for Crisp Zoom and Print
  5. Highly Configurable
  6. Framework Agnostic

In today's JavaScript environment, I believe framework agnosticism is central to developer happiness. Sometimes you simply don't have the time to fiddle with yet-another-javascript-framework. Sometimes you just need the software to work. Our gauges just work!

JavaScript and Raphael.js

Our dashboard gauges were forged on principled engineering and JavaScript best practices. For one, we strive for 100% cross-browser compatibility. Our dashboard gauges are based on high-quality vector graphics, SVG and VML (IE7+).

To bring the dashboard gauges to life, we used the excellent Raphael.js and took advantage of its SVG and VML vector graphics processing capabilities. The functionality and dynamics will remind many of you of HTML5's Canvas element. But it's not HTML5 Canvas. Our dashboard gauges are way more powerful and flexible.

Think of HTML5 Canvas as Adobe Photoshop and SVG as Adobe Illustrator. Both are excellent pieces of software. Both can produce great logos. But Illustrator produces scalable, crisp logos whereas Photoshop does not. Our dashboard gauges are the Adobe Illustrator of the Business Intelligence (BI) world. We understand your needs because we're developers too. Think about that!

From the very beginning, we aimed for highly configurable gauges with a very intuitive API. Setting your first gauge is as simple as this:

JavaScript Code

Load Raphael.js and our Gauge.js package. Wait for the DOM to load and then create an instance of our Gauge class:

<script src="javascripts/raphael.js"></script>

<script src="javascripts/gauge.js"></script>

<script>
window.onload = function() {
  var sales = new Gauge("sales", {
      label: "Sales",
      minValue: 30,
      maxValue: 90,
      majorTicks: 5,
      minorTicks: 4
  });

  sales.setValue(60);
};
</script>

Note, label, minValue, maxValue, majorTicks and minorTicks are only five of 40+ configurable gauge properties.

HTML5 Code

Minimum requirement for a gauge instance is a unique DOM identifier to attach the gauge instance:

<div id="sales"></div>

Here, we use a div tag, but could have easily used a li tag or any other DOM element.

The above setup creates a dashboard gauge and you can update its value anytime during runtime. But again, these are just a few settings - there are over 40+ configurable properties for you to tweak.

Many of you will need to poll a remote server to update your gauges. For an advanced discussion on client-side polling techniques, see Long Polling with JavaScript and jQuery.

Setting the value causes the needle to move to the value entered. Set different minValue and maxValue and give it a whirl. Focus on implementing your business logic. We've got you covered in the browser department.

Dashboards and Business Intelligence

Think data visualization. Our dashboard gauges are a great way for Senior Management to get a pulse on the company. Get your very own copy of our Dashboard Gauges today - you'll be happy you did!

Visually, gauges are a natural progression for data visualization. But why? We have a theory. We believe gauges are so useful because they are so familiar. Think about it, we use gauges every single day to convey mission critical information.

For breakfast, we use gauges to cook our meal and to tell us when it's complete. When we start our cars, we use gauges to tell us whether we have enough fuel for the journey or if we can even make the journey. On the road, we use gauges to monitor our speed which saves lives (maybe even our own). Mission critical.

At TechOctave, we believe gauges shouldn't stop at the parking lot. We believe our gauges should be at desks and boardrooms. We want to help you empower your executives to lead with mission critical data in a form that is both familiar and intuitive.

We believe we've found that magic point with our Dashboard Gauge Suite. We believe we can help you visualize your data in a beautiful and intuitive way. Our gauges are clean, well architected and focused on developer happiness.

Analyze tons of data in a visually appealing manner. Build a Business Intelligence dashboard you'll be proud of and will love working on. Give your Senior Management an intuitive pulse on the company's metrics.

Pragmatic Point-of-View

Data visualization is about having fun, but it's about getting real work done too. Our Dashboard Gauge Suite works in every major browser that supports vector graphics - Chrome, Firefox, Internet Explorer (IE7+), Safari (iPad and iPhone). Our Dashboard Gauge Suite also runs on top of the jQuery Mobile framework and other client-side mobile frameworks.

In addition, you can also run our gauge suite using your favorite server-side technology if you like. Using .NET or J2EE? It just works! Using Node.js, Ruby, Python or Perl? It just works - it's that simple!

Focus on your core business needs. We've got you covered in the data visualization department.

Download

Download all of our JavaScript Dashboard Gauges today!

If you enjoyed this post, subscribe for updates (it's free).

Email Address:

11 comments so far

Vincent 19 Oct 10

Nice gauges mate! I wondering if should be possible to animate with Ajax the needles like a live dashboard. Cheers

TVD 19 Oct 10

Absolutely! You just need to execute your Ajax with a callback method. Then, in the callback, pass the current value to the gauge instance.

Darian Cabot 02 Nov 10

Very sharp looking gauges Tian :-) I've been working on a similar concept with some animated JavaScript gauges. It sounds like something you may like to check out. Feedback, ideas, greatly appreciated ;-)

TVD 03 Nov 10

Great contribution Darian! As you know, I'm a firm believer in open source. As developers, we've benefited from a rich culture of sharing that makes our community unique and I firmly believe each of us has a duty to give back and enrich the very community we so cherish. For each of us the contribution will be different. But the spirit behind projects like yours and mines is the very cornerstone of the enrichment I speak of. At a glance, I noticed you use excanvas. One of the goals for my Dashboard Gauges is 100% Cross Browser Compatibility. At the time I wrote my Dashboard Gauges, excanvas had some compatibility issues so I took another route with Raphael. Today my Dashboard Gauges enjoy 100% Cross Browser Compatibility. I was wondering if excanvas has improved since I last checked it out. Have you noticed any compatibility issues with excanvas on your project?

Darian Cabot 07 Nov 10

Thanks for the feedback Tian. Funny you should mention excanvas' compatibility issues... IE doesn't like the canvas element so I was look to fallback on excanvas for IE, but I've had problems getting this to work. Admittedly I haven't given this or compatibility in general much attention yet as it is still in early alpha and I'm still looking where to draw the line on features. I like your philosophy on compatibility though. Compatibility before features is refreshing and for that Raphael looks very promising. I'll definitely be looking into this. :-)

Ethan 03 Aug 11

In the Netherlands, the speed metric is KPH but in the gauge MPH is the main speed. How get KPH as main speed?

TVD 04 Aug 11

@Ethan MPH is the main speed metric for the Free version. We do offer a supported version which provides an elegant way to instantiate a Speedometer with either MPH or KPH as the main speed metric. It's our Enterprise Gauge package. I believe you will enjoy the enhanced API and other goodies that come with that Gauge package.

Oren 21 Aug 11

What does the RPM Gauge look like?

TVD 21 Aug 11

The RPM Gauge was designed to complement the Speedometer Gauge. It has a similar look and feel, but with a Tachometer (RPM) UI and Mechanics. The addition of the RPM Gauge makes for a complete dashboard gauge suite. Think of the craftsmanship of Ferrari with the elegance of jQuery!

Patrick Hoffman 28 Aug 11

Is the new Odometer component a separate Gauge? Or is the Odometer integrated with the Speedometer? The reason I ask is because we are working on a Business Intelligence app and we need the Odometer to be part of the Speedometer - not a separate component.

TVD 01 Sep 11

@Patrick: The Odometer is 100% integrated with the Speedometer. It's an option when instantiating an instance of the Speedometer object.

Comments are closed