How to: Add a Chart to a Web Page (Runtime Sample)

• Nov 03, 2023
• 3 minutes to read

This tutorial demonstrates how a chart can be generated and shown in a web page with a button click. For an alternative approach to this task, refer to How to: Add a Chart to an ASPxCallbackPanel during its Callback (Runtime Sample).

To demonstrate how this can be done, do the following.

1. Create a new ASP.NET Web Application or open an existing one.

2. Switch to the Design view of the Default.aspx page, and drag an ASPxButton from the DX.24.1: Common Controls toolbox tab onto the page. Handle its Click event to generate a web chart.

   

3. Add the required assemblies to the project.

   Note that if you prefer to add assemblies automatically (when you drop a WebChartControl instance onto the page), this affects your web application’s Web.config file. Refer to the following help topic for details on the changes made to this file: Adding a Web Chart.

4. Double-click ASPxButton1 to handle its Click event. Add the following code to the event handler.

   Note that prior to accessing elements and properties of a dynamically created WebChartControl, it should be added to the Page.Form.Controls collection.

   C#

   using System;
   using DevExpress.XtraCharts;
   using DevExpress.XtraCharts.Web;
   // ...
   
   protected void ASPxButton1_Click(object sender, EventArgs e) {
       // Create a WebChartControl instance.
       WebChartControl WebChartControl1 = new WebChartControl();
   
       // Add the chart to the form.
       // Note that a chart isn't initialized until it's added to the form's collection of controls.
       this.form1.Controls.Add(WebChartControl1);
   
       // Create a line series and add points to it.
       Series series1 = new Series("My Series", ViewType.Line);
       series1.Points.Add(new SeriesPoint("A", new double[] { 2 }));
       series1.Points.Add(new SeriesPoint("B", new double[] { 7 }));
       series1.Points.Add(new SeriesPoint("C", new double[] { 5 }));
       series1.Points.Add(new SeriesPoint("D", new double[] { 9 }));
   
       // Add the series to the chart.
       WebChartControl1.Series.Add(series1);
   }
   

   VB.NET

   Imports System
   Imports DevExpress.XtraCharts
   Imports DevExpress.XtraCharts.Web
   ' ...
   
   Protected Sub ASPxButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
       ' Create a WebChartControl instance.
       Dim WebChartControl1 As New WebChartControl()
   
       ' Add the chart to the form.
       ' Note that a chart isn't initialized until it's added to the form's collection of controls.
       Me.form1.Controls.Add(WebChartControl1)
   
       ' Create a line series and add points to it.
       Dim series1 As New Series("My Series", ViewType.Line)
       series1.Points.Add(New SeriesPoint("A", New Double() { 2 }))
       series1.Points.Add(New SeriesPoint("B", New Double() { 7 }))
       series1.Points.Add(New SeriesPoint("C", New Double() { 5 }))
       series1.Points.Add(New SeriesPoint("D", New Double() { 9 }))
   
       ' Add the series to the chart.
       WebChartControl1.Series.Add(series1)
   End Sub
   

Run the web application, and click ASPxButton1 to see the chart.