Range Selectors
Range selectors allow users to zoom in on selected parts of a chart by selecting a range on a secondary chart. The most popular implementation is the one in Google Finance charts.
The RangeSelector class in the wijmo.chart.interaction module makes it easy to add range selectors to FlexChart controls:
- Start with a regular FlexChart.
- Add a second FlexChart below the main chart, remove both axes and set the height to a small value (say 60px) .
- Create a RangeSelector object using the second chart as the constructor's parameter.
- Listen to the RangeSelector's rangeChanged event to update the main chart's X-axis range.
- C1FlexChart/RangeSelectors.js
- C1FlexChart/RangeSelectors.css
- RangeSelectorsController.cs
- RangeSelectors.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // This file locates: "Scripts/Lesson/C1FlexChart/RangeSelectors.js". c1.documentReady(function () { var theChart = wijmo.Control.getControl( '#theChart' ); var theChartSelector = wijmo.Control.getControl( '#theChartSelector' ); var rangeSelector = new wijmo.chart.interaction.RangeSelector(theChartSelector, { max: theChart.itemsSource.items[0].Date.valueOf(), // now min: theChart.itemsSource.items[30].Date.valueOf(), // a month ago minScale: .05, // restrict selection to between 5% and maxScale: .75, // 75% of the data rangeChanged: function (s, e) { theChart.axisX.min = s.min; theChart.axisX.max = s.max; } }); //force to refresh the chart to make sure the RangeSelector updates the min/max values. theChartSelector.refresh(); }); |
1 2 3 4 5 6 7 8 9 | // This file locates: "Content/css/Lesson/C1FlexChart/RangeSelectors.css". .chart-selector { border: none; height: 60px; } .wj-flexchart .wj-chart-rangeslider .wj-rangeslider-rangehandle { background: gold; opacity: .14 } |
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: RangeSelectors public ActionResult RangeSelectors() { return View(Models.FlexChartData.GetStocks1()); } } } |
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 | @using LearnMvcClient.Models @model IEnumerable< FlexChartData.Stock > < h1 > @Html .Raw(Resources.C1FlexChart.RangeSelectors_Title) </ h1 > < p > @Html .Raw(Resources.C1FlexChart.RangeSelectors_Text1) </ p > < p > @Html .Raw(Resources.C1FlexChart.RangeSelectors_Text2) </ p > < ol > < li > @Html .Raw(Resources.C1FlexChart.RangeSelectors_Text3) </ li > < li > @Html .Raw(Resources.C1FlexChart.RangeSelectors_Text4) </ li > < li > @Html .Raw(Resources.C1FlexChart.RangeSelectors_Text5) </ li > < li > @Html .Raw(Resources.C1FlexChart.RangeSelectors_Text6) </ li > </ ol > @ (Html.C1().CollectionViewService< FlexChartData.Stock >().Id( "collectionView1" ) .Bind(Model) ) @ (Html.C1().FlexChart< FlexChartData.Stock >().Id( "theChart" ) .ItemsSourceId( "collectionView1" ) .BindingX( "Date" ) .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" )) .PlotMargin( "NaN 60 NaN 60" ) ) @ (Html.C1().FlexChart< FlexChartData.Stock >().Id( "theChartSelector" ) .CssClass( "chart-selector" ) .ItemsSourceId( "collectionView1" ) .BindingX( "Date" ) .ChartType(C1.Web.Mvc.Chart.ChartType.Area) .Legend(C1.Web.Mvc.Chart.Position.None) .AxisX(x => x.Position(C1.Web.Mvc.Chart.Position.None)) .AxisY(y => y.Position(C1.Web.Mvc.Chart.Position.None)) .Tooltip(t=>t.Content( "" )) .Series(sb=>sb.Add().Binding( "Close" ).Name( "Alphabet Inc" )) .PlotMargin( "NaN 60 NaN 60" ) ) |