How to align two (or more) charts in size, scroll and grid

Question

I have three signals (volgate, current, and energy) referred to the same period. I print data on two graphs: one with voltage (blue) and current (red) and the other with only energy (orange). They are two different graphs, but in practice, they share the same X-axis.

I have two cursor synchronized with the mouse movement that is acting as one cursor for the two graphs and a tooltip based on cursor position shows the currently selected values for the three signals (all the three series have IsXValueIndexed = true with interval = 1). As you can see they work well:

I have two problems:

1) when I start to make zoom they start to differ in GRID ALIGNMENT and SIZE of the chart area. After register always the last point with the "Changing" event, when the user releases the mouse left button "Change" event fires and did the following work: I force the zoom on the opposite graph base on source name.

dlChart_SelectionRangeChange(object sender, CursorEventArgs e){            
            var source = sender as Chart;
            double sp = selection_point.getStartPoint();
            double ep = selection_point.getEndPoint();
            double tmp = 0;

            if (sp == ep)
                return;
            if (sp > ep)
            {// zoom contrario
                tmp = sp;
                sp = ep;
                ep = tmp;
            }

            switch (source.ChartAreas[0].Name)
            {
                case CHARTAREA1_NAME:
                    dlChart2.ChartAreas[0].AxisX.ScaleView.Zoom(sp, ep);
                    break;
                case CHARTAREA2_NAME:
                    dlChart.ChartAreas[0].AxisX.ScaleView.Zoom(sp, ep);
                    break;
                default: break;
            }
        }

Following image describe the problem:

2) after zooming in one chart a scrollbar appear, and at this point, user can change the chart view on only one chart. I want to scroll the same way also the other chart.

I always want that the two charts behave like one chart.

score 6 · Accepted Answer · answered Mar 03 '17 at 18:40

6

I recommend using only one chart. You can add a 2nd ChartArea to it and make it the one your 3rd series is using.

Given your identical x-axes this should be the simplest and cleanest solution.

To enable scrolling, as usual one needs to set these properties:

        ChartArea ca1 = chart1.ChartAreas[0];
        ChartArea ca2 = chart1.ChartAreas[1];

        Axis ax1 = ca1.AxisX;
        Axis ax2 = ca2.AxisX;

        series3.ChartArea = ca2.Name;

        ax1.ScaleView.Zoomable = true;
        ax2.ScaleView.Zoomable = true;

        ca1.CursorX.IsUserSelectionEnabled = true;
        ca2.CursorX.IsUserSelectionEnabled = true;

To keep two ChartAreas in synch this should be enough:

private void chart1_AxisViewChanged(object sender, ViewEventArgs e)
{
    ChartArea ca1 = chart1.ChartAreas[0];
    ChartArea ca2 = chart1.ChartAreas[1];
    Axis ax1 = ca1.AxisX;
    Axis ax2 = ca2.AxisX;

    if (e.Axis== ax1) { ax2.ScaleView.Size = ax1.ScaleView.Size;
                        ax2.ScaleView.Position = ax1.ScaleView.Position;  }
    if (e.Axis== ax2) { ax1.ScaleView.Size = ax2.ScaleView.Size;
                        ax1.ScaleView.Position = ax2.ScaleView.Position;   }
}

answered Mar 03 '17 at 18:40

TaW

53,122
8
69
111

Thank you TaW, your gif is exactly what i'm looking for. I'll try your solution (only one chart with two chartArea) and i'll give you feedback – GiPi Mar 06 '17 at 08:15
TaW I have just tested your solution: this solve only the second problem. Anyway it works very well! I solved the first problem (different chartArea sizes when zooming and grid alignment) adding one chartArea per channel. So now it is perfect. Thank you very much! – GiPi Mar 06 '17 at 16:46
You can control the Chatarea sizes in code and you can enfoce axis lables but if you are happy as it is all the better! - If you are happy with an answer, please consider [accepting](http://stackoverflow.com/help/accepted-answer) it..! – TaW Mar 06 '17 at 17:02
I used the following to make it a bit more generic (auto syncs off of whatever is currently active (being manipulated) `foreach (var ca in chart1.ChartAreas) { Axis ax = ca.AxisX; if (e.Axis != ax) { ax.ScaleView.Size = e.Axis.ScaleView.Size; ax.ScaleView.Position = e.Axis.ScaleView.Position; } }` – Jonathan M. Dec 19 '18 at 03:14

How to align two (or more) charts in size, scroll and grid

1 Answers1

Linked