Getting Started

To add MindFusion.Charting for WebForms to your ASP.NET Web application, perform the following steps:

1. Create a new Web Site in Visual Studio

Select File -> New -> Project -> ASP.NET Web Application from the Visual Studio menu. MindFusion.Charting requires .NET 4.0 or newer versions, make sure selected target framework is at least .NET 4.0.

In the New Project dialog box, select language and location:

• Select language Visual C# or Visual Basic
• Select the ASP.NET Web Application template;
• Choose the Location for your website in the 'Location' field, for example "D:\Projects\MindFusion.Charting\MyWebApplication".
• Click OK.

The MyWebApplicationsolution tree is created and displayed in the Solution Explorer.

The source file Default.aspx is created automatically.

2. Add the MindFusion.Charting controls to the Visual Studio Toolbox

• Click the right mouse button within the Toolbox area.
• From the context menu, select Choose items
• In the Choose Toolbox Items dialog box, click the .NET Framework Components tab;
• Click the Browse button;
• Navigate to the MindFusion.Charting for WebForms installation folder;
• Select the MindFusion.Charting.WebForms.dll assembly, which contains Dashboard and various Chart-derived controls and click Open. Now you can see the newly installed Dashboard and other chart icons in the toolbox.

3. Add references to the required assemblies to your project

• Open the Solution Explorer.
• Right-click the project name and choose Add Reference from the context menu.
• Navigate to the MindFusion.Charting for WebForms installation folder and locate the subfolder corresponding to the project's ASP.NET version.
• Select MindFusion.Common.dll, MindFusion.Common.WebForms.dll, MindFusion.Charting.dll, MindFusion.Charting.WebForms.dll and click the Open button.

4. Place the Dashboard control in the Web page

Now, you can see icons for the MindFusion.Charting components in your toolbox. Follow these steps to add a Dashboard control on the page:

• Open the Visual Studio toolbox.
• Drag the Dashboard icon from the Visual Studio Toolbox and drop in the Design area of the Web Form. Dashboard lets you display multiple plots, axes in dynamic layout. Chart controls display a single plot and type of graphics by default, but new ones can be added to them as well.
• If you haven't added references to all assemblies listed in section 3, Visual Studio might display an error at this point. To fix it, add the required assemblies.
• MindFusion.Charting controls rely on several external script files. By default MindFusion.Charting uses MicrosoftAjax.js for browser abstraction, which you must load by adding <asp:ScriptManager> to the form. The client-side charting code is contained in MindFusion.Charting.js, which you must add to the project using the Add Existing Item context menu command. Either add the script file to the Scripts subfolder of your project, or if you choose a different file structure, specify the script's location through the JsLibraryLocation property. 

5. Add data to the chart

After adding a chart control to the page, you can now add data to its Series collection. Select the web form's code-behind file and modify the Page_Load handler. In the handler add data series using either ones of the pre-defined series classes (such as SimpleSeries, Series2D, DataBoundSeries) or by implementing the Series interface in your own model class.

C#

using MindFusion.Charting;

//...

if (!IsPostBack)
{
    barChart.Series = new ObservableCollection<Series>
    {
        new BarSeries(
            new List<double> { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 },
            new List<string> { "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve" },
            null)
        { Title = "Series 1" }
    };
}

Check the Tutorials section for information on how to customize your charts and building more complex dashboards.