Better Dashboards

Working with Microsoft enterprise chart, dashboard and reporting technologies.

Posts Tagged ‘Cool Visualizations’

Make Your ASP.NET Chart Look Like The Excel 2007 Chart

Posted by milang on September 18, 2010

The Office Excel chart remains the most popular data visualization tool in the Microsoft stack.  This post describes how you can mimic the look and feel of the Excel chart using the ASP.NET chart that ships with Visual Studio 2010.

It is worth pointing out that the default ASP.NET chart already has a built-in Excel palette, but it is based on the Excel 2003 color palette:

In Office 2007, the Microsoft Excel product team changed the colors of their default chart palette and for whatever reason, the corresponding change did not make it into the ASP.NET chart.  However, you can still create the effect of an Excel 2007 chart by using a custom palette to override the built-in palettes, and adding the colors that are present on the default Excel chart.

Here is an example of the source code for this operation:

using System.Web.UI.DataVisualization.Charting;

public partial class PieChartPercentageLabels : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
// In order to use a custom palette, you must set the default palette to None.
chart1.Palette = ChartColorPalette.None;

// This will insert Excel colors for up to 6 series on your ASP.NET chart.
chart1.PaletteCustomColors = new Color[] {
Color.FromArgb(79, 129, 189),
Color.FromArgb(192, 80, 77),
Color.FromArgb(155, 187, 89),
Color.FromArgb(128, 100, 162),
Color.FromArgb(75, 172, 198),
Color.FromArgb(247, 150, 70)};

You can also use this technique to mimic the fonts and background colors used in the Excel chart, although I’m having a hard time trying to figure out what the default font is for the Excel 2007 chart.  Any ideas?


Posted in .NET Chart | Tagged: , | 2 Comments »

How to Create a Sparkline Chart in ASP.NET

Posted by milang on February 21, 2010

In this post, I’ll show how to create a sparkline chart in ASP.NET using the Microsoft chart control.  Sparklines aren’t supported natively, but they can be implemented easily by stripping the chart down to its basic series.

Try dropping a new chart onto the Visual Studio design surface and use the code below as a starting point to generate a sparkline similar to the one shown above.

using System.Web.UI.DataVisualization.Charting

protected void Page_Load(object sender, EventArgs e)
 // Generate random data
 Random rand = new Random();
 double high = rand.NextDouble() * 40;

 // Assign the random number to the chart to create 35 points
 for (int x = 0; x < 35; x++)
 Chart2.Series[0].Points.AddXY(DateTime.Now.AddDays(x), rand.Next(100, 200));

 // Start hiding both sets of axes, labels, gridlines and tick marks
 Chart2.ChartAreas[0].AxisX.LabelStyle.Enabled = false;
 Chart2.ChartAreas[0].AxisY.LabelStyle.Enabled = false;
 Chart2.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
 Chart2.ChartAreas[0].AxisY.MajorGrid.Enabled = false;
 Chart2.ChartAreas[0].AxisX.MajorTickMark.Enabled = false;
 Chart2.ChartAreas[0].AxisY.MajorTickMark.Enabled = false;
 Chart2.ChartAreas[0].AxisX.LineWidth = 0;
 Chart2.ChartAreas[0].AxisY.LineWidth = 0;

 // Sparklines use the 'Spline' chart type to show a smoother trend with a line chart
 Chart2.Series[0].ChartType = SeriesChartType.Spline;

 // Since the line is the only thing you see on the chart, you might want to
 // increase its width.  Interestingly, you need to set the BorderWidth property
 // in order to accomplish that.
 Chart2.Series[0].BorderWidth = 2;

 // Re-adjust the size of the chart to reduce unnecessary white space
 Chart2.Width = 400;
 Chart2.Height = 100;

I see why sparklines are popular but frankly, I’m not a big fan of them.  Charts should have context to understand what the trend line really means.  The “fast food” approach to data visualization will only lead to more confusion in the long run.  Finding easier ways to understand data is cool, but sometimes I feel that we’re just getting lazy as dashboard writers, compromising the difficulties of scientifically analyzing data in favor of quickly finding a pattern.  I can appreciate what Tufte was trying to get at with sparklines, but keep in mind that his use case will not work in all cases.

Anyway, rant over – enjoy your sparklines.  🙂  Feel free to post questions if this is unclear.

Posted in .NET Chart, SQL Reporting Services | Tagged: , | 10 Comments »

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:


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

        // 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);


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!

Posted in .NET Chart | Tagged: , , , | Leave a Comment »