Annotation Zones
You can use annotations to create chart 'zones'. For example, the chart below has a 'buy' and 'sell' zones represented by green and red Rectangle annotations:
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/AnnotationsZones.js".c1.documentReady(function () { var theChart = wijmo.Control.getControl('#theChart'); // add annotation layer var annotations = new wijmo.chart.annotation.AnnotationLayer(theChart, [ { type: 'Rectangle', attachment: 'DataCoordinate', point: { x: new Date(2017, 0, 1), y: 855 }, position: 1, // Center Top Bottom Left Right width: 20000, height: 20000, style: { fill: 'red', opacity: .15 } }, { type: 'Rectangle', attachment: 'DataCoordinate', point: { x: new Date(2017, 0, 1), y: 815 }, position: 2, // Center Top Bottom Left Right width: 20000, height: 20000, style: { fill: 'green', opacity: .15 } }, ]);}); |
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: AnnotationsZones public ActionResult AnnotationsZones() { return View(Models.FlexChartData.GetStocks3()); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | @using LearnMvcClient.Models@model IEnumerable<FlexChartData.Stock><h1> @Html.Raw(Resources.C1FlexChart.AnnotationsZones_Title)</h1><p> @Html.Raw(Resources.C1FlexChart.AnnotationsZones_Text1)</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"))) |
