Telerik UI for Windows 8 HTML

Polar Line series visualize data as a line by connecting data points in a polar coordinate system. Each data point is defined by an angle and a distance from the center point. The vertex of the angle is the chart's 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-line-series

This topic contains the following sections.

Defining a Polar Line Series Declaratively

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

The simplest way to add data to a Polar Line 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's center point.

HTML Copy imageCopy
<div id="polarLineSeriesChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'polarLine',
        data: [
            [ 45, 36.2],
            [ 86, 33.1],
            [ 145, 17.7],
            [ 236, 21.5],
            [ 273, 42.1],
            [ 303, 36]
        ]
    }],
    theme: 'light'       
}">
</div>

Defining a Polar Line Series Programmatically

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

JavaScript Copy imageCopy
var polarLineSeriesChart = document.getElementById("polarLineSeriesChart").winControl;
var polarLineSeries = new Telerik.UI.Chart.PolarLineSeries();
polarLineSeries.data = [
    [105, 43.7],
    [163, 36.5],
    [231, 48.1],
    [296, 22]
];
polarLineSeriesChart.series.push(polarLineSeries);
polarLineSeriesChart.refresh();

Configuring Polar Line 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 Line series.

This section lists the following configuration scenarios:

Setting the Polar Line Series Fields

You can also use an array of JavaScript objects as data for the Polar Line series. You need to specify data fields that the series will use to get values. There are two available field settings for the Polar Line 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.

Here is an example of how to use the above properties with a dataSource, but their use is identical if you assign an array of JavaScript objects to the series data property.

HTML Copy imageCopy
<div id="polarLineFields" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'polarLine',
        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

There are three specific properties that allow the customization of the line. These are dashType ('dash', 'dashDot', 'dot', 'longDash', 'longDashDot', 'longDashDotDot', and 'solid'), width, and opacity. You can also use the color property to change the color of the line. Below is an example of configuring the line settings for the Polar Line series.

There are five specific properties that allow the customization of the line. These are dashType ('dash', 'dashDot', 'dot', 'longDash', 'longDashDot', 'longDashDotDot', and 'solid'), width, opacity, color and style. The style option for this series can have two values — "normal" and "smooth" with "normal" being the default option value. Below is an example of configuring the line settings for the Polar Line series.

HTML Copy imageCopy
<div id="polarLineLineSettings" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'polarLine',
        data: [
            [ 0, 36.2],
            [ 60, 18.4],
            [ 120, 33.1],
            [ 180, 37.7],
            [ 240, 31.5],
            [ 240, 0],
            [ 300, 0],
            [ 360, 36.2]
        ],
        dashType: 'dash',
        opacity: 0.5,
        width: 3,
        color: '#FF361C'
    }],
    theme: 'light'       
}">
</div>

The figure below shows the chart produced by the above code snippet.

chart-polar-line-line-settings

Customizing Markers

By default, the data point markers are not displayed. To visualize them, set the visible option value of the markers property to true. This will display the data point markers with their default settings. The markers property exposes the following options to customize the appearance of the markers: 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="polarLineMarkers" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'polarLine',
        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: '#564110'
            },
            size: 15,
            type: 'triangle',
            visible: true
        }
    }],
    theme: 'light'       
}">
</div>

Below is an image of the resulting chart with the customized data point markers.

chart-polar-line-markers

Handling Missing Values

Use the missingValues property to specify how a missing value at some angle in the data will be handled. Below is a brief description of the possible property values.

  • 'interpolate': This is the default property value. When this property value is set, the missing points will be interpolated from neighboring data points.

  • 'gap': When this property value is set, the line will break between the missing value's neighboring data points and will continue afterwards.

  • 'zero': This property value specifies that the missing values should be assigned a value of zero.

In the code snippet below, there is a value in the data that is null and the missingValues property value is set to 'gap'.

HTML Copy imageCopy
<div id="polarLineMissingValues" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{ 
        type: 'polarLine',
        data: [
            [ 0, 21.2],
            [ 78, 34.5],
            [ 96, 32.7],
            [ 168, 41.1],
            [ 221, null],
            [ 254, 52.8],
            [ 360, 21.2]
        ],
        missingValues: 'gap'
    }],
    theme: 'light'       
}">
</div>

Here is an image of the resulting Polar Line chart.

chart-polar-line-missing-values

See Also