Range Chart timeline

3 posts, 1 answers
  1. Alan
    Alan avatar
    12 posts
    Member since:
    Apr 2013

    Posted 09 Feb Link to this post

    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. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 12 Feb Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Alan
    Alan avatar
    12 posts
    Member since:
    Apr 2013

    Posted 12 Feb Link to this post

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

Back to Top