This sample demonstrates the Range Column 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">
<jqChart:Chart ID="Chart1" Width="500px" Height="300px" runat="server">
<Title Text="Range Column Chart"></Title>
<Animation Enabled="True" Duration="00:00:01" />
<Shadows Enabled="true" />
<Series>
<jqChart:RangeColumnSeries Title="Series 1">
<XValues>
<jqChart:StringValue Value="A" />
<jqChart:StringValue Value="B" />
<jqChart:StringValue Value="C" />
<jqChart:StringValue Value="D" />
<jqChart:StringValue Value="E" />
<jqChart:StringValue Value="F" />
<jqChart:StringValue Value="G" />
</XValues>
<FromValues>
<jqChart:DoubleValue Value="33" />
<jqChart:DoubleValue Value="57" />
<jqChart:DoubleValue Value="13" />
<jqChart:DoubleValue Value="12" />
<jqChart:DoubleValue Value="35" />
<jqChart:DoubleValue Value="7" />
<jqChart:DoubleValue Value="24" />
</FromValues>
<ToValues>
<jqChart:DoubleValue Value="43" />
<jqChart:DoubleValue Value="62" />
<jqChart:DoubleValue Value="30" />
<jqChart:DoubleValue Value="40" />
<jqChart:DoubleValue Value="70" />
<jqChart:DoubleValue Value="30" />
<jqChart:DoubleValue Value="30" />
</ToValues>
</jqChart:RangeColumnSeries>
<jqChart:RangeColumnSeries Title="Series 2">
<XValues>
<jqChart:StringValue Value="A" />
<jqChart:StringValue Value="B" />
<jqChart:StringValue Value="C" />
<jqChart:StringValue Value="D" />
<jqChart:StringValue Value="E" />
<jqChart:StringValue Value="F" />
<jqChart:StringValue Value="G" />
</XValues>
<FromValues>
<jqChart:DoubleValue Value="23" />
<jqChart:DoubleValue Value="62" />
<jqChart:DoubleValue Value="50" />
<jqChart:DoubleValue Value="0" />
<jqChart:DoubleValue Value="15" />
<jqChart:DoubleValue Value="50" />
<jqChart:DoubleValue Value="4" />
</FromValues>
<ToValues>
<jqChart:DoubleValue Value="30" />
<jqChart:DoubleValue Value="80" />
<jqChart:DoubleValue Value="70" />
<jqChart:DoubleValue Value="12" />
<jqChart:DoubleValue Value="20" />
<jqChart:DoubleValue Value="65" />
<jqChart:DoubleValue Value="24" />
</ToValues>
</jqChart:RangeColumnSeries>
</Series>
</jqChart:Chart>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SamplesBrowser.Models
{
public class EmptyChartModel
{
}
}