This sample demonstrates how to create a chart with animation and interactive zooming
and panning bound to specific data source.
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/jquery.jqRangeSlider.css" />
<link rel="stylesheet" type="text/css" href="~/Content/themes/le-frog/jquery-ui-1.8.20.css" />
<script src="<% = ResolveUrl("~/Scripts/jquery-1.5.2.min.js") %>" type="text/javascript"></script>
<script src="<% = ResolveUrl("~/Scripts/jquery.jqRangeSlider.min.js") %>" type="text/javascript"></script>
<script src="<% = ResolveUrl("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
<!--[if IE]><script lang="javascript" type="text/javascript" src="<% = ResolveUrl("~/Scripts/excanvas.js") %>"></script><![endif]-->
</head>
<body>
<form runat="server">
<asp:ObjectDataSource ID="ObjectDataSource1"
runat="server"
SelectMethod="GetRandom"
TypeName="SamplesBrowser.Models.DateTimeXAxisChartData"></asp:ObjectDataSource>
<jqChart:Chart ID="Chart1" Width="500px" Height="300px" runat="server" DataSourceID="ObjectDataSource1">
<Background FillStyleType="LinearGradient" X1="0">
<ColorStops>
<jqChart:ColorStop Color="#d2e6c9" />
<jqChart:ColorStop Color="white" Offset="1" />
</ColorStops>
</Background>
<Border StrokeStyle="#6ba851" />
<Title Text="Title"></Title>
<Legend><Title Text="Legend"></Title></Legend>
<Animation Enabled="True" />
<Tooltips TooltipsType="Shared" />
<Crosshairs Enabled="True">
<HorizontalLine Visible="False" />
<VerticalLine StrokeStyle="#cc0a0c" />
</Crosshairs>
<Shadows Enabled="true" />
<Axes>
<jqChart:DateTimeAxis Location="Bottom" ZoomEnabled="True">
</jqChart:DateTimeAxis>
</Axes>
<Series>
<jqChart:LineSeries XValuesField="ValueX" YValuesField="ValueY1" Title="Series 1">
<Markers Visible="False" />
</jqChart:LineSeries>
<jqChart:LineSeries XValuesField="ValueX" YValuesField="ValueY2" Title="Series 2">
<Markers Visible="False" />
</jqChart:LineSeries>
</Series>
</jqChart:Chart>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#<%= Chart1.ClientID %>').bind('tooltipFormat', function (e, data) {
var date = data[0].chart.stringFormat(data[0].x, "ddd, mmm dS, yyyy");
var tooltip = '<b>' + date + '</b></br>' +
'<span style="color:' + data[0].series.fillStyle + '">' + data[0].series.title + ': </span>' +
'<b>' + data[0].y + '</b></br>' +
'<span style="color:' + data[1].series.fillStyle + '">' + data[1].series.title + ': </span>' +
'<b>' + data[1].y + '</b></br>';
return tooltip;
});
});
</script>
</form>
</body>
</html>