1
votes

I have a chart that shows two distinct Y values for the same DateTime X values. I am graphing them using a Spline on the same chart area with primary and secondary Y axes. The graph seems to work correctly with the exception that the Y axis labels are swapped. The expected primary Y axes labels are on the secondary axis and vice-versa.

Also, it should be noted that the charts are never displayed on screen, they are saved as image files in the file system and in a database using the chart.SaveImage method.

Here is an image of the output of the chart:

Dual Y-Axis Chart

Here is the code to generate the chart:

// create the chart
Chart chart = new Chart();
chart.Size = new Size(width, height);
chart.AntiAliasing = AntiAliasingStyles.All;

string datatype = data[0].DataType;
string datatype2 = data2[0].DataType;
SampleUnit unit = GetSampleUnit(data[0].Unit);
string u = "";
if (unit != null)
{
    u = unit.ShortName;
}
SampleUnit unit2 = GetSampleUnit(data2[0].Unit);
string u2 = "";
if (unit2 != null)
{
    u2 = unit2.ShortName;
}

var chartArea = new ChartArea();
chartArea.AxisX.LabelStyle.Format = "dd MMM\nHH:mm";
chartArea.AxisX.MajorGrid.LineColor = Color.LightGray;
chartArea.AxisY.MajorGrid.LineColor = Color.LightGray;
chartArea.AxisX.LabelStyle.Font = new Font("Calibri", 8);
chartArea.AxisY.LabelStyle.Font = new Font("Calibri", 8);
chartArea.AxisY2.LabelStyle.Font = new Font("Calibri", 8);
chartArea.AxisY2.Enabled = AxisEnabled.True;
chartArea.AxisY2.MajorGrid.Enabled = false;
if (string.IsNullOrEmpty(u))
{
    chartArea.AxisY.Title = datatype;
}
else
{
    chartArea.AxisY.Title = datatype + " (" + u + ")";
}
if (string.IsNullOrEmpty(u2))
{
    chartArea.AxisY2.Title = datatype2;
}
else
{
    chartArea.AxisY2.Title = datatype2 + " (" + u2 + ")";
}
chartArea.AxisY.TitleForeColor = Color.MediumBlue;
chartArea.AxisY2.TitleForeColor = Color.Red;
chart.ChartAreas.Add(chartArea);

var series = new Series();
series.Name = datatype;
series.ChartType = SeriesChartType.Spline;
series.XValueType = ChartValueType.DateTime;
series.YValueType = ChartValueType.Double;
series.YAxisType = AxisType.Primary;
series.Color = Color.MediumBlue;
chart.Series.Add(series); 

var series2 = new Series();
series2.Name = datatype2;
series2.ChartType = SeriesChartType.Spline;
series2.XValueType = ChartValueType.DateTime;
series2.YValueType = ChartValueType.Double;
series.Color = Color.Red;
series.YAxisType = AxisType.Secondary;
chart.Series.Add(series2);

chart.Titles.Add(sensor.Name + " " + char.ToUpper(datatype[0]) + datatype.Substring(1) + " " + char.ToUpper(datatype2[0]) + datatype2.Substring(1));

// bind the datapoints
chart.Series[datatype].Points.DataBindXY(data, "Timestamp", data, "Value");
chart.Series[datatype2].Points.DataBindXY(data2, "Timestamp", data2, "Value");

// draw!
chart.Invalidate();

So, I have two questions:

  1. Why are the axis labels reversed?
  2. Cosmetic: Why is the axis title putting a bar "|" at the end instead of a closing parenthesis ")"? Is this just a visual artifact from saving the chart as an image?
1

1 Answers

2
votes

You have a cut-n-paste typo

change

series.Color = Color.Red;
series.YAxisType = AxisType.Secondary;

to

series2.Color = Color.Red;
series2.YAxisType = AxisType.Secondary;