scroll x axis in chart

[Ankit]

Hi,
I am create a dynamic Bar chart on bases of data comes from web services.
So there is not fix size of categories binded to x axis.
So if there is large size of categories and if each has more then two bar then i need a scroll that chart. So how can I scroll that Bar chart ?
I am added my example please help me to scroll char horizontally.
I have trie Pan and Zoom behaviour of chart but i do want to zoom the chart i just wanna scroll chart.
Thank in advance.
My Code:

Xaml:

01.<ScrollViewer HorizontalScrollBarVisibility="Visible" >
02.
03.
04.       <Grid>
05.
06.           <chart:RadCartesianChart x:Name="chart" Foreground="#FFFB0B0B" >
07.
08.               <chart:RadCartesianChart.HorizontalAxis>
09.                   <chart:CategoricalAxis Foreground="#FFF0A050"/>
10.               </chart:RadCartesianChart.HorizontalAxis>
11.
12.               <chart:RadCartesianChart.VerticalAxis>
13.                   <chart:LinearAxis Foreground="#FF966432"/>
14.               </chart:RadCartesianChart.VerticalAxis>
15.               <chart:BarSeries CategoryBinding="Category" CombineMode="Cluster"  ValueBinding="Value" ShowLabels="True"   ItemsSource="{Binding}" Foreground="#FF2300FF" ScrollViewer.HorizontalScrollBarVisibility="Visible">
16.                   <chart:BarSeries.PointTemplate>
17.                       <DataTemplate>
18.                           <Rectangle Width="20" Fill="{Binding DataItem.colors}"/>
19.                       </DataTemplate>
20.                   </chart:BarSeries.PointTemplate>
21.               </chart:BarSeries>
22.           </chart:RadCartesianChart>
23.
24.       </Grid>
25.   </ScrollViewer>

C#:

01.public partial class Charts : PhoneApplicationPage
02.    {
03.        public Charts()
04.        {
05.            InitializeComponent();
06.            List<barseriess> bar = new List<barseriess>();
07.            for (int i = 0; i < 13; i++)
08.            {
09.                for (int j = 0; j < 4; j++)
10.                {
11.                    string col="#FFFFFF";
12.                    if (j == 0)
13.                    {
14.                        col = "#FFFFFF00";
15.                    }
16.                    else if(j==1)
17.                    {
18.                        col = "#FFFF00FF";
19.                    }
20.                    else if (j == 2)
21.                    {
22.                        col = "#FFFFFF00";
23.                    }
24.                    else if (j == 3)
25.                    {
26.                        col = "#FF00FFFF";
27.                    }
28.                    if (i == 0)
29.                    {
30.
31.                    }
32.                    Debug.WriteLine("value=" + (i + j + 2).ToString());
33.                    Debug.WriteLine("Categories=" + (i).ToString());
34.                    bar.Add(new barseriess(col, i.ToString(), (i + j+2).ToString()));
35.                }
36.            }
37.            BarSeries barseries = ((BarSeries)chart.Series[0]);
38.            barseries.ValueBinding = new GenericDataPointBinding<barseriess, double?>() { ValueSelector = barseriess => Convert.ToDouble(barseriess.values) };
39.            barseries.CategoryBinding = new GenericDataPointBinding<barseriess, string>() { ValueSelector = barseriess => barseriess.cat };
40.            barseries.ItemsSource = bar;
41.
42.        }
43.        public class barseriess
44.        {
45.            public string colors { get; set; }
46.            public string cat { get; set; }
47.            public string values { get; set; }
48.            public barseriess() { }
49.            public barseriess(string colors, string cat, string values)
50.            {
51.                this.colors = colors;
52.                this.cat = cat;
53.                this.values = values;
54.            }
55.        }
56.    }

[Ankit]

Hi, also please give me guide lines for downloading example of telerik controls which are in windows phone 8 app. I have downloaded app from the store but i need all the running examples so i can just copy past that code in my app.
Thanks

[Ves]

Hi Ankit,

The chart aims to draw its content within the available space. So, if there are two bars, they will be drawn relatively wide. If there are 20 bars, they will appear narrower, but still by default the chart will show them all. This is where the ChartPanAndZoomBehavior comes in handy. You can disable zoom and have it panning only for X axis like this:

<telerikChart:ChartPanAndZoomBehavior ZoomMode="None" PanMode="Horizontal"/>

Now, you will need to calculate the value for the Zoom property of RadCartesianChart, so that the chart is displayed pre-zoomed. E.g. if you have 6 bars and you only need to show 2, you need to set the Zoom property to a Size with width 3 and height 1: new Size(3, 1). The width stands for X zoom factor and the height -- for Y.

Onto the other question -- the examples are found in the installation folder, usually one that looks like this:

C:\Program Files (x86)\Telerik\UI for Windows Phone 8 Q2 2014\Examples

Best regards,
Ves
Telerik