This section introduces using ChartDirector in ASP.NET MVC. If you are using ChartDirector in ASP.NET Web Forms, you may refer to The First ASP.NET Web Forms Project. If you are using ChartDirector in Windows Forms, you may refer to The First Windows Forms Project.
To get a feeling of using ChartDirector, and to verify the ChartDirector development environment is set up properly, we will begin by building a very simple bar chart.
The following is based on one of the charts in the sample project "NetMvcCharts". If you have not yet tried the sample project, it is highly recommended you try them now. Please refer to the Installation section for details. They are very useful for exploring and testing the features of ChartDirector.
To create a chart in ASP.NET MVC, the basic method is to create the chart in the controller and assign it to a RazorChartViewer. The RazorChartViewer can then be used in the view to generate the HTML for the chart. The step by step instructions are as follows:
- To begin, open an ASP.NET MVC project and add a reference to the standard ChartDirector assembly at "ChartDirector/standard/netchartdir.dll". (In Visual Studio, select Project/Add Reference, browse to the ChartDirector assembly to add it.)
- Add an empty controller and add the following line at the top of the controller:
- Add the following code in the controller, replacing the "Index" method automatically generated by Visual Studio if any. The main part of the code is the "createChart" method. It creates a chart with an HTML image map for tooltips, and assign them to the RazorChartViewer.
- Add an empty view for the Index method with the following code, replacing the code automatically generated by Visual Studio if any. The code uses the RazorChartViewer (stored as ViewBag.Viewer) to output the HTML for the chart with tooltips. The @Html.Raw indicates to Razor that the output is HTML. Without @Html.Raw, Razor will escape HTML tags. For example, <IMG> will become <IMG>, which is not what we want.
- You can now press the "Start" button to compile the code and view the page. The page should contain a chart with HTML tooltips.