How to create a line gauge chart in JavaScript

0

This article presents an easy-to-follow guide to creating an interactive line gauge chart in JavaScript.

We’ll show how to quickly create a cool and interactive line gauge chart that highlights Covid-19 vaccination data around the world. Our graph will allow us to visualize the status of the Covid-19 vaccination at the time of writing and will display two types of data – showing how far we are from the target halfway through partial and full vaccination of world population.

What is a line gauge chart?

Data visualization is an invaluable tool, given the large amount of data created and the many possibilities to glean information from the data. Data visualization is particularly useful for identifying trends, interpreting patterns, and communicating complex ideas to the target audience.

A line gauge graph represents a vertical or horizontal linear scale that displays the required values, with a color scale as well as single or multiple pointers. The minimum and maximum values ​​of the data range can be set on the axes depending on the data represented. The pointer position indicates the current value of the metric.

A gauge chart can display a single value or multiple values ​​using an individual pointer or a combination of markers. The pointer can be a needle or a line with a marker of any shape such as a circle, square, rectangle, or triangle.

The line gauge type of chart is an effective visual representation for showing how close or far the values ​​are to the desired data point.

Types of linear gauges

The different types of linear gauges are thermometer chart, bullet chart, tank chart, and LED chart. The mercury thermometer – made up of minor graduations that displays the temperature along with the pointer value – is a classic example of a line gauge chart.

The linear gauge visualization that we are going to build

Here’s a look at the final line gauge chart. Take this tutorial to learn how we build this interesting and informative line gauge chart using JavaScript.

final version of line gauge chart

The four steps to create a JavaScript linear gauge

It always helps to have skills with technologies like HTML and JavaScript. But in this tutorial, we use a JS chart library that makes it easy to create compelling charts like the line gauge even with minimal technical knowledge.

There are several JavaScript chart libraries to easily visualize the data, and here we are creating the line gauge chart with AnyChart. This library is flexible, with extensive documentation, and it consists of excellent examples. Plus, it has a playground for experimenting with the code and is free for non-commercial use. If you would like to purchase a licensed version, you can review the options available, and if you are an educational or non-profit organization, you can contact us for a free license here.

Steps to Create a JavaScript Linear Gauge

Here are the basic steps to create a line gauge chart:

  1. Create a basic HTML page.
  2. Include the necessary JavaScript files.
  3. Add the data.
  4. Write the JavaScript code for the chart.

Let’s take a look at each of these steps in detail below.

1. Create a basic HTML page

The first thing we need to do is create an HTML page that will contain our visualization. We add a

block and give it an ID so we can reference it later:

<html lang="en">
  <head>
    <title>JavaScript Linear Gaugetitle>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    style>
  head>
  <body>
    <div id="container">div>
  body>
html>

The width and height attributes of the

are set to 100% so that the graph is displayed on the entire screen. These attributes can be changed as needed.

2. Include the necessary JavaScript files

The next step is to reference the JS links in the HTML page. We’ll be using the AnyChart library for this tutorial, so let’s include the corresponding files from their CDN.

To create a linear gauge chart, we will need to add three scripts: the base module, the linear gauge module, and the table module:

<html lang="en">
  <head>
    <title>JavaScript Linear Gaugetitle>
    <style type="text/css">
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    style>
  head>
  <body>  
    <div id="container">div>
    <script>
      
    script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js">script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-linear-gauge.min.js">script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-table.min.js">script>
  body>
html>

3. Add the data values

Line gauge chart data is collected from Our World in Data and included in the code. On this site, we can see the percentage of people who have received one and two doses of the Covid vaccine for each continent around the world.

Because (at the time of writing) none of the numbers are greater than 50%, we have kept the maximum axis limit of all linear gauges at 50%, and we are comparing how far away from that mark is each continent, as well as the overall figure. We indicate at least partially vaccinated digits with an LED representation and fully vaccinated digits with a bar pointer. We will see how the data is added in the last step.

So, our first few steps are all done, and now let’s add the code to create a line gauge chart with JavaScript!

4. Write the JavaScript code for the chart

Before we add any code, we include everything in a function that ensures that all of the code in it only executes after the page has loaded.

Creating a line gauge chart involves a few steps and is a bit more complex than other basic chart types. But that doesn’t mean it’s very difficult, and we’ll go through each step to understand how the chart is made.

Defining the linear scale and axis of the gauge graph

We have several pointers in our graph. So let’s start by creating a function that accepts two values: one for the bar pointer and one for the LED gauge. Next, we’ll create a gauge, define the data, and specify the layout as horizontal. Next, we will define the range of scales and axes. We are going to make a linear scale with the minimum and maximum ranges. For the axis, we will define the attributes and define the orientation:

function drawGauge(value, settings) {
  
  const gauge = anychart.gauges.linear();
  gauge.data([value, settings.value]);
  gauge.layout('horizontal');

  
  const scale = anychart.scales.linear();
  scale.minimum(0).maximum(settings.maximum).ticks({ interval: 2 });

  
  const axis = gauge.axis(0);
  axis.width('1%').offset('43%').scale(scale).orientation('bottom');
}

Define bar pointer and label

Now we will create the bar pointer and label for the series of bars. The label receives an offset to avoid overlap with the pointer:


const barSeries = gauge.bar(0);

barSeries
  .scale(scale)
  .width('4%');


const labelBar = barSeries.labels();
labelBar
  .enabled(true)
  .offsetY('-15px');

