Pan and zoom in kendo boxplot chart

Question

I am trying to use the pan and zoom functionality in kendo box plot chart, can this be achieved for box plot chart. http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom

Answer 1

You can apply the exact same methods to the boxplot.

DEMO

CODE:

// Minimum/maximum number of visible items
var MIN_SIZE = 6;
var MAX_SIZE = 18;

// Optional sort expression
// var SORT = { field: "val", dir: "asc" };
var SORT = {};

// Minimum distance in px to start dragging
var DRAG_THR = 50;

    // State variables
    var viewStart = 0;
    var viewSize = MIN_SIZE;
    var newStart;

    // Drag handler
    function onDrag(e) {
        var chart = e.sender;
        var ds = chart.dataSource;
        var delta = Math.round(e.originalEvent.x.initialDelta / DRAG_THR);

        if (delta != 0) {
        newStart = Math.max(0, viewStart - delta);
        newStart = Math.min(data.length - viewSize, newStart);
        ds.query({
            skip: newStart,
            page: 0,
            pageSize: viewSize,
            sort: SORT
        });
        }
    }

    function onDragEnd() {
        viewStart = newStart;
    }

    // Zoom handler
    function onZoom(e) {
        var chart = e.sender;
        var ds = chart.dataSource;
        viewSize = Math.min(Math.max(viewSize + e.delta, MIN_SIZE), MAX_SIZE);
        ds.query({
            skip: viewStart,
            page: 0,
            pageSize: viewSize,
            sort: SORT
        });

        // Prevent document scrolling
        e.originalEvent.preventDefault();
    }

        $("#chart").kendoChart({
          dataSource: {
            data: data,
            pageSize: viewSize,
            page: 0,
            sort: { }
          },
            title: {
                text: "Ozone Concentration (ppm)"
            },
            legend: {
                visible: false
            },
            series: [{
                type: "boxPlot",
                lowerField: "lower",
                q1Field: "q1",
                medianField: "median",
                q3Field: "q3",
                upperField: "upper",
                meanField: "mean",
                outliersField: "outliers"
            }],
            categoryAxis: {
                field: "year",
                majorGridLines: {
                    visible: false
                }
            },
          transitions: false,
          drag: onDrag,
          dragEnd: onDragEnd,
          zoom: onZoom

        });