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

Range Bar Chart - Multiple Ranges for Group Field

1 Answer 64 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Daniel Grünberger
Top achievements
Rank 1
Daniel Grünberger asked on 20 Nov 2018, 04:08 PM

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

 

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 22 Nov 2018, 02:16 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Charts
Asked by
Daniel Grünberger
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or