X Axis Scrolling Land Area - Silverlight Column Series

Question

I have a column series chart that works fine.

I have a function that I have to add to this, I want horizontal scrolling to be included in the plot area, which is the x axis.

Here is a screenshot:

If you see a screenshot, I have six elements, and the panel is very thin due to more elements, so suppose that if I have 20 elements, then the bars will not be visible at all.

So, can we scroll horizontally on the x axis?

EDIT

ResourceDictionary.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:convertor="clr-namespace:ChartingDV.Provider" xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" xmlns:chartingprimitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"> <ControlTemplate x:Key="PhoneChartPortraitTemplate" TargetType="charting:Chart"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <datavis:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}"/> <datavis:Legend x:Name="Legend" Grid.Row="2" Header="{TemplateBinding LegendTitle}" Style="{TemplateBinding LegendStyle}"> <datavis:Legend.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </datavis:Legend.ItemsPanel> <datavis:Legend.Template> <ControlTemplate TargetType="datavis:Legend"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions> <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" BorderThickness="0" Padding="0" IsTabStop="False"> <ItemsPresenter x:Name="Items" Margin="10,0,10,10"/> </ScrollViewer> </Grid> </ControlTemplate> </datavis:Legend.Template> </datavis:Legend> <chartingprimitives:EdgePanel Grid.Column="0" Grid.Row="1" x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}"> <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" /> </chartingprimitives:EdgePanel> </Grid> </ControlTemplate> <!-- Chart Style for Phone --> <Style x:Key="PhoneChartStyle" TargetType="charting:Chart"> <Setter Property="IsTabStop" Value="False" /> <Setter Property="Padding" Value="10" /> <Setter Property="Palette"> <Setter.Value> <datavis:ResourceDictionaryCollection> <!-- Blue --> <ResourceDictionary> <SolidColorBrush x:Key="Background" Color="#E85F3D"/> <Style x:Key="DataPointStyle" TargetType="Control"> <Setter Property="Background" Value="{StaticResource Background}" /> </Style> <Style x:Key="DataShapeStyle" TargetType="Shape"> <Setter Property="Stroke" Value="{StaticResource Background}" /> <Setter Property="StrokeThickness" Value="2" /> <Setter Property="StrokeMiterLimit" Value="1" /> <Setter Property="Fill" Value="{StaticResource Background}" /> </Style> </ResourceDictionary> <!-- Red --> <ResourceDictionary> <SolidColorBrush x:Key="Background" Color="#76D164"/> <Style x:Key="DataPointStyle" TargetType="Control"> <Setter Property="Background" Value="{StaticResource Background}" /> </Style> <Style x:Key="DataShapeStyle" TargetType="Shape"> <Setter Property="Stroke" Value="{StaticResource Background}" /> <Setter Property="StrokeThickness" Value="2" /> <Setter Property="StrokeMiterLimit" Value="1" /> <Setter Property="Fill" Value="{StaticResource Background}" /> </Style> </ResourceDictionary> <!-- Light Green --> <ResourceDictionary> <SolidColorBrush x:Key="Background" Color="#648ED1"/> <Style x:Key="DataPointStyle" TargetType="Control"> <Setter Property="Background" Value="{StaticResource Background}" /> </Style> <Style x:Key="DataShapeStyle" TargetType="Shape"> <Setter Property="Stroke" Value="{StaticResource Background}" /> <Setter Property="StrokeThickness" Value="2" /> <Setter Property="StrokeMiterLimit" Value="1" /> <Setter Property="Fill" Value="{StaticResource Background}" /> </Style> </ResourceDictionary> </datavis:ResourceDictionaryCollection> </Setter.Value> </Setter> <Setter Property="LegendStyle"> <Setter.Value> <Style TargetType="datavis:Legend"> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/> <Setter Property="Margin" Value="20"/> </Style> </Setter.Value> </Setter> <Setter Property="ChartAreaStyle"> <Setter.Value> <Style TargetType="Panel"> <Setter Property="MinWidth" Value="100" /> <Setter Property="MinHeight" Value="75" /> </Style> </Setter.Value> </Setter> <Setter Property="PlotAreaStyle"> <Setter.Value> <Style TargetType="Grid"> <Setter Property="Background" Value="Transparent"/> </Style> </Setter.Value> </Setter> <Setter Property="Template" Value="{StaticResource PhoneChartPortraitTemplate}"/> </Style> </ResourceDictionary> 

In the XAMl file:

 <charting:Chart Name="barChart" Style="{StaticResource PhoneChartStyle}" Template="{StaticResource PhoneChartPortraitTemplate}"> <charting:Chart.Series> <charting:ColumnSeries Title="Incorrect" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" AnimationSequence="Simultaneous"> </charting:ColumnSeries> <charting:ColumnSeries Title="Correct" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" AnimationSequence="Simultaneous"> </charting:ColumnSeries> <charting:ColumnSeries Title="Skipped" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" AnimationSequence="Simultaneous"> </charting:ColumnSeries> </charting:Chart.Series> </charting:Chart> 

Answer 1

Finally, I solved it, but I did not make any changes to the API; instead, I followed the approach below.

1) We have the ability to scroll through the entire schedule.

2) Scroll through the entire histogram and then delete the Y axis values.

3) Now create a Dummy layout using the Y axis values using the Grid row definitions . This will be your Grid Root.

4) Now inside the root grid you draw a grid.

5) Now, when you take n no tests, you can scroll the chart, but your dummy layout with Y axis parameters remains constant, because for the user it looks like stripes scroll.

Enjoy :)