Radar Charts
The Telerik UI Radar Chart HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI Radar Chart widget.
The Radar Chart is a two-dimensional chart of three or more quantitative factors represented on axes starting from the same point. This type of chart is useful in making comparisons between units that depend on quantitative factors/variables. The closer the point/column of the particular variable is to the center of the chart, the lower its value is. The nearest the point/column of the particular variable is to the edge of the chart, the higher its value is.
Getting Started
The following example demonstrates how to configure a basic Radar Chart.
@(Html.Kendo().Chart()
.Name("chart")
.Title("Market Value of Major Banks")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.SeriesDefaults(seriesDefaults => seriesDefaults.RadarLine().Style(ChartRadarLineStyle.Smooth))
.Series(series => {
series.RadarLine(new double[] {
116, 165, 215, 75, 100, 49, 80,
116, 108, 90, 67, 76, 91, 255, 120
})
.Name("Market value as of 2007");
series.RadarLine(new double[] {
64, 85, 97, 27, 16, 26, 35,
32, 26, 17, 10, 7, 19, 5
})
.Name("Market value as of 2009");
})
.CategoryAxis(axis => axis
.Categories("Santander", "JP Morgan", "HSBC", "Credit Suisse",
"Goldman Sachs", "Morgan Stanley", "Societe Generale", "UBS",
"BNP Paribas", "Unicredit", "Credit Agricole", "Deutsche Bank",
"Barclays", "Citigroup", "RBS")
)
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("${0}"))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("${0} bln")
)
)
The configuration from the previous example results in the following Radar Chart.
Series Types
The Telerik UI for ASP.NET MVC Radar Chart supports series of type RadarLine, RadarArea, and RadarColumn.
RadarLine Series
The default style of the RadarLine is ChartSeriesStyle.Normal. You can configure a smooth polar area chart through the Style option in the Series or SeriesDefaults configuration settings. Setting Style to ChartSeriesStyle.Smooth will create a spline. A spline is a form of line/area chart where each data point from the series is connected with a curved line, which represents a rough approximation of the missing data points.
.Series(series => {
series.RadarLine(new double[] {
116, 165, 215, 75, 100, 49, 80,
116, 108, 90, 67, 76, 91, 255, 120
}).Style(ChartRadarLineStyle.Smooth)
.Name("Market value as of 2007");
series.RadarLine(new double[] {
64, 85, 97, 27, 16, 26, 35,
32, 26, 17, 10, 7, 19, 5
}).Style(ChartRadarLineStyle.Smooth)
.Name("Market value as of 2009");
})
RadarArea Series
The Radar Chart with RadarArea series is represented by data points connected with straight line segments that enclose a filled area.
@(Html.Kendo().Chart()
.Name("chart")
.Title("Employment candidate review")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.Series(series => {
series.RadarArea(new double[] { 10, 3, 3, 10, 2, 10 })
.Name("Andrew Dodsworth");
series.RadarArea(new double[] { 9, 7, 7, 9, 6, 7 })
.Name("Margaret Peacock");
series.RadarArea(new double[] { 4, 10, 10, 5, 5, 4 })
.Name("Nancy Callahan");
})
.CategoryAxis(axis => axis
.Categories("Experience", "Communication", "Friendliness",
"Subject knowledge", "Presentation", "Education")
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0}%"))
.Line(line => line.Visible(false))
)
)
RadarColumn Series
A Radar Chart that uses RadarColumn series displays data columns the height of which varies according to their value.
@(Html.Kendo().Chart()
.Name("chart")
.Title("Nutrient balance: Apples, raw")
.Legend(legend => legend
.Visible(false)
)
.Series(series => {
series.RadarColumn(new double[] {
5, 1, 1, 5, 0, 1,
1, 2, 1, 2, 1, 0,
0, 2, 1, 0, 3, 1,
1, 1, 0, 0, 0
})
.Name("Nutrients");
})
.CategoryAxis(axis => axis
.Categories("Df", "Pr", "A", "C", "D", "E",
"Th", "Ri", "Ni", "B", "F", "B",
"Se", "Mn", "Cu", "Zn", "K", "P",
"Fe", "Ca", "Na", "Ch", "Sf")
)
.ValueAxis(axis => axis
.Numeric()
.Visible(false)
)
)