Chart DataPerformance !!!Bar and Column ChartsLine and Area ChartsPie and Funnel ChartsScatter and Bubble ChartsRadar and Polar ChartsFinancial ChartsGantt ChartsCombinational ChartsDynamic ChartsWorking with Chart AxesChart FeaturesCustomizing ChartClient-Side Events |
This sample shows the axisZoom event.
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.LinearXAxisChartData>>" %>
<%@ 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/themes/le-frog/jquery-ui-1.8.20.css" />
<script src="<%: Url.Content("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
<body>
<div>
<table>
<tr>
<td>
<%= Html.JQChart()
.Chart(Model)
.ID("jqChart")
.Width(400)
.Height(300)
.Title("axisZoom Event")
.Border(border => border.StrokeStyle("#6ba851"))
.Background(background => background.LinearGradient(0, 0, 0, 1).ColorStops(stop =>
{
stop.Add(0, "#d2e6c9");
stop.Add(1, "white");
}))
.Tooltips(el => el.TooltipsType(TooltipsType.Shared))
.Crosshairs(el => el.Enabled(true)
.HorizontalLine(false)
.VerticalLine(line => line.StrokeStyle("#cc0a0c"))
)
.Axes(axis =>
{
axis.LinearAxis(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()%>
</td>
<td style="vertical-align: top">
<div>
<b>Axis settings:</b>
<ul id='listBlock'>
</ul>
</div>
</td>
</tr>
</table>
</div>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#jqChart').bind('axisZoom', function (e, data) {
var list = $('#listBlock');
list.children().remove();
var chart = data.chart;
var axis = data.axis;
list.append('<li>axis.actualMinimum=' + Math.round(axis.actualMinimum) + '</li>');
list.append('<li>axis.actualMaximum=' + Math.round(axis.actualMaximum) + '</li>');
list.append('<li></li>');
list.append('<li>axis.actualVisibleMinimum=' + Math.round(axis.actualVisibleMinimum) + '</li>');
list.append('<li>axis.actualVisibleMaximum=' + Math.round(axis.actualVisibleMaximum) + '</li>');
});
});
</script>
</body>
</html>
@model IEnumerable<SamplesBrowser.Models.LinearXAxisChartData>
@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/themes/le-frog/jquery-ui-1.8.20.css" />
<script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqChart.min.js")" type="text/javascript"></script>
<body>
<div>
<table>
<tr>
<td>
@(Html.JQChart()
.Chart(Model)
.ID("jqChart")
.Width(400)
.Height(300)
.Title("axisZoom Event")
.Border(border => border.StrokeStyle("#6ba851"))
.Background(background => background.LinearGradient(0, 0, 0, 1).ColorStops(stop =>
{
stop.Add(0, "#d2e6c9");
stop.Add(1, "white");
}))
.Tooltips(el => el.TooltipsType(TooltipsType.Shared))
.Crosshairs(el => el.Enabled(true)
.HorizontalLine(false)
.VerticalLine(line => line.StrokeStyle("#cc0a0c"))
)
.Axes(axis =>
{
axis.LinearAxis(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()
)
</td>
<td style="vertical-align: top">
<div>
<b>Axis settings:</b>
<ul id='listBlock'>
</ul>
</div>
</td>
</tr>
</table>
</div>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#jqChart').bind('axisZoom', function (e, data) {
var list = $('#listBlock');
list.children().remove();
var chart = data.chart;
var axis = data.axis;
list.append('<li>axis.actualMinimum=' + Math.round(axis.actualMinimum) + '</li>');
list.append('<li>axis.actualMaximum=' + Math.round(axis.actualMaximum) + '</li>');
list.append('<li></li>');
list.append('<li>axis.actualVisibleMinimum=' + Math.round(axis.actualVisibleMinimum) + '</li>');
list.append('<li>axis.actualVisibleMaximum=' + Math.round(axis.actualVisibleMaximum) + '</li>');
});
});
</script>
</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; }
}
}
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 AxisZoomEvent()
{
return View(LinearXAxisChartData.GetHugeData());
}
}
}
|
Follow us on Twitter