@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Stock>

<h1>
    Range Selectors
</h1>

<p>
    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.
</p>
<p>
    The <b>RangeSelector</b> class in the
    <b>wijmo.chart.interaction</b> module makes it easy to add
    range selectors to FlexChart controls:
</p>
<ol>
    <li>
        Start with a regular FlexChart.
    </li>
    <li>
        Add a second FlexChart below the main chart, remove both
        axes and set the height to a small value (say 60px) .
    </li>
    <li>
        Create a <b>RangeSelector</b> object using the second
        chart as the constructor's parameter.
    </li>
    <li>
        Listen to the <b>RangeSelector</b>'s <b>rangeChanged</b>
        event to update the main chart's X-axis range.
    </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")
)