ChartDirector 7.1 (.NET Edition)

The First ASP.NET Web Forms Project




This section introduces using ChartDirector in ASP.NET Web Forms. For ASP.NET MVC / Razor Pages, please refer to The First ASP.NET MVC / Razor Pages Project. For Windows Forms, please refer to The First Windows Forms Project. For WPF, please refer to The First WPF 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 code module comes from the "NetWebCharts" sample programs included in the ChartDirector distribution. If you have not yet tried the sample programs, 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.

[ASP.NET Web Forms - C# version] NetWebCharts\CSharpASP\simplebar.aspx
(Click here on how to convert this code to code-behind style.)
<%@ Page Language="C#" Debug="true" %> <%@ Import Namespace="ChartDirector" %> <%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %> <!DOCTYPE html> <script runat="server"> // // Page Load event handler // protected void Page_Load(object sender, EventArgs e) { // 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 labels on the x axis. c.xAxis().setLabels(labels); // Output the chart WebChartViewer1.Image = c.makeWebImage(Chart.SVG); // Include tool tip for the chart WebChartViewer1.ImageMap = c.getHTMLImageMap("", "", "title='{xLabel}: {value} GBytes'"); } </script> <html> <head> <script type="text/javascript" src="cdjcv.js"></script> </head> <body> <chart:WebChartViewer id="WebChartViewer1" runat="server" /> </body> </html>

[ASP.NET Web Forms - VB Version] NetWebCharts\VBNetASP\simplebar.aspx
(Click here on how to convert this code to code-behind style.)
<%@ Page Language="VB" Debug="true" %> <%@ Import Namespace="ChartDirector" %> <%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %> <!DOCTYPE html> <script runat="server"> ' ' Page Load event handler ' Protected Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) ' 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 labels on the x axis. c.xAxis().setLabels(labels) ' Output the chart WebChartViewer1.Image = c.makeWebImage(Chart.SVG) ' Include tool tip for the chart WebChartViewer1.ImageMap = c.getHTMLImageMap("", "", "title='{xLabel}: {value} GBytes'") End Sub </script> <html> <head> <script type="text/javascript" src="cdjcv.js"></script> </head> <body> <chart:WebChartViewer id="WebChartViewer1" runat="server" /> </body> </html>

The code is explained below:

Note: The trial version of ChartDirector will include small yellow banners at the bottom of the charts it produces. These banners will disappear in the licensed version of ChartDirector.