Range Bar Chart - Multiple Ranges for Group Field

[Daniel Knoll]

Hi,

I am using the range bar chart. ( In this example I am refering to the demo https://docs.telerik.com/kendo-ui/controls/charts/how-to/various/timeline-using-range-bars)

I want to display a data series like following:

 var data = [{
        id: 1,
        user: "Jon",
        from: new Date("2014/01/01 11:30").getTime(),
        to: new Date("2014/01/01 14:45").getTime()
      }, {
        id: 2,
        user: "Joe",
        from: new Date("2014/01/01 09:30").getTime(),
        to: new Date("2014/01/01 09:45").getTime()
      }, {
        id: 3,
        user: "Joe",
        from: new Date("2014/01/01 10:00").getTime(),
        to: new Date("2014/01/01 10:15").getTime()
      }, {
        id: 4,
        user: "Joe",
        from: new Date("2014/01/01 12:00").getTime(),
        to: new Date("2014/01/01 14:00").getTime()
      }, {
        id: 5,
        user: "Joe",
        from: new Date("2014/01/01 15:15").getTime(),
        to: new Date("2014/01/01 15:30").getTime()
      }, {
        id: 6,
        user: "Joe",
        from: new Date("2014/01/01 15:45").getTime(),
        to: new Date("2014/01/01 16:00").getTime()
      }, {
        id: 1,
        user: "Joe",
        from: new Date("2014/01/01 20:45").getTime(),
        to: new Date("2014/01/02 16:00").getTime()
      }, {
        id: 1,
        user: "Joe",
        from: new Date("2014/01/03 16:45").getTime(),
        to: new Date("2014/01/04 16:00").getTime()
      }];

//I also increased the max range of the chart:  max: new Date("2014/01/04 17:00").getTime()

 

I have added two series entries with same ID (so they have the same color) at the end of the series.

When shown in the chart, there is a continuous bar from "2014/01/01 20:45" to "2014/01/04 16:00"), but I would like to have a gab between "2014/01/02 16:00" and "2014/01/03 16:45".

Is it somehow possible to have multiple ranges displayed for each user with same IDs (so I have the same color for the bars). Must there be something changed in the configuration of the chart?

The colors should represent the kind/category of the bar and this type should be allowed multiple times for each user (categoryField).

Thanks in advance,

Michaela

 

[Tsvetina]

Hello Daniel,

If the color is the only problem, you can add a color value to the data. If it is called "color", the Chart will read it directly. If not, you should assign it through the colorField property of series.

Additionally, if adding this to the data is not possible, you can specify a color  handler function for the series, which lets you dynamically determine the color of a given series based on some condition in the series data. For example:

series: [{
  type: "rangeBar",
  fromField: "from",
  toField: "to",
  categoryField: "user",
  spacing: -1,
  color: function(point){
    if(point.dataItem.user == "Joe"){
        return "green";
    }
  }
}]

This will make all bars in the Joe category green:
https://dojo.telerik.com/UPuFovUq

Regards,
Tsvetina
Progress Telerik