Does scrolling and zooming support multiple lines ?

[scott]

I think I read somewhere that scrolling and zooming isn't supported for multiple XCategories in a series.  Is this true in the latest version of charts ?

Thanks -

[Andre]

Hi scott,

I use it and it works just fine.
Just be careful because sampling doesn't work with XCategories...

Cheers,

André Carlucci

[scott]

Thanks.  I tried and even specifying XCategory seems to break the zoom and scroll behavior.  Can somebody help me get started by modifying this code to draw 2 lines that I can zoom and scroll ?

XAML:

<UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  x:Class="ScrollZoomChart.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
        <telerik:RadChart x:Name="Chart" />
    </Grid>
</UserControl>

CODE:

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;

using Telerik.Windows.Controls.Charting;

namespace ScrollZoomChart
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            DoChart();
        }

        public void DoChart()
        {
            Chart.DefaultView.ChartLegend.Visibility = System.Windows.Visibility.Visible;

            Chart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.ScrollAndZoom;
            Chart.DefaultView.ChartArea.ZoomScrollSettingsY.ScrollMode = ScrollMode.ScrollAndZoom;

            Chart.DefaultView.ChartArea.AxisX.LabelRotationAngle = 45;
            Chart.DefaultView.ChartArea.AxisX.IsDateTime = true;
            Chart.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "d";
            Chart.DefaultView.ChartArea.AxisY.DefaultLabelFormat = "n0";

            Chart.DefaultView.ChartArea.AxisY.MajorGridLinesVisibility = Visibility.Visible;
            Chart.DefaultView.ChartArea.AxisY.MinorGridLinesVisibility = Visibility.Visible;
            Chart.DefaultView.ChartArea.AxisX.MajorGridLinesVisibility = Visibility.Visible;
            Chart.DefaultView.ChartArea.AxisX.MinorGridLinesVisibility = Visibility.Visible;

            Chart.SeriesMappings.Clear();

            LineSeriesDefinition lineSeries = new LineSeriesDefinition();
            lineSeries.ShowItemLabels = false;
            lineSeries.ShowPointMarks = false;

            SeriesMapping dataMapping = new SeriesMapping();
            dataMapping.SeriesDefinition = lineSeries;
            dataMapping.ItemMappings.Add(new ItemMapping("XValue", DataPointMember.XValue));
            dataMapping.ItemMappings.Add(new ItemMapping("YValue", DataPointMember.YValue));

            //un commenting this line seems to make zoom & scroll break
            //dataMapping.ItemMappings.Add(new ItemMapping("XCategory", DataPointMember.XCategory));
            Chart.SeriesMappings.Add(dataMapping);

            Chart.ItemsSource = GetChartData();

        }

        public List<TSChartData> GetChartData()
        {
            List<TSChartData> myData = new List<TSChartData>();

            int n = 75;
            bool bGoUP = true;
            DateTime endDate = DateTime.Now;
            DateTime startDate = endDate.AddDays(-800);

            for (DateTime dt = startDate; dt < endDate; dt = dt.AddDays(1))
            {
                if (bGoUP)
                {
                    if (++n > 100)
                    {
                        bGoUP = false;
                    }
                }
                else
                {
                    if (--n < 20)
                    {
                        bGoUP = true;
                    }
                }

                myData.Add(new TSChartData(dt.ToOADate(), n, "Foo"));
            }

            return myData;
        }

    }


    public class TSChartData
    {
        private double _xValue;
        private int _yValue;
        private string _xCategory;

        public double XValue
        {
            get
            {
                return this._xValue;
            }
            set
            {
                this._xValue = value;
            }
        }

        public int YValue
        {
            get
            {
                return this._yValue;
            }
            set
            {
                this._yValue = value;
            }
        }

        public string XCategory
        {
            get { return this._xCategory; }
            set { this._xCategory = value; }
        }

        public TSChartData(double xValue, int yValue, string xcat)
        {
            this.XValue = xValue;
            this.YValue = yValue;
            this.XCategory = xcat;
        }
    }
}

[Ves]

Hi Scott,

Zoom/scroll will not be affected by XCategory or XValue, they will both work with zoom/scroll. I have attached a small example, showing both scenarios. I have attached a small example, showing both in action.

So, what's the difference between XCategory and XValue. XValue will respect the span between two items (e.g. Jan 1st and Jan 10th will appear close to each other, while Jul 1st will be farther to the right). In addition, the chart will automatically calculate the range of XAxis, so that there are not too many ticks and labels. On the other hand, XCategory will not care of the time span -- it will just add a new axis item for each new XCategory value. The XCategory values can be anything (e.g. bananas, apples, oranges, etc...) and this is why they are all significant, so the chart will not try to build a range with auto-step, but will display every one of them.


Best regards,
Ves
the Telerik team

[scott]

Hi Ves.  Thanks for the demo code and coaching.  It shows me where I went wrong.