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

Overlapping bars

2 Answers 128 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Brendan
Top achievements
Rank 1
Brendan asked on 13 Aug 2012, 02:07 AM
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

Sort by
0
Brendan
Top achievements
Rank 1
answered on 15 Aug 2012, 02:12 AM
Is there any suggested way of preventing the overlap ad setting the label spacing correctly?
0
Accepted
Petar Kirov
Telerik team
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.

Tags
ChartView
Asked by
Brendan
Top achievements
Rank 1
Answers by
Brendan
Top achievements
Rank 1
Petar Kirov
Telerik team
Share this question
or