Click here to Skip to main content
15,847,963 members
Articles / Web Development / ASP.NET

Custom Annotate Your Charts

Rate me:
Please Sign up or sign in to vote.
4.00/5 (1 vote)
2 Apr 2009CPOL1 min read 33.3K   13   6
A few posts back, I described the new Microsoft Chart Controls for the .Net Framework: Chart Demo.   While playing with the controls a bit over the holidays, I was pleasantly surprised to find you can hook into the paint events while the chart is being rendered.

A few posts back, I described the new Microsoft Chart Controls for the .Net Framework: Chart Demo. While playing with the controls a bit over the holidays, I was pleasantly surprised to find you can hook into the paint events while the chart is being rendered.

In the code below, I've hooked into the Post Paint event of the chart in the previous demo to add a custom annotation to the chart. Here is what the chart looks like with the date printed and copyright annotation at the bottom:

Custom Annotated Chart

In order to make this happen, you hook into the chart control's PostPaint event:

ASP.NET
<asp:Chart ID="Chart1" runat="server"
    OnPostPaint="Chart1_PostPaint"

In the event handler, you are given access to the Graphics object and can draw on the surface of the graph:

C#
protected void Chart1_PostPaint(object sender, ChartPaintEventArgs e)
{
    if (e.ChartElement is Chart)
    {
        // create text to draw
        String TextToDraw;
        TextToDraw = "Printed: " + DateTime.Now.ToString("MMM d, yyyy @ h:mm tt");
        TextToDraw += " -- Copyright © Steve Wellens";

        // get graphics tools
        Graphics g = e.ChartGraphics.Graphics;
        Font DrawFont = System.Drawing.SystemFonts.CaptionFont;
        Brush DrawBrush = Brushes.Black;

        // see how big the text will be
        int TxtWidth = (int)g.MeasureString(TextToDraw, DrawFont).Width;
        int TxtHeight = (int)g.MeasureString(TextToDraw, DrawFont).Height;
 
        // where to draw
        int x = 5;  // a few pixels from the left border

        int y = (int)e.Chart.Height.Value;
        y = y - TxtHeight - 5; // a few pixels off the bottom
 
        // draw the string        
        g.DrawString(TextToDraw, DrawFont, DrawBrush, x, y);
    }
}

Notes:

In the real world, I would put this in a separate function to be reusable (to keep the demo simple, I left it in the handler).

Several paint events are generated while painting the graph. The text is only drawn when the main chart element is drawn.

To keep the text legible I left an arbitrary 5 pixels between the left side and bottom.

Question:

The chart control has PrePaint events and PostPaint events. I couldn't find any behavioral differences or documentation on the differences. Does anyone know why there are both PrePaint and PostPaint events?

I hope you find this useful.

Steve Wellens

This article was originally posted at http://weblogs.asp.net/stevewellens/privaterss.aspx

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
EndWell Software, Inc.
United States United States
I am an independent contractor/consultant working in the Twin Cities area in Minnesota. I work in .Net, Asp.Net, C#, C++, XML, SQL, Windows Forms, HTML, CSS, etc., etc., etc.

Comments and Discussions

 
QuestionHow can I send the report by email automatically? Pin
Member 270627629-Oct-11 13:14
Member 270627629-Oct-11 13:14 
AnswerRe: How can I send the report by email automatically? Pin
Steve Wellens29-Oct-11 17:29
Steve Wellens29-Oct-11 17:29 
QuestionHow can I get in touch with you Steve? Pin
Blumen10-Apr-09 3:30
Blumen10-Apr-09 3:30 
AnswerRe: How can I get in touch with you Steve? Pin
Steve Wellens10-Apr-09 4:11
Steve Wellens10-Apr-09 4:11 
GeneralRe: How can I get in touch with you Steve? Pin
Blumen1-May-09 4:08
Blumen1-May-09 4:08 
Nope, I'm no assassin. Just wanted to communicate privately, if you don't mind.

“Last night I lay in bed looking up at the stars in the sky and I thought to myself, where the heck is the ceiling.”

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.