How to change location of Legends & Have scrolling only for chart and not legend

7 posts, 0 answers
  1. Yusuf
    Yusuf avatar
    15 posts
    Member since:
    Jan 2009

    Posted 04 Aug 2009 Link to this post

    Hi,

    In the implementation that I have the chart has lots of data points and hence i have implemented a scroll viewer which allows user to scroll horizontally. I wanted to change the location of the default chart legends which is always shown at the rightmost end to appear at the bottom.

    This is the default view that we get

    ChartTitle
    Chart   ChartLegend

    I want it like
    ChartTitle
    Chart
    ChartLegend

    Also is it possible to just scroll the chart view and keep the title and legend at fixed location, i.e instead of having all three in scroll viewer have only Chart in the scroll viewer? Here is the current code that I have

    <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Grid.Row="1" Grid.Column="1">
                <telerikChart:RadChart x:Name="SeriesChart" >
                    <telerikChart:RadChart.LegendStyle>
                        <Style TargetType="Chart:ChartLegend">
                            <Setter Property="ItemsPanel" >
                                <Setter.Value>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal" />
                                    </ItemsPanelTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </telerikChart:RadChart.LegendStyle>
                </telerikChart:RadChart>  
            </ScrollViewer>

    I don't want to have a new Chart Area added, i want to use the default view because of custom series mapping that i have in the code behind.
    I want to achieve a view like this?
    ChartTitle
    <ScrollViewer>
    Chart
    <ScrollViewer>
    ChartLegend
    Thanks & Regards,
    Yusuf
  2. Yusuf
    Yusuf avatar
    15 posts
    Member since:
    Jan 2009

    Posted 04 Aug 2009 Link to this post

    Okie, here is what i did
    <telerikChart:RadChart x:Name="SeriesChart" UseDefaultLayout="False" Grid.Row="0">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="1*" />
                            <RowDefinition Height="8*" />
                            <RowDefinition Height="1*" />
                        </Grid.RowDefinitions>
                        
                        <Grid.Resources>
                            <ResourceDictionary>
                                <Style x:Key="MyCustomLegendStyle" TargetType="Chart:ChartLegend">
                                    <Setter Property="ItemsPanel" >
                                        <Setter.Value>
                                            <ItemsPanelTemplate>
                                                <StackPanel Orientation="Horizontal" />
                                            </ItemsPanelTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </ResourceDictionary>
                        </Grid.Resources>

                        <Chart:ChartLegend x:Name="ChartLegend1" Header="Legend"
                                     Grid.Row="2" Style="{StaticResource MyCustomLegendStyle}" HorizontalAlignment="Left"/>

                    <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Grid.Row="1">
                        <Chart:ChartArea x:Name="ChartArea1" LegendName="ChartLegend1"/>
                    </ScrollViewer>
                        
                    <Chart:ChartTitle Grid.Row="0" x:Name="ChartTitle1"
                                    VerticalAlignment="Top" HorizontalAlignment="Left"/>
                    </Grid>
                </telerikChart:RadChart>

    But the problem now is I am not able to see anything in the Legend or the Title after setting some value from code behind. Whatever series I plot are shown on the chart but no legend and no title. Also the horizontal scroll bar is not visible any more...
  3. Yusuf
    Yusuf avatar
    15 posts
    Member since:
    Jan 2009

    Posted 05 Aug 2009 Link to this post

    Any Ideas? If someone can post some sample xaml to help...

    Thanks & Regards,
    Yusuf Nazami
  4. Yusuf
    Yusuf avatar
    15 posts
    Member since:
    Jan 2009

    Posted 07 Aug 2009 Link to this post

    Hi,

    Finally I got the legend and the title arranged as I want it but surprisingly still the scroll viewer is not appaearing as the data points grow.

    Here is the XAML, can I have a solution to this scrolling problem for the chart?

    <Grid x:Name="LayoutRoot" Background="White">

                <telerikChart:RadChart x:Name="SeriesChart" UseDefaultLayout="False" telerikDragDrop:RadDragAndDropManager.AllowDrop="True">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="1.5*" />
                            <RowDefinition Height="7*" />                        
                        </Grid.RowDefinitions>
                        <Grid.Resources>
                            <ResourceDictionary>
                                <Style x:Key="MyCustomLegendStyle" TargetType="Chart:ChartLegend">
                                    <Setter Property="ItemsPanel" >
                                        <Setter.Value>
                                            <ItemsPanelTemplate>
                                                <StackPanel Orientation="Horizontal" />
                                            </ItemsPanelTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </ResourceDictionary>
                        </Grid.Resources>

                    <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Grid.Row="1" >
                        <Chart:ChartArea x:Name="ChartArea1" LegendName="ChartLegend1" Grid.Row="1" />
                    </ScrollViewer>
                    
                        <StackPanel Orientation="Horizontal"  Grid.Row="0">
                        <Chart:ChartTitle  x:Name="ChartTitle1"
                                    VerticalAlignment="Top" HorizontalAlignment="Left" />
                        
                            <Chart:ChartLegend x:Name="ChartLegend1"
                                     Style="{StaticResource MyCustomLegendStyle}" HorizontalAlignment="Left" />
                       
                        </StackPanel>
                    </Grid>
                </telerikChart:RadChart>

    Thanks & Regards,
    Yusuf Nazami
  5. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 07 Aug 2009 Link to this post

    Hello Yusuf,

    When the points grow they get less wide to fit in the space allotted. The ChartArea will not grow in size and will now cause the ScrollViewer to trigger its scrollbars.

    All the best,
    Vladimir Milev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. tran ai
    tran ai avatar
    1 posts
    Member since:
    Mar 2010

    Posted 19 Mar 2010 Link to this post

    Thank you for your solution, but I do the same like you and no data will be shown in the screen. Do you have any idea?
  7. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 24 Mar 2010 Link to this post

    Hi guys,

    We have some new legend functionality available now. Check it out here.

    All the best,
    Vladimir Milev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top