Issues with Pan/Zoom, Tool Tips, Smart Labels, etc.

[Robert LeGood]

HI all,

I'm really not sure what I'm doing wrong here.   I can't get any of the above working in my project.

If I set ShowPanZoom = true; I still can't pan or zoom (I've tried directly adding the controller)

If I try to add tool tips, that fails too..  Here's my code:

            rcvMain.Controllers.Add(new ChartTooltipController());

Smart Labels also gives the same thing.

Is there something else I need to enable to get any/all of these working?

Thanks!

Rob.

[Ivan Petrov]

Hello Robert,

Thank you for writing.

I tried to reproduce the issue you have described but I was unable to do so. You are the first to report such an issue so I would kindly ask you to send me your project or a sample one where you are able to reproduce the issue. This will allow me to investigate it and provide you with an adequate support.

Looking forward to your reply.

Regards,
Ivan Petrov
Telerik

[Robert LeGood]

Here's the code.    For this, I have a RadChartView inside a RadPageView.  This is the entirety of the code-behind.

I've created 3 random Date/Number series and, according to the documentation I've read.  Showing tool tips and Pan and Zoom, should be working.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using System.Linq;
using Telerik.WinControls;
using Telerik.WinControls.UI;
using Telerik.Charting;

namespace RadChartTests
{
    public partial class frmChart : Telerik.WinControls.UI.RadForm
    {
        public frmChart()
        {
            InitializeComponent();
            rcvMain.ShowToolTip = true;
            rcvMain.Controllers.Add(new ChartTooltipController());

            rcvMain.ShowPanZoom = true;
            ChartPanZoomController panZoomController = new ChartPanZoomController();
            panZoomController.PanZoomMode = ChartPanZoomMode.Horizontal;
            rcvMain.Controllers.Add(panZoomController);

            //rcvMain.ShowSmartLabels = true;
        }

        private void rbGo_Click(object sender, EventArgs e)
        {
            rcvMain.Title = "Test Chart";

            DateTimeContinuousAxis axis = new DateTimeContinuousAxis();
            axis.MaximumTicks = 10;
            axis.PlotMode = AxisPlotMode.BetweenTicks;
            axis.LabelFormat = "{0:d}";

            List<string> fields = new List<string>();

            List<string> seriess = new List<string>();
            seriess.Add("Series 1");
            seriess.Add("Series 2");
            seriess.Add("Series 3");

            //First pass.  Grab all unique field values.
            foreach (var series in seriess)
            {
                var ls = GetLineSeries(axis, series);
                rcvMain.Series.Add(ls);
            }

            rcvMain.Axes[1].Title = "Number";
        }

        private LineSeries GetLineSeries(DateTimeContinuousAxis axis, string series)
        {
            List<CategoricalDataPoint> points = new List<CategoricalDataPoint>();

            LineSeries ls = new LineSeries();

            Random r = new Random();
            for (int i = 0; i < 50; i++)
            {
                double value = r.Next(0,100);
                DateTime date = RandomDay(r);

                points.Add(new CategoricalDataPoint(value, date));
            }

            points = points.OrderBy(p => p.Category).ToList();
            foreach (var point in points)
            {
                ls.DataPoints.Add(point);
            }

            ls.LegendTitle = series;
            ls.HorizontalAxis = axis;
            ls.HorizontalAxis.Title = "Date";
            ls.PointSize = new SizeF(5, 5);
            //var vAxis = new LinearAxis();
            //vAxis.Title = chartDetail.XAxisTitle;
            //ls.VerticalAxis = vAxis;
            return ls;
        }

        DateTime RandomDay(Random r)
        {
            DateTime start = new DateTime(1995, 1, 1);

            int range = (DateTime.Today - start).Days;
            return start.AddDays(r.Next(range));
        }
    }
}

[Ivan Petrov]

Hi Robert,

Thank you for your reply.

I used your sample code on my machine and it worked without any issues. There are some gotchas though. To use the pan and zoom feature you have to do one of two things. You have to use the Ctrl+Mouse Wheel combination or a zoom gesture (on touch enabled screens) to zoom the chart. Once the chart is zoomed you can pan the chart by holding the left mouse button and moving the mouse or by pan gesture on touch devices.

