Binding list of lists to chart control

Question

I'm working a windows form application that generates a heat map of data points. I'm using a list of custom structures called "Pipes" that contain their own lists of data points. I then iterate over my list of lists as shown here:

foreach (NewPipe pipe in wall)
{
    foreach (DataPoint x in pipe.returnPoints(xNum))
    {
       chart1.Series["Series1"].Points.Add(x);
    }
    xNum++;
}

While this works, it seems horribly inefficient. Also it would be nice if I could just update my list of lists and have the graph update, instead of having to clear it and re-graph it (or manually delete the removed data and etc). I'm familiar with the BindingList structure, is this the right tool to use and if so, how do you bind a list within a list to a chart? (Since I'm really after the data stored in a list in the lower tier list). Maybe I'm using the wrong structures entirely? (Though lists of lists actually matches how the data is generated fairly well).

Answer 1

Assuming you want to create a Heatmap which looks something like my examples here or here I'm afraid that using a Chart Control for this purpose may not be the best choice.

While it is not impossible to use a Charttype Point to create it, it will have several problems..

• Most notable is the fact that you will have to create individual DataPoints for each point in the map.

• These are rather expensive

• They will not resize with the chart. You can set their size by setting the Series.MarkerSize to a suitable number of pixels but you will have to adapt when you resize.
• One further limitation of this is that the markers all are squares, so it will be hard to create a gapless chart..

You have asked about DataBinding to make the whole thing more efficient.

You are using lists of list of DataPoints but:

• DataBinding only binds values to the chart, not ready-made DataPoints
• Even lists of values have their limitations:

When using non-tabular data sources such as lists, or arrays, you can bind only Y values, regardless of the type of data-binding method used. This is because columns cannot be specified for X values and other chart properties, such as Tooltip.

This may not be a big problem if your X-Values are not important.

Well, there are many ways to use DataBinding with a Chart, both at the Chart and at the Series levels.

And there is even one Points.DataBind overload that looks as if it would be suitable to bind Colors as is supports extended properties:

Points.DataBind

Same as the above, plus:

Supports binding for extended chart properties like tooltips.

So the binding to a DataView

DataTable DT = new DataTable("data");

DT.Columns.Add("xField", typeof(int));
DT.Columns.Add("yFields", typeof(int));
DT.Columns.Add("tipp", typeof(string));
DT.Columns.Add("kolor", typeof(Color));

DataRow row = DT.NewRow();
row["xField"] = 1; row["yFields"] = 1; row["tipp"] = "red"; row["kolor"] = Color.Red;
DT.Rows.Add(row); // ...etc...

DataView DV = new DataView(DT);
chart1.DataSource = DV;

should work like this:

someSeries.Points.DataBind(DV, "xField", "yFields",
                           "MarkerColor=kolor,Color=kolor,Tooltip=tipp,Label=tipp");

However, while the Labels and ToolTips do indeed get bound, the DataPoint.Color does not:

This is disappointing; after all the DataPoint.Color is a bindable attribute. But it gets ignored.

Here is a list of supported properties:

A list of these properties are as follows: AxisLabel, Tooltip, Label, LegendText, LegendTooltip and CustomPropertyName (the name of a custom property).

Conclusion: Afaik DataBinding will not let you set colored DataPoints. To make your code more effective using a Chart control, you can simply try using chart1.SuspendLayout and chart1.ResumeLayout to make the setup happen all in one.

However I would instead consider not using a Chart control in the first place.

The links to the two examples I gave in the first paragraph show two alternative ways:

• The first one is all about drawing the heatmap in GDI+. This is really trivial and very efficient. (The details in the post are probebly not pertinent to your problem..) For simple scaling I suggest drawing into a Bitmap, which you assign to a Panel or PictureBox; create it in the ClientSize and set the Panel.ImageLayout (or the PictureBox.SizeMode) as Stretch.

• The second example uses the Cells of a DataGridView as large 'pixels' for the heatmap...

See the second link for a method to create a nice List<Color>!