Friday, October 1, 2010

Microsoft Chart Disappearing (not rendering)?

Sometimes my charts would show, sometimes they wouldn't. Sometimes when I refresh my page the chart disappears! I found if I set the ImageStorageMode of the chart to "UseImageLocation" it started working consistently.
<asp:Chart ID="chStats" runat="server" Palette="None" Height="500px" 
    Width="500px" ImageStorageMode="UseImageLocation" >

If you use this option, you have to make sure you define a location (that has write access) in your web.config.
<appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=20;dir=C:\TempCharts;" />
</appSettings>

More Info: MSDN: Chart.ImageStorageMode Property

Thursday, September 30, 2010

Chart Control - Showing all X Axis Lines (Vertical Lines)

By default when you plot more than 9 DataPoints on a chart of certain types (such as Line, Spline, etc.) the X axis will drop its labels and the X Axis Lines will disappear with them. Let's take a look:
Chart with 9 DataPoints:

Chart with 10 DataPoints:


How do I show all the X Axis labels?

You want to set the Interval property to "1".
Here is the HTML:
   1:  <asp:Chart ID="chtExample" runat="server" Height="390px" Width="470px">
   2:      <Series>
   3:          <asp:Series ChartType="Line" Name="Series1" XValueType="Date" Color="DarkBlue" BorderWidth="3">
   4:              <Points>
   5:                  <asp:DataPoint YValues="1" AxisLabel="7/31/2010" />
   6:                  <asp:DataPoint YValues="4" AxisLabel="8/7/2010" />
   7:                  <asp:DataPoint YValues="3" AxisLabel="8/14/2010" />
   8:                  <asp:DataPoint YValues="4" AxisLabel="8/21/2010" />
   9:                  <asp:DataPoint YValues="2" AxisLabel="8/28/2010" />
  10:                  <asp:DataPoint YValues="10" AxisLabel="9/4/2010" />
  11:                  <asp:DataPoint YValues="11" AxisLabel="9/11/2010" />
  12:                  <asp:DataPoint YValues="10" AxisLabel="9/18/2010" />
  13:                  <asp:DataPoint YValues="12" AxisLabel="9/25/2010" />
  14:                  <asp:DataPoint YValues="13" AxisLabel="10/2/2010" />
  15:              </Points>
  16:          </asp:Series>
  17:      </Series>
  18:      <ChartAreas>
  19:          <asp:ChartArea Name="ChartArea1">
  20:              <AxisX Interval="1">
  21:              </AxisX>
  22:          </asp:ChartArea>
  23:      </ChartAreas>
  24:  </asp:Chart>
Line 20 is where you will see the Interval property being set. With that set your chart will now show all labels on the X Axis:

This took me a while to find. Hope it helps you out!
More Info: MSDN: Axis.Interval Property

Saturday, January 23, 2010

Container.DataItemIndex - Getting GridView's Row Index

Every once in a while you need to get the index of the row in a GridView that triggered an event. You can setup the CommandArgument to store the row’s index for use in your code behind. In the GridView:
<asp:GridView ID="gridView" runat="server" DataKeyNames="myId" OnRowCommand=" gridView_RowCommand">
    <Columns>
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:Button ID="btnAdd" runat="server" CommandArgument='<%# Container.DataItemIndex %>'
                    CommandName="Add" Text="Add" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
Referencing in the code-behind:
protected void gridView_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "Add")
    {
        int myId = (int)gridView.DataKeys[Convert.ToInt32(e.CommandArgument)].Value;
    }
}