Please help me to implement horizontal scrollbar dynamically in the chart

[gautham]

Hello,

   I have to implement horizontal scrollbar dynamically in the chart e.g:(http://demos.telerik.com/silverlight/#Chart/ZoomScroll.).
Here I am defining content of the chart dynamically as shown (code behind).

My code:

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Charting;
using System.Collections.ObjectModel;

namespace Test_Project
{
    public partial class MainPage : UserControl
    {
        /// <summary>
        /// The old rad chart
        /// </summary>
        private RadChart oldRDChart = null;

        private List<Series> series = new List<Series>();

        private ChartArea chartArea;

        private RadButton zoomInButton;

        private RadButton zoomOutButton;

        public MainPage()
        {
            InitializeComponent();
            this.XValuePlottingProperty = "ProductName";
            series = new List<Series>()
              {
                  new Series(){ IsChecked = true, PropertyName ="SaleValue" },
                  new Series(){ IsChecked = true, PropertyName ="ProductQuantity" },
              };
            CreateChart();
        }

        public void ChartDataBound(object sender, ChartDataBoundEventArgs e)
        {
            CanZoomIn();
            CanZoomOut();
        }

        private void zoomOutButton_Click(object sender, RoutedEventArgs e)
        {
            this.chartArea.ZoomScrollSettingsX.SuspendNotifications();

            double zoomCenter = this.chartArea.ZoomScrollSettingsX.RangeStart + (this.chartArea.ZoomScrollSettingsX.Range / 2);
            double newRange = Math.Min(1, this.chartArea.ZoomScrollSettingsX.Range) * 2;

            if (zoomCenter + (newRange / 2) > 1)
                zoomCenter = 1 - (newRange / 2);
            else if (zoomCenter - (newRange / 2) < 0)
                zoomCenter = newRange / 2;

            this.chartArea.ZoomScrollSettingsX.RangeStart = Math.Max(0, zoomCenter - newRange / 2);
            this.chartArea.ZoomScrollSettingsX.RangeEnd = Math.Min(1, zoomCenter + newRange / 2);
            this.chartArea.ZoomScrollSettingsX.ResumeNotifications();
            this.zoomInButton.IsEnabled = CanZoomIn();
            this.zoomOutButton.IsEnabled = CanZoomOut();
        }

        private void zoomInButton_Click(object sender, RoutedEventArgs e)
        {
            this.chartArea.ZoomScrollSettingsX.SuspendNotifications();

            double zoomCenter = this.chartArea.ZoomScrollSettingsX.RangeStart + (this.chartArea.ZoomScrollSettingsX.Range / 2);
            double newRange = Math.Max(this.chartArea.ZoomScrollSettingsX.MinZoomRange, this.chartArea.ZoomScrollSettingsX.Range) / 2;
            this.chartArea.ZoomScrollSettingsX.RangeStart = Math.Max(0, zoomCenter - (newRange / 2));
            this.chartArea.ZoomScrollSettingsX.RangeEnd = Math.Min(1, zoomCenter + (newRange / 2));

            this.chartArea.ZoomScrollSettingsX.ResumeNotifications();

            this.zoomInButton.IsEnabled = CanZoomIn();
            this.zoomOutButton.IsEnabled = CanZoomOut();
        }

        public bool CanZoomIn()
        {
            if (this.chartArea == null)
                return false;

            return this.chartArea.ZoomScrollSettingsX.Range > this.chartArea.ZoomScrollSettingsX.MinZoomRange;
        }

        public bool CanZoomOut()
        {
            if (this.chartArea == null)
                return false;

            return this.chartArea.ZoomScrollSettingsX.Range < 1d;

        }

        public void CreateChart()
        {

            if (this.oldRDChart != null)
            {
                radChartViewRegion.Children.Remove(this.oldRDChart);
            }

            this.oldRDChart = new RadChart()
            {
                Name = "radChart",
                UseDefaultLayout = false,
            };

            this.oldRDChart.DefaultView = new ChartDefaultView();
            this.oldRDChart.DefaultView.ChartLegend.UseAutoGeneratedItems = true;
            this.oldRDChart.DataBound += ChartDataBound;
            radChartViewRegion.Children.Add(this.oldRDChart);



            #region definecontent
            Grid innerGrid = new Grid();
            innerGrid.RowDefinitions.Add(new RowDefinition());
            innerGrid.RowDefinitions[0].Height = new GridLength(0, GridUnitType.Auto);
            innerGrid.RowDefinitions.Add(new RowDefinition());
            innerGrid.RowDefinitions.Add(new RowDefinition());
            innerGrid.RowDefinitions[2].Height = new GridLength(0, GridUnitType.Auto);

            this.oldRDChart.Content = innerGrid;

            innerGrid.ColumnDefinitions.Add(new ColumnDefinition());

            ChartLegend chartLegend = new ChartLegend();
            chartLegend.Name = "legend";
            chartLegend.ItemsPanelOrientation = Orientation.Horizontal;
            chartLegend.BorderThickness = new Thickness(0);
            chartLegend.Padding = new Thickness(5, 0, 5, 0);
            chartLegend.Header = "";
            Grid.SetRow(chartLegend, 2);
            innerGrid.Children.Add(chartLegend);

            chartArea = new ChartArea();
            chartArea.Name = "chartArea";
            Binding legendBinding = new Binding();
            legendBinding.ElementName = "legend";
            chartArea.SetBinding(ChartArea.LegendProperty, legendBinding);
            // chartArea.Legend = chartLegend;
            chartArea.EnableAnimations = false;
            chartArea.Padding = new Thickness(5, 10, 20, 10);

            chartArea.ZoomScrollSettingsX = new ZoomScrollSettings();
            chartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.ScrollAndZoom;
            chartArea.ZoomScrollSettingsX.MinZoomRange = 0.005;

            chartArea.AxisY = new AxisY();
            chartArea.AxisY.AutoRange = true;

            //chartArea.AxisX = new AxisX();
            //chartArea.AxisX.StepLabelLevelCount = 2;

            Grid.SetRow(chartArea, 0);
            Grid.SetRowSpan(chartArea, 2);

            //  innerGrid.Children.Add(chartArea);

            StackPanel stackPanelWithButton = new StackPanel();
            stackPanelWithButton.Margin = new Thickness(0, 10, 15, 5);
            stackPanelWithButton.HorizontalAlignment = HorizontalAlignment.Right;
            stackPanelWithButton.Orientation = Orientation.Horizontal;
            innerGrid.Children.Add(stackPanelWithButton);

            this.zoomInButton = new RadButton();
            zoomInButton.Click += new RoutedEventHandler(zoomInButton_Click);
            zoomInButton.Margin = new Thickness(5, 0, 5, 0);
            zoomInButton.Content = " - ";
            stackPanelWithButton.Children.Add(zoomInButton);

            this.zoomOutButton = new RadButton();
            zoomOutButton.Click += new RoutedEventHandler(zoomOutButton_Click);
            zoomOutButton.Margin = new Thickness(5, 0, 5, 0);
            zoomOutButton.Content = " + ";
            stackPanelWithButton.Children.Add(zoomOutButton);
            #endregion

            this.CreateLineChart();

            this.oldRDChart.ItemsSource = new ObservableCollection<ProductMaster>()
            {
                new ProductMaster() { ProductName = "ABCD123456", ProductQuantity = 5, SaleValue = 45},
                 new ProductMaster() { ProductName = "ABCD1234561", ProductQuantity = 5, SaleValue = 45},
                  new ProductMaster() { ProductName = "ABCD1234562", ProductQuantity = 5, SaleValue = 45},
                   new ProductMaster() { ProductName = "ABCD1234563", ProductQuantity = 5, SaleValue = 45},
                 new ProductMaster() { ProductName = "ABCD1234564", ProductQuantity = 5, SaleValue = 45},
                  new ProductMaster() { ProductName = "ABCD1234565", ProductQuantity = 5, SaleValue = 45},
                   new ProductMaster() { ProductName = "ABCD1234566", ProductQuantity = 5, SaleValue = 45},
                 new ProductMaster() { ProductName = "ABCD1234567", ProductQuantity = 5, SaleValue = 45},
                  new ProductMaster() { ProductName = "ABCD1234568", ProductQuantity = 5, SaleValue = 45},
                 new ProductMaster() { ProductName = "ABCD1234569", ProductQuantity = 5, SaleValue = 45},
                  new ProductMaster() { ProductName = "ABCD12345611", ProductQuantity = 5, SaleValue = 45},
                   new ProductMaster() { ProductName = "ABCD12345612", ProductQuantity = 5, SaleValue = 45},
                 new ProductMaster() { ProductName = "ABCD12345613", ProductQuantity = 5, SaleValue = 45},
                  new ProductMaster() { ProductName = "ABCD12345614", ProductQuantity = 5, SaleValue = 45},
                   new ProductMaster() { ProductName = "ABCD12345615", ProductQuantity = 5, SaleValue = 45},
                 new ProductMaster() { ProductName = "ABCD12345616", ProductQuantity = 5, SaleValue = 45},
                  new ProductMaster() { ProductName = "ABCD12345617", ProductQuantity = 5, SaleValue = 45},
                   new ProductMaster() { ProductName = "ABCD12345618", ProductQuantity = 5, SaleValue = 45},
                 new ProductMaster() { ProductName = "ABCD12345619", ProductQuantity = 5, SaleValue = 45},
                  new ProductMaster() { ProductName = "ABCD12345620", ProductQuantity = 5, SaleValue = 45},
                  new ProductMaster() { ProductName = "ABCD12345621", ProductQuantity = 5, SaleValue = 45},
                   new ProductMaster() { ProductName = "ABCD12345622", ProductQuantity = 5, SaleValue = 45},
                 new ProductMaster() { ProductName = "ABCD1234562324", ProductQuantity = 5, SaleValue = 45},
                  new ProductMaster() { ProductName = "ABCD12345625", ProductQuantity = 5, SaleValue = 45},
                   new ProductMaster() { ProductName = "ABCD12345626", ProductQuantity = 5, SaleValue = 45},
                 new ProductMaster() { ProductName = "ABCD12345627", ProductQuantity = 5, SaleValue = 45},
                  new ProductMaster() { ProductName = "ABCD12345628", ProductQuantity = 5, SaleValue = 45},

            };
        }

        /// <summary>
        /// The XValuePlottingProperty
        /// </summary>
        public string XValuePlottingProperty { get; set; }

        /// <summary>
        /// Create line chart
        /// </summary>
        private void CreateLineChart()
        {
            foreach (var eachSeries in series)
            {
                if (eachSeries.IsChecked)
                {
                    SeriesMapping seriesMapping = new SeriesMapping();

                    seriesMapping.LegendLabel = eachSeries.PropertyName;
                    seriesMapping.SeriesDefinition = new LineSeriesDefinition();
                    seriesMapping.SeriesDefinition.ShowItemLabels = true;

                    seriesMapping.ItemMappings.Add(new ItemMapping()
                    {
                        //DataPointMember = DataPointMember.XValue,
                        DataPointMember = DataPointMember.XCategory,
                        FieldName = XValuePlottingProperty
                    });

                    seriesMapping.ItemMappings.Add(new ItemMapping()
                    {
                        DataPointMember = DataPointMember.YValue,
                        FieldName = eachSeries.PropertyName
                    });

                    this.oldRDChart.SeriesMappings.Add(seriesMapping);
                }
            }
        }


    }


    public class Series
    {
        public bool IsChecked { get; set; }

        public string PropertyName { get; set; }
    }

    public class ProductMaster
    {
        public string ProductName { get; set; }

        public int SaleValue { get; set; }

        public int ProductQuantity { get; set; }
    }
}

<UserControl x:Class="Test_Project.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Height="600"  Width="600">

    <ScrollViewer Grid.Row="1">
        <Grid  x:Name="radChartViewRegion"/>
    </ScrollViewer>
</UserControl>

Regards,
Gautham

[Ves]

Hello Gautham,

Please, find attached a small example, based on your code. These are the steps performed to get it working:

• Uncomment line 160: innerGrid.Children.Add(chartArea); -- the ChartArea should be added  to the grid, otherwise, it is not in the visual tree, hence it is not shown at all
• Uncomment line 143: chartArea.Legend = chartLegend;  - this associates the ChartArea with the legends, so a legend item is produced for each series in the ChartArea.
• Add line 249: seriesMapping.ChartArea = chartArea; this associates the SeriesMapping with the ChartArea. When using non-default layout each SeriesMapping should be associated to a ChartArea to define where its series are displayed.

Best regards,
Ves
the Telerik team

[Murtaza Daya]

Hello Ves,

This was very-help to slow my problem.
Thank-you again for guiding me step by step.

Regards,
Gautham