Click here to Skip to main content
11,570,750 members (46,244 online)
Click here to Skip to main content

Tagged as

Custom Annotate Your Charts

, 2 Apr 2009 CPOL 23K 14
Rate this:
Please Sign up or sign in to vote.
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

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

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

License

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

Share

About the Author

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

You may also be interested in...

Comments and Discussions

 
QuestionMessage Automatically Removed Pin
22-Apr-13 17:47
memberMember 1000322522-Apr-13 17:47 
QuestionHow can I send the report by email automatically? Pin
Member 270627629-Oct-11 12:14
memberMember 270627629-Oct-11 12:14 
AnswerRe: How can I send the report by email automatically? Pin
Steve Wellens29-Oct-11 16:29
memberSteve Wellens29-Oct-11 16:29 
QuestionHow can I get in touch with you Steve? Pin
Blumen10-Apr-09 2:30
memberBlumen10-Apr-09 2:30 
AnswerRe: How can I get in touch with you Steve? Pin
Steve Wellens10-Apr-09 3:11
memberSteve Wellens10-Apr-09 3:11 
GeneralRe: How can I get in touch with you Steve? Pin
Blumen1-May-09 3:08
memberBlumen1-May-09 3:08 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150624.2 | Last Updated 2 Apr 2009
Article Copyright 2009 by Steve Wellens
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid