Alarm Zones
You can use the FlexChart's rendering and rendered events to add arbitrary elements behind or above the regular chart elements.
For example,the chart below has 'buy' and 'sell' zones created in the chart's rendering event handler:
- C1FlexChart/AnnotationsZonesRedux.js
- C1FlexChart/AnnotationsZonesRedux.css
- AnnotationsZonesReduxController.cs
- AnnotationsZonesRedux.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | // This file locates: "Scripts/Lesson/C1FlexChart/AnnotationsZonesRedux.js". c1.documentReady(function () { var theChart = wijmo.Control.getControl( '#theChart' ); theChart.rendering.addHandler(function (s, e) { // behind the regular chart elements var xMin = s.axisX.actualMin.valueOf(), xMax = s.axisX.actualMax.valueOf(), yMin = s.axisY.actualMin, yMax = s.axisY.actualMax; drawAlarmZone(s, e.engine, xMin, 855, xMax, yMax, 'sell-zone' ); drawAlarmZone(s, e.engine, xMin, yMin, xMax, 815, 'buy-zone' ); }); // draw an alarm zone into the chart function drawAlarmZone(chart, engine, xMin, yMin, xMax, yMax, className) { var pt1 = chart.dataToPoint(xMin, yMin); var pt2 = chart.dataToPoint(xMax, yMax); engine.drawRect( Math.min(pt1.x, pt2.x), Math.min(pt1.y, pt2.y), Math.abs(pt2.x - pt1.x), Math.abs(pt2.y - pt1.y), className); } }); |
1 2 3 4 5 6 7 8 9 10 11 | // This file locates: "Content/css/Lesson/C1FlexChart/AnnotationsZonesRedux.css". .sell-zone { fill: red; opacity: .15; stroke-width: 0; } .buy-zone { fill: green; opacity: .15; stroke-width: 0; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1FlexChartController : Controller { // GET: AnnotationsZonesRedux public ActionResult AnnotationsZonesRedux() { return View(Models.FlexChartData.GetStocks3()); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | @using LearnMvcClient.Models @model IEnumerable< FlexChartData.Stock > < h1 > @Html .Raw(Resources.C1FlexChart.AnnotationsZonesRedux_Title) </ h1 > < p > @Html .Raw(Resources.C1FlexChart.AnnotationsZonesRedux_Text1) </ p > < p > @Html .Raw(Resources.C1FlexChart.AnnotationsZonesRedux_Text2) </ p > @ (Html.C1().FlexChart< FlexChartData.Stock >().Id( "theChart" ) .Bind( "Date" , Model) .ChartType(C1.Web.Mvc.Chart.ChartType.Candlestick) .Legend(C1.Web.Mvc.Chart.Position.None) .Series(sb => sb.Add().Binding( "Low,High,Open,Close" ).Name( "Alphabet Inc" )) ) |