Use your left/right keys to browse tutorials
Awesome Dashboard Gauges with Javascript

Awesome Dashboard Gauges with Javascript

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on January 21, 2013

Data visualisation techniques are ever evolving, and I’d like to share a cool plugin I’ve been using for a while now, It’s based on the Raphaël library for vector drawing so it’s completely scalable and self-adjusting. You can track it on Git Hub here it’s called JustGage and allows you to add these awesome gauges to your site in minutes.

The Code

So once you’ve included the javascript plugin files, all you need to do is call the plugin as shown below. You’ll see that in the demo below we’re refreshing the data every 1.5 seconds and generating a random number but this could easily be fed with live data from say a database or ajax feed.


      var g1, g2, g3;

      window.onload = function(){
        var g1 = new JustGage({
          id: "g1",
          value: getRandomInt(0, 32),
          min: 0,
          max: 100,
          title: "CPU",
          label: "load",
          levelColorsGradient: false
        });

        var g2 = new JustGage({
          id: "g2",
          value: getRandomInt(34, 65),
          min: 0,
          max: 100,
          title: "RAM",
          label: "load",
          levelColorsGradient: false
        });

        var g3 = new JustGage({
          id: "g3",
          value: getRandomInt(66, 100),
          min: 0,
          max: 100,
          title: "Network",
          label: "connections",
          levelColorsGradient: false
        });

        setInterval(function() {
          g1.refresh(getRandomInt(0, 42));
          g2.refresh(getRandomInt(34, 65));
          g3.refresh(getRandomInt(66, 100));
        }, 1500);
      };

The HTML

Simply define the div elements where you want the gauges to be injected into and that’s it. This is just a quick introduction into how the gauges work, and there’s far more customisation that can be done.


    <div id="g1"></div>
    <div id="g2"></div>
    <div id="g3"></div>

Demo Download



More tutorials from Papermashup
Comments
5 discussions around Awesome Dashboard Gauges with Javascript
  1. I definitely want to try this.

  2. Anurag Das says:

    Can you post something more regarding the Raphaël library ??

  3. Nerudo says:

    Awesome article.

    I noticed some of your code was escaped.

    Look forward to your new articles.





Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.