Ugly drawing of MS asp.net radar chart

Question

I'm using the MS asp.net charting controls. And I'm using the radar chart to draw some values, but for some reason, the lines of the X-axis doesn't really meet in the middle.

I have set the LineWidth = 1, but the line still takes like 2 pixels and some of the markers are totally off, or maybe it's the line that's totally off. Maybe my text is a little bit off as well, so please see picture and hopefully you'll understand my problem. =)

enter image description here

Code that generates the chart:

// Populate series data
Chart chart1 = new Chart();
chart1.ChartAreas.Add(new ChartArea("ChartArea1"));

chart1.Height = new Unit(380);
chart1.Width = new Unit(880);
//chart1.AntiAliasing = AntiAliasingStyles.Graphics;  
//chart1.BackColor = Color.Transparent;
chart1.Customize += new EventHandler(Chart_Customize);

// Show as 3D
chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;
chart1.ChartAreas["ChartArea1"].AxisY.IntervalAutoMode
    = IntervalAutoMode.FixedCount;
chart1.ChartAreas["ChartArea1"].AxisY.Interval = 10;
chart1.ChartAreas["ChartArea1"].AxisY.Maximum = 100;

chart1.ChartAreas["ChartArea1"].AxisY.IsReversed = true;

chart1.ChartAreas[0].AxisY.LineWidth = 1;
chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.Gray;
chart1.ChartAreas[0].AxisY.LineColor = Color.Gray;
chart1.ChartAreas[0].AxisY.MajorTickMark.Enabled = false;

List<string> names = new List<string>();
int namecounter = 1;
foreach (var p in Model.Participants)
{
  if (SessionHandle.ShowNamesInDiagrams)
    names.Add(p.Person.Name);
  else
    names.Add(namecounter.ToString());
  namecounter++;
}

#region firstresult
if (SessionHandle.ShowFirstResult)
{
  chart1.Series.Add(new Series("FirstResult"));
  List<double> firstresult = new List<double>();
  foreach (var p in Model.Participants)
  {
    var resultSummary = from r in Model.ResultSummary
                        where r.userID == p.ParentID && Model
                            .Modules
                            .Where(x => x.hasResult)
                            .ToList()
                            .Exists(x => x.ID == r.moduleID)
                        select r;
    firstresult.Add(resultSummary.Sum(x => x.scorePercent)
                    / Model.Modules.Where(x => x.hasResult).Count());
  }

  chart1.Series["FirstResult"].Points.DataBindXY(names, firstresult);
  // Set radar chart type
  chart1.Series["FirstResult"].ChartType = SeriesChartType.Radar;

  // Set radar chart style (Area, Line or Marker)
  chart1.Series["FirstResult"]["RadarDrawingStyle"] = "Marker";
  chart1.Series["FirstResult"].Color = Color.DarkBlue;
  chart1.Series["FirstResult"].MarkerImage
      = Url.Content("~/Content/Images/firstresult.png");

  // Set circular area drawing style (Circle or Polygon)
  chart1.Series["FirstResult"]["AreaDrawingStyle"] = "Circle";

  // Set labels style (Auto, Horizontal, Circular or Radial)
  chart1.Series["FirstResult"]["CircularLabelsStyle"] = "Horizontal";
}
#endregion

Can you post the code that generates the chart, and the chart definition? — Mitchel Sellers, Feb 17 '11 at 14:45
I hope this helps: [http://stackoverflow.com/questions/5013008/how-can-i-draw-a-radar-chart-using-microsoft-chart-control-for-net-framework-3][1] [1]: http://stackoverflow.com/questions/5013008/how-can-i-draw-a-radar-chart-using-microsoft-chart-control-for-net-framework-3 — c0D3l0g1c, Dec 06 '12 at 13:28
Try this: [1]: http://stackoverflow.com/questions/5013008/how-can-i-draw-a-radar-chart-using-microsoft-chart-control-for-net-framework-3%5D%5B1%5D Hope this helps :) — tony b, Oct 13 '13 at 15:27
We use MS asp.net charts when compiling in Mono, which our preferred charting solution will not compile in. The results are ugly, unfortunately, and we can't make them as consistent or appealing as any other charting solutions we've used. If the looks are important, I might suggest checking out highcharts, d3.js, or dundas. — cazlab, Oct 24 '13 at 14:39
cazlab is on the right track here - .NET Charts leave much to be desired. HighCharts or even telerik if you have it. — Wjdavis5, Nov 18 '13 at 20:37
I thought that MS charts and Dundas were practically the same thing, mainly because of this: http://blogs.msdn.com/b/alexgor/archive/2008/11/07/microsoft-chart-control-vs-dundas-chart-control.aspx Maybe that Dundas are a little bit more up to date since they might be able to release updates faster than MS. Although their collaboration might just have been for a specific version of Dundas charts and not later versions. Have to check up on HighCharts and see what they offer, thanks. — Markus, Nov 19 '13 at 07:39

score 2 · Answer 1 · edited May 20 '14 at 03:13

WPF coordinates refer to the center of the pixel, not the corners, so try adding 0.5 to all your coordinates. To show this is the case consider the following xaml:

<Canvas>
<Line X1="50" Y1="50" X2="100" Y2="50" Stroke="Black" StrokeThickness="1" />
<Line X1="50" Y1="50" X2="50" Y2="100" Stroke="Black" StrokeThickness="1" />
<Line X1="50" Y1="50" X2="100" Y2="100" Stroke="Black" StrokeThickness="1" />
</Canvas>

Here it is rendered normally and then with a 0.5 pixel offset applied to each coordinate:

Xaml lines

Ugly drawing of MS asp.net radar chart

1 Answers1