The tooltips do not show because for them to work there must be a valid hit testable object under the mouse. Line series are not hit testable therefore in this case it is more advisable to use a trackball.

I hope this will be useful. Should you have further questions, I would be glad to help.

Regards,
Ivan Petrov
Telerik

[erwin]

The pan and zoom does not seem to work as expected here too.

If I set ShowPanZoom to true, I can zoom but then not pan through the entire series,  just a part of the original points are shown.
Also when I scroll back, the mouse pointer and the Indicator (the line with the series values) are no longer in sync.

Regards
Erwin

[erwin]

After some further investigation, it seems that my problems with the ChartView control pan/zoom functionality are limited to the case when the ChartView is on a PageViewPage. Not the first time that Rad Controls behaved differently on a PageViewPage than on a plain windows form. I have sent an example project / bug report.

Regards
Erwin

[Anton]

Hi Erwin,

Thank you for writing.

Lets continue the discussion from your support ticket about this issue in this forum thread, so the community can benefit from it.
 
The issue in your case appears due incorrect setting of the Axis of the series. In your designer file you set your bar series HorizontalAxis to be LinearAxis and to VerticalAxis to be DateTimeCategoricalAxis:

Copy Code

barSeries1.HorizontalAxis = linearAxis1;
barSeries1.VerticalAxis = dateTimeCategoricalAxis1;
barSeries2.HorizontalAxis = linearAxis1;
barSeries2.VerticalAxis = dateTimeCategoricalAxis1;

But your HorizontalAxis should be DateTimeCategoricalAxis. Consider the following code snippet:

Copy Code

barSeries1.HorizontalAxis = dateTimeCategoricalAxis1;
barSeries1.VerticalAxis = linearAxis1;
barSeries2.HorizontalAxis = dateTimeCategoricalAxis1;
barSeries2.VerticalAxis = linearAxis1;

However, when you add these series to RadChartView it stores their Axis and the Clear method of the series does not remove them:

radChartView1.Series.Clear();
DateTimeCategoricalAxis dateAxis = this.radChartView1.Axes[1] as DateTimeCategoricalAxis;
LinearAxis minutesAxis = this.radChartView1.Axes[0] as LinearAxis;

If the Clear method removes the axis this code in your project will throw the exception.

In order to remove the unused Axis you should use the Purge method of Axes collection. For example:

this.radChartView1.Axes.Purge();

I was able to reproduce the described issue and without RadPageView, so it does not affect the undesired behavior. The issue appears only due incorrectly swapped Axes.

Because your project does not contains any confidential information and the community might need it in order to understand the nature of your case I attached modified version of your demo.

I hope this information helps.

Regards,
Anton
Telerik

[erwin]

Hi Anton, to reproduce the designer Bug:

Create New project, choosing the RadControls Windows Forms Template

On the new Form, Insert a RadChartView, Dock it to the Window

Open the Property Builder of the Chart
Chart Type Cartesian
Axis Type Linear & Date Time Categorical
Press OK

