In the previous section The First ASP.NET Web Forms Project, we introduce a simple bar chart example using code from the "NetWebCharts" sample project. In this example, we will provide step by step instructions on how to include the code in your own ASP.NET Web Forms project.

• Add a reference to ChartDirector to your ASP.NET MVC project. See Using ChartDirector in Your Own Projects.
  
  
• Drag a ChartDirector WebChartViewer control from the Visual Studio toolbox onto a Web Form. Set the ID of the control to "WebChartViewer1".
  
  
• Double click on any empty space on the Form. Visual Studio should automatically generate a Page_Load event handler and jump to the code editing window. Add the following code at the top of the code file to include the ChartDirector namespace.
  
  

  [VB]	Imports ChartDirector
  [C#]	using ChartDirector;

  
  
• Copy and paste the following code into the Page_Load method.
  
  [ASP.NET - VB Version]
  ' The data for the bar chart Dim data() As Double = {85, 156, 179.5, 211, 123} ' The labels for the bar chart Dim labels() As String = {"Mon", "Tue", "Wed", "Thu", "Fri"} ' Create a XYChart object of size 250 x 250 pixels Dim c As XYChart = New XYChart(250, 250) ' Set the plotarea at (30, 20) and of size 200 x 200 pixels c.setPlotArea(30, 20, 200, 200) ' Add a bar chart layer using the given data c.addBarLayer(data) ' Set the x axis labels using the given labels c.xAxis().setLabels(labels) ' Output the chart WebChartViewer1.Image = c.makeWebImage(Chart.PNG) ' Include tool tip for the chart WebChartViewer1.ImageMap = c.getHTMLImageMap("", "", _ "title='{xLabel}: US${value}K'")
  
  [ASP.NET - C# Version]
  // The data for the bar chart double[] data = {85, 156, 179.5, 211, 123}; // The labels for the bar chart string[] labels = {"Mon", "Tue", "Wed", "Thu", "Fri"}; // Create a XYChart object of size 250 x 250 pixels XYChart c = new XYChart(250, 250); // Set the plotarea at (30, 20) and of size 200 x 200 pixels c.setPlotArea(30, 20, 200, 200); // Add a bar chart layer using the given data c.addBarLayer(data); // Set the x axis labels using the given labels c.xAxis().setLabels(labels); // Output the chart WebChartViewer1.Image = c.makeWebImage(Chart.PNG); // Include tool tip for the chart WebChartViewer1.ImageMap = c.getHTMLImageMap("", "", "title='{xLabel}: US${value}K'");

You may now set the Web Form as the Start Page and then compile and run the program.

As the above code is the same as that in the previous section The First ASP.NET Web Forms Project, we will omit explanation of the code here. Please refer to the previous section for details.