Polar Chart

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


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

        // Define the series options:
        const series = [
          { label: 'Series 1', type: 'column', data: [9, 8, 7, 6, 5, 4, 3, 2], style: { fillColor: 'deeppink' } },
          { label: 'Series 2', type: 'area', data: [9, 8, 7, 6, 5, 4, 3, 1], style: { fillColor: 'deepskyblue' } },
          { label: 'Series 3', type: 'line', data: [1, 2, 3, 4, 5, 6, 7, 8, 9], style: { stroke: 'orange' } },
        ];

        // Define the chart options:
        const opts = {
          title: { label: 'Polar Chart' },
          legend: {
            enabled: true,
            floating: true,
            align: {
              horizontal: 'right',
              vertical: 'top',
            },
          },
          plotOptions: {
            plotStart: 0,
            pointInterval: 45,
          },
          xAxis: {
            min: 0,                      // starting point,
            max: 360,                    // end point,
            tick: 45,                    // increment,
            suffix: '°',                 // indicator,
          }
        };

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

        // Add an event listener that fires when a new SVG element
        // is selected:
        polar.on('over', () => {
          $('#event').text('Event over!');
        });

        // Add an event listener that fires when the mouse leaves
        // the selected SVG element:
        polar.on('out', () => {
          $('#event').text('Event out!');
        });
      });
    </script>
  </head>
  <body>
    <div id="chart" class="pixi"></div>
    <div id="event"></div>
  </body>
</html>
          

Methods

Main Methods

Name Return Description
.Chart (id, 'polar', series, options) this Creates, draws and returns the Chart object.
.attachTooltip (xmlString, width, height) this Attachs a user defined tooltip to the selected element. The user defined HTML5 tooltip is included in a SVG foreignObject element (requires IE12+).

Event Methods

Name Return Description
.addEventListener (type, listener) this Registers the specified listener on the EventTarget it's called on.
.addOneTimeEventListener (type, listener) this Registers the specified listener on the EventTarget it's called on for a one-time event.
.removeEventListener (type, listener) this Removes the event listener previously registered with addEventListener ().
.on (type, listener) this Alias on addEventListener ().
.one (type, listener) this Alias on addOneTimeEventListener ().
.off (type, listener) this Alias on removeEventListener ().

Event Types

Attribute Type Object Info
'over' String OverEvent Fired when the mouse enters on a new element.
'out' String - Fired when the mouse leaves the selected element.

Event Objects

OverEvent
Attribute Type Info
x String The x-axis value of the SVG element(s) that fired the event.
series Array The attributes of the selected SVG element(s). The array contains one object per SVG element(s).
series[n].label String The name of the serie.
series[n].value String The y value of the SVG element.
series[n].color String The color associated to this SVG element.

Series Options

The series are specified in an array of objects. The serie object has the following attributes:

Attribute Type Default Info
label String empty The name of the data value.
prefix String The prefix attribute.
suffix String The suffix attribute.
type String line The options are line, column and area.
data Array Array having an object with the key(s) being the map element ID.
style Object null The style to apply to the SVG elements that belong to the serie. By default, the css style is applied.
style.fillColor String undefined The fill color attribute.
style.fillOpacity Number undefined The color opacity attribute.
style.stroke String undefined The stroke color attribute.
style.strokeOpacity Number undefined The stroke color opacity attribute.
style.strokeWidth Number undefined The stroke width attribute.
over Object null The style to apply to the SVG elements that belong to the serie when the mouse is over the element. By default, the css style is applied.
over.fillColor String undefined The fill color attribute.
over.fillOpacity Number undefined The color opacity attribute.
over.stroke String undefined The stroke color attribute.
over.strokeOpacity Number undefined The stroke color opacity attribute.
over.strokeWidth Number undefined The stroke width attribute.

Chart Options

Attribute Type Default Info
chart Object The attributes of the chart.
chart.type String 'polar' The type of Polar chart (currently, 'polar' option only).
chart.width Number 420 The outer width of the chart.
chart.height Number 330 The outer height of the chart.
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.
chart.grid.margin Object The inner box margins.
chart.grid.margin.top Number 0 The inner box top margin.
chart.grid.margin.left Number 0 The inner box left margin.
chart.grid.margin.right Number 0 The inner box right margin.
chart.grid.margin.bottom Number 0 The inner box bottom margin.
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.
legend Object The legend attributes.
legend.enabled Boolean true Enables or disables the legend.
legend.floating Boolean true Enables or not the legend to float above the map.
legend.layout String vertical The legend could be horizontal or vertical.
legend.align Object The legend position on the grid.
legend.align.horizontal String right The legend position on x axis could be: left, right or middle
legend.align.vertical String top The legend position on y axis could be: top, bottom or middle
legend.shift Object The shift position of the legend on the grid.
legend.shift.x Number 0 Moves slightly the legend on the x direction.
legend.shift.y Number 0 Moves slightly the legend on the y direction.
legend.icon Object The icon rectangle size.
legend.icon.width Number 10 The icon rectangle width.
legend.icon.height Number 10 The icon rectangle height.
tooltip Object The tooltip attributes.
tooltip.enabled Boolean true Enables (true) or disables (false) the tooltip.
tooltip.animated Boolean true smoothly moves (true) or not (false) the tooltip from previous item to current.
xAxis Object The attributes of the X axis.
xAxis.min Number 0 The minimal value on X axis.
xAxis.max Number 360 The maximal value on X axis.
xAxis.tick Number 45 The value of the increment on X axis.
xAxis.suffix String '' The suffix parameter.
yAxis Object The attributes of the Y axis.
yAxis.min Number 0 The minimal value.
yAxis.max Number 10 The maximal value.
yAxis.minor Number 4 The incremental value.
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.
plotOptions Object It defines how to position the elements of the serie on the chart.
plotOptions.plotStart Number 0 The position of the first element of the serie on the X axis.
plotOptions.pointInterval Number 45 The increment between two elements of the serie.

- means a computed value.