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

Problems with axis labels overlapping/smashing together

3 Answers 475 Views
Chart
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Lauren Belella
Top achievements
Rank 1
Lauren Belella asked on 16 Dec 2011, 12:04 AM
I have a chart that is data-bound to an ObservableCollection of objects in my ViewModel. Once a second "OnPropertyChanged" is triggered where the chart updates itself. This seems to work well for drawing the actual charting area. The problem occurs with the axis labels and ticks, where the chart renders far too many of them into the view. Seemingly sporadically, the chart will adjust how these labels are drawn and that sometimes alleviates the problem, but generally speaking they are completely unreadable. The LabelFitMode property is ostensibly useless, as all three options (none, multiline, rotate) will eventually overlap/smash the labels.

If I could force the chart to readjust it's labels every time my data binding is updated that would be great, but the UpdateLayout() methods seem to have no effect to this end. I've also tried manually calculating the label intervals for the axises after the binding update occurs. With an elapsed time axis this has some limited success, but for large values (15000+), the first label is drawn and none of the others:

Here's the XAML:
<chart:RadCartesianChart x:Name="InstantaneousChart"<br>
                                         Grid.Row="1"><br>
                    <chart:RadCartesianChart.HorizontalAxis><br>
                        <chart:DateTimeCategoricalAxis LabelFitMode="None" <br>
                                                       PlotMode="OnTicks"<br>
                                                       LastLabelVisibility="Visible"/><br>
                    </chart:RadCartesianChart.HorizontalAxis><br>
                    <chart:RadCartesianChart.VerticalAxis><br>
                        <chart:LinearAxis LabelFitMode="MultiLine"<br>
                                          LastLabelVisibility="Visible"/><br>
                    </chart:RadCartesianChart.VerticalAxis><br>
                    <chart:RadCartesianChart.Series><br>
                        <chart:AreaSeries  Stroke="GreenYellow"<br>
                                           Fill="Green"<br>
                                           StrokeThickness="4"<br>
                                           CategoryBinding="timeInSeconds"<br>
                                           ValueBinding="binValue"<br>
                                           ItemsSource="{Binding InstantaneousData}"<br>
                                           ClipToPlotArea="True"<br>
                                           DataBindingComplete="InstantaneousChart_BindingUpdated"><br>
                        </chart:AreaSeries><br>
                    </chart:RadCartesianChart.Series><br>
                    <chart:RadCartesianChart.Behaviors><br>
                        <chart:ChartPanAndZoomBehavior ZoomMode="None" PanMode="None"/><br>
                    </chart:RadCartesianChart.Behaviors><br>
                </chart:RadCartesianChart>


I've seen very little documentation specific to the Windows Phone 7 charts online, and even on this site I am constantly routed to WPF/Silverlight support forums where often the solution seems to be modifying the behavior of AutoRange or something akin to that. I have thus far found no property in the WP7 chart control where I can specify what this should be.

Help would be greatly appreciated.

3 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 19 Dec 2011, 10:38 AM
Hi Lauren,

Thank you for contacting us and for your question.

Each Chart axis has specific properties to control how its ticks and labels are positioned. For example a LinearAxis has MajorStep, Minimum, Maximum as well as RangeExtendDirection properties. A DateTimeCategoricalAxis (as in your case) has a MajorTickInterval property to specify the step at which ticks and labels are available. The DateTimeContinuousAxis has MajorStep and MajorStepUnit (Month vs. Day, etc) to fine-tune the ticks.

As far as I see from the sample code you are using DateTimeCategoricalAxis without setting its DateTimeComponent property, which default value is DateTimeComponent.Day. This means that the data is grouped by the Day value of each DateTime structure passed. If you want the entire Date value to be used, you should set the DateTimeComponent to Date. To specify tick interval you may use the MajorTickInterval property. For example:

private void UpdateTickInterval(CategoricalAxis axis)
{
    int dataPointCount = (this.radChart1.Series[0] as CategoricalSeries).DataPoints.Count;
    // round to 8 ticks
    int interval = dataPointCount / 8;
    axis.MajorTickInterval = Math.Max(1, interval);
}

You can also update your data accordingly to prevent too many data points visualized - e.g. you may remove the last data entry upon adding a new one if a certain threshold is exceeded.

I hope this information is useful. If you need further assistance I would kindly ask you to prepare a sample project and to open a new support ticket with the project attached so that I can have a closer look and propose a solution.

I am looking forward to your reply.

Greetings,
Georgi
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Leonard
Top achievements
Rank 1
answered on 25 Dec 2011, 02:36 PM
Yep ...I'm having the same issue. I tried to use the Rotate with a setting of zero angle to see if it could work since it works kindof with a 300 degree angle.

I really like overall what the controls could do, just that I keep running into these little things that should work and they don't.


Sorry I in the wrong Post : I thought this was Siliverlight, but the same problem occurs there too. 8(...And yes I'm working on Christmas before the kids get up!

Merry Christmas -  i wish someone would send me a gift to make these horizontal axis behave so I can get on with my project.
0
Ryan
Top achievements
Rank 1
answered on 12 Feb 2014, 01:12 AM
For the DateTimeContinuousAxis, I used the MaximumTicks property to limit the number of ticks that would appear.
Tags
Chart
Asked by
Lauren Belella
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Leonard
Top achievements
Rank 1
Ryan
Top achievements
Rank 1
Share this question
or