Filter and Wheel Zoom

This example shows how you can add custom filtering and zooming to a FlexChart.

The filter is implemented using the CollectionView's filter property. Another option in this case would be to set the range of the chart's X axis, but that would interfere with the chart zooming.

The zoom is implemented using the mouse wheel or regular buttons. Both approaches work by changing the min/max properties of the chart's axes.

The wheel zooming is done around the mouse pointer; the buttons zoom around the chart center.

Filter:

Zoom: You can also zoom with ctrl+mouse wheel.

// This file locates: "Scripts/Lesson/C1FlexChart/Filtering.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
    var theMonth = wijmo.Control.getControl('#theMonth');
    theMonth.valueChanged.addHandler(function(s, e){
        // reset the chart zoom
        applyZoom(theChart, null);
 
        // apply filter to chart data
        theChart.collectionView.filter = function (item) {
            if (theMonth.value == null) {
                return true; // no filter
            }
            return wijmo.Globalize.format(item.Date, theMonth.format) == theMonth.text;
        }
    });
 
    document.getElementById('btnResetFilter').addEventListener('click', function () {
        theMonth.value = null;
    });
 
    // zoom with the mouse wheel
    theChart.hostElement.addEventListener('wheel', function (e) {
        if (e.ctrlKey) {
            var center = theChart.pointToData(e.clientX, e.clientY);
            applyZoom(theChart, e.deltaY > 0 ? 1.1 : .9, center);
            e.preventDefault();
        }
    })
 
    // zoom logic
    document.getElementById('btnZoomIn').addEventListener('click', function () {
        applyZoom(theChart, .9)
    });
    document.getElementById('btnZoomOut').addEventListener('click', function () {
        applyZoom(theChart, 1.1)
    });
    document.getElementById('btnResetZoom').addEventListener('click', function () {
        applyZoom(theChart, null);
    });
 
    // apply a zoom factor to the chart (keeping the center constant)
    function applyZoom(chart, factor, center) {
        applyZoomAxis(chart.axisX, factor, center ? center.x : null);
        applyZoomAxis(chart.axisY, factor, center ? center.y : null);
    }
    function applyZoomAxis(axis, factor, center) {
        if (!factor) { // reset
            axis.min = axis.max = null;
        } else {
            var min = (axis.min != null ? axis.min : axis.actualMin).valueOf();
            var max = (axis.max != null ? axis.max : axis.actualMax).valueOf();
            if (center == null) {
                center = (min + max) / 2;
            }
            axis.min = center - (center - min) * factor;
            axis.max = center + (max - center) * factor;
        }
    }
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: Filtering
        public ActionResult Filtering()
        {
            return View(Models.FlexChartData.GetStocks1());
        }
    }
}

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Stock>
 
@{ 
    var stocks = Model.ToArray();
    var minDate = stocks[stocks.Length - 1].Date;
    var maxDate = stocks[0].Date;
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.Filtering_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.Filtering_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Filtering_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Filtering_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Filtering_Text4)
</p>
 
@(Html.C1().FlexChart<FlexChartData.Stock>().Id("theChart")
    .Bind(b=>b.Bind(Model).DisableServerRead(true))
    .BindingX("Date")
    .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)
)
<p>
    @Html.Raw(Resources.C1FlexChart.Filtering_Text5)
    @(Html.C1().InputDate().Id("theMonth")
        .Placeholder(Resources.C1FlexChart.Filtering_Text6)
        .CssStyle("margin-bottom", "10px")
        .SelectionMode(DateSelectionMode.Month)
        .Min(new DateTime(minDate.Year, minDate.Month, 1))
        .Max(new DateTime(maxDate.Year, maxDate.Month, 1))
        .Format("MMMM yyyy")
        .IsRequired(false)
        .Value(null)
    )
    <button id="btnResetFilter" class="btn btn-default">@Resources.Resource.Btn_Reset</button>
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Filtering_Text7)
    <button id="btnZoomIn" class="btn btn-default">@Resources.Resource.Btn_In</button>
    <button id="btnZoomOut" class="btn btn-default">@Resources.Resource.Btn_Out</button>
    <button id="btnResetZoom" class="btn btn-default">@Resources.Resource.Btn_Reset</button>
    <span>@Resources.C1FlexChart.Filtering_Text8</span>
</p>