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.

Pie Chart

Radar Chart