Creating the LED pointer and setting the color attribute

In the LED dots, we will specify the gap between the dots and use the dimmer property to set the color of the residual LED dots to indicate an unlit effect. We will also declare the color scale of the lit LED points:


const ledPointer = gauge.led(1);

ledPointer
  .offset('10%')
  .width('30%')
  .count(settings.maximum)
  .scale(scale)
  .gap(0.55)
  .dimmer(function () {
    return '#eee';
  });

ledPointer.colorScale().colors(['#63b39b', '#63b39b']);

Declaration of gauges with the target value of each data point

To create the linear gauge for each continent, we will call the function defined above for each region with its data. The first number indicates the data of the target value and the second variable is an object with the data of the LED. The maximum remains constant at 50, while value is the percentage value of the fully immunized population for each data point. This value will be displayed by the pointer:


const world = drawGauge(13.68, { maximum: 50, value: 27.13 });
const europe = drawGauge(36.98, { maximum: 50, value: 47.28 });
const nAmerica = drawGauge(36.77, { maximum: 50, value: 46.53 });
const sAmerica = drawGauge(22.8, { maximum: 50, value: 40.54 });
const asia = drawGauge(10.14, { maximum: 50, value: 27.16 });
const oceania = drawGauge(9.75, { maximum: 50, value: 22.12 });
const africa = drawGauge(1.56, { maximum: 50, value: 3.04 });

Adjusting the layout of the linear gauges

To display each of the linear gauges one below the other, we’ll define an array and add the title along with each data point in a separate row. We will add the different properties of the layout, such as alignment and font size. We’ll also set some parameters for the first row, since it’s the title, and set the first column’s width attribute to 100% because we don’t need any columns anymore:


const layoutTable = anychart.standalones.table();
layoutTable
  .hAlign('right')
  .vAlign('middle')
  .fontSize(14)
  .cellBorder(null);


layoutTable.contents([
  [null, 'Covid-19 Vaccination - How far are we from the halfway mark?'],
  ['World', world],
  ['Europe', europe],
  ['North America', nAmerica],
  ['South America', sAmerica],
  ['Asia', asia],
  ['Oceania', oceania],
  ['Africa', africa]
]);


layoutTable
  .getRow(0)
  .height(50)
  .fontSize(22)
  .hAlign('center');


layoutTable.getCol(0).width(100);

Draw the graph

The last step is to reference the

container that we added in the previous step, and to draw the graphic:


layoutTable.container('container');
layoutTable.draw();

And that’s all. Now we have a beautiful, fully functional JavaScript line gauge chart! The code for this initial version of the linear gauge can be viewed on CodePen.

Initial version of the linear gauge

Make the graph accessible

It is always a good practice to ensure that graphics are accessible to as many people as possible. So with everything in mind, we’ve created a basic version of the line gauge chart that is more suitable for screen readers. You can check it out here and read more about this aspect in the AnyChart JavaScript Library documentation.

Customizing the linear gauge

The default line gauge chart we’ve created is great for now, but a few tweaks will improve readability and make the chart even more awesome. JavaScript libraries are great not only for quickly creating graphics, but also for customizing visualizations as needed. Graphics libraries provide many configuration options to control the behavior and aesthetics of graphics. Let’s make some minor but effective changes to our current line gauge chart.

Changing the color

To make the linear gauge more consistent, let’s make the bar pointer color attribute a darker version of the LED dots. We’ll do this by specifying the bar fill and stroke attributes:


const barSeries = gauge.bar(0);
barSeries
  .scale(scale)
  .width('4%')
  .fill('#296953')
  .stroke('#296953');

Adding a legend to our line gauge chart

Since we have used different colors for the bar, with the LED pointers on and not on, it is good practice to provide a legend to explain the colors. We will create a legend and add it under the title of the chart:


const legend = anychart.standalones.legend();
legend
.position('center')
.items([
    { text: 'Fully vaccinated', iconFill: '#296953' },
    { text: 'Partially vaccinated', iconFill: '#63b39b' },
    { text: 'Not vaccinated', iconFill: '#eee' }
]);

Formatting Tooltips

To facilitate better data communication, let’s format the tooltip to make it more informative by displaying the values ​​as a percentage and indicating that the maximum value of the gauge is 50%:


gauge
    .tooltip()
    .useHtml(true)
    .titleFormat('{%Value} %')
        .format(
        'Maximum on scale: ' +
        settings.maximum +
        ' %'
    );

Check out the full code for this version on CodePen.

Formatting axes and labels

The last thing we’ll do is display all data values ​​as percentages to avoid confusion. We will also add a caption as a row in the table below the title to indicate that the values ​​are percentages. One more thing will be to spruce up the bar labels with bolder fonts.

Final version of the linear gauge

All of the final code for this JavaScript linear gauge chart can be found on CodePen.

See the pen
Linear Gauge (JS) – Final by SitePoint (@SitePoint)
on CodePen.

Conclusion

In this step-by-step tutorial, we’ve seen how creating functional and visually appealing JavaScript graphics isn’t too difficult with a good JavaScript library. Consult the documentation and examples to better understand the characteristics and properties of the linear gauge. Please ask questions if in doubt about this graph or other visualizations.

There are several chart options provided by AnyChart, and there are also many other JavaScript chart libraries to create beautiful visualizations.

Let’s all get vaccinated and stay healthy to continue creating more visualizations!


Source link

Leave A Reply

Your email address will not be published.