Alex Gorev's Weblog : .NET Framework

MS Chart Control: Getting Started

alexgor — Tue, 08 Dec 2009 05:26:00 GMT

Scott Mitchell wrote a great series of articles where he describes how to use Microsoft Chart control from simple binding to more complex scenarious. I highly recommend to read his articles for everybody starting working on the control: http://www.4guysfromrolla.com/articles/072209-1.aspx

Alex.

Setting Microsoft Chart Series Colors

alexgor — Tue, 06 Oct 2009 07:33:00 GMT

Microsoft Chart control provides different ways to set color of the series and data points:

Palettes

Selecting one of the predefined palettes is the easiest way to change chart series colors. There are 12 built-in palettes with about 10 unique colors each.

Chart types like column and line, will assign a unique color from the palette to each of the series. If chart runs out of the palette colors then it will start reusing them again.

// Set chart series palette
Chart.Palette = ChartColorPalette.Pastel;

Chart type like Pie, assigns unique colors to each individual data point. You can still use Chart.Palette property or you can define different palettes for different series using Series.Palette property. Note that setting Series.Palette property will force all chart types including Column to use unique colors for each data point.

Important! To determine the color assigned to the series or data point from the palette you can call chart1.ApplyPaletteColors() method and then check Series or DataPoint.Color property.

Custom Palettes

If none of the predefined palettes fits your needs, you can always create custom palette with as many colors as you need:

// Set chart custom palette
Chart.Palette = ChartColorPalette.None; 
Chart.PaletteCustomColors = new Color[] { Color.Red, Color.Blue, Color.Yellow};

Empty points

Not all series data points are equal… When you data bind your chart to the DBNull values the data points will be automatically marked as ‘empty’. You can also mark data points as empty by setting DataPoint.IsEmpty property. Each empty data point uses the visual attributes defined in Series.EmptyPointStyle property.

// Hide all series empty data point by making them transparent
Chart.Series[0].EmptyPointStyle.Color = Color.Transparent;

Color Property

If all of the above methods does not work for you, then you can always set Color property for the series or individual data point.

// Set color for the whole series
Chart.Series[0].Color = Color.Green;

// Set color of a single data point
Chart.Series[0].Points[5].Color = Color.Red;

You can always switch back to using the palette colors by setting both Series and DataPoint Color properties to Color.Empty.

Alex.

Microsoft Chart Control vs. Dundas Chart Control

alexgor — Fri, 07 Nov 2008 22:32:00 GMT

I get a lot of questions about 'relationship' of our Microsoft Chart Control to the well known Dundas Data Visualization controls. You can definitely see the similarities in the features, appearance, APIs and demos we use.

So I will start with a little bit of history... Dundas is one of the leaders in data visualization, who provides well known Chart, Gauge, Map and other visual controls for different Microsoft development platforms (ASP.NET, Windows Forms, SQL Reporting Services and SharePoint). Microsoft acquired Dundas Data Visualization Intellectual Property in April 2007 and is integrating this technology in different Microsoft products. New Chart and Gauge report items were already released as part of SQL Reporting Services 2008. We also announced the new Map report item which will be available in the next release of SSRS. Microsoft Chart controls (ASP.NET and Windows Forms), released at PDC 2008, also based on the source code acquired from Dundas! Microsoft Chart control is available as a separate installation for .NET Framework 3.5 SP1 and will be part of .NET Framework 4.0.

Where I can download the new Microsoft Chart controls?

You can download and install chart from this link.

So what are the differences between Microsoft and Dundas controls?

Microsoft Chart control is based on Dundas Chart source code version 5.5. We spent significant amount of time making sure the control passes Microsoft security review and meets accessibility, API and other requirements. As a result there were a few changes including changes in the public API. Several features were also cut:

Chart UI (Toolbar, Context Menu and Property Pages)

Flash and SVG Rendering and Animations

ASP.NET scrolling and zooming

When other controls (Gauge, Map, ...) will be available in the .NET Framework?

Microsoft does not have the exact dates at this moment when other data visualization controls for .NET Framework will be released.

Can I still purchase visualization controls from Dundas?

Yes, you can still purchase visualization controls from Dundas. Our team will continue bringing new visualizations to different Microsoft products; meanwhile they will be available from Dundas directly, where they continue to support and enhance available visualizations.

How do I get technical support?

Standard Microsoft support options are available including dedicated Microsoft Chart Control Forum. Please note that Dundas keeps supporting the products purchased directly from them and is not responsible for any support for Microsoft Chart Controls.

