Legend not showing

9 posts, 1 answers
  1. Marcel
    Marcel avatar
    25 posts
    Member since:
    Jan 2011

    Posted 18 Apr 2013 Link to this post

    Hello,

    I am using 2013 Q1, Silverlight 5. I understand from

    http://www.telerik.com/products/silverlight/whats-new/release_notes/q1-2013-version-2013-1-0220.aspx#chartview

     that legends are now supported in ChartView OOTB. I have looked at this demo http://demos.telerik.com/silverlight/#ChartView/Gallery/Bar but still can't get my legend to appear. I have tried both declarative and via code. What am I missing?  I could not find any documentation in the online help.

    Thank you.
    <telerik:RadTileView Name="MetricsTileView" MinimizedItemsPosition="Right" IsDockingEnabled="True" MaximizeMode="ZeroOrOne" 
                         ColumnsCount="3" RowsCount="3"  MaxHeight="550" MinimizedColumnWidth="200" MinimizedRowHeight="200"
                         SizeChanged="MetricsTileView_SizeChanged">
        <telerik:RadTileViewItem Header="Metric A" >
            <telerik:RadCartesianChart x:Name="MetricAChart" >
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:CategoricalAxis></telerik:CategoricalAxis>
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis Maximum="100"></telerik:LinearAxis>
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:RadCartesianChart.Series>
                    <telerik:LineSeries Stroke="Orange" StrokeThickness="2" ShowLabels="True">
                        <telerik:LineSeries.DataPoints>
                            <telerik:CategoricalDataPoint Category="Jan" Value="20"/>
                            <telerik:CategoricalDataPoint Category="Feb" Value="40"/>
                            <telerik:CategoricalDataPoint Category="Mar" Value="35"/>
                            <telerik:CategoricalDataPoint Category="Apr" Value="60"/>
                            <telerik:CategoricalDataPoint Category="May" Value="30"/>
                            <telerik:CategoricalDataPoint Category="Jun" Value="70"/>
                        </telerik:LineSeries.DataPoints>
                        <telerik:LineSeries.LegendSettings>
                            <telerik:SeriesLegendSettings Title="2010" />
                        </telerik:LineSeries.LegendSettings>
                    </telerik:LineSeries>                           
                </telerik:RadCartesianChart.Series>
            </telerik:RadCartesianChart>
        </telerik:RadTileViewItem>
    CalendarSummaryGlobalSeries = new BarSeries();
    CalendarSummaryGlobalSeries.ShowLabels = true;
    CalendarSummaryGlobalSeries.CombineMode = Telerik.Charting.ChartSeriesCombineMode.Stack;
    // this does not work
    CalendarSummaryGlobalSeries.LegendSettings = new SeriesLegendSettings();
    CalendarSummaryGlobalSeries.LegendSettings.SetValue(SeriesLegendSettings.TitleProperty, "Global");
    CalendarSummaryChart.Series.Add(CalendarSummaryGlobalSeries);
  2. Answer
    Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 23 Apr 2013 Link to this post

    Hi Marcel,

    In addition to setting the LegendSettings property of the series that you want to be visible in the legend, you need to declare the actual legend and to bind its items to the chart.LegendItems collection:
    <telerik:RadTileViewItem Header="Metric A" >
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
     
            <telerik:RadLegend Grid.Column="0"
                   Items="{Binding LegendItems, ElementName=MetricAChart}"/>
     
            <telerik:RadCartesianChart x:Name="MetricAChart" Grid.Column="1">
                <!--...-->
            </telerik:RadCartesianChart>
        </Grid>
    </telerik:RadTileViewItem>

    For more information, please check this help topic.
     
    Regards,
    Petar Kirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Marcel
    Marcel avatar
    25 posts
    Member since:
    Jan 2011

    Posted 30 Apr 2013 Link to this post

    Hello Petar,

    Thank you for you reply. I undestand now. One further question: is it possible to use legends and charts in a RadTileView?  I have a 3 by 3 configuration (9 charts). I would still like to be able to maximize the tiles but I do not need the docking functionality.

    Any advice is appreciated.
  5. Marcel
    Marcel avatar
    25 posts
    Member since:
    Jan 2011

    Posted 03 May 2013 Link to this post

    Yes. RadLegend, RadChartView and RadTileView work well together! Here is the XAML. I need to repeat the code for each of my nine charts. Note: the RadFluidContentControl is not needed.
    <telerik:RadTileViewItem  x:Name="DatabaseSummaryTileItem" Header="Database Summary" Position="0">
        <telerik:RadFluidContentControl ContentChangeMode="Manual"
                                State="Normal"
                                TransitionDuration="0:0:.5">
            <!--restored tile view-->
            <telerik:RadFluidContentControl.Content>
                <Border>
                    <Grid>
                            <telerik:RadCartesianChart x:Name="DatabaseSummaryChart">
                                <telerik:RadCartesianChart.HorizontalAxis>
                                    <telerik:CategoricalAxis></telerik:CategoricalAxis>
                                </telerik:RadCartesianChart.HorizontalAxis>
                                <telerik:RadCartesianChart.VerticalAxis>
                                    <telerik:LinearAxis></telerik:LinearAxis>
                                </telerik:RadCartesianChart.VerticalAxis>
                                <telerik:RadCartesianChart.Series>
                                    <telerik:LineSeries x:Name="DatabaseSummarySeries" ShowLabels="True">
                                    </telerik:LineSeries>
                                </telerik:RadCartesianChart.Series>
                            </telerik:RadCartesianChart>
                    </Grid>
                </Border>
            </telerik:RadFluidContentControl.Content>
              
            <!--small tile view-->
            <telerik:RadFluidContentControl.SmallContent>
                <Border>
                    <Grid Margin="2 2">
                            <telerik:RadCartesianChart x:Name="DatabaseSummarySmallChart">
                                <telerik:RadCartesianChart.HorizontalAxis>
                                    <telerik:CategoricalAxis></telerik:CategoricalAxis>
                                </telerik:RadCartesianChart.HorizontalAxis>
                                <telerik:RadCartesianChart.VerticalAxis>
                                    <telerik:LinearAxis></telerik:LinearAxis>
                                </telerik:RadCartesianChart.VerticalAxis>
                                <telerik:RadCartesianChart.Series>
                                    <telerik:LineSeries x:Name="DatabaseSummarySmallSeries">
                                    </telerik:LineSeries>
                                </telerik:RadCartesianChart.Series>
                            </telerik:RadCartesianChart>
                    </Grid>
                </Border>
            </telerik:RadFluidContentControl.SmallContent>
            <!--large tile view-->
            <telerik:RadFluidContentControl.LargeContent>
                <Grid>
                    <!-- avoid error 'the property is set more than once -->
                <telerik:RadLegend Grid.Column="1"
                        Items="{Binding LegendItems, ElementName=DatabaseSummaryLargeChart}" 
                       HorizontalAlignment="Right" VerticalAlignment="Top"/>
                <Grid Margin="2 2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="9*" MinWidth="0" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Column="0" 
                        Margin="0 0 0 0">
                        <telerik:RadCartesianChart x:Name="DatabaseSummaryLargeChart" MinWidth="620" MinHeight="500">
                            <telerik:RadCartesianChart.HorizontalAxis>
                                <telerik:CategoricalAxis></telerik:CategoricalAxis>
                            </telerik:RadCartesianChart.HorizontalAxis>
                            <telerik:RadCartesianChart.VerticalAxis>
                                <telerik:LinearAxis></telerik:LinearAxis>
                            </telerik:RadCartesianChart.VerticalAxis>
                            <telerik:RadCartesianChart.Series>
                                <telerik:LineSeries x:Name="DatabaseSummaryLargeSeries" ShowLabels="True">
                                    <telerik:LineSeries.LegendSettings>
                                        <telerik:SeriesLegendSettings Title="# Databases" />
                                    </telerik:LineSeries.LegendSettings>
                                </telerik:LineSeries>
                            </telerik:RadCartesianChart.Series>
                        </telerik:RadCartesianChart>
                    </StackPanel>
                    <!--<StackPanel Grid.Column="1"
                        Margin="0 0 0 0"
                        Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe UI"
                           FontSize="10"
                           Text="Legend" />
                    </StackPanel>-->
                </Grid>
                </Grid>
            </telerik:RadFluidContentControl.LargeContent>
        </telerik:RadFluidContentControl>
    </telerik:RadTileViewItem>
    // Restored Tile
    //
    DatabaseSummarySeries = DatabaseSummaryChart.Series[0] as LineSeries;
    DatabaseSummarySeries.CategoryBinding = new GenericDataPointBinding<DataPoint,
        string>() { ValueSelector = dataPoint => dataPoint.XValue };
    DatabaseSummarySeries.ValueBinding = new GenericDataPointBinding<DataPoint,
        double>() { ValueSelector = dataPoint => dataPoint.YValue };
    this.DatabaseSummarySeries.ItemsSource = dataPoints;
    // Large Tile
    // 
    DatabaseSummaryLargeSeries = DatabaseSummaryLargeChart.Series[0] as LineSeries;
    DatabaseSummaryLargeSeries.CategoryBinding = new GenericDataPointBinding<DataPoint,
        string>() { ValueSelector = dataPoint => dataPoint.XValueLarge };
    DatabaseSummaryLargeSeries.ValueBinding = new GenericDataPointBinding<DataPoint,
        double>() { ValueSelector = dataPoint => dataPoint.YValue };
    this.DatabaseSummaryLargeSeries.ItemsSource = dataPoints;
    // Small Tile
    // 
    DatabaseSummarySmallSeries = DatabaseSummarySmallChart.Series[0] as LineSeries;
    DatabaseSummarySmallSeries.CategoryBinding = new GenericDataPointBinding<DataPoint,
        string>() { ValueSelector = dataPoint => dataPoint.XValueSmall };
    DatabaseSummarySmallSeries.ValueBinding = new GenericDataPointBinding<DataPoint,
        double>() { ValueSelector = dataPoint => dataPoint.YValue };
    this.DatabaseSummarySmallSeries.ItemsSource = dataPoints;
  6. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 03 May 2013 Link to this post

    Hello Marcel,

    You asked if "is it possible to use legends and charts in a RadTileView". Yes, you can use the three controls together. I suggest you examine our online examples here and help topics here. If any questions about the TileView arise I will ask that you open a new thread for TileView so that we do not clutter the ChartView threads with unrelated inquiries.

    Regards,
    Petar Marchev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. Chinmaya
    Chinmaya avatar
    24 posts
    Member since:
    Aug 2014

    Posted 19 Aug 2014 Link to this post

    I am new to silverlight and telerik I have similar problem like "legend not showing " . I have done most of the things from code behind as i am not much comfortable with xaml. I have one base chart from which other chart are inherited  and in code sets there properties.

    i also trying to show legend for series and my code is like this
                        PointSeries valueSeries= new PointSeries();                   
                        valueSeries.PointTemplate = App.Current.Resources["PointTemplate" + SeriesCounter] as DataTemplate;       
                        valueSeries.ItemsSource = location.Parameter.Results;
                        valueSeries.CategoryBinding = new PropertyNameDataPointBinding("Time");
                        valueSeries.ValueBinding = new PropertyNameDataPointBinding("Val");                  
                        valueSeries.LegendSettings = new SeriesLegendSettings() { Title = "Value Series" };

    but i am not getting the legend

    please help me with code snipset to declare the actual legend and to bind its items to the chart.LegendItems collection:
  8. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 20 Aug 2014 Link to this post

    Hello Chinmaya,

    Please explore the links provided earlier in this thread (online examples here and help topics here). You will not see a legend by only setting the LegendSettings property. This property tells the chart to populate the LegendItems property by producing a legend item per series. You then need to include a RadLegend control that is bound the chart:
    RadLegend legend = new RadLegend();
    legend.Items = chart1.LegendItems;

    Regards,
    Petar Marchev
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  9. Chinmaya
    Chinmaya avatar
    24 posts
    Member since:
    Aug 2014

    Posted 02 Sep 2014 in reply to Petar Marchev Link to this post

    Hello Marchev,

    I tried the above code but still not getting the legend.
     
    my corrected code is as below.

      RadLegend legendSettings = new RadLegend();
                        legendSettings.Items = chart.LegendItems;
                        legendSettings.Visibility = Visibility.Visible;

     PointSeries valueSeries = new PointSeries();
                            valueSeries.PointTemplate = App.Current.Resources["PointTemplate" + SeriesCounter] as DataTemplate;                       
                            valueSeries.ItemsSource = location.Parameter.Results;
                            valueSeries.FontSize= 1;
                            valueSeries.CategoryBinding = new PropertyNameDataPointBinding("Time");
                            valueSeries.ValueBinding = new PropertyNameDataPointBinding("Val");
                            valueSeries.Visibility = System.Windows.Visibility.Visible;
                            valueSeries.LegendSettings = new SeriesLegendSettings();

    Thank you very much for the support.

     
  10. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 03 Sep 2014 Link to this post

    Hello Chinmaya,

    You can debug (on the click of a button) and see if the LegendItems property of the chart is properly populated. You can than see if the Items property of the RadLegend is properly bound and if the correct count of items is in the collection. Make sure that you have inserted the RadLegend in the visual tree, in a location that you can see. You can use some UI tool (such as free WPF inspector) to see if visual elements are populated in the legend.

    If these do not help, please create a small project to reproduce this behavior and send it to us so that we can take a look and see what is missing.

    Regards,
    Petar Marchev
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top
DevCraft banner