This sample demonstrates the Polar Area chart type.
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.PolarChartData"></asp:ObjectDataSource>
<jqChart:Chart ID="Chart1" Width="500px" Height="300px" runat="server" DataSourceID="ObjectDataSource1">
<Title Text="Polar Area Chart"></Title>
<Background FillStyleType="LinearGradient" X1="0">
<ColorStops>
<jqChart:ColorStop Color="#d2e6c9" />
<jqChart:ColorStop Color="white" Offset="1" />
</ColorStops>
</Background>
<Border StrokeStyle="#6ba851" />
<Series>
<jqChart:PolarAreaSeries XValuesField="ValueX1" YValuesField="ValueY1">
<FillStyle Color="rgba(65,140,240,0.75)"></FillStyle>
</jqChart:PolarAreaSeries>
<jqChart:PolarAreaSeries XValuesField="ValueX2" YValuesField="ValueY2">
<FillStyle Color="rgba(252,180,65,0.75)"></FillStyle>
</jqChart:PolarAreaSeries>
</Series>
</jqChart:Chart>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SamplesBrowser.Models
{
public class PolarChartData
{
public static List<PolarChartData> GetData()
{
var data = new List<PolarChartData>();
for (var angle = 0.0; angle <= 360.0; angle += 10.0) {
var yValue = (1.0 + Math.Sin(angle / 180.0 * Math.PI)) * 10.0;
yValue = Math.Round(yValue, 2);
var x1 = angle + 90;
var x2 = angle + 270;
if (x1 > 360) {
x1 -= 360;
}
if (x2 > 360) {
x2 -= 360;
}
data.Add(new PolarChartData(x1, yValue, x2, yValue));
}
return data;
}
public PolarChartData(double valueX1, double valueY1, double valueX2, double valueY2)
{
this.ValueX1 = valueX1;
this.ValueX2 = valueX2;
this.ValueY1 = valueY1;
this.ValueY2 = valueY2;
}
public double ValueX1 { get; set; }
public double ValueX2 { get; set; }
public double ValueY1 { get; set; }
public double ValueY2 { get; set; }
}
}