Reload data on zoom with dataSource with new min and max

[Sune]

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

 

[Iliana Dyankova]

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

 

 

[Sune]

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)

}

[Iliana Dyankova]

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

 

 

[Sune]

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();

 

[Sune]

Issue resolve. Thanks.