Charting Rectangles of arbitrary dimensions

Question

I need to graph rectangles of different heights and widths in a C# application. The rectangles may or may not overlap.

I thought the System.Windows.Forms.DataVisualization.Charting would have what I need, but every chart type I've explored wants data points composed of a single value in one dimension and multiple values in the other.

I've considered: Box, Bubble, and Range Bar.

How to: Draw a Filled Rectangle on a Windows Form: https://msdn.microsoft.com/en-us/library/ztxk24yx(v=vs.110).aspx — Vertexwahn, Apr 22 '16 at 14:35
I rephrased the OP. I need more than rectangles on the screen. It needs to be in a graph that a user can zoom in and out, etc. — David Faulk, Apr 22 '16 at 14:45
This forum is not here to help you find a library, so unless you plan to implement this yourself, you should look around somewhere else — Glubus, Apr 22 '16 at 14:46
What do you plan to feed into the graph system? You say rectangles of different height and width. Also that they may overlap. Do you mean to say you want to express 3 different axis of data with this, those being rectangle size (width and height) and positioning? More like a sector graph, rather than a chart? If so, the Charting namespace is unlikely to have a type of control that will help you. I would say, that in such a case you should write the drawing system yourself, and feed it the data. It is not complex, since it seems to be just drawing rects in 2D-space. — Richard Tyregrim, Apr 22 '16 at 14:53
Actually you can try ChartType Point. See [here for an example](http://stackoverflow.com/questions/36342635/plotting-2d-heat-map/36392680#36392680) that uses a Chart control; at the end there is also an example how to do the same in GDI.. To achive different sizes for the visible chart markers you can create rectanlges with smaller or larger colored centers on a transparent background. - Adding an image (or a link to it) of how your graph is supposed to look like will help.. — TaW, Apr 22 '16 at 15:15

score 1 · Accepted Answer · answered May 02 '16 at 15:39

It turns out that Richard Eriksson has the closest answer in that the Charting package doesn't contain what I needed. The solution I'm moving forward with is to use a Point chart to manage axes and whatnot, but overload the PostPaint event to effectively draw the rectangles I need on top. The Chart provides value-to-pixel (and vice versa) conversions.

score 0 · Answer 2 · edited May 23 '17 at 11:52

Here is a minimal example that throws 100 squares of different colors and sizes randomly onto one Chart of ChartType Point with custom Marker Images.

You can modify to de-couple the datapoints from the colors, allow for any sizes or shapes etc..:

int count = 100;
int mSize = 60;                           // marker size
List<Color> colors = new List<Color>();   // a color list
for (int i = 0; i < count; i++)
    colors.Add(Color.FromArgb(255, 255 - i * 2, (i*i) %256, i*2));

Random R = new Random(99);

for (int i = 0; i < count; i++)  // create and store the marker images
{
    int w = 10 + R.Next(50);     // inner width of visible marker
    int off = (mSize - w) / 2;
    Bitmap bmp = new Bitmap(mSize, mSize);
    using (Graphics G = Graphics.FromImage(bmp))
    {
        G.Clear(Color.Transparent);
        G.FillRectangle(new SolidBrush(colors[i]), off, off, w, w);
        chart5.Images.Add(new NamedImage("NI" + i, bmp));
    }
}

for (int i = 0; i < count; i++)    // now add a few points to random locations
{
    int p = chart5.Series["S1"].Points.AddXY(R.Next(100), R.Next(100));
    chart5.Series["S1"].Points[p].MarkerImage = "NI" + p;
}

Note that this is really just a quick one; in the Link to the original answer about a heat map I show how to resize the Markers along with the Chart. Here they will always stay the same size..:

I have lowered the Alpha of the colors for this image from 255 to 155, btw.

The sizes also stay fixed when zooming in on the Chart; see how nicely they drift apart, so you can see the space between them:

This may or may not be what you want, of course..

Note that I had disabled both Axes in the first images for nicer looks. For zooming I have turned them back on so I get the simple reset button..

Also note that posting the screenshots here introduces some level of resizing, which doesn't come from the chart!

Charting Rectangles of arbitrary dimensions

2 Answers2

Linked