ASPxChartDesigner Class

The Client Chart Designer class.

Namespace: DevExpress.XtraCharts.Web.Designer

Assembly: DevExpress.XtraCharts.v22.1.Web.dll

NuGet Package: DevExpress.Web.Visualization

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.

View Example

MainPage.aspx

<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>

ChartDesignerPage.aspx

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

MainPage.aspx.cs
MainPage.aspx.vb

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");
        }
    }
}

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

ChartDesignerPage.aspx.cs
ChartDesignerPage.aspx.vb

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");
        }
    }
}

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

SessionHelper.cs
SessionHelper.vb

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);
            }
        }
    }
}

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