Creating Gauge Charts With The JustGage JavaScript Library

Gauge visualizations are somewhat epic. They look excellent, putting data into a lovely display of meaningful, digestible information in a snapshot. Gauge’s are the least complicated too, requiring one single value at anyone time, the possibilities are endless with what you can do with them.

This detailed demo tutorial will give you some expert knowledge on how to set up your own all-singing-all-dancing dashboard with beautiful Gauges splashed across your web-pages. Let’s get started.

Contents

  1. What Is JustGage?
  2. Setting Up
  3. Creating Some Demos
    1. JustGage Demo With Advanced Options
    2. The Donut Option
    3. Updating JustGage Chart Values
  4. Summary

What Is JustGage?

JustGage.com is a tiny 36.3 KB JavaScript Plugin that has one single dependency; raphael.js, a vector drawing library. It features Gauge-style charts that can work as a static element or real-time. Not only is it free, but it’s open sourced too, so if your pretty handy with JavaScript libraries and this takes your interest, you can fork it on GitHub.

Setting Up

The beauty with this library is that it needs minimal effort to get set-up and ready to develop. All you need is the following –

    • Browser (Preferably Chrome)
    • A single folder with sub folders of JS & CSS.
    • A index.html file.
    • An IDE that understands HTML, CSS and JavaScript.
    • Both justgage.js and raphael-2.1.4.min.js files from the GitHub Repository here. Or you can find them using these two CDN links – JustGage.js CDN and Raphael.js CDN.

Once all of the above are in place, your index.html file should have something like the following source code –

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JustGage Tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
    <script src="js/raphael-2.1.4.min.js"></script>
    <script src="js/justgage.js"></script>
</head>
<body>
    
</body>
</html>

Creating Some Demos

Let’s get cracking and render some charts to the index file. A basic chart takes a small amount of JavaScript and one line of HTML. The HTML will be to define where the chart renders on the screen and the script will tell it what will be rendered.

HTML

<div id="gauge" class="200x160px"></div> JavaScript
var g = new JustGage({
    id: "gauge",
    value: 275,
    min: 0,
    max: 500,
    label: "Visitors On Site"
});

As long as you’ve included the .js libraries, these two small snippets of code will load a chart to the page. Checkout the CodePen below to see the working example.

See the Pen JustGage Chart Static Demo by Danny Englishby (@DanEnglishby) on CodePen.0

Some notes on the options that are used in the above example’s script.

  • id – This is to specify the id of the html element that has been setup in the page, so it knows where to render the chart.
  • value – The value to set the gauge at.
  • min & max, Specify the lowest most value possible and the highest value possible.
  • label, The label to show underneath the value.

I know these options are pretty self explanatory, but I thought it would be good to give them a bit of descriptive context.

The above JustGage example is as basic as they come, with the minimal settings needed to get a good visual on your page. Now you can see the ease of having a full dashboard of these with pretty small effort.

JustGage Demo With Advanced Options

One of the greatest options that can be set against these Gauge Charts is a responsive parameter named relativeGaugeSize. This boolean option enables the chart to respond the the screen width and size making it a relative size at any one time. Therefore, providing the capability to work well with many more elements within the web page.

Another notable option is the pointer option which adds a dynamic pointer, pointing to the value of what the Gauge is currently reading. This can be customized to look specifically how you want it to, so it’s pretty awesome.

Add the following snippets to your html file to produce a responsive four-chart page.

HTML

<div class="wrapper">
    <div class="flexbox">
      <div class="box">
        <div id="g1" class="gauge"></div>
      </div>
      <div class="box">
        <div id="g2" class="gauge"></div>
      </div>
      <div class="box">
        <div id="g3" class="gauge"></div>
      </div>
      <div class="box">
        <div id="g4" class="gauge"></div>
      </div>
    </div>
  </div>
 CSS 
.wrapper {
      position: relative;
      width: 100%;
      height: 480px;
    }

    .box {
      width: 100%;
    }

    .container {
      width: 450px;
      margin: 0 auto;
      text-align: center;
    }

    .gauge {
      width: 100%;
      height: 240px;
    }

    .flexbox {
      display: flex;
      flex-wrap: wrap;
    }
    .flexbox>div {
      flex: 1 0 300px;
    }
 

JavaScript

