Overlapping bars

3 posts, 1 answers
  1. Brendan
    Brendan avatar
    34 posts
    Member since:
    Oct 2010

    Posted 12 Aug 2012 Link to this post

    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.
  3. Brendan
    Brendan avatar
    34 posts
    Member since:
    Oct 2010

    Posted 14 Aug 2012 Link to this post

    Is there any suggested way of preventing the overlap ad setting the label spacing correctly?
  5. Answer
    Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 15 Aug 2012 Link to this post

    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.

Back to Top