Bar Chart Legends and Width

2 posts, 0 answers
  1. GlenC
    GlenC avatar
    12 posts
    Member since:
    May 2009

    Posted 21 Sep 2011 Link to this post

    Dear Telerik,
    please can you help with some issues I have creating a Chart?

    I have a collection of data as defined below:
     public class MyDataItem
            public string searchItem {get;set;}
            public DateTime startTimeTime {get;set;}
            public TimeSpan duration {getset;}
            public double confidence {get;set;}
    and I generate a set of random data for testing:
    if (myData == null)
                    myData = new ObservableCollection<MyDataItem>();
                DateTime dt = DateTime.Now;
                Random rand = new Random(123);
                for (int i = 0; i < 20; i++)
                    MyDataItem di = new MyDataItem() { searchItem = "Item" + (i % 3).ToString(), startTimeTime = dt.AddSeconds(rand.Next(1800)), duration = new TimeSpan(0,0,0, rand.Next(59)), confidence= rand.NextDouble() * 100};

    I have no trouble creating the basic bar chart I want, with confidence on the Y axis and startTimeTime along the X Axis.
    However what I would like is to somehow colour the Bars according to their searchItem name, and also to show that colour/searchItem as the legend, so that, as in another, example, I can use a Checkbox in the Legend to show each set of searchItems if required.

    My second issue (and I realise this may cause problems with one bar hiding the other, but with our expected data I don't think it'll be too much of a problem) is can the width of each Bar be dictated by the duration field in my data set, so that each bar is  a different width.

    My test XAML (so far) is as follows:

     <Grid x:Name="LayoutRoot" >
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            <telerik:RadGridView ItemsSource="{Binding}" Grid.Column="0" RowIndicatorVisibility="Visible" RowDetailsVisibilityMode="Visible" AlternationCount="2" AutoGenerateColumns="False" Margin="10"  >
                    <telerik:GridViewDataColumn Header="confidence" DataMemberBinding="{Binding confidence}" />
                    <telerik:GridViewDataColumn Header="searchItem" DataMemberBinding="{Binding searchItem}" />
                    <telerik:GridViewDataColumn Header="startTimeTime" DataMemberBinding="{Binding startTimeTime}" />
                    <telerik:GridViewDataColumn Header="duration" DataMemberBinding="{Binding duration}" />
            <telerik:RadChart Grid.Column="1"  Margin="10" Name="radChart1" ItemsSource="{Binding}" >
                            <telerik:ChartTitle Content="Hits" HorizontalAlignment="Stretch"/>
                            <telerik:ChartLegend x:Name="chartLegend" UseAutoGeneratedItems="True" >
                            <telerik:ChartArea LegendName="chartLegend">
                                <telerik:ChartArea.AxisX >
                                    <telerik:AxisX IsDateTime="True" LabelRotationAngle="45" DefaultLabelFormat="HH:mm:ss" Title="Start Time"  />
                                    <telerik:AxisY DefaultLabelFormat="#VAL%" Title="Confidence [%]" ExtendDirection="Smart" MinValue="0" MaxValue="100" IsZeroBased="True" />
                    <telerik:SeriesMapping >
                            <telerik:BarSeriesDefinition ShowItemLabels="True" ShowItemToolTips="True" LegendDisplayMode="DataPointLabel" ItemToolTipFormat="#DATAITEM.searchItem: #DATAITEM.confidence%"/>
                            <telerik:ItemMapping DataPointMember="XValue" FieldName="startTimeTime"/>
                            <telerik:ItemMapping DataPointMember="YValue" FieldName="confidence" />

    Thanks in advance for any help/advice you may give


  2. Evgenia
    Evgenia avatar
    1396 posts

    Posted 26 Sep 2011 Link to this post

    Hi Glenc,

    To color the Bars according to their searchItem Name you may use our MVVM demo as guideline. The Bars there are colored according to their Data.EU Value. Also note that the Legend Item Markers are colored too as in your requirement. You may find more information in our help topic as well.

    There is no way to control the Width of the bars separately from one another. We provided a property ItemWidthPercent that you may use to set custom Width but this will affect the whole serie.

    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. DevCraft R3 2016 release webinar banner
Back to Top