//

            // radChartView1

            //

            this.radChartView1.AreaDesign = cartesianArea1;

            linearAxis1.AxisType = Telerik.Charting.AxisType.Second;

            linearAxis1.IsPrimary = true;

            linearAxis1.LabelRotationAngle = 300D;

            linearAxis1.MajorStep = 10D;

            linearAxis1.Title = "";

            dateTimeCategoricalAxis1.DateTimeComponent = Telerik.Charting.DateTimeComponent.Ticks;

            dateTimeCategoricalAxis1.IsPrimary = true;

            dateTimeCategoricalAxis1.LabelRotationAngle = 300D;

            dateTimeCategoricalAxis1.Title = "";

            this.radChartView1.Axes.AddRange(new Telerik.WinControls.UI.Axis[] {

            linearAxis1,

            dateTimeCategoricalAxis1});

            this.radChartView1.Dock = System.Windows.Forms.DockStyle.Fill;

            this.radChartView1.Location = new System.Drawing.Point(0, 0);

            this.radChartView1.Name = "radChartView1";

            categoricalDataPoint1.Category = "A";

            categoricalDataPoint1.Label = 89D;

            categoricalDataPoint1.Value = 89D;

            categoricalDataPoint2.Category = "B";

            categoricalDataPoint2.Label = 68D;

            categoricalDataPoint2.Value = 68D;

            categoricalDataPoint3.Category = "C";

            categoricalDataPoint3.Label = 50D;

            categoricalDataPoint3.Value = 50D;

            categoricalDataPoint4.Category = "D";

            categoricalDataPoint4.Label = 28D;

            categoricalDataPoint4.Value = 28D;

            categoricalDataPoint5.Category = "E";

            categoricalDataPoint5.Label = 37D;

            categoricalDataPoint5.Value = 37D;

            barSeries1.DataPoints.AddRange(new Telerik.Charting.DataPoint[] {

            categoricalDataPoint1,

            categoricalDataPoint2,

            categoricalDataPoint3,

            categoricalDataPoint4,

            categoricalDataPoint5});

            barSeries1.HorizontalAxis = linearAxis1;

            barSeries1.LabelMode = Telerik.WinControls.UI.BarLabelModes.Top;

            barSeries1.LegendTitle = null;

            barSeries1.VerticalAxis = dateTimeCategoricalAxis1;

            categoricalDataPoint6.Category = "A";

            categoricalDataPoint6.Label = 19D;

            categoricalDataPoint6.Value = 19D;

            categoricalDataPoint7.Category = "B";

            categoricalDataPoint7.Label = 53D;

            categoricalDataPoint7.Value = 53D;

            categoricalDataPoint8.Category = "C";

            categoricalDataPoint8.Label = 48D;

            categoricalDataPoint8.Value = 48D;

            categoricalDataPoint9.Category = "D";

            categoricalDataPoint9.Label = 90D;

            categoricalDataPoint9.Value = 90D;

            categoricalDataPoint10.Category = "E";

            categoricalDataPoint10.Label = 71D;

            categoricalDataPoint10.Value = 71D;

            barSeries2.DataPoints.AddRange(new Telerik.Charting.DataPoint[] {

            categoricalDataPoint6,

            categoricalDataPoint7,

            categoricalDataPoint8,

            categoricalDataPoint9,

            categoricalDataPoint10});

            barSeries2.HorizontalAxis = linearAxis1;

            barSeries2.LabelMode = Telerik.WinControls.UI.BarLabelModes.Top;

            barSeries2.LegendTitle = null;

            barSeries2.VerticalAxis = dateTimeCategoricalAxis1;

            this.radChartView1.Series.AddRange(new Telerik.WinControls.UI.ChartSeries[] {

            barSeries1,

            barSeries2});

            this.radChartView1.ShowGrid = false;

            this.radChartView1.Size = new System.Drawing.Size(752, 295);

            this.radChartView1.TabIndex = 0;

            this.radChartView1.Text = "radChartView1";

            //

            // Form1

            /

Even though the categories are shown on the horizontal Axis as expected from the preview, the assignment seems to be wrong in the designer. See screenshot

when I now add

   this.radChartView1.ShowPanZoom = true;

in the contstructor of Form1

namespace Bughunt20130703
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            this.radChartView1.ShowPanZoom = true;
        }
    }
}

The chart now exposes the pan/zoom problem.

The second screenshot shows the chart zoomed in and panned as much to the right as it allows,

unfortunately I cannot add the zipped project here.

[Anton]

Hello Erwin,

Thank you for writing back.

I was able to reproduce the described issue on my side by following your steps. It seems that sometimes the Property Builder of RadCharView sets incorrect types of the Axes which is an issue. That is why I have added this case to our Public Issue Tracking System. You can track its status here: http://www.telerik.com/support/pits.aspx#/public/winforms/15307

Currently, you can use Smart Tag to setup the chart instead Property Builder or you can swap the types in designer file.

I have added 500 Telerik Points to your account for this report.

Please excuse us for the introduced inconvenience. Let me know if you have any additional questions.

Regards,
Anton
Telerik

[erwin]

Hi Anton,

Thanks for your Help. Once the cause was found, it was quite easy to fix and the customer is happy.
As always, I'm amazed of the quality and speed of Telerik customer support.
Also I like the new charting controls even though there may be some rough edges that need some additional work.

Regards
Erwin

[Anton]

Hi Erwin,

Thank you for writing back.

Thank you very much for the nice words and for valuable feedback. We highly appreciate your effort to help us to improve our controls.

Should you have any other questions or feedback, I will be glad to assist you.

Regards,
Anton
Telerik