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

scroll x axis in chart

2 Answers 112 Views
Chart
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Ankit
Top achievements
Rank 1
Ankit asked on 22 Aug 2014, 10:55 AM
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.    }

2 Answers, 1 is accepted

Sort by
0
Ankit
Top achievements
Rank 1
answered on 22 Aug 2014, 11:26 AM
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
0
Ves
Telerik team
answered on 27 Aug 2014, 10:14 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Chart
Asked by
Ankit
Top achievements
Rank 1
Answers by
Ankit
Top achievements
Rank 1
Ves
Telerik team
Share this question
or