This sample demonstrates how to set custom categories of Category Angle Axis for
Radar Series.
For detailed implementation, please take a look at the Aspx code tab.
<%@ Page Language="C#" %>
<%@ Register assembly="JQChart.Web" namespace="JQChart.Web.UI.WebControls" tagprefix="jqChart" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css" href="~/Content/themes/le-frog/jquery-ui-1.8.20.css" />
<script src="<% = ResolveUrl("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script>
<script src="<% = ResolveUrl("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
</head>
<body>
<form runat="server">
<asp:ObjectDataSource ID="ObjectDataSource1"
runat="server"
SelectMethod="GetData"
TypeName="SamplesBrowser.Models.RadarChartData"></asp:ObjectDataSource>
<jqChart:Chart ID="Chart1" Width="500px" Height="300px" runat="server" DataSourceID="ObjectDataSource1">
<Title Text="Category Angle Axis"></Title>
<Background FillStyleType="LinearGradient" X1="0">
<ColorStops>
<jqChart:ColorStop Color="#d2e6c9" />
<jqChart:ColorStop Color="white" Offset="1" />
</ColorStops>
</Background>
<Border StrokeStyle="#6ba851" />
<Axes>
<jqChart:CategoryAngleAxis CategoriesField="Label"></jqChart:CategoryAngleAxis>
</Axes>
<Series>
<jqChart:RadarLineSeries YValuesField="Value1" Title="Radar 1">
</jqChart:RadarLineSeries>
<jqChart:RadarLineSeries YValuesField="Value2" Title="Radar 2">
</jqChart:RadarLineSeries>
</Series>
</jqChart:Chart>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SamplesBrowser.Models
{
public class RadarChartData
{
public static List<RadarChartData> GetData()
{
var data = new List<RadarChartData>();
data.Add(new RadarChartData("France", 65.62, 46.45));
data.Add(new RadarChartData("Canada", 75.54, 63.78));
data.Add(new RadarChartData("Germany", 60.45, 86.45));
data.Add(new RadarChartData("USA", 34.73, 30.76));
data.Add(new RadarChartData("Italy", 85.42, 23.79));
data.Add(new RadarChartData("Spain", 55.9, 35.67));
data.Add(new RadarChartData("Russia", 63.6, 89.56));
data.Add(new RadarChartData("Sweden", 55.1, 67.45));
data.Add(new RadarChartData("Japan", 77.2, 38.98));
return data;
}
public RadarChartData(string label, double value1, double value2)
{
this.Label = label;
this.Value1 = value1;
this.Value2 = value2;
}
public string Label { get; set; }
public double Value1 { get; set; }
public double Value2 { get; set; }
}
}