@model List<SaleItem>

<div id="rangeSelector">
    <c1-flex-chart binding-x="Date" id="flexChart1" class="chartRangeSelector">
        <c1-flex-chart-axis c1-property="AxisY" labels="false" major-grid="false"></c1-flex-chart-axis>
        <c1-flex-chart-axis c1-property="AxisX" format="MM/dd/yyyy"></c1-flex-chart-axis>
        <c1-flex-chart-title-style c1-property="HeaderStyle" halign="Left" font-size="14"></c1-flex-chart-title-style>
        <c1-items-source source-collection="Model"></c1-items-source>
        <c1-flex-chart-series binding="Sales" chart-type="Line">
        </c1-flex-chart-series>
    </c1-flex-chart>
    <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>
