Reload data on zoom with dataSource with new min and max

6 posts, 1 answers
  1. Sune
    Sune avatar
    14 posts
    Member since:
    Aug 2015

    Posted 15 Aug Link to this post

    Hi

    I am trying to do a custom zoom with a dataSource. New data should be loaded with a higher resolution when zooming in and lower resolution when zooming out.

    I am having trouble finding the new min and max values for the x-axis after the zoom. I would expect these to be somewhere in the zoom event object, but it seems hidden pretty well. Can anyone point me to them, like e.sender.? or e.axisRanges.valueOf(...?..)?

    Thanks

    Sune

     

  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 18 Aug Link to this post

    Hi Sune,

    Apologies for the delayed reply.

    In the zoomEnd event you could get min / max values of named axes via the e.axisRanges object (documentation link). For your convenience here is an example.

    Regards,
    Iliana Nikolova
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Sune
    Sune avatar
    14 posts
    Member since:
    Aug 2015

    Posted 18 Aug in reply to Iliana Nikolova Link to this post

    Hi Iliana,

    I updated to Kendo UI v2016.2.714 as used in the demo.

    I get an undefined on "CatAxis" here:

    zoomEnd: function(e){
      var getAxis = e.axisRanges.CatAxis;
      console.log(getAxis.min, getAxis.max)
    }

    I compared the kendo.all.min.js files from the CDN with my download, the files differ even though they are the same version! As strange as that is, when I try your CDN version still doesn't fix the problem. 

    Any idea what could be causing this? 

    Thanks, Sune

     

    zoomEnd: function(e){
      var getAxis = e.axisRanges.CatAxis;
      console.log(getAxis.min, getAxis.max)
    }
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 22 Aug Link to this post

    Hi Sune,

    "CatAxis" is an explicitly defined name of categoryAxis. Take a look at the following code snippet which I extracted from my dojo: 
    //....
    categoryAxis: {
       min: 0,
       max: 10,
       labels: {
          rotation: "auto"
       },
       name: "CatAxis"
    },

    I.e. to get the expected result you should set categoryAxis.name.

    Regards,
    Iliana Nikolova
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  6. Sune
    Sune avatar
    14 posts
    Member since:
    Aug 2015

    Posted 22 Aug in reply to Iliana Nikolova Link to this post

    Ah ok, that makes sense.

    Unfortunately it still doesn't work, I still get an undefined, something must be breaking it.

    I am using a dataSource so the min and max values are on auto from the dataSource. I am also using datetimes on the x-axis and plotting in svg. Could this somehow be the culprit?

    $(grid).kendoChart({
        dataBound: function () {
            kendo.ui.progress($(progress), false);
        },
        categoryAxis: {
            name: "CatAxis"
        },
        renderAs: "svg",
        autoBind: false               
    });
     
    $(grid).data("kendoChart").setOptions({
        chartArea: {
            height: chartHeight
        },
        renderAs: "svg",
        dataBound: function (e) {
            var view = e.sender.dataSource.view();
            if (view.length === 0) {
                _setStateNoData();
            } else {
                _setStateHaveData();
            }
        },
        title: {
            text: "Temperatures -  in Celsius (°C)",
            color: 'rgb(66, 153, 216)',
        },
        render: function () {
            if (chartRefreshButton != null) {
                $(chartRefreshButton).show();
            }
     
            kendo.ui.progress($(progress), false);
        },
        categoryAxis: {
            name: "CatAxis"
        },
        autoBind: false,
        seriesDefaults: {
            type: "scatterLine",
            xField: "logged",
            width: 2,
            markers: {
                visible: true,
                size: 6
            }
        },
        dataSource: chartDataSource,
        series: [
                    { name: "Return", visible: seriesVisible[0], color: 'Blue', yField: "returnTemp", yAxis: "temperature", missingValues: "gap" },
                {
                    name: "Setpoint", visible: seriesVisible[1], color: 'CornflowerBlue', yField: "tempSetpoint",
                    yAxis: "temperature", missingValues: "gap"
                },
                    {
                        name: "Supply",
                        visible: seriesVisible[2],
                        color: 'RosyBrown',
                        yField: "supplyTemp",
                        yAxis: "temperature",
                        missingValues: "gap"
                    },
     
                    {
                        name: "Supply - Setp.",
                        visible: seriesVisible[3],
                        color: 'Green',
                        yField: "supplyDiff",
                        yAxis: "temperature",
                        missingValues: "gap"
                    },
     
                    {
                        name: "Return - Setp.",
                        visible: seriesVisible[4],
                        color: 'LightCoral',
                        yField: "returnDiff",
                        yAxis: "temperature",
                        missingValues: "gap"
                    },
     
                    {
                        name: "USDA 1",
                        visible: seriesVisible[5],
                        color: 'Aqua',
                        yField: "cargo1",
                        yAxis: "temperature",
                        missingValues: "gap"
                    },
     
                    {
                        name: "USDA 2",
                        visible: seriesVisible[6],
                        color: 'Navy',
                        yField: "cargo2",
                        yAxis: "temperature",
                        missingValues: "gap"
                    },
     
                    {
                        name: "USDA 3",
                        visible: seriesVisible[7],
                        color: 'DarkCyan',
                        yField: "cargo3",
                        yAxis: "temperature",
                        missingValues: "gap"
                    },
     
                    {
                        name: "Cargo 4",
                        visible: seriesVisible[8],
                        color: 'MediumPurple',
                        yField: "cargo4",
                        yAxis: "temperature",
                        missingValues: "gap"
                    },
     
                    {
                        name: "Ambient",
                        visible: seriesVisible[9],
                        color: 'LightSeaGreen',
                        yField: "ambTemp",
                        yAxis: "temperature",
                        missingValues: "gap"
                    },
     
                    {
                        name: "Humidity",
                        visible: seriesVisible[10],
                        color: 'Crimson',
                        yField: "humidity",
                        yAxis: "humidity",
                        missingValues: "gap"
                    }
     
        ],
        legendItemClick: function (e) {
            seriesVisible[e.seriesIndex] = !e.series.visible;
        },
        legend: {
            visible: true,
            position: "left",
            labels: {
                font: "14px sans-serif",
                color: 'rgb(66, 153, 216)',
                margin: 3
            },
        },
        yAxis: [
                {
                    name: "temperature",
                    axisCrossingValues: [-100, 100],
                    labels: {
                        visible: true,
                        format: "{0}°C"
                    }
                },
                {
                    name: "humidity",
                    axisCrossingValues: [0, 100],
                    color: 'Crimson',
                    labels: {
                        visible: true,
                        format: "{0}%"
                    }
                }
        ],
        pannable: {
            lock: "y"
        },
        zoomable: {
            mousewheel: {
                lock: "y"
            },
            selection: {
                lock: "y"
            }
        },
        zoomEnd: function (e) {
            var xmin = e.axisRanges.CatAxis.min;
            var xmax = e.axisRanges.CatAxis.max;
     
            var fromDate = xmin;
            var toDate = xmax;
            _requestData(currentContainerId, fromDate, toDate, false);
        },
        // zoomEnd: _onZoomEnd,
        // zoom: _onZoom,
        xAxis: {
            type: "date",
            baseUnit: _fromToDateDiff(fromDate, toDate) < 5 ? "hours" : "days",
            axisCrossingValue: [new Date("January 1, 2000 0:00:00"), new Date("October 1, 2999 1:00:00")],
            labels: {
                format: _fromToDateDiff(fromDate, toDate) < 5 ? "HH:mm" : "yyyy/MM/dd"
            },
        },
        tooltip: {
            visible: true,
            template: '${series.name}: ${value.y} <br/>#= moment(dataItem.logged).format(\'YYYY-MM-DD HH:mm\') #'
        },
    });
     
    $(grid).data("kendoChart").refresh();

     

  7. Sune
    Sune avatar
    14 posts
    Member since:
    Aug 2015

    Posted 24 Aug in reply to Sune Link to this post

    Issue resolve. Thanks.
Back to Top
Kendo UI is VS 2017 Ready