var g1 = new JustGage({
        id: 'g1',
        value: 225,
        min: 0,
        max: 250,
        symbol: 'mph',
        pointer: true,
        gaugeWidthScale: 0.6,
        counter: true,
        relativeGaugeSize: true
      });

      var g2 = new JustGage({
        id: 'g2',
        value: 25,
        min: 0,
        max: 100,
        symbol: '%',
        pointer: true,
        pointerOptions: {
          toplength: -15,
          bottomlength: 10,
          bottomwidth: 12,
          color: '#8e8e93',
          stroke: '#ffffff',
          stroke_width: 3,
          stroke_linecap: 'round'
        },
        gaugeWidthScale: 0.6,
        counter: true,
        relativeGaugeSize: true
      });

      var g3 = new JustGage({
        id: 'g3',
        value: 40,
        min: 0,
        max: 100,
        symbol: 'kWh',
        pointer: true,
        gaugeWidthScale: 0.4,
        pointerOptions: {
          toplength: 10,
          bottomlength: 10,
          bottomwidth: 8,
          color: '#000'
        },
        counter: true,
        relativeGaugeSize: true
      });

      var g4 = new JustGage({
        id: 'g4',
        value: 70,
        min: 0,
        max: 100,
        symbol: 'Kg',
        pointer: true,
        pointerOptions: {
          toplength: 8,
          bottomlength: -20,
          bottomwidth: 6,
          color: '#8e8e93'
        },
        gaugeWidthScale: 0.1,
        counter: true,
        relativeGaugeSize: true
      });

Using the above snippets, you can see what it will look like in the Pen below –

See the Pen JustGage Charts With Pointers Static Demo by Danny Englishby (@DanEnglishby) on CodePen.0

From the Pen displayed here, you can instantly see how dynamic and adjustable these charts can be. With the simple switch of a few options, the chart can be transformed into a completely fresh new design.

Here’s some notes on the options that are used in the above example’s script.

  • symbol, This option enables changing what unit of measure is displayed next to the value, like MPH (miles per hour).
  • pointer, Set to true or false to have a nice pointer glide across your chart.
  • pointerOptions, Transforms the look of the pointer to your favorite preference.
  • gaugeWidthScale, A decimal value that control’s the width of the Gauge. If you look at g4 example, it’s been set to 0.1 width, and it’s rendered super-slim compared to the others.
  • relativeGaugeSize, Set this true or false so that the chart responds to it’s container’s width. This is ideal for responsive design.

The Donut Option

With one single option turned on, we can completely transform the last example. It’s called donut, and yes, it turns the Gauge into a donut-style-chart.

Heres the CodePen so you can see it in action –

See the Pen JustGage Donut Charts With Pointers Static Demo by Danny Englishby (@DanEnglishby) on CodePen.0

Cool isn’t it?

Updating JustGage Chart Values

Now, let’s have some real fun, let us dynamically change the value’s of the gauges and watch them glide up and down, changing colors as they render the new value.

The library comes with a vital method ready for execution, it’s called refresh(). It’s part of the JustGage object and can be accessed with the dot notation of the object itself. The value refresh expect’s is a Double, meaning it can be assigned full rounded integers or decimal placed. This in itself is pretty handy.

With a simple timer, we can put this to the test, dynamically updating the charts every x seconds. Using the previous example snippets, we can add the following JavaScript –

setInterval(function() {
        g1.refresh(getRandomInt(0, 250));
        g2.refresh(getRandomInt(0, 100));
        g3.refresh(getRandomInt(0, 100));
        g4.refresh(getRandomInt(0, 100));
      }, 5000); // update the charts every 5 seconds.

The above additional script will set an interval every five seconds and refresh each chart on the page. Check out the Pen below to see some amazing stuff!

See the Pen JustGage Donut Charts Updating Values Demo by Danny Englishby (@DanEnglishby) on CodePen.0

Summary

I hope this article has got you excited with thoughts going through your mind of what you can do with them! Idea’s are ultimately endless with Gauge charts and can be hooked up to numbered data. In the next tutorial for JustGage.js I will hook some charts up to a real-time API giving it a more meaningful use.

Interesting Links

Have fun with the examples and feel free to copy & paste the code used. As ever, any problems or issues, tweet me on twitter or leave a comment below.

Creating Gauge Charts With The JustGage JavaScript Library

You May Also Like

One thought on “Creating Gauge Charts With The JustGage JavaScript Library

Leave a Reply

Your email address will not be published.