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.
Rose in Polar Coordinates
<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/rose.json" TitleSettings-Text="Rose in Polar Coordinates">
<SeriesCollection>
<dx:BootstrapPolarChartLineSeries />
</SeriesCollection>
<ArgumentAxis Inverted="true" StartAngle="90" TickInterval="30" />
<SettingsLegend Visible="false" />
</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.
Average temperature in London
<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/temperature.json" TitleSettings-Text="Average temperature in London" Height="500px">
<SeriesCollection>
<dx:BootstrapPolarChartScatterSeries ValueField="day" Name="Day" />
<dx:BootstrapPolarChartScatterSeries ValueField="night" Name="Night" />
</SeriesCollection>
<SettingsLegend VerticalAlignment="Bottom" HorizontalAlignment="Center" />
</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.
Fruit Production in 2010 (Millions of Tons)
<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/spider.json" UseSpiderWeb="true" TitleSettings-Text="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 StackedBar series type.
Wind Rose, Philadelphia PA
<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/wind.json" TitleSettings-Text="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" TitleSettings-Text="Archimedean Spiral">
<SeriesCollection>
<dx:BootstrapPolarChartLineSeries ValueField="val" Closed="false" />
</SeriesCollection>
<ArgumentAxis Inverted="true" StartAngle="90" TickInterval="45" Period="360" />
<SettingsLegend Visible="false" />
</dx:BootstrapPolarChart>
Inverted Chart
This example shows the Polar Chart with inverted axes.
Inverted Rose in Polar Coordinates
<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/inverted.json" TitleSettings-Text="Inverted Rose in Polar Coordinates">
<SeriesCollection>
<dx:BootstrapPolarChartSeries Type="Area" Closed="false" />
</SeriesCollection>
<ArgumentAxis Inverted="true" StartAngle="90" TickInterval="30" />
<ValueAxis Inverted="true" />
<SettingsLegend Visible="false" />
</dx:BootstrapPolarChart>