The area chart can be plotted on a linear, date time or category x-axis (x-values
are numeric, dates or categories (strings)).
In this example the area chart in plotted on a linear axis.
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="GetAreaChartData"
TypeName="SamplesBrowser.Models.LinearXAxisChartData"></asp:ObjectDataSource>
<jqChart:Chart ID="Chart1" Width="500px" Height="300px" runat="server" DataSourceID="ObjectDataSource1">
<Title Text="Area Chart"></Title>
<Animation Enabled="True" Duration="00:00:01" />
<Series>
<jqChart:AreaSeries XValuesField="ValueX" YValuesField="ValueY1" Title="Area">
<FillStyle Color="#418CF0">
</FillStyle>
<Labels Visible="true" StringFormat="%d K" Font="12px sans-serif">
</Labels>
</jqChart:AreaSeries>
</Series>
</jqChart:Chart>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SamplesBrowser.Models
{
public class LinearXAxisChartData
{
public LinearXAxisChartData(double valueX, double valueY1, double valueY2)
{
this.ValueX = valueX;
this.ValueY1 = valueY1;
this.ValueY2 = valueY2;
}
public static List<LinearXAxisChartData> GetHugeData()
{
var data = new List<LinearXAxisChartData>();
Random rnd = new Random();
int yValue1 = 50;
int yValue2 = 200;
for (int i = 0; i < 10000; i++)
{
yValue1 += (int)Math.Round(rnd.NextDouble() * 10 - 5);
yValue2 += (int)Math.Round(rnd.NextDouble() * 10 - 5);
data.Add(new LinearXAxisChartData(i, yValue1, yValue2));
}
return data;
}
public static List<LinearXAxisChartData> GetLineChartData()
{
var data = new List<LinearXAxisChartData>();
data.Add(new LinearXAxisChartData(1, 62, 46));
data.Add(new LinearXAxisChartData(2, 60, 40));
data.Add(new LinearXAxisChartData(3, 68, 62));
data.Add(new LinearXAxisChartData(4, 58, 65));
data.Add(new LinearXAxisChartData(5, 52, 60));
data.Add(new LinearXAxisChartData(6, 60, 36));
data.Add(new LinearXAxisChartData(7, 48, 70));
return data;
}
public static List<LinearXAxisChartData> GetAreaChartData()
{
var data = new List<LinearXAxisChartData>();
data.Add(new LinearXAxisChartData(1, 56, 46));
data.Add(new LinearXAxisChartData(2, -20, 40));
data.Add(new LinearXAxisChartData(3, -32, 62));
data.Add(new LinearXAxisChartData(4, 50, 65));
data.Add(new LinearXAxisChartData(5, 40, 60));
data.Add(new LinearXAxisChartData(6, 36, 36));
data.Add(new LinearXAxisChartData(7, 70, 70));
return data;
}
public double ValueX { get; set; }
public double ValueY1 { get; set; }
public double ValueY2 { get; set; }
}
}