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" )) ) |