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

Ordering (zindex) of series/lines in chart

5 Answers 363 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Jean-François
Top achievements
Rank 1
Jean-François asked on 10 Jul 2014, 02:20 PM
Hi, 

Is there a way to control the z-index of series in kendo ui charts? 

In the attached screenshot, the blue line is reference data while the black one is actual data. Is there a way to make the black line go over the blue one? This would (I think) help with the fact that the tooltip is hard to reach. Plus it would make my customer happier.

Thanks

5 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 11 Jul 2014, 03:36 PM
Hi Jean-François,

The series order depends on the series order definition. Hence in order to achieve the expected result you should define the black series after the blue one. For your convenience here is a simple example.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jean-François
Top achievements
Rank 1
answered on 11 Jul 2014, 07:21 PM
Hi, 

Thanks for the example. It's my bad I wasn't specific enough though. We use a remote datasource, and the series are loaded with the group/sort option. 

I later found that I could change the order by changing the value of the group field. If I group on field "abc", then "A" will be rendered before "B". So I named my data "zData" to make sure it was loaded last. 

The issue is that the first drawn series seems to impact the displayed categories (when using a category field, not a static one). So the order is of importance, but I see no way of controlling this other than alphabetically (which is somewhat counter-intuitive really). 

I'll create an example next week if need be, I don't have time right now, sorry.

Thanks again
0
Hristo Germanov
Telerik team
answered on 15 Jul 2014, 03:35 PM
Hi Jean-François,

I think that in this case you need to set dir: "desc" in the dataSource.group. Could you try to examine this example and tell me if it works for you?

Regards,
Hristo Germanov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jean-François
Top achievements
Rank 1
answered on 16 Jul 2014, 05:34 PM
Hi, 

Yes, I know I can change the direction. The issue still remains though, Data is a configurable name so I cannot guarantee the users will name the series properly (and I don't really want to add this constraint). 

So the only solution would be to compute a field that, when grouped on, would be in the proper order?

In other words, I have this : a set of reference data (lines in the background) + real data (dynamic). The name of each one can change, though I guess I could created another computer property to suit my needs. I would like to say "draw the X axis according to the real data series". Currently all I can do is hope that this series is either at the end or the start (alphabetically) and group them accordingly. I'd rather be able to specify which curve needs to be used. Otherwise, if I have real data from 1 to 10, but reference data from 1 to 20 and the reference data is used to draw the X axis, I will get too big a range. In other graphics, I'd want to span the X axis according to the reference data and draw the real data over it. 

Feels kind of like a "hack" to manage all this because the name comes first/last in the alphabet. Maybe I'm not using something properly though.

Thanks.
0
Hristo Germanov
Telerik team
answered on 18 Jul 2014, 09:28 AM
Hi Jean-François,

In this case you can hook up to the chart's dataBound and sort the series by the desired field. I have updated my example with custom sorting by order field.

Live example: http://dojo.telerik.com/iXah

I hope this helps.

Regards,
Hristo Germanov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Jean-François
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Jean-François
Top achievements
Rank 1
Hristo Germanov
Telerik team
Share this question
or