Develop Reference

Chart : displaying boolean flags in a time plot as filled rectangles (instead of as lines)

I use the C# Chart in WinForms to plot a variety of variables in real time using the "line" chart type. That works well for analog values, but it's less than ideal for on/off flags.
I'd like to plot multiple flags as horizontal bars that are filled when the value is '1" and clear when the value is '0'.
Before I start coding a solution from scratch, do you have any suggestion on how I could take advantage of any features of the "chart" object to implement this more effectively?
EDIT: I am playing with the Area type, and it seems to be promising.
EDIT 2: That didn't work, because the area in the Area type always starts at the bottom of the chart, hiding the other rows. I am now trying the Range Column type

There are several ways to tackle this.: StackedBars, AreaChart, Annotations but I think by far the simplest is using a LineChartType.
The first issue is: How to create the gaps? The simplest way is to draw them as lines but with Color.Transparent. So instead of using the flag value as our y-value we use it to set the color..
So we could use a function like this:
void AddFlagLine(Chart chart, int series, int flag, int x)
{
Series s = chart.Series[series];
int px = s.Points.AddXY(x, series);
s.Points[px].Color = s.Color;
if (px > 0) s.Points[px - 1].Color = flag == 1 ? s.Color : Color.Transparent;
}
It takes the index of your Series and uses the flag to determine the color; note that the color of a line segment is controlled by the color of the end point.
So if you want to have the line going out from the new point to have its flag color, you need to set it when adding the next one..
This is simple enough and for lines as thick as 1-10 it works fine. But if you want larger widths things get a bit ugly..:
The rounded caps start to get bigger and bigger until they actually touch, flling the gaps more or less.
Unfortunately there seems to be no way to controls the caps-style of the lines. There are many CustomAttributes including DashStyles but not this one. So we have to resort to owner-drawing. This is rather simple for line charts. Here is an example:
The xxxPaint event looks like this:
private void chart_PostPaint(object sender, ChartPaintEventArgs e)
{
Graphics g = e.ChartGraphics.Graphics;
Axis ax = chart.ChartAreas[0].AxisX;
Axis ay = chart.ChartAreas[0].AxisY;
for (int si = 0; si < chart.Series.Count; si++ )
{
Series s = chart.Series[si];
for (int pi = 1; pi < s.Points.Count - 1; pi++)
{
DataPoint dp = s.Points[pi];
int y = (int) ay.ValueToPixelPosition(dp.YValues[0]+1); ///*1*
int x0 = (int)ax.ValueToPixelPosition(ax.Minimum);
int x1 = (int)ax.ValueToPixelPosition(s.Points[pi-1].XValue); ///*2*
int x2 = (int)ax.ValueToPixelPosition(dp.XValue);
x1 = Math.Max(x1, x0);
x2 = Math.Max(x2, x0);
using (Pen pen = new Pen(dp.Color, 40) ///*3*
{ StartCap = System.Drawing.Drawing2D.LineCap.Flat,
EndCap = System.Drawing.Drawing2D.LineCap.Flat })
{
g.DrawLine(pen, x1, y, x2, y);
}
}
}
A few notes:
1 : I have decided to move the the series up by one; this is up to you just as using or turning off the y-axis labels or replacing them by custom labels..
2 : Here we use the previous point's x-position!
3 : Note that instead of hard coding a width of 40 pixels you really should decide on a calculated width. This is an example that almost fills up the area:
int width = (int)( ( ay.ValueToPixelPosition(ay.Minimum) -
ay.ValueToPixelPosition(ay.Maximum)) / (chart7.Series.Count + 2));
You can twist is to fill more or less by adding less or more than 2.
I have turned all BorderWidths to 0 so only the drawn lines show.

I got it:
It turned out to actually be pretty easy; I used the Range Column type.
A) Set-up (done once):
plotChart.Series[chanNo].ChartType = SeriesChartType.RangeColumn;
plotChart.Series[chanNo].CustomProperties = "PointWidth=" + noOfFlags;
PointWidth is required to set the relative width of each rectangle so that it fills the entire width of one data point (if too small, there are gaps in the horizontal bar; if too large, there is overlap). noOfFlags is the number of flags shown (in the example shown above, noOfFlags = 4). (By the way the MSDN documentation is wrong: PointWidth is not limited to 2.)
B) Plotting (done for each new data point):
baseLine--;
int barHeight = flagHigh ? 1 : 0;
plotChart.Series[chanNo].Points.AddXY(pointX, baseLine, baseLine + barHeight);
flagHigh is a bool that is equal to the flag being monitored.
baseLine is decremented for each trace. In the example above, baseLine starts at 4, and is decremented down to 0.
Note that for each data point, RangeColumn requires 2 "Y" values: one for the bottom of the rectangle, one for the top; in the code, I set the bottom Y to the bottom of the row that I use for that particular flag, and the top to 1 above the bottom, to give me a height of 1.

