Overlapping bars in UI for Silverlight

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

Overlapping bars

2 Answers 63 Views

ChartView

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

Brendan asked on 13 Aug 2012, 02:07 AM

Actual.png

Wanted.png

I have a bar chart with a data set which may vary from small to very large. When viewing large data sets the bar widths are large and overlap each other, creating a very odd looking chart. Below is code to reproduce the problem with attached image of the result. Zooming in merely scales the bars and only looks worse. I have attached an image of what I would expect it to look like, which I achieved by zooming in first before setting the itemssource, then zooming out again.

I also have an issue with the label spacing. I know I can use the LabelInterval however due to the fact my data set can vary greatly (anywhere from 1 - 40000 points) it is near impossible to determine a suitable interval. Using one of the fit mode's is also useless as overlap will still occur using rotation, and multiline takes too much space.

MainPage.xaml

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<StackPanel Grid.Row="0" Orientation="Horizontal" Margin="5">

<telerik:RadDateTimePicker x:Name="FromDate" SelectionChanged="UpdateChart" Width="150" />

<telerik:RadDateTimePicker x:Name="ToDate" SelectionChanged="UpdateChart" Width="150" Margin="5,0,0,0" />

</StackPanel>

<telerik:RadCartesianChart x:Name="Chart" Grid.Row="1">

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:DateTimeContinuousAxis />

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis />

</telerik:RadCartesianChart.VerticalAxis>

<telerik:RadCartesianChart.Behaviors>

<telerik:ChartPanAndZoomBehavior ZoomMode="Horizontal" PanMode="Horizontal" />

</telerik:RadCartesianChart.Behaviors>

<telerik:RadCartesianChart.Series>

<telerik:BarSeries CategoryBinding="Timestamp" ValueBinding="Value" />

</telerik:RadCartesianChart.Series>

</telerik:RadCartesianChart>

</Grid>

MainPage.xaml.cs

public class Data

{

public DateTime Timestamp { get; set; }

public int Value { get; set; }

}

public partial class MainPage : UserControl

{

private Random _rand = new Random();

public MainPage()

{

InitializeComponent();

FromDate.SelectedDate = DateTime.Today.AddYears(-1);

ToDate.SelectedDate = DateTime.Today;

}

private void UpdateChart(object sender, EventArgs e)

{

Chart.Series[0].ItemsSource = GenerateData();

}

private IEnumerable<Data> GenerateData()

{

DateTime from = FromDate.SelectedDate ?? DateTime.Today.AddYears(-1);

DateTime to = ToDate.SelectedDate ?? DateTime.Today;

for (; from < to; from = from.AddDays(1))

{

yield return new Data()

{

Timestamp = from,

Value = _rand.Next(400, 450)

};

}

2 Answers, 1 is accepted

Accepted

answered on 15 Aug 2012, 12:43 PM

Hello Brendan,

"You can use the GapLength property to control the Width of the Bars. It is exposed by both CategoricalAxis and DateTimeContinuousAxis. Note, that it's value should be between 0 and 1, and it defines the distance between two items. A value of 0 means that a bar would take the entire space between two ticks, while a value of 1 means the bar will have zero width as all the space should appear as gap." - from this help topic.

Setting the GapLength to "0.95", for example, should improve the visibility of the individual bars. I would also recommend setting the LabelFitMode property of the Horizontal (DateTimeContinuous) Axis to "Rotate" and respectively the LabelRotationAngle "45", in order to improve the visibility of Horizontal Axis Labels.

Regards,
Petar Kirov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.