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.

@(Html.DevExpress()
    .BootstrapPolarChart("polarChartContinuousData")
    .TitleText("Rose in Polar Coordinates")
    .SeriesCollection(series => series
        .AddLineSeries())
    .ArgumentAxis(axis => axis
        .Inverted(true)
        .StartAngle(90)
        .TickInterval(30))
    ...
    .Bind("jsondata/ChartTypes/rose.json"))

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.

@(Html.DevExpress()
    .BootstrapPolarChart("polarChartDiscreteData")
    .TitleText("Average temperature in London")
    .Height(500)
    .SeriesCollection(series => {
        series.AddScatterSeries()
            .ValueField("day")
            .Name("Day");
        series.AddScatterSeries()
            .ValueField("night")
            .Name("Night");
    })
    ...
    .Bind("jsondata/ChartTypes/temperature.json"))

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.

@(Html.DevExpress()
    .BootstrapPolarChart("polarChartSpiderWeb")
    .UseSpiderWeb(true)
    .TitleText("Fruit Production in 2010 (Millions of Tons)")
    .SeriesCollection(series => {
        series.AddLineSeries()
            .ValueField("apples")
            .Name("Apples");
        series.AddLineSeries()
            .ValueField("grapes")
            .Name("Grapes");
        series.AddLineSeries()
            .ValueField("lemons")
            .Name("Lemons");
        series.AddLineSeries()
            .ValueField("oranges")
            .Name("Oranges");
    })
    ...
    .Bind("jsondata/ChartTypes/spider.json"))

Wind Rose

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

@(Html.DevExpress()
    .BootstrapPolarChart("polarChartWindRose")
    .TitleText("Wind Rose, Philadelphia PA")
    .SeriesCollection(series => {
        series.AddStackedBarSeries()
            .ValueField("val1")
            .Name("1.3-4 m/s");
        series.AddStackedBarSeries()
             .ValueField("val2")
             .Name("4-8 m/s");
        series.AddStackedBarSeries()
            .ValueField("val3")
            .Name("8-13 m/s");
        series.AddStackedBarSeries()
            .ValueField("val4")
            .Name("13-19 m/s");
        series.AddStackedBarSeries()
            .ValueField("val5")
            .Name("19-25 m/s");
        series.AddStackedBarSeries()
            .ValueField("val6")
            .Name("25-32 m/s");
        series.AddStackedBarSeries()
            .ValueField("val7")
            .Name("32-39 m/s");
        series.AddStackedBarSeries()
            .ValueField("val8")
            .Name("39-47 m/s");
    })
    ...
    .Bind("jsondata/ChartTypes/wind.json"))

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.

@(Html.DevExpress()
    .BootstrapPolarChart("PolarChartPeriodicData")
    .TitleText("Archimedean Spiral")
    .SeriesCollection(series => series
        .AddLineSeries()
        .ValueField("val")
        .Closed(false))
    .ArgumentAxis(axis => axis
        .Inverted(true)
        .StartAngle(90)
        .TickInterval(45)
        .Period(360))
        ...
    .Bind("jsondata/ChartTypes/pereodic.json"))

Inverted Chart

This example shows the Polar Chart with inverted axes.

@(Html.DevExpress()
    .BootstrapPolarChart("polarChartInvertedChart")
    .TitleText("Inverted Rose in Polar Coordinates")
    .SeriesCollection(series => series
        .AddAreaSeries()
        .Closed(false))
    ...
    .Bind("jsondata/ChartTypes/inverted.json"))
Screen Size
Color Themes
Demo QR Code