ASPxChartDesigner Class

The Client Chart Designer class.

Namespace: DevExpress.XtraCharts.Web.Designer

Assembly: DevExpress.XtraCharts.v19.2.Web.dll

Declaration

C#
VB.NET

public class ASPxChartDesigner :
    ASPxWebClientUIControl

Public Class ASPxChartDesigner
    Inherits ASPxWebClientUIControl

Remarks

For more information about the Client Chart Designer, refer to the Client Chart Designer topic.

Example

To invoke the Client Chart Designer to customize a chart, add an ASPxChartDesigner instance to a Web Form and call the ASPxChartDesigner.OpenChart method of the Designer with the chart control specified as a method parameter.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-add-the-client-chart-designer-to-an-application-t248123

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="ClientChartDesignerSample.MainPage" %>

<%@ Register Assembly="DevExpress.XtraCharts.v15.1.Web, Version=15.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %>
<%@ Register Assembly="DevExpress.Web.v15.1, Version=15.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>
<%@ Register assembly="DevExpress.XtraCharts.v15.1, Version=15.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.XtraCharts" tagprefix="cc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>
        Client Chart Designer Sample
    </title>
    <style>
        .center {
            margin: 0 auto
        }
        .top-margin {
            margin-top: 16px
        }
    </style>
</head>
<body>
<form id="form1" runat="server">
        <div>
            <dx:ASPxCallbackPanel
                ID="ASPxCallbackPanel1"
                runat="server"
                Width="960px"
                CssClass="center">
                <PanelCollection>
                    <dx:PanelContent>
                        <dxchartsui:WebChartControl
                            ID="chart"
                            runat="server"
                            CrosshairEnabled="True"
                            Height="540px"
                            Width="960"
                            PaletteName="Office 2013"
                            SelectionMode="Single">
                            <titles>
                                <cc1:ChartTitle Text="Product Prices Comparison" />
                            </titles> 
                        </dxchartsui:WebChartControl>
                        <asp:Button
                            ID="btnRunDesigner"
                            runat="server"
                            CssClass="top-margin"
                            Text="Run Client Chart Designer"
                            OnClick="btnRunDesigner_Click"/>
                    </dx:PanelContent>
                </PanelCollection>
            </dx:ASPxCallbackPanel>
        </div>
    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChartDesignerPage.aspx.cs" Inherits="ClientChartDesignerSample.ChartDesignerPage" %>

<%@ Register Assembly="DevExpress.XtraCharts.v15.1.Web, Version=15.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.XtraCharts.Web.Designer" TagPrefix="dxchartdesigner" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Client Chart Designer</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <dxchartdesigner:ASPxChartDesigner ID="chartDesigner" runat="server" OnSaveChartLayout="chartDesigner_SaveChartLayout"></dxchartdesigner:ASPxChartDesigner>
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;
using DevExpress.Web;
using DevExpress.XtraCharts.Web;
using DevExpress.XtraCharts.Web.Designer;

namespace ClientChartDesignerSample {
    public partial class ChartDesignerPage : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            if (!IsPostBack) {
                WebChartControl chart = new WebChartControl {
                    Width = (Unit)400,
                    Height = (Unit)225,
                    DataSource = new List<Product>()
                };
                SessionHelper.LoadChart(chart, Session);
                this.chartDesigner.OpenChart(chart);
            }
        }

        protected void chartDesigner_SaveChartLayout(object sender, SaveChartLayoutEventArgs e) {
            SessionHelper.SaveChartLayout(e.ChartLayoutXml, Session);
            ASPxWebControl.RedirectOnCallback("~/MainPage.aspx");
        }
    }
}

using System;
using System.Web.SessionState;
using DevExpress.XtraCharts;
using DevExpress.XtraCharts.Web;

namespace ClientChartDesignerSample {
    public static class SessionHelper {
        const string chartLayoutName = "ChartLayout";

        public static void SaveChartLayout(String layoutXml, HttpSessionState session) {
            session[chartLayoutName] = layoutXml;
        }

        public static void SaveChart(WebChartControl chart, HttpSessionState session) {
            SaveChartLayout(chart.SaveToXml(), session);
        }

        public static void LoadChart(WebChartControl chart, HttpSessionState session) {
            if (session[chartLayoutName] != null) {
                String layoutXml = session[chartLayoutName] as String;
                if (layoutXml != null)
                    chart.LoadFromXml(layoutXml);
            }
            else
                InitSeries(chart);
        }

