FlexChart
FlexChart
Marker
Chart marker
This view shows line chart with vertical marker that follows mouse pointer and displays data values for all series.
Features
03-Mar
Sales in USA = 176.00
Sales in Japan = 55.00
Settings
Lines: Vertical
Alignment: Auto
Interaction: Move
Description
Chart marker
This view shows line chart with vertical marker that follows mouse pointer and displays data values for all series.
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 | using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using MvcExplorer.Models;namespace MvcExplorer.Controllers{ public partial class FlexChartController : Controller { public ActionResult Marker() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"Lines", new object[]{"None", "Vertical", "Horizontal", "Both"}}, {"Alignment", new object[]{"Auto", "Right", "Left", "Bottom", "Top", "Left & Bottom", "Left & Top"}}, {"Interaction", new object[]{"None", "Move", "Drag"}} }, DefaultValues = new Dictionary<string, object> { {"Lines", "Vertical"}, {"Interaction", "Move"} } }; return View(_apple.Sales); } }} |
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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;}@model IEnumerable<FruitSale>@section Styles{<style> /* Override the css Class to aviod the LineMarker being overlaied by parent nodes */ .tab-pane.pane-content.active { overflow: visible; }</style>}@section Scripts{<script type="text/javascript"> function lineMarkerContent(hitInfo, pt) { var html = '', chart = hitInfo.series ? hitInfo.series.chart : undefined; if (!chart || !chart.series) { return html; } chart.series.forEach(function (s, i) { var ht = s.hitTest(new wijmo.Point(pt.x, NaN)), hostEle = s.hostElement, polyline; polyline = s.hostElement ? s.hostElement.getElementsByTagName("polyline")[0] : undefined; if (polyline && ht.x && ht.y !== null) { if (i == 0) { html += wijmo.Globalize.formatDate(ht.x, 'dd-MMM'); } html += '<div style="color:' + polyline.getAttribute('stroke') + '">' + ht.name + ' = ' + ht.y.toFixed(2) + '</div>'; } }); return html; } var chart, lineMarker; c1.documentReady(function () { chart = wijmo.Control.getControl("#@(demoSettingsModel.ControlId)"); lineMarker = c1.getExtender(chart, "LineMarker"); }); function customChangeLines(chart, value) { if (lineMarker) { lineMarker.lines = value; } } function customChangeAlignment(chart, value) { if (lineMarker) { if (value === "Left & Bottom") { lineMarker.alignment = 5; } else if (value === "Left & Top") { lineMarker.alignment = 7; } else if(value==="Left") { lineMarker.alignment = 1; } else if (value === "Top") { lineMarker.alignment = 6; } else if (value === "Right") { lineMarker.alignment = 0; } else if (value === "Bottom") { lineMarker.alignment = 4; } else { lineMarker.alignment = 2; } } } function customChangeInteraction(chart, value) { if (lineMarker) { lineMarker.interaction = value; } }</script>}<div style="width: 780px">@(Html.C1().FlexChart().Id(demoSettingsModel.ControlId).Bind("Date", Model).ChartType(C1.Web.Mvc.Chart.ChartType.Line).Series(sers =>{ sers.Add().Binding("SalesInUSA").Name("Sales in USA"); sers.Add().Binding("SalesInJapan").Name("Sales in Japan").Style(s => s.StrokeWidth(3));}).AxisX(x => x.Format("dd-MMM")).InterpolateNulls(true).Tooltip(tp=>tp.Content("")).AddLineMarker(lm=>lm.Id("LineMarker") .Alignment(C1.Web.Mvc.Chart.LineMarkerAlignment.Auto) .Lines(C1.Web.Mvc.Chart.LineMarkerLines.Vertical) .DragContent(true) .Interaction(C1.Web.Mvc.Chart.LineMarkerInteraction.Move).Content("lineMarkerContent")))</div>@section Description { <h3> @Html.Raw(Resources.FlexChart.Marker_ChartMarker) </h3> <p>@Html.Raw(Resources.FlexChart.Marker_Text0)</p>} |