Papermashup

Subscribe


Tweets


"Excited to be the 962nd pirate on @BackerKit for Piff The Magic Dragon Playing... | Thx @thepiff! https://t.co/jvq8FFw3e6"

@ashleyford 19 hours ago

"@KBedders @elerichardson I'm Free!!!!!! Call / Whatsapp me!!!"

@ashleyford 2 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

Awesome Dashboard Gauges with Javascript

A pure SVG library for creating clean animated gauges

AshleyAshley

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

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 6
  • Rick
    Posted on

    Rick Rick

    Reply Author

    Your demo for this isn’t working fyi (Chrome, OS X)


  • Cubicle Ninjas
    Posted on

    Cubicle Ninjas Cubicle Ninjas

    Reply Author

    I definitely want to try this.


  • Anurag Das
    Posted on

    Anurag Das Anurag Das

    Reply Author

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


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      Hey Anurag – Yes i’ll see what i can come up with in the future!


  • Nerudo
    Posted on

    Nerudo Nerudo

    Reply Author

    Awesome article.

    I noticed some of your code was escaped.

    Look forward to your new articles.


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      All fixed thanks for noticing!