Linear Gauge

Overview
Modules
Basics
Layout
Scales and Axes
Scale Bar
Pointers

Overview

A linear gauge is visual representation of a measuring device with a horizontal or vertical scale and a pointer or multiple pointers indicating particular values. The scale is usually color zoned, which helps to see what range the value of interest falls in. Linear gauges can represent thermometers, radio scales, battery indicators, rulers, and any other devices with straight line-shaped scales.

Modules

The Linear Gauge requires adding the Core and Linear Gauge modules:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-linear-gauge.min.js"></script>

Learn more: Modules.

Basics

To create all types of linear gauges, you can use a basic constructor: linear(). Also, AnyChart supports three special constructors with presets of tank, led, and thermometer gauges: tank(), led(), thermometer(). These presets define the visual style of a gauge and the type of its pointer (see the Pointers section below).

In the following sample, the four available constructors are used to create gauges of four types, each with its own type of pointer:

Playground

// create data
var data = [170, 210, 130, 310];

// set the gauge type
linear = anychart.gauges.linear();

// set data for the gauge
linear.data(data);

// add the default pointer
linear.addPointer(0);

// set the gauge type
tank = anychart.gauges.tank();

// set data for the gauge
tank.data(data);

// add the default pointer
tank.addPointer(1);

Layout

By default, all linear gauges are vertically oriented. To change the layout, the layout() method is used:

gauge = anychart.gauges.linear();

// set the layout
gauge.layout("horizontal");

Here are the four gauges from the previous sample, now oriented horizontally:

Playground

Scales and Axes

Like all other charts, gauges can have multiple scales and axes, though by default, only a primary scale is created and calculated, and a primary axis is bound to it. Configuring scales and axes is very similar to configuring the same elements of basic chart types: see Scales and Axis Basics.

In this sample, there is a thermometer gauge with two scales and two axes that show temperature in Celsius and Fahrenheit:

Playground

// use the primary scale a Fahrenheit scale
var fScale = gauge.scale();

// configure the primary scale
fScale.minimum(-40);
fScale.maximum(122);
fScale.ticks().interval(10);
fScale.minorTicks().interval(2);    

// configure an axis on the left side of the gauge
var axisLeft = gauge.axis(0);
axisLeft.minorTicks(true)
axisLeft.minorTicks().stroke('#cecece');
axisLeft.width('0');
axisLeft.offset('-0.18%');

// bind the left axis to the Fahrenheit scale
axisLeft.scale(fScale);

//configure a Celsius scale
var cScale = anychart.scales.linear();
cScale.minimum(-40);
cScale.maximum(50);
cScale.ticks().interval(10);
cScale.minorTicks().interval(1);

// configure an axis on the rigth side of the gauge
var axisRight = gauge.axis(1);
axisRight.minorTicks(true);
axisRight.minorTicks().stroke('#cecece');
axisRight.width('0');
axisRight.offset('3.15%');
axisRight.orientation('right');

// bind the right axis to the Celsius scale
axisRight.scale(cScale);

Scale Bar

Scale Bar is a special visual element used for color zoning the axes of linear gauges.

The sample below shows a basic horizontally oriented linear gauge with three color zones:

// create a color scale
var scaleBarColorScale = anychart.scales.ordinalColor().ranges(
  [
    {
      from: 0,
      to: 25,
      color: ['#D81E05', '#EB7A02']
    },
    {
      from: 25,
      to: 50,
      color: ['#EB7A02', '#FFD700']
    },
    {
      from: 50,
      to: 75,
      color: ['#FFD700', '#CAD70b']
    },
    {
      from: 75,
      to: 100,
      color: ['#CAD70b', '#2AD62A']
    }
  ]
);

// create a Scale Bar
var scaleBar = gauge.scaleBar(0);

// use the color scale as the color scale of the Scale Bar 
scaleBar.colorScale(scaleBarColorScale);

Playground

Also, you can customize the height of the scale bar in different points by using the points() method and specifying the relative height of three control points using ControlPoint object:

// set the relative height of the control points of the scale bar
scaleBar.points([
    {height: 1, left: 1, right: 0}
]);

Playground

Pointers

To add a pointer to a linear gauge, the addPointer() method is called. The type of pointer added by this method is implicitly defined by the constructor used to create the gauge. However, you can use any pointer with any gauge by calling the bar(), led(), marker(), rangeBar(), tank(), and thermometer() methods.

In the following sample, there is a tank gauge with tank, marker, and two bar pointers:

Playground

Please note that you can bind pointers to particular values in the data set:

// create data
var data = [150, 250, 300, 170];

// set the gauge type
gauge = anychart.gauges.tank();

// set the data for the gauge
gauge.data(data);

// create the first pointer (tank)
var tank = gauge.tank(0);

// create the second pointer (marker)
var marker = gauge.marker(1);

// configure the third pointer (bar)
var bar_1 = gauge.bar(2);

// configure the fourth pointer (bar)
var bar_2 = gauge.bar(3);

To learn more, read the Pointers and Data article.