This is a migrated thread and some comments may be shown as answers.

Range Chart timeline

2 Answers 86 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Alan
Top achievements
Rank 1
Alan asked on 10 Feb 2016, 03:59 AM

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>

2 Answers, 1 is accepted

Sort by
0
Accepted
T. Tsonev
Telerik team
answered on 12 Feb 2016, 10:10 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Alan
Top achievements
Rank 1
answered on 12 Feb 2016, 07:19 PM

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

Tags
Charts
Asked by
Alan
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Alan
Top achievements
Rank 1
Share this question
or