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

Bar Chart Legends and Width

1 Answer 75 Views
Chart
This is a migrated thread and some comments may be shown as answers.
GlenC
Top achievements
Rank 2
GlenC asked on 21 Sep 2011, 11:14 AM
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};
                myData.Add(di);
            }


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

Thanks in advance for any help/advice you may give

Regards

Glen

1 Answer, 1 is accepted

Sort by
0
Evgenia
Telerik team
answered on 26 Sep 2011, 08:47 AM
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.

Regards,
Evgenia
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Tags
Chart
Asked by
GlenC
Top achievements
Rank 2
Answers by
Evgenia
Telerik team
Share this question
or