Search code examples
c#chartsposition

how to draw four (or more) workareas horizontally?


Here is a peace of code which draws 1/2/3/4 (depends on remarks) charts:

private void button1_Click(object sender, EventArgs e)
    {
        List<int> queue = new List<int>();
        queue.Add(1); queue.Add(2); queue.Add(3); queue.Add(4);
        chart1.ChartAreas.Add(queue[0].ToString());
        chart1.ChartAreas.Add(queue[1].ToString());
        chart1.ChartAreas.Add(queue[2].ToString());
        chart1.ChartAreas.Add(queue[3].ToString());
        chart1.Series.Add("test1");
        chart1.Series.Add("test2");
        chart1.Series.Add("test3");
        chart1.Series.Add("test4");
        chart1.Series["test1"].ChartArea = "1";
        chart1.Series["test2"].ChartArea = "2";
        chart1.Series["test3"].ChartArea = "3";
        chart1.Series["test4"].ChartArea = "4";
        Random rdn = new Random();
        for (int i = 0; i < 50; i++)
        {
            chart1.Series["test1"].Points.AddXY(rdn.Next(0, 10), rdn.Next(0, 10));
            chart1.Series["test2"].Points.AddXY(rdn.Next(0, 10), rdn.Next(0, 10));
            chart1.Series["test3"].Points.AddXY(rdn.Next(0, 10), rdn.Next(0, 10));
            chart1.Series["test4"].Points.AddXY(rdn.Next(0, 10), rdn.Next(0, 10));
        }
        chart1.Series["test1"].ChartType = SeriesChartType.FastLine;
        chart1.Series["test2"].ChartType = SeriesChartType.FastLine;
        chart1.Series["test3"].ChartType = SeriesChartType.FastLine;
        chart1.Series["test4"].ChartType = SeriesChartType.FastLine;
    }

If I draw two or three charts it appears horizontally something like:

............

............

or

............

............

............

When I add fourth chartarea it starts create second "column"

............ ............

............ ............

What to do to force layout with one column ? I have found "Position" property but couldn't find the way how to use it correctly :(


Solution

  • I think all the alignment properties actually are more about data aligning than about the areas themselves..

    Looks like the default Position = Auto will win with its own ideas about how to use the space best, until you switch it off; so I believe that you have to set the Positions of the ChartAreas in code. Here is an example to play with:

    float dist = 1f;
    float h = 23f;
    float w = 80f;
    
    CA1.Position = new ElementPosition(dist, dist * 2 + h * 0, w, h);
    CA2.Position = new ElementPosition(dist, dist * 3 + h * 1, w, h);
    CA3.Position = new ElementPosition(dist, dist * 4 + h * 2, w, h);
    CA4.Position = new ElementPosition(dist, dist * 5 + h * 3, w, h);
    

    The four numbers of an ElementPosition are floats that hold percentages (!) of the total chart area. I have allowed a little distance and set the ChartAreas to 23% height and 80% width.

    The good news is that these numbers will hold during resize..

    Here is a screenshot (without data):

    enter image description here

    Isn't is strange that these things are so very hard to find out? (This is my 3rd try at it..)