jQuery Dashboard Gauges using Raphael, XHTML and CSS

Handwritten by TVD

Beautiful dashboard gauges for the sophisticated developer.

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.

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>

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


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 all of our JavaScript Dashboard Gauges today!

discuss on twitter

every day thousands of developers use our charts & gauges to get the job done right

JavaScript Charts JavaScript Gauges JavaScript Flight Gauges

← return to all articles