ASP.Net Chart X Axis showing misleading date labels

Question

I've got a straight forward column chart with 4 series on it, % on the Y and DateTime on the X axis. All is working fine except that the X axis labeling and interval marks are incorrect (well, misleading). The 1st cluster of columns are Januarys data, however the chart positions the cluster directly on top of a Feb label. The interval line (is that the correct name?) isn't helping either as it runs through the cluster of Januarys data making it look like col 1 & 2 are in Jan and col 3 and 4 in Feb. The data being used runs from Jan to July, with Aprils missing (intentional), however the chart makes it look like it runs Feb to Aug with May missing.

Dodgy Chart

Data Correct Data

So my questions is: How can I centre the clusters of columns in their own interval section with the correct month label on the X axis directly below it? I can even live without the interval line as long as the correct month displays below the correct data.

I've tried this chart with Splines, Lines and without any formatting and they all have the same problem. Help. It's Friday and I want to get this fixed so I can go to the pub.

Update: As requested - code behind:

        // set Y axix range
        Chart1.ChartAreas["ChartArea1"].AxisY.Minimum = 0;
        Chart1.ChartAreas["ChartArea1"].AxisY.Maximum = 100;

        // show y line every x%
        Chart1.ChartAreas[0].AxisY.Interval = 10;

        // Set axis title
        Chart1.ChartAreas["ChartArea1"].AxisX.Title = "Period";
        Chart1.ChartAreas["ChartArea1"].AxisY.Title = "Percentage (%)";

        // set the x axis date format to short month and year
        Chart1.ChartAreas[0].AxisX.IsLabelAutoFit = false;
        Chart1.ChartAreas[0].AxisX.LabelStyle.Format = "MMM \n yyyy";

        // The legend
        Chart1.Legends.Add("Default");
        Chart1.Legends["Default"].Docking = Docking.Bottom;
        Chart1.Legends["Default"].Alignment = StringAlignment.Center;

        // load the template for the basic styles
        Chart1.Serializer.IsResetWhenLoading = false;
        Chart1.LoadTemplate("SkyBlue.xml");

and mark up:

<asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1"
        Width="600px">
        <Series>
            <asp:Series Name="thing1" XValueMember="Period"
                YValueMembers="thing1">
            </asp:Series>
            <asp:Series ChartArea="ChartArea1" Name="Team" XValueMember="Period"
                YValueMembers="thing2">
            </asp:Series>
            <asp:Series ChartArea="ChartArea1" Name="Systems" XValueMember="Period"
                YValueMembers="thing3">
            </asp:Series>
            <asp:Series ChartArea="ChartArea1" Name="Env" XValueMember="Period"
                YValueMembers="thing4">
            </asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1">
            </asp:ChartArea>
        </ChartAreas>
    </asp:Chart>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:myConnString %>"
        SelectCommand="mySP"
        SelectCommandType="StoredProcedure">
        <SelectParameters>
            <asp:Parameter DefaultValue="1" Name="ID" Type="Int32" />
        </SelectParameters>
    </asp:SqlDataSource>

can you show some code, like how are you binding it to the chart control? — shradha
You have both asp.net and winforms listed clearly this is asp.net. I have removed the WinForms tag. — Joe Johnston

AakashM AakashM · Accepted Answer · 2012-08-20T08:27:41

the chart positions the cluster directly on top of a Feb label.

Not quite! Look at the data and then look closely at the chart. The first row is dated 31 Jan, and the cerntre of the bar cluster is, correctly, just to the left (ie just before) Feb. Similarly, the second cluster - from data dated 28 Feb is centered just to the left of the Mar axis tickmark.

How can I centre the clusters of columns in their own interval section with the correct month label on the X axis directly below it

Make sure the data you pass to the chart is the data you want plotted. If you want to work in whole months, make your data has only exact months - if you had data like

Date        Thing1  Thing2
01-01-2012   100     200
01-02-2012   200     200
01-03-2012   300     300

your chart would be exactly as you want.

The key is to understand that just saying

Chart1.ChartAreas[0].AxisX.LabelStyle.Format = "MMM \n yyyy";

doesn't change the underlying data away from a 'full' date, it just changes the output format of the axis.

ASP.Net Chart X Axis showing misleading date labels

2 Answers