[Solved] Horizontal Zooming/Scrolling Doesn't Work

[Aaron]

Hi,

I have a line chart for which I'm trying to implement scrolling and zooming.  The X-Axis shows dates, so maybe that's the problem.  Anyway, zooming and scrolling work fine on the Y-Axis, but have no effect on the X-Axis.

Here's my code.  It's all done in codebehind.  Thanks in advance.

Aaron

void renderChart(ObservableCollection<WeeklyTemp> temps)

{

    RadChart radChart1 = new RadChart();

    radChart1.DefaultView.ChartTitle.Content = "MWAT Garcia River Forest 2008";

    radChart1.DefaultView.ChartTitle.HorizontalAlignment = HorizontalAlignment.Center;

    radChart1.DefaultView.ChartLegend.UseAutoGeneratedItems = true;

    radChart1.DefaultView.ChartLegend.Width = 200;

    radChart1.DefaultView.ChartLegend.Margin = new Thickness(40, 0, 0, 0);

 

    radChart1.DefaultView.ChartArea.AxisX.LabelRotationAngle = 300;

    radChart1.DefaultView.ChartArea.AxisX.IsDateTime = true;

    radChart1.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "d";

    radChart1.DefaultView.ChartArea.AxisX.Title = "Date";

    radChart1.DefaultView.ChartArea.AxisY.Title = "Tempurature (C)";

    radChart1.DefaultView.ChartArea.AxisX.MajorGridLinesVisibility = Visibility.Visible;

    radChart1.DefaultView.ChartArea.AxisY.MajorGridLinesVisibility = Visibility.Visible;

 

    radChart1.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.ScrollAndZoom;

    radChart1.DefaultView.ChartArea.ZoomScrollSettingsY.ScrollMode = ScrollMode.ScrollAndZoom;

 

    TimeSpan ts = endDate.Subtract(startDate);

    int days = ts.Days;

    int period = days / 10;

    radChart1.DefaultView.ChartArea.AxisX.AddRange(startDate.ToOADate(), endDate.ToOADate(), period);

    radChart1.DefaultView.ChartArea.DataSeries.Clear();

 

    IEnumerable<GarciaSite> selectedSites = from s in sites

                                            where s.isSelected == true

                                            select s;

 

    foreach (GarciaSite site in selectedSites)

    {

 

        DataSeries lineSeries = new DataSeries();

        lineSeries.LegendLabel = site.siteName;

 

        LineSeriesDefinition def = new LineSeriesDefinition();

        string siteColor = site.color.Replace("#", "#FF");

        SolidColorBrush theBrush = GetColorFromHexa(siteColor);

        def.Appearance.Stroke = theBrush;

        def.ShowItemLabels = false;

        def.ShowPointMarks = false;

        lineSeries.Definition = def;

 

        // add data to the series

        var data = from m in temps

                    where m.siteID.Equals(site.siteID)

                    select new { m.date, m.movAvg };

 

        foreach (var d in data)

        {

            DataPoint dp = new DataPoint(d.date.ToOADate(), d.movAvg);

            lineSeries.Add(dp);

        }

 

        radChart1.DefaultView.ChartArea.DataSeries.Add(lineSeries);

 

    }

 

    spChart.Children.Clear();

    spChart.Children.Add(radChart1);

}

[Nikolay]

Hello Aaron,

The Zooming and Scrolling feature is available only in data bound scenarios. You need to define a data source and create a chart using mappings, instead of adding the DataSeries.

For more information on Zooming and Scrolling, please, refer to this help topic. You may also find this demo example helpful.

Kind regards,
Nikolay
the Telerik team

[Aaron]

Strange that it works on the vertical axis.

Alright.  I'll try to get this thing to work using data binding.  It may be tough though.  That's why I used a code-behind aproach in the first place.

Anyway, thanks for the help.

Aaron

[Aaron]

Hi,

It doesn't look like I'm going to be able to get the chart working with data binding.  Due to its complexity, I'm going to have to render it programmatically.

Is there an event or something that I can hook into to manually handle zooming and scrolling?

Thanks.

Aaron

[Aaron]

Just FYI: This actually works, even when programmatically creating the chart series.

The only problem I had was that I wasn't doing the following...

radChart1.DefaultView.ChartArea.AxisX.AutoRange =

 

false;

 

...before adding my x range.

Aaron

[Aaron]

Okay, this is interesting.

It works for zooming in using the mouse to draw a zoom area.  It doesn't work when using the scrollbars to either scroll or zoom.  Therefore, zooming out also works.

I'd love to do this using databinding, but I need to group databound items, and RadChart for Silverlight doesn't seem to have a DataGroupColumn property.

Aaron

[Nikolay]

Hi Aaron,

We have answered your question in this forum thread. It also contains an attached example, which would hopefully be useful for you.

Kind regards,
Nikolay
the Telerik team