Gauge Chart

This interactive Gauge chart is rendered within the browser using SVG.

View source 


<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/pixicharts.min.css">
    <script src="../js/pixicharts.min.js"></script>
    <style>
      #chart { width: 186px; height: 211px; padding: 10px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37) }
    </style>
    <script>
      window.addEventListener('load', () => {
        'use strict';

        // Define the chart options:
        const opts = {
          title: { label: 'My Gauge' },
        };

        // Draw the chart:
        const gauge = Pixi.Chart('#chart', 'gauge', 25, opts);

        // Update its value:
        setTimeout(function() {
          gauge.update(0);
          gauge.update(75);
          gauge.update(1);
          gauge.update(35);
        }, 2000);
      });
    </script>
  </head>
  <body>
    <div id="chart" class="pixi"></div>
  </body>
</html>


<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/pixicharts.min.css">
    <script src="../js/pixicharts.min.js"></script>
    <style>
      #chart { width: 186px; height: 211px; padding: 10px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37) }
    </style>
    <script>
      window.addEventListener('load', () => {
        'use strict';

        // Define the chart options:
        const opts = {
          title: { label: 'My Gauge' },
        };

        // Draw the chart:
        const gauge = Pixi.Chart('#chart2', 'gauge', 85, opts);

        // Update its value:
        setTimeout(function() {
          gauge.update(25);
          gauge.update(65);
          gauge.update(3);
          gauge.update(65);
        }, 4000);
      });
    </script>
  </head>
  <body>
    <div id="chart" class="pixi"></div>
  </body>
</html>

Methods

Main Methods

Name Return Description
.Chart (id, 'gauge', data, options) this Creates, draws and returns the Chart object.
update (pointerValue) - Updates the pointer position of the chart with the new value 'pointerValue'.

Chart Options

Attribute Type Default Info
chart Object The attributes of the chart.
chart.type String 'gauge' The type of Gauge chart (currently, 'gauge' option only).
chart.radius Number 68 The radius value of the chart.
chart.width Number - The outer width of the chart.
chart.height Number - The outer height of the chart.
chart.angle Object The angular attributes.
chart.angle.start Number -225 The angular start position in degrees.
chart.angle.end Number 45 The angular end position in degrees.
chart.grid Object - The position and the size of the chart inside the outer box.
chart.grid.x Number - The horizontal position of the gauge center.
chart.grid.y - The vertical position of the gauge center.
chart.grid.width Number - The width of the chart.
chart.grid.height Number - The height of the chart.
title Object The title attributes.
title.label String The name of the title.
title.x Number - The horizontal anchor position of the title.
title.y Number - The vertical anchor position of the title.
subtitle Object The subtitle attributes.
subtitle.label String The text for the subtitle.
subtitle.x Number - The horizontal anchor position of the subtitle.
subtitle.y Number - The vertical anchor position of the subtitle.
yAxis Object The attributes of the Y axis.
yAxis.min Number 0 The minimal value on Y axis.
yAxis.max Number 100 The maximal value on Y axis.
yAxis.mainUnit Number - The main graduations interval.
yAxis.minorUnit Number - The minor graduation interval.
yAxis.maxGreen Number 75 The maximal green range.
yAxis.maxOrange Number 85 The maximal yellow range.
yAxis.textTicks String limits The text label (at the limits or below each main ticks). Available values: 'limits' or 'mainUnits'.
yAxis.title Object The attributes of the Y Axis legend.
yAxis.title.label String The legend name.
yAxis.title.x Number - The horizontal anchor point.
yAxis.title.y Number - The vertical anchor point.
counter Object The digital counter attributes.
counter.x Number 0 The horizontal anchor point of the digital counter.
counter.y Number - The vertical anchor point of the digital counter.
counter.suffix String '-' The suffix parameter.

- means a computed value.