Better Dashboards

Working with Microsoft enterprise chart, dashboard and reporting technologies.

Apply Semi-Transparency to the Chart

Posted by milang on January 22, 2009

Let’s take a break from pie charts for today so that we can talk about how to set semi-transparent colors on the chart. The ‘faded’ or ‘soft’ look shows up in all of the gallery images in the chart sample framework, so I spent hours scratching my head about how to apply that look to my charts before I found my main man Victor’s post on the MSDN ASP.NET chart forum.

I’ve got an area chart that looks something like this:

areachart1

The second series obscures the data points in the first series.  At this point, we have a couple of options so that we can see every data point: 1) Set this to be a stacked area chart.  That fixes the problem of obscured data points but it becomes difficult to compare the two series because they are stacked instead of on the same line of sight, 2)  Set the series to be another chart type.  Nothing wrong with changing these series so that they are line charts, but what if I still want to show an area chart?

How to Show Hidden Points on an Overlapped Area Chart

The key is to set semi-transparencies for each data point on the chart, not on the palette.  We could also have changed the Chart.Palette to SemiTransparent but the color scheme is kinda ugly compared to the BrightPastel palette.

Here’s the code from Victor’s post:

using System.Web.UI.DataVisualization.Charting;
using System.Drawing;

public partial class AreaChart : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // Using 200 as my transparency value, but any value between 0-255 is valid
        SetChartTransparency(Chart1, 200);
    }

    private void SetChartTransparency(Chart chart, byte alpha)
    {
        // Apply palette colors so that they are populated into chart before being manipulated
        chart.ApplyPaletteColors();

        // Iterate through data points and set alpha values for each
        foreach (Series series in chart.Series)
            foreach (DataPoint point in series.Points)
                point.Color = Color.FromArgb(alpha, point.Color);
    }
}

areachart2

I was trying to set the transparency on the series, but apparently you have to set it at the data point level. Maybe it has something to do with the fact that the data point properties (if they have been explicitly set) always override the series properties.

Thanks Victor!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: