CODEWITHSUNDEEP
c#razorzoomingbar-chartkendo-dataviz
Manoj
Manoj

Reputation: 131

How to develop Pan and zoom functionality with Kendo UI

I am using Kendo UI with C#.Net MVC code and created a Bar chart. Now In this Bar Chart I want to develop a pan and zoom functionality.

http://demos.telerik.com/kendo-ui/dataviz/bar-charts/pan-and-zoom.html

On above link this functionality development is explained clearly but it is in Html and I want to develop it on razor page of C#.net MVC platform.

When I used its javascript methods, chart height was always increased on each scroll for zoom. which was not a feasible for zoom functionality so please provide suggestions to make it correct.

Thanks in Advance!

Upvotes: 0

Views: 2636

Answers (1)

Damien Morattel
Damien Morattel

Reputation: 11

Hi I had the same problem with the size increasing and I fixed it by setting the chart height:

Just adding : 

.ChartArea(c =>c .Height(200)

Like this :

@(Html.Kendo().Chart(data)
                  .Name("Previsions")
                  .Legend(legend => legend.Position(ChartLegendPosition.Top))
                  .DataSource(d => d.PageSize(40))
                  .ChartArea(c =>c .Height(200) .Background("none"))
                  .Series(series => { ...

.Events(e => e
                              .Drag("onDrag")
                              .DragEnd("onDragEnd")
                              .Zoom("onZoom")))

And my javascript methods for pan and zoom are :

<script >
        // Minimum/maximum number of visible items
        var MIN_SIZE = 10;
        var MAX_SIZE = 80;

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

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

        // State variables
        var viewStart = 0;
        var viewSize = 40;
        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.Count - 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();
        }
    </script>

Do not forget to put the script before the chart in the razor file.

Upvotes: 1

Related Questions