Thanks,
Alex.

Creating 'small' charts with Microsoft Chart Control

alexgor — Wed, 05 Nov 2008 04:09:00 GMT

Designing a chart when you have limited space available or when it's size can be dynamically changed usually requires additional planning. I've been playing with a way to display sample data in a 300 by 500 pixels chart and here what I came up with:

Figure 1: Chart size 300 by 500 pixels.

I was pretty happy with the results until I resized the chart to the actual required size of 200 by 220 pixels. So how can I fix that? I thought about that for a while and come up with the best practices below...

Figure 2: Chart size 200 by 220 pixels. Best practices applied to the right chart.

Best Practices of Creating Small Charts

You can apply this to a small chart you want to integrate into your application or use same approach 'dynamically' if you need to support the chart which may change it's size dynamically. There is no single solution that will work in all cases, so you need to understand what you can do and what is the best for your application.

Don't panic! Will fix it!
Chart Legend
Legend displays important information in the chart but it also may require significant amount of chart space. Here is what you can do to optimize for space:
- Hide legend if it is not essential for your chart
- Restrict how much size legend may possible take. This can be achieved using Chart.Legends[0].MaximumAutoSize property. The default value is 50 and it means that legend can take up to 50% of chart size. You can set this value to 25-30%.
- Change the position and layout style of the legend. By positioning Legend on the bottom in one row we can defiantly save some space in the chart.
- Make sure legend text is auto-fitted IsTextAutoFit and set AutoFitMinFontSize property of the legend to 5, to reduce the smallest possible font used by auto-fit algorithm.
Series Data Points
Consider removing borders, shadows and visual effects which will make it harder to read small chart. Replace data point labels with tooltips.
Chart Titles
Consider which titles are essential for your chart and make a decision to remove them or to reduce font. This applies to chart, legend and axes titles.

Axes Labels
Axes labels can be too long, font too big or there can be just too many of them. Here what you can do:

Make sure axes labels auto fitting is enabled IsLabelAutoFit=True. You can also adjust LabelAutoFitStyle property to achieve a specific label behavior.
Show numeric values in thousands, millions and so on. You can do that by specifying the labels format string in your code. If you do not know what will be the range of your data, the best approach is to use Customize event and check Maximum property of your axis. Here is a sample format string you can use:

Chart1.ChartAreas[0].AxisY.LabelStyle.Format = "$#,,,.B;($#,,,.B);0";
If there are too many labels you can change the Interval property of the axis or switch to the dynamic interval using the IntervalAutoMode property of the axis.

Truncate categorical strings. Using Customize event you can get access to the automatically generated chart labels and customize them. Code below will truncate all labels larger than 10 characters. Full text of the label will be shown in the tooltip.

protected void Chart2_Customize(object sender, EventArgs e)   

{   

    foreach (ChartArea area in ((Chart)sender).ChartAreas)   

    {   

        foreach (Axis axis in area.Axes)   

        {   

            if (axis.Name.StartsWith("X"))   

            {   

                foreach (CustomLabel label in axis.CustomLabels)   

                {   

                    if (String.IsNullOrEmpty(label.ToolTip))   

                    {   

                        label.ToolTip = label.Text;   

                        if (label.Text.Length > 10)   

                        {   

                            label.Text = label.Text.Substring(0, 10) + "...";   

                        }   

                    }   

                }   

            }   

        }   

    }   

}

Visual Border
If you are using the visual rounded border around the chart consider disabling this feature.

Hope this was helpful!

Alex.

Microsoft Chart control for .NET Framework Released!

alexgor — Mon, 27 Oct 2008 06:43:00 GMT

I glad to announce the release of Microsoft Chart for .NET Framework 3.5 SP1, which includes the ASP.NET and Windows Forms Chart Controls. Our Data Visualization team in SSRS worked really hard to deliver those controls!

Here is where you can download it:

Microsoft Chart Controls for Microsoft .NET Framework 3.5 – This installs the ASP.NET and Windows Forms Controls. The assemblies will be installed in the GAC as well as in the “%Program File%\Microsoft Chart Controls\Assemblies” folder. If you build an application using the controls, your setup and deployment should add MSChart.exe installer as a pre-requisite.
Microsoft Chart Controls for Microsoft .NET Framework 3.5 Language Pack – This installs the language pack for the Chart Controls. It is available in 23 .NET Framework languages.
Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008 – This installs the IntelliSense file in English for the controls and also adds the controls to the toolbox for ASP.NET and Windows Forms.

Where to find more information?

Alex.