Telerik UI for Windows 8 HTML

Polar series visualize data in a polar coordinate system. In the Polar Area series, the area enclosed by the data points is colored and represents the area outlined by the chart data points. Each data point is defined by an angle and a distance from the center point. The vertex of the angle is the chart center point and, by default, the starting ray is the horizontal line starting from the vertex going right. The data point will be visualized on the second (resulting) ray of the angle at a distance from the center point equal to the second polar coordinate. In the figure below, you can see the polar coordinate system coordinates and how they are used.

chart-polar-area-series

This topic contains the following sections.

Defining a Polar Area Series Declaratively

Polar Area series can be defined declaratively by adding an object to the Telerik.UI.RadChart.series array with a type property set to 'polarArea'

The simplest way to add data to a Polar Area series is to assign the data property an array with the data. Each data point is also represented by an array with two members. The first member is the angle in degrees (0 to 360). The second member is the distance from the chart center point.

HTML Copy imageCopy
<div id="declarativePolarAreaSeriesChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'polarArea', 
        data: [
            [ 47, 20.0],
            [ 125, 15.7],
            [ 178, 26.6],
            [ 231, 25.3]
        ]
    }],
    theme: 'light'       
}">
</div>

Defining a Polar Area Series Programmatically

To create and add a Polar Area series programmatically, you need to create a new Telerik.UI.Chart.PolarAreaSeries object and add it to the Telerik.UI.RadChart.series array. Finally, call the refresh() method for the changes to take effect.

JavaScript Copy imageCopy
var polarAreaSeriesChart = document.getElementById("declarativePolarAreaSeriesChart").winControl;
var polarAreaSeries = new Telerik.UI.Chart.PolarAreaSeries();
polarAreaSeries.data = [
    [117, 12.7],
    [195, 24.6],
    [234, 22.3],
    [297, 26.9]
];
polarAreaSeriesChart.series.push(polarAreaSeries);
polarAreaSeriesChart.refresh();

Configuring Polar Area Series

Apart from the common configuration settings listed in RadChart Series Common Configuration, there a few more specific configuration settings that you can use to customize the look and behavior of the Polar Area series.

This section lists the following configuration scenarios:

Setting the Polar Area Series Fields

You can use an array of JavaScript objects as data for the Polar Area series. You need to specify data fields that the series will use to get values. There are two available field settings for the Polar Area series representing the two polar coordinates. Here is a description of their usage:

  • xField: The data field that holds the data points angle coordinate.

  • yField: The data field that holds the data points distance coordinate.

The code snippet below shows an example of how to use the above properties with a dataSource. Their use is identical if you assign an array of JavaScript objects to the series data property.

HTML Copy imageCopy
<div id="polarAreaWithFields" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'polarArea',
        xField: 'angle',
        yField: 'value'
    }],
    dataSource: {
        data: [
            { angle: 0, value: 15.3},
            { angle: 60, value: 25.1},
            { angle: 120, value: 16.7},
            { angle: 180, value: 13.1},
            { angle: 240, value: 31.1},
            { angle: 300, value: 19.2},
            { angle: 360, value: 15.3}
        ]
    },
    theme: 'light'       
}">
</div>

Line Settings

The line property holds the settings to customize the area border line. There are three settings exposed: color, opacity, and width. Below you can see an example of line customization.

The line property holds the settings to customize the area border line. There are four settings exposed: color, opacity, width and style. The style option for this series can have two values — "normal" and "smooth" with "normal" being the default option value. Below you can see an example of line customization.

HTML Copy imageCopy
<div id="polarAreaBorder" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'polarArea',
        data: [
            [ 0, 26.7],
            [ 60, 18.3],
            [ 120, 35.1],
            [ 180, 26.4],
            [ 240, 29.3],
            [ 300, 17.9],
            [ 360, 26.7]
        ],
        line: {
            color: '#336699',
            opacity: 0.5,
            width: 5
        }
    }],
    theme: 'light'       
}">
</div>

The following figure displays the resulting chart with Polar Area series.

chart-polar-area-line

Customizing Markers

By default, the data points in a Polar Area series are not displayed. To show them and customize the way they are visualized, use the settings exposed by the markers property. They include background, border settings, size, type ('circle', 'square', and 'triangle'), and visible. Here is an example of how to display and customize the data points markers.

HTML Copy imageCopy
<div id="polarAreaMarkers" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'polarArea',
        data: [
            [ 0, 16.2],
            [ 60, 23.1],
            [ 120, 27.7],
            [ 180, 21.5],
            [ 240, 12.1],
            [ 300, 24.8],
            [ 360, 16.2],
        ],
        markers: {
            background: '#FFF',
            border: {
                width: 3,
                color: '#000'
            },
            size: 6,
            type: 'square',
            visible: true
        }
    }],
    theme: 'light'       
}">
</div>

Below is figure showing the chart with Polar Area series and data point markers.

chart-polar-area-markers

See Also