Search code examples
c#asp.net.netchartsmschart

ASP.NET Line Chart X-Axis Intervals Off


I am using an MSChart (System.Web.UI.DataVisualization.Charting.Chart()) Line Chart in an ASP.NET web page. It works fine except that the X-Axis intervals are off by 1 and I cannot figure out how to make they align to the right numbers. Here it is:

enter image description here

Notice the X-Axis (MPH) numbers: -1, 9, 19, 29....

Those are supposed to be 0, 10, 20, 30. I have taken measure in the code that I thought should have made it the way I want, but nothing works. My chart is 100% built in the c#, nothing in the ASPX. Here it is:

private void BuildLineChart(string reportName, List < DataPoint > points, string xTitle, string yTitle) {
    var chart = new Chart();

    // Build a column series
    Series series = new Series(reportName);
    series.ChartType = SeriesChartType.Line;
    chart.Series.Add(series);

    // Define the chart area
    Grid grid = new Grid();
    grid.LineWidth = 0;
    ChartArea chartArea = new ChartArea();
    chartArea.AxisX.MajorGrid = grid;
    chartArea.AxisX.Crossing = 0;
    chartArea.AxisX.Interval = 10;
    chartArea.AxisX.IsStartedFromZero = true;

    if (xTitle != string.Empty) {
        chartArea.AxisX.Title = xTitle;
        chartArea.AxisX.TitleAlignment = StringAlignment.Center;
        chartArea.AxisX.TextOrientation = TextOrientation.Horizontal;
        chartArea.AxisX.TitleFont = new Font("Verdana", 12);
    }

    if (yTitle != string.Empty) {
        chartArea.AxisY.Title = yTitle;
        chartArea.AxisY.TitleAlignment = StringAlignment.Center;
        chartArea.AxisY.TextOrientation = TextOrientation.Rotated270;
        chartArea.AxisY.TitleFont = new Font("Verdana", 12);
    }

    ChartArea3DStyle areaStyle = new ChartArea3DStyle(chartArea);
    areaStyle.Rotation = 0;
    chart.ChartAreas.Add(chartArea);
    Axis xAxis = new Axis(chartArea, AxisName.X);
    Axis yAxis = new Axis(chartArea, AxisName.Y);

    // Set chart width and height (Note: increasing the width and height of the chart doesn't seem to improve the fidelity in the generated pdf (downstream))
    chart.Width = new System.Web.UI.WebControls.Unit(800, System.Web.UI.WebControls.UnitType.Pixel);
    chart.Height = new System.Web.UI.WebControls.Unit(300, System.Web.UI.WebControls.UnitType.Pixel);

    // Bind the data to the chart
    foreach(DataPoint point in points) {
        chart.Series[reportName].Points.Add(point);
    }

    chart.Series[reportName].BorderWidth = 2;

    //chart.Series[reportName].IsValueShownAsLabel = true;
    string filename = Server.MapPath("./ChartImages") + "/" + reportName + ".png";
    chart.SaveImage(filename, ChartImageFormat.Png);
}

var points = new List<DataPoint>();
points.Add(new DataPoint(0, 0));
points.Add(new DataPoint(8, 25));
points.Add(new DataPoint(9, 15));
points.Add(new DataPoint(14, 25));
points.Add(new DataPoint(15, 15));
points.Add(new DataPoint(22, 26));
points.Add(new DataPoint(23, 16));
points.Add(new DataPoint(36, 26));
points.Add(new DataPoint(36, 17));
points.Add(new DataPoint(53, 26));
points.Add(new DataPoint(53, 19));
points.Add(new DataPoint(73, 26));
BuildLineChart("GearSplit", points, "MPH", "RPM X 100");

Notice especially the Interval = 10 and the IsStartedFromZero = true.


Solution

  • Set the axis minimum value:

        chartArea.AxisX.Minimum = 0;
    

    enter image description here