Scroll Only

10 posts, 0 answers
  1. Natália
    Natália avatar
    36 posts
    Member since:
    Jun 2010

    Posted 17 Jun 2010 Link to this post

    Hello

    I am working on a chart type StackedBar and would like to add
    Scroll to him.
    are many columns and viewing area is small.

    How can I do this in XAML?
  2. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 22 Jun 2010 Link to this post

    Hi Natália,

    This is a sample implementation of RadChart with scrol-only chart area:

    <telerik:RadChart x:Name="RadChart1">
                <telerik:RadChart.DefaultView>
                    <telerik:ChartDefaultView>
                        <telerik:ChartDefaultView.ChartArea>
                            <telerik:ChartArea>
                                <telerik:ChartArea.ZoomScrollSettingsX>
                                    <telerik:ZoomScrollSettings RangeStart="0" RangeEnd="0.2" ScrollMode="ScrollOnly"></telerik:ZoomScrollSettings>
                                </telerik:ChartArea.ZoomScrollSettingsX>
                            </telerik:ChartArea>
                        </telerik:ChartDefaultView.ChartArea>
                    </telerik:ChartDefaultView>
                </telerik:RadChart.DefaultView>
            </telerik:RadChart>


    Regards,
    Ves
    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
  3. DevCraft banner
  4. Natália
    Natália avatar
    36 posts
    Member since:
    Jun 2010

    Posted 29 Jun 2010 Link to this post

    Hello,

    I added the scroll bar to the graph code as above.
    However, the image of the graph does not move as you move the scroll bar.
     
    What remains for him to render the chart image according to the scroll bar?

    Thanks ...
  5. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 02 Jul 2010 Link to this post

    Hello Natália,

    Please, find attached a small example showing such chart. Note, that you need to have a mapping for either XValue or XCategory, so that the axis is aware of the bars position.

    Regards,
    Ves
    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
  6. Natália
    Natália avatar
    36 posts
    Member since:
    Jun 2010

    Posted 02 Jul 2010 Link to this post

    Hi,

    Thanks for the responses.
    But it still did not understand how the scroll bar works.
    I'm sending part of the code for you to tell me if this way will be possible to use the scroll or should I change the structure of the graph.

    Thank you!


    XAML:

    <Telerik_Windows_Controls_Charting:ChartArea.ZoomScrollSettingsX> 
        <Telerik_Windows_Controls_Charting:ZoomScrollSettings RangeStart="0"   RangeEnd="0.1" ScrollMode="ScrollOnly">  
        </Telerik_Windows_Controls_Charting:ZoomScrollSettings> 
    </Telerik_Windows_Controls_Charting:ChartArea.ZoomScrollSettingsX> 

    <Telerik_Windows_Controls_Charting:ChartArea.DataSeries>
            <Telerik_Windows_Controls_Charting:DataSeries x:Name="Serie1" Label="Serie1" LegendLabel="serie1">
             <Telerik_Windows_Controls_Charting:DataSeries.Definition>
              <Telerik_Windows_Controls_Charting:StackedBarSeriesDefinition ShowItemLabels="False" ShowItemToolTips="True" StackGroupName="2009"/>
             </Telerik_Windows_Controls_Charting:DataSeries.Definition>
             <Telerik_Windows_Controls_Charting:DataPoint YValue="10"/>
             <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="10"/>
             <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />
            </Telerik_Windows_Controls_Charting:DataSeries>
            <Telerik_Windows_Controls_Charting:DataSeries x:Name="Serie2" Label="Serie2" LegendLabel="serie2">
             <Telerik_Windows_Controls_Charting:DataSeries.Definition>
              <Telerik_Windows_Controls_Charting:StackedBarSeriesDefinition ShowItemLabels="False" ShowItemToolTips="True" StackGroupName="2009"/>
             </Telerik_Windows_Controls_Charting:DataSeries.Definition>
             <Telerik_Windows_Controls_Charting:DataPoint YValue="20"/>
             <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="20"/>
             <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />
             <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />
            </Telerik_Windows_Controls_Charting:DataSeries>
    </Telerik_Windows_Controls_Charting:ChartArea.DataSeries> 

     

     

     

  7. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 07 Jul 2010 Link to this post

    Hello Natália,

    Zooming and Scrolling in RadChart is only available when the chart is databound, i.e. it is populated through its ItemsSource property as shown in the example I have attached to my previous reply. You can find more details about zooming and scrolling in this help topic. For populating RadChart with series mapping please check the following article - DataBinding with Manual Series Mappings.


    Best regards,
    Ves
    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
  8. Manish Kumar
    Manish  Kumar avatar
    62 posts
    Member since:
    Feb 2010

    Posted 16 Dec 2010 Link to this post

    Hi

    I also have the same issue. But after changing my code to incorporate data through the item source as through the below method.

    /// <summary>
    /// Loads the time chart data.
    /// </summary>
    /// <param name="chartData"></param>
    private void LoadTimeChartData(TimeChartData chartData)
    {
    try
    {
    this.chrtMain.DefaultView.ChartArea.DataSeries.Clear();
    List<DataPoint> lstDataPoints = new List<DataPoint>();
    SeriesMapping seriesMapping = new SeriesMapping();
    //Int32 iCollectionIndex = 0;
    if (chartData._ListData != null && chartData._ListData.Count > 0)
    {
    //Sets Chart Type
    foreach (TimeDataSet timeDataSet in chartData._ListData)
    {

    DataSeries dataSeries = new DataSeries();
    //Set the chart definition
    switch (this.ChartType)
    {
    case ChartType.Line:
    dataSeries.Definition = new LineSeriesDefinition();
    seriesMapping.SeriesDefinition = new LineSeriesDefinition();
    break;
    case ChartType.Bar2D:
    dataSeries.Definition = new BarSeriesDefinition();
    seriesMapping.SeriesDefinition = new BarSeriesDefinition();
    break;
    case ChartType.Bar3D:
    dataSeries.Definition = new Bar3DSeriesDefinition();
    seriesMapping.SeriesDefinition = new Bar3DSeriesDefinition();
    break;
    case ChartType.Pie:
    dataSeries.Definition = new Pie3DSeriesDefinition();
    seriesMapping.SeriesDefinition = new Pie3DSeriesDefinition();
    break;
    case ChartType.StackedBar:
    dataSeries.Definition = new StackedBarSeriesDefinition();
    seriesMapping.SeriesDefinition = new StackedBarSeriesDefinition();
    break;
    case ChartType.Area:
    dataSeries.Definition = new Area3DSeriesDefinition();
    seriesMapping.SeriesDefinition = new Area3DSeriesDefinition();
    break;
    default:
    dataSeries.Definition = new BubbleSeriesDefinition();
    seriesMapping.SeriesDefinition = new BubbleSeriesDefinition();
    break;
    }

    //Item tool tip format setting
    dataSeries.Definition.ItemToolTipFormat = "0";
    seriesMapping.SeriesDefinition.ItemToolTipFormat = "0";

    //Show tool tip
    dataSeries.Definition.ShowItemToolTips = true;
    seriesMapping.SeriesDefinition.ShowItemToolTips = true;

    //Show item lables
    dataSeries.Definition.ShowItemLabels = true;
    seriesMapping.SeriesDefinition.ShowItemLabels = true;

    //Set Legend Label
    dataSeries.LegendLabel = timeDataSet._XLabelDetails._ProductName;
    seriesMapping.LegendLabel = timeDataSet._XLabelDetails._ProductName;

    //Set the SeriesItemLableStyle
    dataSeries.Definition.SeriesItemLabelStyle = this.EnableStyle ? Application.Current.Resources["SeriesItemLabelStyle"] as Style : null;
    seriesMapping.SeriesDefinition.SeriesItemLabelStyle = this.EnableStyle ? Application.Current.Resources["SeriesItemLabelStyle"] as Style : null;

    if (this.LegendValuesToDisplay != null)
    {
    //TODO: to be displayed based on the legend values displayed.

    dataSeries.LegendLabel = dataSeries.LegendLabel + " [" + timeDataSet._XLabelDetails._ShiftName + "]";

    foreach (string displayValue in this.LegendValuesToDisplay)
    {

    }
    }


    //Set the data points
    foreach (TimeDataPoint timeDataPoint in timeDataSet._Points)
    {
    ItemMapping itemMapping = new ItemMapping();
    itemMapping.DataPointMember = DataPointMember.YValue;
    itemMapping.FieldName = "YValue";
    seriesMapping.ItemMappings.Add(itemMapping);

    itemMapping = new ItemMapping();
    itemMapping.DataPointMember = DataPointMember.XCategory;
    itemMapping.FieldName = "XCategory";
    seriesMapping.ItemMappings.Add(itemMapping);

    itemMapping = new ItemMapping();
    itemMapping.DataPointMember = DataPointMember.LegendLabel;
    itemMapping.FieldName = "LegendLabel";
    seriesMapping.ItemMappings.Add(itemMapping);

    DataPoint dataPoint = new DataPoint();
    dataPoint.XCategory = timeDataPoint._XValue;
    dataPoint.YValue = timeDataPoint._YValue;
    dataPoint.LegendLabel = timeDataSet._XLabelDetails._ProductName;
    dataPoint.DataItem = timeDataSet;
    lstDataPoints.Add(dataPoint);
    dataSeries.Add(dataPoint);
    }

    //Add the dataSeries to the chart control
    //this.chrtMain.DefaultView.ChartArea.DataSeries.Add(dataSeries);
    if (this.EnableChartScrolling)

            this.chrtMain.ItemsSource = lstDataPoints; 
            this.chrtMain.SeriesMappings.Add(seriesMapping);
    }
    else

            //Add the dataSeries to the chart control 
            this.chrtMain.DefaultView.ChartArea.DataSeries.Add(dataSeries);
    }
    }
    }
    }
    catch
    {
    //To be cached by the caller.
    throw;
    }
    }


    And I am setting scrolling functionality on UserControl_Load method

    private void UserControl_Loaded(object sender, RoutedEventArgs e)

        if (this.EnableChartScrolling) 
        { 
                this.chrtMain.DefaultView.ChartArea.ZoomScrollSettingsX.SetSelectionRange(0, .5); 
                this.chrtMain.DefaultView.ChartArea.EnableAnimations = false; 
           } 
     }

    But the thing is though i am able to populate the chart successfully but scrolling do not happen after setting range as SetSelectionRange(0, .5); 
    can you please guide me where i am going wrong. Another this I have the other methods wher i have set the scrolling functionality as below:

     

    /// <summary>
    /// Sets the scrolling functionality for the chart control.
    /// </summary>
    private void SetChartScrolling()
    {
    this.chrtMain.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = this.EnableChartScrolling ? ScrollMode.ScrollOnly: ScrollMode.None;
    this.chrtMain.DefaultView.ChartArea.ZoomScrollSettingsX.RangeStart = 0;
    this.chrtMain.DefaultView.ChartArea.ZoomScrollSettingsX.RangeEnd = 1;

    //this.chrtMain.DefaultView.ChartArea.ZoomScrollSettingsX.PropertyChanged += new PropertyChangedEventHandler(ZoomScrollSettingsX_PropertyChanged);
    }

    void ZoomScrollSettingsX_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
    ZoomScrollSettings settings = sender as ZoomScrollSettings;
    int iRangeMaxIndex = PdataSeries.Count;
    iPStart = (int)Math.Ceiling(iRangeMaxIndex * settings.RangeStart);
    iPEnd = (int)Math.Ceiling(iRangeMaxIndex * settings.RangeEnd);
    this.chrtMain.DefaultView.ChartArea.ZoomScrollSettingsX.SetSelectionRange(settings.RangeStart, settings.RangeEnd);
    //(this.chrtMain.DefaultView.ChartArea.DataSeries[0]).Count;

    /*
    var result = from DataSeries ds in this.chrtMain.DefaultView.ChartArea.DataSeries
    where ds
    */
    }

     

    thanks 
    Manish
     

  9. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 21 Dec 2010 Link to this post

    Hello Manish Kumar,

    I am afraid, it is hard to investigate such issue by just looking at several pages of code. The code seems to be correct, given that the correct part is executed i.e. the one that does not add DataPoints manually. Still, in order to get a specific advice, I suggest that you create a small project, which shows your configuration and reproduces the problem. Once we are able to debug it, we will get back to you with our findings.

    Best regards,
    Ves
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  10. Shanmuga
    Shanmuga avatar
    15 posts
    Member since:
    Mar 2015

    Posted 30 Mar 2015 in reply to Ves Link to this post

    Hi Team,

    I used above code it's working fine.. But not displayed Legend Label ..

    <telerikChart:RadChart x:Name="RadChart1" SeriesMappings="{Binding Mappings}" ItemsSource="{Binding Path=SectorInfos}" Width="586">
                            <telerik:RadChart.DefaultView>
                                <telerik:ChartDefaultView>
                                    <telerik:ChartDefaultView.ChartArea>
                                        <telerik:ChartArea>
                                            <telerik:ChartArea.ZoomScrollSettingsY>
                                                <telerik:ZoomScrollSettings ScrollMode="ScrollAndZoom"/>
                                            </telerik:ChartArea.ZoomScrollSettingsY>
                                            <telerik:ChartArea.ZoomScrollSettingsX>
                                                <telerik:ZoomScrollSettings ScrollMode="ScrollAndZoom"/>
                                            </telerik:ChartArea.ZoomScrollSettingsX>
                                        </telerik:ChartArea>
                                    </telerik:ChartDefaultView.ChartArea>
                                </telerik:ChartDefaultView>
                            </telerik:RadChart.DefaultView>
                        </telerikChart:RadChart>

    Please Help Me.. What mistake i did...


    public void DrawDashboard()
            {
                ItemWidthPercent = 20;
                SeriesMapping seriesMapping = new SeriesMapping { LegendLabel = "Alpha 0" };
                seriesMapping.ItemMappings.Add(new ItemMapping("Sector0", DataPointMember.YValue));
                seriesMapping.ItemMappings.Add(new ItemMapping("CellName", DataPointMember.XCategory));
                seriesMapping.SeriesDefinition = new StackedBarSeriesDefinition() { ShowItemLabels = false };


                SeriesMapping seriesMapping1 = new SeriesMapping { LegendLabel = "Alpha 1" };
                seriesMapping1.ItemMappings.Add(new ItemMapping("Sector1", DataPointMember.YValue));
                seriesMapping1.ItemMappings.Add(new ItemMapping("CellName", DataPointMember.XCategory));
                seriesMapping1.SeriesDefinition = new StackedBarSeriesDefinition() { ShowItemLabels = false };


            StackedBarSeriesDefinition horBar = new StackedBarSeriesDefinition();
            seriesMapping1.SeriesDefinition = horBar;
                seriesMapping.SeriesDefinition = horBar;

             var seriesMappingcollection = new SeriesMappingCollection();

                seriesMappingcollection.Add(seriesMapping);
                seriesMappingcollection.Add(seriesMapping1);

            this.Mappings = seriesMappingcollection;
    }
  11. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 31 Mar 2015 Link to this post

    Hi Shanmuga,

    It does not become clear what might be causing this issue. I tried to reproduce it with a similar code to yours and the legend label appeared just fine. Please take a look at the attached sample as it might clear where your issue is located. More information on how the legend works can be found here.

    Hope it helps.

    Regards,
    Peshito
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
DevCraft banner