scroll x axis in chart

3 posts, 0 answers
  1. Ankit
    Ankit avatar
    5 posts
    Member since:
    Jun 2014

    Posted 22 Aug 2014 Link to this post

    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. Ankit
    Ankit avatar
    5 posts
    Member since:
    Jun 2014

    Posted 22 Aug 2014 in reply to Ankit Link to this post

    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
  3. DevCraft banner
  4. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 27 Aug 2014 Link to this post

    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.

     
Back to Top