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.

// 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();
});

// 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
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: RangeSelectors
        public ActionResult RangeSelectors()
        {
            return View(Models.FlexChartData.GetStocks1());
        }
    }
}

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