Hi, I have the following problem with RadCartesianChart - it has fixed size and sometimes many categories are displayed in the chart and therefore I'm setting zoom level according to the number of categories. But sometimes the first category label disappears. This is not good because it creates a wrong impression that the values are for empty category. I've tried to overcome this behaviour by setting different label related properties categorical axis but with no luck.
Here is my current attempt:
I'm attaching screen shots to demonstrate the problem.
Please give me some advice for the solution.
Best Regards,
Mladen
Here is my current attempt:
<
telerik:RadCartesianChart.VerticalAxis
>
<
chartView:CategoricalAxis
FontFamily
=
"Segoe UI"
LabelInterval
=
"1"
LabelOffset
=
"0"
LabelFitMode
=
"None"
LastLabelVisibility
=
"Visible"
>
<
chartView:CategoricalAxis.LabelTemplate
>
<
DataTemplate
>
<
TextBlock
Text
=
"{Binding}"
/>
</
DataTemplate
>
</
chartView:CategoricalAxis.LabelTemplate
>
</
chartView:CategoricalAxis
>
</
telerik:RadCartesianChart.VerticalAxis
>
I'm attaching screen shots to demonstrate the problem.
Please give me some advice for the solution.
Best Regards,
Mladen
12 Answers, 1 is accepted
0
Hello Mladen,
Could you try setting the PlotMode property of your axis to OnTicks. In this case the ticks will match the labels and the last one should not disappear.
Regards,
Peshito
Telerik
Could you try setting the PlotMode property of your axis to OnTicks. In this case the ticks will match the labels and the last one should not disappear.
Regards,
Peshito
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Mladen
Top achievements
Rank 1
answered on 26 Aug 2013, 01:52 PM
Hi ,
Thank you for your reply. Unfortunatelly it does not work for me, because setting Plot Mode to OnTicks leads to not good looking appearence when there is only one bar, it goes partially in one side of the axis and leaves lot of empty space. I gues i could change PlotMode property depending on the bars count, but if you can suggest something else I'll appreciate it.
However I would like to ask you another question - when you zoom out too much and there are too many bars - category labels overlaps themselves. I'm attaching picture. Is there an easy way to avoid this?
Best Regards,
Mladen
Thank you for your reply. Unfortunatelly it does not work for me, because setting Plot Mode to OnTicks leads to not good looking appearence when there is only one bar, it goes partially in one side of the axis and leaves lot of empty space. I gues i could change PlotMode property depending on the bars count, but if you can suggest something else I'll appreciate it.
However I would like to ask you another question - when you zoom out too much and there are too many bars - category labels overlaps themselves. I'm attaching picture. Is there an easy way to avoid this?
Best Regards,
Mladen
0
Hi Mladen,
As you are using CategoricalAxis the chart cannot know what categories should be visible and what not. However you may use the LabelInterval property of your axis in order to make the labels more readable. It can also be controlled by attaching to chart's ZoomChanged event like this.
Hope this helps.
Regards,
Peshito
Telerik
As you are using CategoricalAxis the chart cannot know what categories should be visible and what not. However you may use the LabelInterval property of your axis in order to make the labels more readable. It can also be controlled by attaching to chart's ZoomChanged event like this.
void RadChart1_ZoomChanged(object sender, Telerik.Windows.Controls.ChartView.ChartZoomChangedEventArgs e)
{
if (RadChart1.Zoom.Height > 0.5)
{
(RadChart1.VerticalAxis as CategoricalAxis).LabelInterval = 5;
}
}
Hope this helps.
Regards,
Peshito
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Mladen
Top achievements
Rank 1
answered on 29 Aug 2013, 06:27 PM
Hi, I'm aware of this approach (although I was trying briefly to do it with binding). The problem is that the proper appearance is not only function of the zoom but also of the height of the chart and the number of bars in it. For example if there are five bars in the chart zoom 1 is ok, but if there are 100 - it is completely not. Also if the user resize the grid - if the height is higher - more labels can be stick together without this nasty effect to occur. So i have to develop some kind of formula to calculate labels intervals based on these three parameters. So I'm asking whether there is a simpler way to tell the chart to not overlap the labels - when this happens they to be collapsed or something else.
0
Accepted
Hello Mladen,
You are correct. However there isn't a simpler way out of the box to avoid overlapping the labels in such a scenario when Categorical axis with so many items is used.
Regards,
Peshito
Telerik
You are correct. However there isn't a simpler way out of the box to avoid overlapping the labels in such a scenario when Categorical axis with so many items is used.
Regards,
Peshito
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Mladen
Top achievements
Rank 1
answered on 03 Sep 2013, 08:55 AM
Hi, thank you for your reply.
I have one last question - I have another problem with labels on categorical axis for which i cannot find good solution. When there are many bars in rad chart and when you scrolling through them if there are labels with big length - while they came in and out of view the chart left side of plot area is moving left and right depending on the category labels length, which are currently in view while scrolling. I wanted to avoid that, so i set the labels length at fixed size, depending on the longest label. But this way i couldnt manage to right aligh the labels no matter what i tried and sometimes by unknown reason some of them are missplaced (aligned right or center while the others are aligned left).
Are you aware how to avoid successfully this behaviour (changing the position of the left side of the plot area while scrolling)?
Best Regards,
Mladen
I have one last question - I have another problem with labels on categorical axis for which i cannot find good solution. When there are many bars in rad chart and when you scrolling through them if there are labels with big length - while they came in and out of view the chart left side of plot area is moving left and right depending on the category labels length, which are currently in view while scrolling. I wanted to avoid that, so i set the labels length at fixed size, depending on the longest label. But this way i couldnt manage to right aligh the labels no matter what i tried and sometimes by unknown reason some of them are missplaced (aligned right or center while the others are aligned left).
Are you aware how to avoid successfully this behaviour (changing the position of the left side of the plot area while scrolling)?
Best Regards,
Mladen
0
Hi Mladen,
This should be solved easily by setting a style with fixed width and text alignment:
Regards,
Petar Marchev
Telerik
This should be solved easily by setting a style with fixed width and text alignment:
<
telerik:CategoricalAxis
x:Name
=
"mainVerticalAxis"
>
<
telerik:CategoricalAxis.LabelStyle
>
<
Style
TargetType
=
"TextBlock"
>
<
Setter
Property
=
"Width"
Value
=
"80"
/>
<
Setter
Property
=
"TextAlignment"
Value
=
"Right"
/>
Regards,
Petar Marchev
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Mladen
Top achievements
Rank 1
answered on 05 Sep 2013, 04:20 PM
Hi Petar, thank you for your reply.
I agree it should easily be solved but this actually doesn't happen.
I had tried to do what you have suggested - although i was setting these properties not with style, but directly. There should be no difference unless for example default label template is made from several texboxes or something like that. However i think this is not the case - here I'm attaching video where you can see the xaml and the effect which i have mentioned in previous post wchich occurr when try to fix the size and right aligh. You can see in the video I'm trying with your approach, mine and both with the same result (no surprise). At the fourth attempt i comment all the xaml and show you the default behaviour i initially want to avoid (moving the left side of the chart while scrolling)
https://docs.google.com/file/d/0B9h8habEj9Z3eHA0akFDUWI3NTA/edit?usp=sharing
Best Regards,
Mladen
I agree it should easily be solved but this actually doesn't happen.
I had tried to do what you have suggested - although i was setting these properties not with style, but directly. There should be no difference unless for example default label template is made from several texboxes or something like that. However i think this is not the case - here I'm attaching video where you can see the xaml and the effect which i have mentioned in previous post wchich occurr when try to fix the size and right aligh. You can see in the video I'm trying with your approach, mine and both with the same result (no surprise). At the fourth attempt i comment all the xaml and show you the default behaviour i initially want to avoid (moving the left side of the chart while scrolling)
https://docs.google.com/file/d/0B9h8habEj9Z3eHA0akFDUWI3NTA/edit?usp=sharing
Best Regards,
Mladen
0
Hi Mladen,
Thank you for the screencast. I am unsure why this happens, I tried reproducing it in a small project but was unable to get the faulty behavior. I have attached the project for your reference.
Can you verify if you are using the latest version of our controls, perhaps this was a bug in the control at some point and is now fixed. Another reason for the labels not being positioned correctly might be the binding. You are using a binding for the Width of the label. The binding might kick in later than expected and before that the value of the property could be 0. In this case the chart will position the labels as if their width is 0, which would lead to the misalignment. However, this is just a mere guess but you can try to remove the binding and use a static value, say 100, and see if the glitch still will occurs.
If you can update the attached project to reproduce the issue at hand, please send it back to us for investigation.
Regards,
Petar Marchev
Telerik
Thank you for the screencast. I am unsure why this happens, I tried reproducing it in a small project but was unable to get the faulty behavior. I have attached the project for your reference.
Can you verify if you are using the latest version of our controls, perhaps this was a bug in the control at some point and is now fixed. Another reason for the labels not being positioned correctly might be the binding. You are using a binding for the Width of the label. The binding might kick in later than expected and before that the value of the property could be 0. In this case the chart will position the labels as if their width is 0, which would lead to the misalignment. However, this is just a mere guess but you can try to remove the binding and use a static value, say 100, and see if the glitch still will occurs.
If you can update the attached project to reproduce the issue at hand, please send it back to us for investigation.
Regards,
Petar Marchev
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Mladen
Top achievements
Rank 1
answered on 10 Sep 2013, 09:12 AM
Hi, I'm not using latest version of controls, I'm using v4.0.30319.
However - if i set the label value to static length it works fine. But i need to change the length, bacause the labels from different data shown in the chart can greatly vary in length.
Stilll - i tried with your project and mine version of controls - i couldnt reproduce the behaviour at first.
But when i set different label lenght at every buton click i was able to reproduce almost the same behaviour (not exactly the same, because all labels weren't alighed correctly together - not some of them aligned and some of them not)
I'm sending you only the change of the code to your project(below). With various ranges of label length the result is the same. At first click of the button they are aligned correctly. In the next clicks they are not. So the reason for this behaviour is not the binding but the fact itself, that I'm actually changing the labels length . I haven't tried with latest version, you can do it just with replacing the code below and tell me if i need to change version of the controls to improve the bahaviour. If not the version is to blame, do you have any other suggestions?
private void Button_Click(object sender, RoutedEventArgs e)
{
var random = new Random();
this.DataContext = new MainVM
{
LabelLength = random.Next(50,500),
Data = new List<PlotInfo>
{
new PlotInfo { XCat = "x1" , YVal = 12 },
new PlotInfo { XCat = "x2sadas" , YVal = 123 },
new PlotInfo { XCat = "x3" , YVal = 23 },
new PlotInfo { XCat = "x4" , YVal = 173 },
new PlotInfo { XCat = "x5asdad.dasfa" , YVal = 99 },
new PlotInfo { XCat = "x6" , YVal = 193 },
new PlotInfo { XCat = "x7sda1" , YVal = 77 },
new PlotInfo { XCat = "x8" , YVal = 123 },
new PlotInfo { XCat = "x9aTdA" , YVal = 77 },
new PlotInfo { XCat = "x11" , YVal = 12 },
new PlotInfo { XCat = "T12FaGas" , YVal = 123 },
new PlotInfo { XCat = "x13" , YVal = 23 },
new PlotInfo { XCat = "x14" , YVal = 173 },
new PlotInfo { XCat = "x15asGad" , YVal = 99 },
new PlotInfo { XCat = "x16" , YVal = 193 },
new PlotInfo { XCat = "x17Sda1" , YVal = 77 },
new PlotInfo { XCat = "x18" , YVal = 123 },
new PlotInfo { XCat = "x19aRda" , YVal = 77 },
new PlotInfo { XCat = "x1" , YVal = 12 },
new PlotInfo { XCat = "x2sadas" , YVal = 123 },
new PlotInfo { XCat = "x3" , YVal = 23 },
new PlotInfo { XCat = "x4" , YVal = 173 },
new PlotInfo { XCat = "x5asdad.dasfa" , YVal = 99 },
new PlotInfo { XCat = "x6" , YVal = 193 },
new PlotInfo { XCat = "x7sda1" , YVal = 77 },
new PlotInfo { XCat = "x8" , YVal = 123 },
new PlotInfo { XCat = "x9aTdA" , YVal = 77 },
new PlotInfo { XCat = "x11" , YVal = 12 },
new PlotInfo { XCat = "T12FaGas" , YVal = 123 },
new PlotInfo { XCat = "x13" , YVal = 23 },
new PlotInfo { XCat = "x14" , YVal = 173 },
new PlotInfo { XCat = "x15asGad" , YVal = 99 },
new PlotInfo { XCat = "x16" , YVal = 193 },
new PlotInfo { XCat = "x17Sda1" , YVal = 77 },
new PlotInfo { XCat = "x18" , YVal = 123 },
new PlotInfo { XCat = "x19aRda" , YVal = 77 },
}
};
}
}
However - if i set the label value to static length it works fine. But i need to change the length, bacause the labels from different data shown in the chart can greatly vary in length.
Stilll - i tried with your project and mine version of controls - i couldnt reproduce the behaviour at first.
But when i set different label lenght at every buton click i was able to reproduce almost the same behaviour (not exactly the same, because all labels weren't alighed correctly together - not some of them aligned and some of them not)
I'm sending you only the change of the code to your project(below). With various ranges of label length the result is the same. At first click of the button they are aligned correctly. In the next clicks they are not. So the reason for this behaviour is not the binding but the fact itself, that I'm actually changing the labels length . I haven't tried with latest version, you can do it just with replacing the code below and tell me if i need to change version of the controls to improve the bahaviour. If not the version is to blame, do you have any other suggestions?
private void Button_Click(object sender, RoutedEventArgs e)
{
var random = new Random();
this.DataContext = new MainVM
{
LabelLength = random.Next(50,500),
Data = new List<PlotInfo>
{
new PlotInfo { XCat = "x1" , YVal = 12 },
new PlotInfo { XCat = "x2sadas" , YVal = 123 },
new PlotInfo { XCat = "x3" , YVal = 23 },
new PlotInfo { XCat = "x4" , YVal = 173 },
new PlotInfo { XCat = "x5asdad.dasfa" , YVal = 99 },
new PlotInfo { XCat = "x6" , YVal = 193 },
new PlotInfo { XCat = "x7sda1" , YVal = 77 },
new PlotInfo { XCat = "x8" , YVal = 123 },
new PlotInfo { XCat = "x9aTdA" , YVal = 77 },
new PlotInfo { XCat = "x11" , YVal = 12 },
new PlotInfo { XCat = "T12FaGas" , YVal = 123 },
new PlotInfo { XCat = "x13" , YVal = 23 },
new PlotInfo { XCat = "x14" , YVal = 173 },
new PlotInfo { XCat = "x15asGad" , YVal = 99 },
new PlotInfo { XCat = "x16" , YVal = 193 },
new PlotInfo { XCat = "x17Sda1" , YVal = 77 },
new PlotInfo { XCat = "x18" , YVal = 123 },
new PlotInfo { XCat = "x19aRda" , YVal = 77 },
new PlotInfo { XCat = "x1" , YVal = 12 },
new PlotInfo { XCat = "x2sadas" , YVal = 123 },
new PlotInfo { XCat = "x3" , YVal = 23 },
new PlotInfo { XCat = "x4" , YVal = 173 },
new PlotInfo { XCat = "x5asdad.dasfa" , YVal = 99 },
new PlotInfo { XCat = "x6" , YVal = 193 },
new PlotInfo { XCat = "x7sda1" , YVal = 77 },
new PlotInfo { XCat = "x8" , YVal = 123 },
new PlotInfo { XCat = "x9aTdA" , YVal = 77 },
new PlotInfo { XCat = "x11" , YVal = 12 },
new PlotInfo { XCat = "T12FaGas" , YVal = 123 },
new PlotInfo { XCat = "x13" , YVal = 23 },
new PlotInfo { XCat = "x14" , YVal = 173 },
new PlotInfo { XCat = "x15asGad" , YVal = 99 },
new PlotInfo { XCat = "x16" , YVal = 193 },
new PlotInfo { XCat = "x17Sda1" , YVal = 77 },
new PlotInfo { XCat = "x18" , YVal = 123 },
new PlotInfo { XCat = "x19aRda" , YVal = 77 },
}
};
}
}
0
Accepted
Hi Mladen,
The reason this code breaks the behavior is that you are only changing a property Width and not the whole LabelStyle. The chart has already cached the desired Widths of the TextBlock elements (this is done to increase performance). When you change the Width in the style, the chart does not know about this change and does not refresh the cached values. If you were to change the whole style, it would work just as expected:
You can try adding these three lines after setting the data context and see the new behavior.
In any case I think it is best that you try the latest version in your actual project and see if the glitch will disappear.
I can suggest that you bind the LabelStyle property of the axis to the LabelLength property:
Hope this helps.
Regards,
Petar Marchev
Telerik
The reason this code breaks the behavior is that you are only changing a property Width and not the whole LabelStyle. The chart has already cached the desired Widths of the TextBlock elements (this is done to increase performance). When you change the Width in the style, the chart does not know about this change and does not refresh the cached values. If you were to change the whole style, it would work just as expected:
this
.DataContext =
new
MainVM .....
.....
var labelStyle =
this
.chart1.VerticalAxis.LabelStyle;
this
.chart1.VerticalAxis.LabelStyle =
null
;
this
.chart1.VerticalAxis.LabelStyle = labelStyle;
You can try adding these three lines after setting the data context and see the new behavior.
In any case I think it is best that you try the latest version in your actual project and see if the glitch will disappear.
I can suggest that you bind the LabelStyle property of the axis to the LabelLength property:
<
telerik:CategoricalAxis
LabelStyle
=
"{Binding LabelLength, Converter={StaticResource LabelLengthToTextBlockStyleConverter}}"
/>
Hope this helps.
Regards,
Petar Marchev
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Mladen
Top achievements
Rank 1
answered on 11 Sep 2013, 07:44 PM
Thank you, setting the style bound to LabelLength using converter did the job.