Circle Chart

This interactive circle 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: 210px; height: 235px; padding: 10px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); }
    </style>
    <script>
      window.addEventListener('load', () => {
        'use strict';

        // Draw the chart:
        const circle1 = Pixi.Chart('#chart1', 'circle', 25);

        // Update its value:
        setTimeout(function() {
          circle1.update(50);
          circle1.update(0);
          circle1.update(25);
          circle1.update(100);
          circle1.update(75);
        }, 3000);
      });
    </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/pixi-min.css">
    <script src="../js/pixi-min.js"></script>
    <style>
      #chart { width: 210px; height: 235px; 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 = {
          chart: { thickness: 30, angle: { start: -225, end: 45 }},
          title: { label: 'Speed' }, counter: { suffix: 'km/h' },
          yAxis: { max: 200, maxGreen: 160, maxOrange: 180 }
        };

        // Draw the chart:
        const circle2 = Pixi.Chart('#chart2', 'circle', 0, opts);

        // Update its value:
        setTimeout(function() {
          circle2.update(190);
          circle2.update(150);
          circle2.update(165);
          circle2.update(175);
          circle2.update(75);
        }, 3000);
      });
    </script>
  </head>
  <body>
    <div id="chart" class="pixi"></div>
  </body>
</html>

Methods

Main Methods

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

Chart Options

Attribute Type Default Info
chart Object The attributes of the chart.
chart.type String 'circle' The type of Circle chart (currently, 'circle' option only).
radius Number 80 The radius value.
thickness Number 30 The thickness of the band. Value from 0 to radius value.
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 -90 The angular start position in degrees.
chart.angle.end Number 270 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 polar center.
chart.grid.y - The vertical position of the polar 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.maxGreen Number 70 The maximal green range.
yAxis.maxOrange Number 90 The maximal yellow range.
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.