FlexChart

FlexChart

Zooming and Panning

Mouse action: Zoom mode: Select the chart area to zoom in, or scroll mouse wheel to zoom in/out.

Features

Sample SourceDocumentation

Settings

Description

Mouse action:
1. Zoom mode: Select the chart area to zoom in, or scroll mouse wheel to zoom in/out.
2. Pan mode: Click and drag within the chart area to change the display range.
Touch action:
1. Pan the chart area to change the display range; pinch it to zoom in/out.

PanningAndScalingController.cs PanningAndScaling.cshtml

using MvcExplorer.Models; 
using Microsoft.AspNetCore.Mvc; 
using System.Collections.Generic; 
  
namespace MvcExplorer.Controllers 
{ 
    public partial class FlexChartController: Controller 
    { 
        private static IEnumerable<FinanceData> fbData = JsonDataReader.GetFromAssembly<FinanceData>("fb2.json"); 
        public ActionResult PanningAndScaling() 
        { 
            return View(fbData); 
        } 
    } 
} 

@model List<FinanceData> 
@{ 
    ViewBag.DemoSettings = true; 
} 
<c1-flex-chart id="gesturesChart" class="stchart" chart-type="Area"
               binding-x="X" legend-position="None" plot-margin="NaN NaN NaN 80"> 
    <c1-flex-chart-axis c1-property="AxisX" axis-line="false"></c1-flex-chart-axis> 
    <c1-flex-chart-series binding="Close" name="Y Value"></c1-flex-chart-series> 
    <c1-items-source source-collection="Model"></c1-items-source> 
    <c1-chart-gestures id="gestures" mouse-action="Zoom" interactive-axes="X" scale-x="0.5f" scale-y="0.5f" pos-x="0.1f" pos-y="0.1f"></c1-chart-gestures> 
</c1-flex-chart> 
  
@section Scripts{ 
<script>
    var chart, chartGestures; 
  
    c1.documentReady(function () { 
        var gesturesChart = getChart(); 
        if (navigator.userAgent.match(/iPad/i) != null || /Android/i.test(navigator.userAgent)) { 
            document.querySelector('#mouseAction').style.display = 'none'; 
        } 
  
        if (gesturesChart) { 
            gesturesChart.axisX.rangeChanged.addHandler(function () { 
                document.querySelector('#reset').disabled = undefined; 
            }); 
            gesturesChart.axisY.rangeChanged.addHandler(function () { 
                document.querySelector('#reset').disabled = undefined; 
            }); 
        } 
    }); 
  
    function getChart() { 
        if (!chart) { 
            chart = wijmo.Control.getControl('#gesturesChart'); 
        } 
        return chart; 
    } 
  
    function getChartGesture() { 
        var gesturesChart; 
        if (!chartGestures) { 
            gesturesChart = getChart(); 
            chartGestures = c1.getExtender(gesturesChart, 'gestures'); 
        } 
        return chartGestures; 
    } 
  
    function updateMenu(menu, headerNamePrefix) { 
        menu.header = headerNamePrefix + ': <b>' + menu.selectedItem.Header + '</b>'; 
    } 
  
    function mouseActionChanged(menu) { 
        var extGesture = getChartGesture(); 
        updateMenu(menu, 'Mouse Action'); 
        if (extGesture) { 
            extGesture.mouseAction = wijmo.chart.interaction.MouseAction[menu.selectedItem.Header]; 
        } 
    } 
  
    function interactiveAxesChanged(menu) { 
        var extGesture = getChartGesture(); 
        updateMenu(menu, 'Interactive Axes'); 
        if (extGesture) { 
            extGesture.interactiveAxes = wijmo.chart.interaction.InteractiveAxes[menu.selectedItem.Header]; 
        } 
    } 
  
    function resetAxes() { 
        var extGesture = getChartGesture(); 
        if (extGesture) { 
            extGesture.reset(); 
        } 
  
        document.querySelector('#reset').disabled = 'disabled'; 
    } 
</script>
} 
  
@section Settings{ 
    <c1-menu id="mouseAction" header="Mouse Action: <b>Zoom</b>" item-clicked="mouseActionChanged"> 
        <c1-menu-item header="Zoom"></c1-menu-item> 
        <c1-menu-item header="Pan"></c1-menu-item> 
    </c1-menu> 
  
    <c1-menu id="interactiveAxes" header="Interactive Axes: <b>X</b>" item-clicked="interactiveAxesChanged"> 
        <c1-menu-item header="X"></c1-menu-item> 
        <c1-menu-item header="Y"></c1-menu-item> 
        <c1-menu-item header="XY"></c1-menu-item> 
    </c1-menu> 
  
    <button id="reset" class="btn btn-primary" onclick="resetAxes()" disabled="disabled">Reset Zoom</button> 
} 
  
@section Description{ 
    <div class="panel panel-default"> 
        <div class="panel-heading"> 
            <ul> 
                <li> 
                    <b>@Html.Raw(FlexChartRes.PanningAndScaling_MouseAction)</b> 
                    <ol> 
                        <li>@Html.Raw(FlexChartRes.PanningAndScaling_Li1)</li> 
                        <li>@Html.Raw(FlexChartRes.PanningAndScaling_Li2)</li> 
                    </ol> 
                </li> 
                <li> 
                    <b>@Html.Raw(FlexChartRes.PanningAndScaling_TouchAction)</b> 
                    <ol> 
                        <li> 
                            @Html.Raw(FlexChartRes.PanningAndScaling_Li3) 
                        </li> 
                    </ol> 
  
                </li> 
            </ul> 
        </div> 
    </div> 
} 

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Document >

Scheduling >

Input >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Document

Scheduling

Input

Tutorials

New Features

Getting Started Guides

Sample Applications

Zooming and Panning

Features

Settings

Description