ASP.NET MVC Controls | ComponentOne
In This Topic
    Zooming and Panning
    In This Topic

    In FlexChart, you can perform two types of chart interactions - zooming and panning. The zoom and pan features are especially important where there is large amount of data. Zoom allows you to zoom-in and zoom-out of the selected chart area while pan allows you to navigate through the chart area.

    The following code example demonstrates how to add zooming and panning features the FlexChart. This example uses the sample created in the Quick Start section. To perform zooming actions, select the chart area to zoom in, or scroll mouse wheel to zoom in and out of the zoom area. To perform panning, click and drag within the chart area.

    Razor
    Copy Code 
    @using C1MvcWebAppZoomPan.Models;
@using C1.Web.Mvc.Chart;
@model IEnumerable<FruitSale>

<script>
    var mouseActionControl, axesControl, scalingChart, chartZoom;
    c1.documentReady(function () {
        mouseActionControl = "Zoom";
        axesControl = "X";
        scalingChart = wijmo.Control.getControl("#scalingChart");
        scalingChart.plotMargin = 'NaN NaN NaN 80';

        chartZoom = new wijmo.chart.interaction.ChartGestures(scalingChart);
        chartZoom.mouseAction = wijmo.chart.interaction.MouseAction.Zoom;
        chartZoom.mouseActionControl = wijmo.chart.interaction.InteractiveAxes.X;

        if (navigator.userAgent.match(/iPad/i) != null || /Android/i.test(navigator.userAgent)) {
            document.querySelector('#mouseAction').style.display = 'none';
        }

        chartZoom.rangeChanged.addHandler(function () {
            document.querySelector('#reset').disabled = undefined;
        });

        window.setTimeout(function () {
            scalingChart.axisX.min = new Date(2014, 4, 1);
            scalingChart.axisY.min = 24;
        }, 200);
    });
   
    function setMouseAction(sender) {
        mouseActionControl.header = "Mouse Action: <b>" + sender.selectedItem.Header + "</b>";
        chartZoom.mouseAction = wijmo.chart.interaction.MouseAction[sender.selectedItem.Header];
    }

    function setInteractiveAxes(sender) {
        axesControl.header = "Interactive Axes: <b>" + sender.selectedItem.Header + "</b>";
        chartZoom.interactiveAxes = wijmo.chart.interaction.InteractiveAxes[sender.selectedItem.Header];
    }

    function resetAxes() {
        if (chartZoom) {
            chartZoom.reset();
            if (scalingChart) {
                scalingChart.axisX.min = new Date(2014, 4, 1);
                scalingChart.axisY.min = 24;
            }
        }
        document.querySelector('#reset').disabled = 'disabled';
    }
</script>

@(Html.C1().FlexChart()
.Bind("Date", Model)
.Id("scalingChart")
.ChartType(C1.Web.Mvc.Chart.ChartType.Area)
.Series(sers =>
  {
      sers.Add()
     .Binding("SalesInUSA")
     .Name("Sales in USA");
  })
)

                

    HTML
    Copy Code 
    @using C1MvcWebAppZoomPan.Models;
@using C1.Web.Mvc.Chart;
@model IEnumerable<FruitSale>
<script>
    var mouseActionControl, axesControl, scalingChart, chartZoom;
    c1.documentReady(function () {
        mouseActionControl = "Zoom";
        axesControl = "X";
        scalingChart = wijmo.Control.getControl("#scalingChart");
        scalingChart.plotMargin = 'NaN NaN NaN 80';
        chartZoom = new wijmo.chart.interaction.ChartGestures(scalingChart);
        chartZoom.mouseAction = wijmo.chart.interaction.MouseAction.Zoom;
        chartZoom.mouseActionControl = wijmo.chart.interaction.InteractiveAxes.X;
        if (navigator.userAgent.match(/iPad/i) != null || /Android/i.test(navigator.userAgent)) {
            document.querySelector('#mouseAction').style.display = 'none';
        }
        chartZoom.rangeChanged.addHandler(function () {
            document.querySelector('#reset').disabled = undefined;
        });
        window.setTimeout(function () {
            scalingChart.axisX.min = new Date(2014, 4, 1);
            scalingChart.axisY.min = 24;
        }, 200);
    });
  
    function setMouseAction(sender) {
        mouseActionControl.header = "Mouse Action: <b>" + sender.selectedItem.Header + "</b>";
        chartZoom.mouseAction = wijmo.chart.interaction.MouseAction[sender.selectedItem.Header];
    }
    function setInteractiveAxes(sender) {
        axesControl.header = "Interactive Axes: <b>" + sender.selectedItem.Header + "</b>";
        chartZoom.interactiveAxes = wijmo.chart.interaction.InteractiveAxes[sender.selectedItem.Header];
    }
    function resetAxes() {
        if (chartZoom) {
            chartZoom.reset();
            if (scalingChart) {
                scalingChart.axisX.min = new Date(2014, 4, 1);
                scalingChart.axisY.min = 24;
            }
        }
        document.querySelector('#reset').disabled = 'disabled';
    }
</script>
<c1-flex-chart id="scalingChart" binding-x="Date"chart-type="ChartType.Area" >
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-flex-chart-series binding="SalesInUSA" name="Sales in USA">
    </c1-flex-chart-series>
</c1-flex-chart>