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.
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>
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.