FlexChart
FlexChart
Hit Test
Hit Test
This view demonstrates the use of the FlexChart's hitTest method in client-side.
The hitTest method takes a point and returns the nearest chart element.
Features
Description
Hit Test
This view demonstrates the use of the FlexChart's hitTest method in client-side.
The hitTest method takes a point and returns the nearest chart element. It can be used to provide interactive features such as clickable regions, drill-downs, etc.
Move mouse over chart to see information about the chart element that is closest to the mouse.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using MvcExplorer.Models;using C1.Web.Mvc;using C1.Web.Mvc.Serialization;namespace MvcExplorer.Controllers{ public partial class FlexChartController : Controller { public ActionResult HitTest() { return View(); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | @using C1.Web.Mvc.Chart@{ ViewBag.Title = "SeriesBinding"; List<Dot> cos = new List<Dot>(); List<Dot> sin = new List<Dot>(); for (int i = 0; i < 60; i++) { cos.Add(new Dot { X = i, Y = Math.Cos(0.12 * i) }); sin.Add(new Dot { X = i, Y = Math.Sin(0.12 * i) }); }}<div id="HitTest" style="height: 300px"></div>@(Html.C1().FlexChart("#HitTest").ChartType(ChartType.LineSymbols).Series(sers => { sers.Add("cos(x)").Bind("X", "Y", cos); sers.Add("sin(x)").Bind("X", "Y", sin); }))<div style="height: 110px"> <div id="info"></div></div>@section Scripts{<script type="text/javascript"> c1.documentReady(function () { var chart = wijmo.Control.getControl("#HitTest"), formatHitInfo = function (hitInfo, pt) { var s = '<div>@(Resources.FlexChart.HitTest_ChartElement)' + wijmo.chart.ChartElement[hitInfo.chartElement] + '</div>'; if (hitInfo.series) { s += '<div>@(Resources.FlexChart.HitTest_SeriesName)' + hitInfo.series.name; if (hitInfo.pointIndex !== null && hitInfo.pointIndex !== undefined) { s += '<div>Point index: ' + hitInfo.pointIndex + '</div>'; s += '<div>Distance: ' + hitInfo.distance.toFixed(0) + '</div>'; if (hitInfo.chartElement == wijmo.chart.ChartElement.PlotArea) { s += '<div>x: ' + pt.x.toFixed(2) + '</div>'; s += '<div>y: ' + pt.y.toFixed(2) + '</div>'; } } } return s; }; chart.hostElement.onmousemove = function (e) { var hit = chart.hitTest(e); var info = document.getElementById("info"); info.innerHTML = formatHitInfo(hit, chart.pointToData(e)); }; });</script>}@section Description{ <h3>@Html.Raw(Resources.FlexChart.HitTest_HitTest)</h3> <p>@Html.Raw(Resources.FlexChart.HitTest_Text0)</p> <p>@Html.Raw(Resources.FlexChart.HitTest_Text1)</p> <p>@Html.Raw(Resources.FlexChart.HitTest_Text2)</p>} |