Better Dashboards

Working with Microsoft enterprise chart, dashboard and reporting technologies.

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?

Advertisements

2 Responses to “Make Your ASP.NET Chart Look Like The Excel 2007 Chart”

  1. digg referencement…

    […]Make Your ASP.NET Chart Look Like The Excel 2007 Chart « Better Dashboards[…]…

  2. Rahel said

    How to make in this form i try but AxisY and AxisY2 show differnet not like this

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: