Continuous Data

In this example, the Polar Chart control visualizes a curve that has the shape of a petalled flower. This curve is commonly known as "rose" or "rhodonea", and a line series type visualizes it.

<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/rose.json" TitleText="Rose in Polar Coordinates">
    <SeriesCollection>
        <dx:BootstrapPolarChartLineSeries />
    </SeriesCollection>
    <ArgumentAxis Inverted="true" StartAngle="90" TickInterval="30" />
</dx:BootstrapPolarChart>

Discrete Data

This example demonstrates how to visualize discrete data using the Polar Chart control. Months in the data source form discrete categories that divide the PolarChart.

<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/temperature.json" TitleText="Average temperature in London" Height="500px">
    <SeriesCollection>
        <dx:BootstrapPolarChartScatterSeries ValueField="day" Name="Day" />
        <dx:BootstrapPolarChartScatterSeries ValueField="night" Name="Night" />
    </SeriesCollection>
</dx:BootstrapPolarChart>

Spider Web

This example displays the Spider Web mode of the Polar Chart control. In this mode, chart sectors are straight rather than circular. This mode is enabled using the UseSpiderWeb option.

<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/spider.json" UseSpiderWeb="true" TitleText="Fruit Production in 2010 (Millions of Tons)">
    <SeriesCollection>
        <dx:BootstrapPolarChartLineSeries ValueField="apples" Name="Apples" />
        <dx:BootstrapPolarChartLineSeries ValueField="grapes" Name="Grapes" />
        <dx:BootstrapPolarChartLineSeries ValueField="lemons" Name="Lemons" />
        <dx:BootstrapPolarChartLineSeries ValueField="oranges" Name="Oranges" />
    </SeriesCollection>
</dx:BootstrapPolarChart>

Wind Rose

This example illustrates a Wind Rose using the Polar Chart control with the StackedBad series type.

<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/wind.json" TitleText="Wind Rose, Philadelphia PA">
    <SeriesCollection>
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val1" Name="1.3-4 m/s" />
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val2" Name="4-8 m/s" />
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val3" Name="8-13 m/s" />
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val4" Name="13-19 m/s" />
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val5" Name="19-25 m/s" />
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val6" Name="25-32 m/s" />
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val7" Name="32-39 m/s" />
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val8" Name="39-47 m/s" />
    </SeriesCollection>
</dx:BootstrapPolarChart>

Periodic Data

This example illustrates the visualization of periodic data. The Period option of the argument axis is specified to notify the chart that data is periodic.

<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/pereodic.json" TitleText="Archimedean Spiral">
    <SeriesCollection>
        <dx:BootstrapPolarChartLineSeries ValueField="val" Closed="false" />
    </SeriesCollection>
    <ArgumentAxis Inverted="true" StartAngle="90" TickInterval="45" Period="360" />
</dx:BootstrapPolarChart>

Inverted Chart

This example shows the Polar Chart with inverted axes.

<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/inverted.json" TitleText="Inverted Rose in Polar Coordinates">
    <SeriesCollection>
        <dx:BootstrapPolarChartSeries Type="Area" Closed="false" />
    </SeriesCollection>
    <ArgumentAxis Inverted="true" StartAngle="90" TickInterval="30" />
</dx:BootstrapPolarChart>
Screen Size
Color Themes
Demo QR Code