Range Chart timeline

[Alan]

Using the example found here: http://docs.telerik.com/kendo-ui/controls/charts/how-to/timeline-using-range-bars

I am trying to modify this to show a range across months instead of a single day. Below is the modified code where I am attempting to show one range from 01/14 - 03/14 and the other range from 03/14 - 06/14. I can get the vertical axis to show dates in the format I want (MM/yy), but I'm getting months showing up twice, so I'm hopefully assuming I just have things configured wrong. I would like to have a vertical line for each month; 01/14, 02/14, 03/14, etc. Can anyone point out what I should change or if the desired result is not really possible using this control?

 Additional question - should I be setting the to/from in the dataSource differently?

 Screenshot is attached of chart produced by this code

 <script>
    var data = [{
        id: 1,
        user: "Team A",
        from: new Date("2014/01/01").getTime(),
        to: new Date("2014/03/01").getTime()
      }, {
        id: 2,
        user: "Team B",
        from: new Date("2014/03/01").getTime(),
        to: new Date("2014/06/01").getTime()
      }];

      $("#chart").kendoChart({
        dataSource: {
          data: data,
          group: {
            field: "id",
            dir: "desc"
          }
        },
        series: [{
          type: "rangeBar",
          fromField: "from",
          toField: "to",
          categoryField: "user",
          spacing: -1
        }],
        valueAxis: {
          min: new Date("2014/01/01").getTime(),
          max: new Date("2014/08/01").getTime(),
          //majorUnit: 60 * 60 * 1000, // 60 minutes in milliseconds
          labels: {
            template: "#= kendo.toString(new Date(value), 'MM/yy') #"
          }
        },
        legend: {
          visible: false
        }
      });
  </script>

[T. Tsonev]

Hello,

Months are showing up twice as the value axis steps are not exactly one month apart. If you display the day as well you'll see how they're spaced now.
One simple, but not very precise solution is to set the major unit to 31 days:
    valueAxis: {
          min: new Date("2014/01/01").getTime(),
          max: new Date("2014/08/01").getTime(),
          majorUnit: 31 * 24 * 60 * 60 * 1000, // 30 days in milliseconds

I've updated the demo to illustrate. I don't think any further changes are necessary.

Regards,
T. Tsonev
Telerik

 

 

[Alan]

Ah, yes I understand now; I didn't think that through very well. Thanks for the reply!