VS2010 Chart control, how to display a blank chart?

I'm trying to use the chart control on a windows form and have it working, plotting some real time data, however before the data arrives nothing is displayed. I would like to show an empty graph with an X Y of 10 30 but still have the graph auto range if values go above this.
I cannot find a property to show the "blank" graph it this possible and if so how?
thanks

You can hide all data of a Series by making its line color Transparent. If you also set its LegendText to be " " all you can see are the Axis ticks. you can control them by adding a few Points and by setting the Minimum and Maximum values:
// short reference for our dummy:
Series S0 = chart1.Series[0];
// a simple type
S0.ChartType = SeriesChartType.Line;
// set 10 point with x-values going from 0-100 and y-values going from 1-10:
for (int i = 0; i < 100; i +=10) S0.Points.AddXY(i , i / 10);
// or add only a few, e.g. the first and last points:
//S0.Points.AddXY(100, 10);
//S0.Points.AddXY(0, 10);
// hide the line:
S0.Color = Color.Transparent;
// hide the legend text (it will still take up a little space, though)
S0.LegendText = " ";
// limit the axis to the target values
chart1.ChartAreas[0].AxisX.Maximum = 100;
chart1.ChartAreas[0].AxisX.Minimum = 0;
The result looks like an empty chart:

Drawing a chart in which I manipulate the zoom in and out

I am drawing a chart which I populate with the data I obtain from different procedures. I want to make two buttons to zoom in and out. I saw that I can use different functions from AxisX.ScaleView and I am playing a bit with those. I am almost there but I have a problem at the moment of drawing the chart:If you see the image 1, this is the chart after executing the different procedures and drawing it for the first time. When I do a zoom in and a zoom out, the last bars (Week 22 from image 2) are cut in half and doesn't go to its original size.
Does anyone have any idea how can I manipulate the start and end position for the Axis X in order to make the zoom? Does anyone know how to get the initian values of start and end of the Chart Area? I place the code of my function to make the zoom of the chart:
private void setSize(int zoom)
{
int blockSize = (Convert.ToInt32(tbZoom.Text) + zoom) / 100;
// set view range to [0,max]
chartReport.ChartAreas[0].AxisX.Minimum = 0;
chartReport.ChartAreas[0].AxisX.Maximum = chartReport.Series[0].Points.Count;
// enable autoscroll
chartReport.ChartAreas[0].CursorX.AutoScroll = true;
chartReport.ChartAreas[0].CursorX.IsUserSelectionEnabled = true;
// let's zoom to [0,blockSize] (e.g. [0,100])
chartReport.ChartAreas[0].AxisX.ScaleView.Zoomable = true;
chartReport.ChartAreas[0].AxisX.ScaleView.SizeType = DateTimeIntervalType.Number;
int actualHeight = chartReport.Height;
int actualWidth = chartReport.Width;
int position = 0;
int size = blockSize;
chartReport.ChartAreas[0].AxisX.ScaleView.Zoom(position, size);
// disable zoom-reset button (only scrollbar's arrows are available)
chartReport.ChartAreas[0].AxisX.ScrollBar.ButtonStyle = ScrollBarButtonStyles.SmallScroll;
// set scrollbar small change to blockSize (e.g. 100)
chartReport.ChartAreas[0].AxisX.ScaleView.SmallScrollSize = blockSize;
tbZoom.Text = (blockSize * 100).ToString();
}

Your first line is setting the maximum of the axis wrong: chartReport.ChartAreas[0].AxisX.Maximum = chartReport.Series[0].Points.Count; sets it to 22, when it really should be 23 (based on the first image).
If your data will always look like this, simply add 1:
chartReport.ChartAreas[0].AxisX.Maximum = chartReport.Series[0].Points.Count + 1;
Unfortunately, using the automatic min/max values won't give you the actual values until the chart is actually drawn. If your chart has few DataPoints this isn't a problem, as you can just call chartReport.Refresh(); or something similar and then get the values from the axes. But, if you have a lot of points, the Refresh() will take a long time which is undesirable. In my extensive use of the charts, I wound up setting the axis ranges myself so I have full control, rather than using the automatic min/max values.

