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

@{ 
    var stocks = Model.ToArray();
    var minDate = stocks[stocks.Length - 1].Date;
    var maxDate = stocks[0].Date;
}

<h1>
    Filter and Wheel Zoom
</h1>

<p>
    This example shows how you can add custom filtering and zooming
    to a FlexChart.
</p>
<p>
    The filter is implemented using the CollectionView's <b>filter</b>
    property. Another option in this case would be to set the
    range of the chart's X axis, but that would interfere with
    the chart zooming.
</p>
<p>
    The zoom is implemented using the mouse wheel or regular
    buttons. Both approaches work by changing the min/max properties
    of the chart's axes.
</p>
<p>
    The wheel zooming is done around the mouse pointer; the buttons
    zoom around the chart center.
</p>

@(Html.C1().FlexChart<FlexChartData.Stock>().Id("theChart")
    .Bind(b=>b.Bind(Model).DisableServerRead(true))
    .BindingX("Date")
    .ChartType(C1.Web.Mvc.Chart.ChartType.Candlestick)
    .Series(sb =>
    {
        sb.Add().Binding("High,Low,Open,Close").Name("Alphabet Inc");
    })
    .Legend(C1.Web.Mvc.Chart.Position.None)
)
<p>
    <b>Filter: </b>
    @(Html.C1().InputDate().Id("theMonth")
        .Placeholder("Select Month")
        .CssStyle("margin-bottom", "10px")
        .SelectionMode(DateSelectionMode.Month)
        .Min(new DateTime(minDate.Year, minDate.Month, 1))
        .Max(new DateTime(maxDate.Year, maxDate.Month, 1))
        .Format("MMMM yyyy")
        .IsRequired(false)
        .Value(null)
    )
    <button id="btnResetFilter" class="btn btn-default">Reset</button>
</p>
<p>
    <b>Zoom: </b>
    <button id="btnZoomIn" class="btn btn-default">In</button>
    <button id="btnZoomOut" class="btn btn-default">Out</button>
    <button id="btnResetZoom" class="btn btn-default">Reset</button>
    <span>You can also zoom with ctrl+mouse wheel.</span>
</p>