Dundas Data Visualization Support Site
Dundas Support Site Home  |  Contact Us  |  Dundas Home  
Contact Us via Email
Home

How to add your company's logo to your chart as a semi transparent watermark

 

Q. How can I add my own custom watermark like the one that is seen in the evaluation version of Dundas Chart?

A. The following is a method that will allow you to take any standard image, apply a semi transparency or alpha blend and then have it drawn directly in the center of the chart area.  This method will also allow you to set a color that is to be made completely transparent as well as allow you to specify the size of the watermark.

First, hook up the PostPaint event for the chart and load your image file. Then call the CreateWaterMark() method which is given at the end of this document.

[C#]
using Dundas.Charting.WebControl;
using System.Drawing;
...
protected void Chart1_PostPaint(object sender, Dundas.Charting.WebControl.ChartPaintEventArgs e)
{
    if(sender is ChartArea)
    {
        //load image file
        Image img = Image.FromFile("c:\\logo.gif");
        //call the drawing method
        CreateWaterMark(img, 10, Color.White,200,150,e);
    }
}
[VB.NET]
Imports Dundas.Charting.WebControl
Imports System.Drawing
...
Protected Sub Chart1_PostPaint(ByVal sender As Object, ByVal e As Dundas.Charting.WebControl.ChartPaintEventArgs) Handles Chart1.PostPaint
    If TypeOf sender Is ChartArea Then
        'load image file
        Dim img As Image = Image.FromFile("c:\sunset.jpg")
        'call the drawing method
        CreateWaterMark(img, 10, Color.White, 200, 150, e)
    End If
End Sub

The following is a breakdown of all the values passed into the CreateWaterMark() method:

CreateWaterMark(img, 10,Color.White,200,150,e);  - This is a reference to the image to be drawn in the chart.

CreateWaterMark(img, 10, Color.White,200,150,e);   - A value from 0-255 that represents the alpha value to use for the image, this value will determine how faded the image will appear. If for example, you did not want the image to appear faded set this value to 255.

CreateWaterMark(img, 10,Color.White,200,150,e); - The color being passed here will be treated as a transparent color when it is rendered on the chart. If you do not want to map a color to transparent, simply change this value to Color.Transparent and it will instruct the method to map transparent to transparent having no effect on the image.

CreateWaterMark(img, 10, Color.White,200,150,e);   - These values will determine the width and height of the image that is going to be drawn, the image will always be located in the center of the chartarea. 

CreateWaterMark(img, 10, Color.White,200,150,e);   - This is simply a reference to the arguments that are being passed to the PostPaint event so that the function can perform a drawing operation. You do not need to worry about ever changing this value.

Next, all you have to do is add the following method to your project.  Unless you need to make any custom changes to this, you should pretty much only have to copy and paste this in your project for it to work.

[C#]
/// <summary>
/// Creates the water mark and applies alpha blending
/// </summary>
/// <param name="img">A refrence to the image file to be placed in the chart (System.Drawing.Image not the ASP.NET control)</param>
/// <param name="alpha">A value between 0-255 that determines how faded the image will appear on the chart (255 is not faded at all)</param>
/// <param name="color">The Color that will be made completely transparent, if you don't want to do this just pass System.Drawing.Color.Transparent</param>
/// <param name="width">The width of the image to be drawn on the chart</param>
/// <param name="height">The height of the image to be drawn on the chart</param>
/// <param name="e">Dundas.Charting.WebControl.ChartPaintEventArgs e, this needs to be passed to the function so the drawing can be done  <see cref="T:Dundas.Charting.WebControl.ChartPaintEventArgs"/> instance containing the event data.</param>
public void CreateWaterMark(System.Drawing.Image img,Single alpha,System.Drawing.Color color,int width,int height, Dundas.Charting.WebControl.ChartPaintEventArgs e)
{
    //The object is used to apply changes to the image
    System.Drawing.Imaging.ImageAttributes attrib = new System.Drawing.Imaging.ImageAttributes();
    
    //Apply a transparency color
    if (color != null)
    {
        System.Drawing.Imaging.ColorMap[] map = new System.Drawing.Imaging.ColorMap[1];
        map[0] = new System.Drawing.Imaging.ColorMap();
        map[0].OldColor = color;
        map[0].NewColor = System.Drawing.Color.Transparent;
        attrib.SetRemapTable(map);
    }
   
    //Apply the alpha blend
    System.Drawing.Imaging.ColorMatrix matrix = new System.Drawing.Imaging.ColorMatrix();
    matrix[3, 3] = 256 - alpha;
    attrib.SetColorMatrix(matrix);

    //Get the coordinates for the chart area
    //Calculate the rectangle that is the chartarea
    double xmint = Chart1.ChartAreas[0].AxisX.Minimum;
    double xmaxt = Chart1.ChartAreas[0].AxisX.Maximum;
    double ymint = Chart1.ChartAreas[0].AxisY.Minimum;
    double ymaxt = Chart1.ChartAreas[0].AxisY.Maximum;

    float xmin = (float)e.ChartGraphics.GetPositionFromAxis("Default", AxisName.X, xmint);
    float xmax = (float)e.ChartGraphics.GetPositionFromAxis("Default", AxisName.X, xmaxt);
    float ymin = (float)e.ChartGraphics.GetPositionFromAxis("Default", AxisName.Y, ymint);
    float ymax = (float)e.ChartGraphics.GetPositionFromAxis("Default", AxisName.Y, ymaxt);

    RectangleF rect = new RectangleF(xmin, ymax, xmax - xmin, ymin - ymax);
    
    //Convert the rectangle to absolute coordinates
    rect = e.ChartGraphics.GetAbsoluteRectangle(rect);

    //This rectangle is the rectangle representing the chartarea
    Rectangle areaRectangle = new Rectangle((int)rect.X, (int)rect.Y, (int)rect.Width, (int)rect.Height);
    
    //Find the center point of the chartarea
    double midX = areaRectangle.X + (0.5 * areaRectangle.Width);
    double midY = areaRectangle.Y + (0.5 * areaRectangle.Height);
    
    //Calculate the actual rectangle used to draw the image
    Rectangle innerRectangle = new Rectangle((int)(midX-(0.5*width)), (int)(midY-(0.5*height)), width, height);
    
    //Draw the Image
    e.ChartGraphics.DrawImage(img, innerRectangle, 0, 0, img.Width, img.Height, System.Drawing.GraphicsUnit.Pixel, attrib);
}
[VB.NET]
''' <summary>
''' Creates the water mark and applies alpha blending
''' </summary>
''' <param name="img">A refrence to the image file to be placed in the chart (System.Drawing.Image not the ASP.NET control)</param>
''' <param name="alpha">A value between 0-255 that determines how faded the image will appear on the chart (255 is not faded at all)</param>
''' <param name="color">The Color that will be made completely transparent, if you don't want to do this just pass System.Drawing.Color.Transparent</param>
''' <param name="width">The width of the image to be drawn on the chart</param>
''' <param name="height">The height of the image to be drawn on the chart</param>
''' <param name="e">Dundas.Charting.WebControl.ChartPaintEventArgs e, this needs to be passed to the function so the drawing can be done  <see cref="T:Dundas.Charting.WebControl.ChartPaintEventArgs"/> instance containing the event data.</param>
Public Sub CreateWaterMark(ByVal img As System.Drawing.Image, ByVal alpha As Single, ByVal color As System.Drawing.Color, ByVal width As Integer, ByVal height As Integer, ByVal e As Dundas.Charting.WebControl.ChartPaintEventArgs)
    'The object is used to apply changes to the image
    Dim attrib As New System.Drawing.Imaging.ImageAttributes()
    'Apply a transparency color
    If color <> Nothing Then
        Dim map As System.Drawing.Imaging.ColorMap() = New System.Drawing.Imaging.ColorMap(0) {}
        map(0) = New System.Drawing.Imaging.ColorMap()
        map(0).OldColor = color
        map(0).NewColor = System.Drawing.Color.Transparent
        attrib.SetRemapTable(map)
    End If
    'Apply the alpha blend
    Dim matrix As New System.Drawing.Imaging.ColorMatrix()
    matrix(3, 3) = 256 - alpha
    attrib.SetColorMatrix(matrix)
    'Get the coordinates for the chart area
    'Calculate the rectangle that is the chartarea
    Dim xmint As Double = Chart1.ChartAreas(0).AxisX.Minimum
    Dim xmaxt As Double = Chart1.ChartAreas(0).AxisX.Maximum
    Dim ymint As Double = Chart1.ChartAreas(0).AxisY.Minimum
    Dim ymaxt As Double = Chart1.ChartAreas(0).AxisY.Maximum
    Dim xmin As Single = Convert.ToSingle(e.ChartGraphics.GetPositionFromAxis("Default", AxisName.X, xmint))
    Dim xmax As Single = Convert.ToSingle(e.ChartGraphics.GetPositionFromAxis("Default", AxisName.X, xmaxt))
    Dim ymin As Single = Convert.ToSingle(e.ChartGraphics.GetPositionFromAxis("Default", AxisName.Y, ymint))
    Dim ymax As Single = Convert.ToSingle(e.ChartGraphics.GetPositionFromAxis("Default", AxisName.Y, ymaxt))
    Dim rect As New System.Drawing.RectangleF(xmin, ymax, xmax - xmin, ymin - ymax)
    'Convert the rectangle to absolute coordinates
    rect = e.ChartGraphics.GetAbsoluteRectangle(rect)
    'This rectangle is the rectangle representing the chartarea
    Dim areaRectangle As New System.Drawing.Rectangle(Convert.ToInt32(rect.X), Convert.ToInt32(rect.Y), Convert.ToInt32(rect.Width), Convert.ToInt32(rect.Height))
    'Find the center point of the chartarea
    Dim midX As Double = areaRectangle.X + (0.5 * areaRectangle.Width)
    Dim midY As Double = areaRectangle.Y + (0.5 * areaRectangle.Height)
    'Calculate the actual rectangle used to draw the image
    Dim innerRectangle As New System.Drawing.Rectangle(Convert.ToInt32(midX - (0.5 * width)), Convert.ToInt32(midY - (0.5 * height)), width, height)
    'Draw the Image
    e.ChartGraphics.DrawImage(img, innerRectangle, 0, 0, img.Width, img.Height, _
     System.Drawing.GraphicsUnit.Pixel, attrib)
End Sub
 

Additional Downloads:

CreateWaterMark method (C#, VB.NET)
PoorExcellent