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

<h1>
    FlexChart Zooming
</h1>

<p>
    This example shows how you can implement a simple zooming
    feature using the mouse events to modify the range on a
    FlexChart axes.
</p>
<p>
    Use the mouse to select a rectangular area on the plot
    area. The chart will zoom in on the selected area.
    Click the "Reset Zoom" button below the chart to return
    to the original view:
</p>

@(Html.C1().FlexChart<FlexChartData.Stock>().Id("theChart")
    .Bind("Date", Model)
    .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)
)
<button id="btnReset" class="btn btn-default">Reset Zoom</button>