        static void InitSeries(WebChartControl chart) {
            using (NWindEntities dbContext = new NWindEntities()) {
                SideBySideBarSeriesView view = new SideBySideBarSeriesView();
                view.FillStyle.FillMode = FillMode.Solid;
                Series series = new Series() {
                    Name = "Product Price",
                    View = view
                };
                series.ArgumentDataMember = "ProductName";
                series.ValueDataMembers.AddRange(new string[] { "UnitPrice" });
                chart.Series.Add(series);
            }
        }
    }
}

using System;
using System.Linq;

namespace ClientChartDesignerSample {
    public partial class MainPage : System.Web.UI.Page {
        void LoadData() {
            using (NWindEntities dbContext = new NWindEntities()) {
                chart.DataSource = (from products
                                        in dbContext.Products
                                    select products).ToList();
            }
        }

        protected void Page_Load(object sender, EventArgs e) {
            if (!IsPostBack) {
                SessionHelper.LoadChart(chart, Session);
                LoadData();
                this.chart.DataBind();
            }  
        }

        protected void btnRunDesigner_Click(object sender, EventArgs e) {
            SessionHelper.SaveChart(chart, Session);
            Response.Redirect("~/ChartDesignerPage.aspx");
        }
    }
}

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ChartDesignerPage.aspx.vb" Inherits="ClientChartDesignerSample.ChartDesignerPage" %>

<%@ Register assembly="DevExpress.XtraCharts.v15.1.Web, Version=15.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.XtraCharts.Web.Designer" tagprefix="dxchartdesigner" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <dxchartdesigner:ASPxChartDesigner ID="chartDesigner" runat="server">
        </dxchartdesigner:ASPxChartDesigner>

    </div>
    </form>
</body>
</html>

Imports DevExpress.Web
Imports DevExpress.XtraCharts.Web

Public Class ChartDesignerPage
    Inherits System.Web.UI.Page

    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If (Not IsPostBack) Then
            Dim chart As New WebChartControl()
            chart.Width = New Unit(400, UnitType.Pixel)
            chart.Height = New Unit(225, UnitType.Pixel)
            chart.DataSource = New List(Of Product)()
            SessionHelper.LoadChart(chart, Session)
            Me.chartDesigner.OpenChart(chart)
        End If
    End Sub

    Protected Sub chartDesigner_SaveChartLayout(sender As Object, e As DevExpress.XtraCharts.Web.Designer.SaveChartLayoutEventArgs) Handles chartDesigner.SaveChartLayout
        SessionHelper.SaveChartLayout(e.ChartLayoutXml, Session)
        ASPxWebControl.RedirectOnCallback("~/MainPage.aspx")
    End Sub
End Class

#If _MyType <> "Empty" Then

