@model List<SaleItem>

    <div id="rangeSelector">


        @(Html.C1().FlexChart().Id("flexChart1").CssClass("chartRangeSelector")
                    .BindingX("Date").Bind(Model)
            .Series(sers =>
            {
                sers.Add().Binding("Sales").ChartType(C1.Web.Mvc.Chart.ChartType.Line);
            }).AxisX(x =>
            {
                x.Format("MM/dd/yyyy");
            }).AxisY(y =>
            {
                y.Labels(false);
                y.MajorGrid(false);
            }).HeaderStyle(x =>
            {
                x.Halign("left");
            }).Legend(C1.Web.Mvc.Chart.Position.None)
        )

        <div id="theChartSelector" class="chart-selector"></div>
    </div>

    <script>

        // create the chart with range selector
        var theChartSelector = wijmo.Control.getControl('#flexChart1');
        window.rangeSelector = new wijmo.chart.interaction.RangeSelector(theChartSelector, {
            min: 0,
            max: theChartSelector.itemsSource.itemCount - 1,
            seamless: true
        });
        theChartSelector.invalidate();

        $(window).resize(function () {
            if (typeof (window.__containerWidth) != "undefined") {
                $("#flexChart1").width(window.__containerWidth * 0.95);
                theChartSelector.invalidate();
            }
        });

    </script>
