DotNetNuke: Charts and Graphs

When you need to create fast and easy charts, the Microsoft Chart control is the tool to use.

What you will need:

Visual Studio 2008
A DotNetNuke site already set-up
Microsoft Chart Controls for Microsoft .NET Framework 3.5 (after you install create a directory on your computer at C: \TempImageFiles)
Microsoft Chart Controls Add-on for Visual Studio 2008

Create a Chart

First, download and install LinqThings4Sale_03.00.00_Install.zip (if you have DNN4 you will need to install and run LinqPrep first. If you have DNN 5 make sure you have upgraded your web.config to asp.net 3.5 in the Host settings first).

Place the module on a page in your DotNetNuke website and enter a few categories and items so you have some data to work with.

Open the DotNetNuke website in Visual Studio (from the menu bar, select File then Open Web Site). In the Solution Explorer, open the View.ascx page at "\DesktopModules\LinqThings4Sale\View.ascx".

Switch to Design view of the View.ascx page and drag and drop the Chart control on it from the Visual Studio toolbox (under the Data section).

Click the small grey box in the upper right hand corner of the Chart control and set the Data Source to LDSGrouping.

Note, if you don't see the Chart control in the Visual Studio toolbox you can add it by right-clicking on the Data section in the toolbox and selecting Choose Items.

Then you will have to wait about 5 minutes for the Choose Toolbox Items box to pop up.

Check the box next to "Chart / System.Web.UI.DataVisualization.Charting" and click the OK button. This will add the Chart control to the toolbox.

In the Properties for the Chart control, click the "..." button next to ChartAreas.

In the ChartArea Collection Editor box set:

Area3DStyle/(Enable3D) to True
Area3DStyle/LightStyle to Realistic

Click the OK button to close the box.

In the Properties for the Chart control, click the "..." button next to Series.

In the Series Collection Editor box set:

Chart/ChartType to Doughnut
Data Source/XValueMembers to Category
Data Source/YValueMembers to Count

Click the OK button to close the box.

In the Properties for the Chart control, set BorderSkin/(SkinStyle) to Emboss.

Save the page and view it in the web browser. Your dynamic chart will display.

The best way to learn how to use the Charting control is to download and install the sample website (Click the Downloads tab on this page and then download and install the "ASP.NET Samples")

Charting download links:

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.
Language Pack for Microsoft Chart Controls
This installs the language pack for the Chart Controls. It is available in 23 .NET Framework languages.
Microsoft Chart Controls Add-on for 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.
Documentation for Microsoft Chart Controls

[Back to: The ADefWebserver DotNetNuke HELP WebSite]

Buy DotNetNuke Modules from Snowcovered

DotNetNuke™ is a registered trademark of DotNetNuke Corporation.