Search code examples
javascriptjquerykendo-uikendo-dataviz

Detect zoom on kendoChart


I'm trying to detect if a user is zoomed in on a kendoChart.
The use for this is to see if I should refresh the dataSource of this chart.

Code so far

<!--DATA SOURCE!-->
var lineSource = new kendo.data.DataSource(...DATA...);

<!--KENDO CHART!-->
$("#Line").kendoChart({
        dataSource: lineSource,
        series: [{
            type: "line",
            aggregate: "max",
            field: "value",
            categoryField: "date",
            markers: {
                visible: false
            },
            tooltip: {
                visible: true,
                template: "#= category # : #= value#ms"
            }
        }],
        categoryAxis: {
            baseUnit: "minutes",
            labels:{
                step: 10
            },
        },
        pannable: true,
        zoomable: true
    });

<!--REFRESHING DATA!-->
setInterval(refresh1, 60000);
function refresh1(){
        if(document.getElementById("Line")){
            $("#Line").data("kendoChart").dataSource.read();
            $("#Line").data("kendoChart").refresh();
        }
    }


Pseudocode for zoom detection:

function refresh1(){
    if(NOT ZOOMED IN ON LINE){
            if(document.getElementById("Line")){
                $("#Line").data("kendoChart").dataSource.read();
                $("#Line").data("kendoChart").refresh();
            }
        }
    }

Q: Am I able to detect a zoom on the kendoChart?
Q: How can I detect this zoom for use in an "if" statement?


Solution

  • You can detect like this.

    var boolChange = false;

        $("#chart").kendoChart({
    
            series: [
              { data: [1, 2] }
            ],
    
            zoom:
          function (e) {
              boolChange = true;
          }
    
        });
    
        if (!boolChange) {
    
        }
    

    http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#events-zoom