Chart DataPerformance !!!Bar and Column ChartsLine and Area ChartsPie ChartsScatter and Bubble ChartsRadar and Polar ChartsFinancial ChartsCombinational ChartsDynamic ChartsWorking with Chart AxesChart FeaturesCustomizing ChartClient-Side Events |
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, Razor and Controller code tabs.
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<SamplesBrowser.Models.DateTimeXAxisChartData>>" %>
<%@ Import Namespace="JQChart.Web.Mvc" %>
<!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="<%: Url.Content("~/Scripts/jquery-1.5.2.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.jqRangeSlider.min.js") %>" type="text/javascript"></script>
<!--[if IE]><script lang="javascript" type="text/javascript" src="<%: Url.Content("~/Scripts/excanvas.js") %>"></script><![endif]-->
</head>
<body>
<div>
<%= Html.JQChart()
.Chart(Model)
.ID("jqChart")
.Width(500)
.Height(300)
.Title("Chart Title")
.Legend(el =>el.Title("Legend"))
.Border(border => border.StrokeStyle("#6ba851"))
.Background(background => background.LinearGradient(0, 0, 0, 1).ColorStops(stop =>
{
stop.Add(0, "#d2e6c9");
stop.Add(1, "white");
}))
.Tooltips(tooltips => tooltips.TooltipsType(TooltipsType.Shared))
.Crosshairs(el => el.Enabled(true).VerticalLine(line => line.StrokeStyle("#cc0a0c")).HorizontalLine(false))
.Animation(TimeSpan.FromSeconds(2))
.Shadows(true)
.Axes(axis =>
{
axis.DateTimeAxis(Location.Bottom)
.ZoomEnabled(true);
}
)
.Series(series =>
{
series.Line()
.Title("Series 1")
.XValues(el => el.ValueX)
.YValues(el => el.ValueY1)
.Markers(false);
series.Line()
.Title("Series 2")
.XValues(el => el.ValueX)
.YValues(el => el.ValueY2)
.Markers(false);
}
)
.Render()%>
</div>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#jqChart').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>
</body>
</html>
@model IEnumerable<SamplesBrowser.Models.DateTimeXAxisChartData>
@using JQChart.Web.Mvc
<!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="@Url.Content("~/Scripts/jquery-1.5.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqChart.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqRangeSlider.min.js")" type="text/javascript"></script>
<!--[if IE]><script lang="javascript" type="text/javascript" src="@Url.Content("~/Scripts/excanvas.js")"></script><![endif]-->
</head>
<body>
<div>
@(Html.JQChart()
.Chart(Model)
.ID("jqChart")
.Width(500)
.Height(300)
.Title("Chart Title")
.Legend(el =>el.Title("Legend"))
.Border(border => border.StrokeStyle("#6ba851"))
.Background(background => background.LinearGradient(0, 0, 0, 1).ColorStops(stop =>
{
stop.Add(0, "#d2e6c9");
stop.Add(1, "white");
}))
.Tooltips(tooltips => tooltips.TooltipsType(TooltipsType.Shared))
.Crosshairs(el => el.Enabled(true).VerticalLine(line => line.StrokeStyle("#cc0a0c")).HorizontalLine(false))
.Animation(TimeSpan.FromSeconds(2))
.Shadows(true)
.Axes(axis =>
{
axis.DateTimeAxis(Location.Bottom)
.ZoomEnabled(true);
}
)
.Series(series =>
{
series.Line()
.Title("Series 1")
.XValues(el => el.ValueX)
.YValues(el => el.ValueY1)
.Markers(false);
series.Line()
.Title("Series 2")
.XValues(el => el.ValueX)
.YValues(el => el.ValueY2)
.Markers(false);
}
)
.Render()
)
</div>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#jqChart').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>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SamplesBrowser.Models;
namespace SamplesBrowser.Controllers
{
public class ChartController : Controller
{
public ActionResult DataSourceBinding()
{
return View(DateTimeXAxisChartData.GetRandom());
}
}
}
|
Follow us on Twitter