Namespace My
    ''' <summary>
    ''' Module used to define the properties that are available in the My Namespace for Web projects.
    ''' </summary>
    ''' <remarks></remarks>
    <Global.Microsoft.VisualBasic.HideModuleName()> _
    Module MyWebExtension
        Private s_Computer As New ThreadSafeObjectProvider(Of Global.Microsoft.VisualBasic.Devices.ServerComputer)
        Private s_User As New ThreadSafeObjectProvider(Of Global.Microsoft.VisualBasic.ApplicationServices.WebUser)
        Private s_Log As New ThreadSafeObjectProvider(Of Global.Microsoft.VisualBasic.Logging.AspLog)
        ''' <summary>
        ''' Returns information about the host computer.
        ''' </summary>
        <Global.System.Diagnostics.CodeAnalysis.SuppressMessageAttribute("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode")> _
        Friend ReadOnly Property Computer() As Global.Microsoft.VisualBasic.Devices.ServerComputer
            Get
                Return s_Computer.GetInstance()
            End Get
        End Property
        ''' <summary>
        ''' Returns information for the current Web user.
        ''' </summary>
        <Global.System.Diagnostics.CodeAnalysis.SuppressMessageAttribute("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode")> _
        Friend ReadOnly Property User() As Global.Microsoft.VisualBasic.ApplicationServices.WebUser
            Get
                Return s_User.GetInstance()
            End Get
        End Property
        ''' <summary>
        ''' Returns Request object.
        ''' </summary>
        <Global.System.Diagnostics.CodeAnalysis.SuppressMessageAttribute("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode")> _
        <Global.System.ComponentModel.Design.HelpKeyword("My.Request")> _
        Friend ReadOnly Property Request() As Global.System.Web.HttpRequest
            <Global.System.Diagnostics.DebuggerHidden()> _
            Get
                Dim CurrentContext As Global.System.Web.HttpContext = Global.System.Web.HttpContext.Current
                If CurrentContext IsNot Nothing Then
                    Return CurrentContext.Request
                End If
                Return Nothing
            End Get
        End Property
        ''' <summary>
        ''' Returns Response object.
        ''' </summary>
        <Global.System.Diagnostics.CodeAnalysis.SuppressMessageAttribute("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode")> _
         <Global.System.ComponentModel.Design.HelpKeyword("My.Response")> _
         Friend ReadOnly Property Response() As Global.System.Web.HttpResponse
            <Global.System.Diagnostics.DebuggerHidden()> _
            Get
                Dim CurrentContext As Global.System.Web.HttpContext = Global.System.Web.HttpContext.Current
                If CurrentContext IsNot Nothing Then
                    Return CurrentContext.Response
                End If
                Return Nothing
            End Get
        End Property
        ''' <summary>
        ''' Returns the Asp log object.
        ''' </summary>
        <Global.System.Diagnostics.CodeAnalysis.SuppressMessageAttribute("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode")> _
        Friend ReadOnly Property Log() As Global.Microsoft.VisualBasic.Logging.AspLog
            Get
                Return s_Log.GetInstance()
            End Get
        End Property
     End Module
End Namespace

#End If

Imports DevExpress.XtraCharts.Web
Imports DevExpress.XtraCharts

Public NotInheritable Class SessionHelper
    Const chartLayoutName As String = "ChartLayout"

    Public Shared Sub SaveChartLayout(layoutXml As String, session As HttpSessionState)
        session(chartLayoutName) = layoutXml
    End Sub

    Public Shared Sub SaveChart(chart As WebChartControl, session As HttpSessionState)
        SaveChartLayout(chart.SaveToXml(), session)
    End Sub

    Public Shared Sub LoadChart(chart As WebChartControl, session As HttpSessionState)
        If (session(chartLayoutName) IsNot Nothing) Then
            Dim layoutXml As String = TryCast(session(chartLayoutName), String)
            If (layoutXml IsNot Nothing) Then
                chart.LoadFromXml(layoutXml)
            End If
        Else
            InitSeries(chart)
        End If

    End Sub

    Public Shared Sub InitSeries(chart As WebChartControl)
        Using dbContext As New NWindEntities()
            Dim view As SideBySideBarSeriesView = New SideBySideBarSeriesView()
            view.FillStyle.FillMode = FillMode.Solid
            Dim series As Series = New Series()
            series.Name = "Product Price"
            series.View = view
            series.ArgumentDataMember = "ProductName"
            series.ValueDataMembers.AddRange(New String() {"UnitPrice"})
            chart.Series.Add(Series)
        End Using
    End Sub
End Class

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="MainPage.aspx.vb" Inherits="ClientChartDesignerSample.MainPage" %>

<%@ Register Assembly="DevExpress.Web.v15.1, Version=15.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.XtraCharts.v15.1.Web, Version=15.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %>
<%@ Register assembly="DevExpress.XtraCharts.v15.1, Version=15.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.XtraCharts" tagprefix="cc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <style>
        .center {
            margin: 0 auto;
        }
        .top-margin {
            margin-top: 16px
        }
    </style>
    <title>Client Chart Designer Sample</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <dx:ASPxCallbackPanel
                ID="ASPxCallbackPanel1"
                runat="server"
                Width="960px"
                CssClass="center">
                <PanelCollection>
                    <dx:PanelContent>
                        <dxchartsui:WebChartControl
                            ID="chart"
                            runat="server"
                            CrosshairEnabled="True"
                            Height="540px"
                            Width="960"
                            PaletteName="Office 2013"
                            SelectionMode="Single">
                            <titles>
                                <cc1:ChartTitle Text="Product Prices Comparison" />
                            </titles>
                        </dxchartsui:WebChartControl>
                        <asp:Button
                            ID="btnRunDesigner"
                            runat="server"
                            CssClass="top-margin"
                            Text="Run Client Chart Designer"
                            OnClick="btnRunDesigner_Click"/>
                    </dx:PanelContent>
                </PanelCollection>
            </dx:ASPxCallbackPanel>
        </div>
    </form>
</body>
</html>

Public Class MainPage
    Inherits System.Web.UI.Page
    Protected Sub LoadData()
        Using dbContext As New NWindEntities()
            chart.DataSource = (From products
                                In dbContext.Products
                                Select products).ToList()
        End Using
    End Sub


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            SessionHelper.LoadChart(chart, Session)
            LoadData()
            Me.chart.DataBind()
        End If
    End Sub

    Protected Sub btnRunDesigner_Click(sender As Object, e As EventArgs) Handles btnRunDesigner.Click
        SessionHelper.SaveChart(chart, Session)
        Response.Redirect("~/ChartDesignerPage.aspx")
    End Sub
End Class