CODEWITHSUNDEEP
javascriptkendo-uikendo-chart
Faruk Yazici
Faruk Yazici

Reputation: 2404

Kendo Stockchart disable zooming into hour level

I am using Kendo StockChark and I have a datasource that looks like following:

...
{
"price": 0.010754,
"date": 1461186000000
},
{
"price": 0.010758,
"date": 1461272400000
},
{
"price": 0.010759,
"date": 1461358800000
}
...

It's a daily datasource and for each day, it has a corresponding price value.

The problem is, Kendo StockChart allows zooming with mousewheel into hours and minutes, even though there are no data. I should prevent zooming when I have reached the daily level on the graph.

The graph looks like following when zoomed int hours and minutes:

enter image description here

As you see, there is no data among days and they remain empty on the graph. I should prevent zooming into hourly data, i.e. max zoomable amount should be days:

enter image description here

I have tried overriding onZoom method of StockChart as follows:

vm.chartOptions.zoom = function(e) {
    if(e &&  e.sender &&   e.sender._plotArea && e.sender._plotArea.axisX  ){
        var diff = e.sender._plotArea.axisX.options.max.getTime() - e.sender._plotArea.axisX.options.min.getTime() ;
        if(diff < 24*60*60*1000*7){
            e.preventDefault();
            return false;
        }
     }
};

In this method, I check the difference between the min and max dates, and if it gets less then one week, I prevent zooming. This method works when I zoom with mousewheel slowly. But when I zoom fast, it still zooms into hours and minutes.

Is there a way to handle this problem? Thanks.

Upvotes: 2

Views: 650

Answers (2)

SaraTE
SaraTE

Reputation: 31

I had the same issue. What worked for me was defining the categoryAxis with baseUnit as fit and nothing defined for the hours/minutes/seconds in autoBaseUnitSteps. See below:

categoryAxis: {
    baseUnit: "fit",
    majorGridLines: {
        visible: false
    },
    autoBaseUnitSteps: {
        hours: [],
        minutes: [],
        seconds: []
    }
}

Upvotes: 3

Vivek Parekh
Vivek Parekh

Reputation: 1085

var dataForSource = [{

    date: new Date("December 16, 2013 02:06:00 AM"),
    Count: 0
  }, {
    date: new Date("December 16, 2013 02:07:00 AM"),
    Count: 1
  },

  {
    date: new Date("December 16, 2013 02:09:00 AM"),
    Count: 0
  }, {
    date: new Date("December 16, 2013 02:09:15 AM"),
    Count: -1
  },

  {
    date: new Date("December 16, 2013 02:09:45 AM"),
    Count: 0
  },


  {
    date: new Date("December 16, 2013 02:10:00 AM"),
    Count: -1
  }, {
    date: new Date("December 16, 2013 02:15:00 AM"),
    Count: 0
  }


  //Comment these out to see issue
  , {
    date: new Date("December 16, 2013 04:10:01 PM"),
    Count: -1
  }

  , {
    date: new Date("December 16, 2013 11:55:00 PM"),
    Count: 0
  }


];


var staticDataSource = new kendo.data.DataSource({
  type: "line",
  data: dataForSource
});

function createChart() {
  $("#chart").kendoStockChart({
    dataSource: staticDataSource,

    dateField: "date",

    series: [{
      type: "line",
      style: 'step',
      field: "Count",
      categoryField: "date"
    }],

    categoryAxis: {
      // Disables aggregates
      type: "category",

      labels: {
        format: "HH:mm",
        skip: 1
      }
    },

    navigator: {
      series: {
        type: "line",
        style: 'step',
        field: "Count"
      }
    },
    zoomStart: function(e) {
        e.preventDefault();
        return false;
},
    selectEnd: function(e) {
      // Filter the data source using the selection range
      console.log(e.from, e.to);
    }
  });
};


$(document).ready(createChart);
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>

<div id="chart"></div>

use zoomStart event to avoid zooming

vm.chartOptions.zoomStart = function(e) {
    e.preventDefault();
    return false;
};

Upvotes: 0

Related Questions