Visually formatting chart issue

This is an incredibly localized problem but I've spent a while on it now and just can't get the formatting to work. Basically what I want to do is show a column chart for a value but no bells and whistles (i.e. no labeling, no title, no legend, nothing!) And I want it to look like this:
But instead it looks like this:
The axis extends out and to the right and I can't figure out how to make it go away. Here is my code:
charts[i].Series.Clear();
charts[i].Series.Add("Block " + i + 1);
charts[i].Series[0].ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Column;
charts[i].Series[0].Points.Add(liveData[i]);
charts[i].ChartAreas[0].AxisY.Maximum = 4;
charts[i].ChartAreas[0].AxisY.Minimum = 0;
charts[i].ChartAreas[0].AxisX.Maximum = 1;
charts[i].ChartAreas[0].AxisX.Minimum = 1;
charts[i].ChartAreas[0].AxisX.MajorGrid.LineWidth = 0;
charts[i].ChartAreas[0].AxisY.MajorGrid.LineWidth = 0;
charts[i].ChartAreas[0].AxisX.LabelStyle.Enabled = false;
charts[i].ChartAreas[0].AxisY.LabelStyle.Enabled = false;
charts[i].ChartAreas[0].AxisY.LineWidth = 0;
charts[i].ChartAreas[0].AxisY.MajorTickMark.Enabled = false;
charts[i].ChartAreas[0].AxisX.MajorTickMark.Enabled = false;
charts[i].Series[0].IsVisibleInLegend = false;
Now I am guessing this is a min/max thing but for the life of me I just can't get it to work. Can someone see my mistake? Or suggest another method besides charts?
Also note the 'Block 1 (V)' label you see underneath is not generated by the chart, it is a textbox label that just happened to get cut into the screenshot.
Thanks!

Your data has the x-value of 1. By default the bar is centered on the 1 mark. by shifting the limits you are actually only seeing half of it. Two things to do: Tell the bar exactly how wide it shall be and limit the x-axes accordingly.
charts[i].Series[0].CustomProperties = "PointWidth = 1"; // One bar takes a width of 1 unit on the x-axis
charts[i].ChartAreas[0].AxisX.Minimum = 0.5; // change!
charts[i].ChartAreas[0].AxisX.Maximum = 1.5; // change!

Win Form Charting

I may be asking the wrong question, but what I need is to add a "Guide Line" to my windows form chart. In other words I have a chart with a simple data series and I need to draw a line on the y axis at the passing score, or 80%. I don't want to add a second series as the first series has an undetermined number of data points. Is there a simple way to simply draw one line on the y axis?
The dashed line below is what I am shooting for(it does not need the arrows).
100|
|
90|
| o
80|<----------------------->
|
70| o o
|
60| o
| o o
50|o o
|_________________________
1 2 3 4 5 6 7 8 9

Apologies for repeating Don Kirkby's answer, but I don't have the rep to add a comment yet.
Using HorizontalLineAnnotation you can set the ClipToChartArea which will limit the extent of the line to within the chart, to solve the problem you mentioned.
ChartArea area = ...;
var line = new HorizontalLineAnnotation();
line.IsInfinitive = true; // make the line infinite
line.ClipToChartArea = area.Name;
line.LineDashStyle = ChartDashStyle.Dash;
Assuming your y-axis holds values on a scale of 0..1 then you can attach the line to the Y-Axis using line.AxisY = area.AxisY, which results in its position being interpreted as an axis value, then set line.Y = 0.8; to attach at the 80% position.

You can add a StripLine.
Use StripWidth property to set line position:
var series = chart1.Series[0]; //series object
var chartArea = chart1.ChartAreas[series.ChartArea];
chartArea.AxisY.StripLines.Add(new StripLine
{
BorderDashStyle = ChartDashStyle.Dash,
BorderColor = Color.DarkBlue,
StripWidth = 80//Here is your y value
});
UPDATE: Previous version of this answer used Interval instead of StripWidth. As #dthor correctly pointed out in the comments setting the Interval will draw a repeated strip line. In the example above, Interval is set to 0 by default.

I've never used charts, but HorizontalLineAnnotation sounds promising.

You can add dots to the frame with a loop that has for example 900 loop for 1 to 9 values. For each loop the compiler will calculate the value and left a dot for that perimeter and another for the next one so it will looks like a line of a equation :)