Lesson 3 - Bind Chart Series to Data

• Dec 08, 2021
• 3 minutes to read

This tutorial demonstrates how to bind a Web Chart to a data source, add a series, and configure basic chart options.

• Step 1. Create a Chart
• Step 2. Bind Chart to a Data Source
• Step 3. Add a Series and Specify Its Data
• Step 4. Filter Series Data
• Step 5. Populate the Chart with Data at Design Time
• Step 6. Customize the Chart
• Results

Step 1. Create a Web Chart

Create a new ASP.NET Web Application or open an existing application. Drop the WebChartControl onto the form from the DX.23.2: Data & Analytics toolbox tab.

Step 2. Bind Chart to a Data Source

Click the chart’s smart tag to invoke its Tasks list. Select <New data source…> from the Choose Data Source drop-down list.

In the Data Source Configuration Wizard, select SQL Database and click OK.

Click New Connection… In the invoked Add Connection dialog, ensure that the data source type is Microsoft Access Database File (OLE DB) and click Browse.

In the Select Microsoft Access Database File dialog, choose the NWind.mdb file that is included with our DevExpress Demos.

Click OK to close the dialog.

In the Choose Your Data Connection window, click Next >.

Select the Products table and click Next >.

Click the Test Query button to test the database connection.

Click Finish to complete data source creation.

Step 3. Add a Series and Specify Its Data

Click the chart’s smart tag and select Series….

Click Add… in the Series Collection Editor. Select the Bar view and click OK.

Switch to the Properties tab. Set the ArgumentDataMember property to ProductName.

Set the Value of the ValueDataMembers property to UnitPrice.

Step 4. Filter Series Data

To filter data points in a series, click the FilterCriteria property’s ellipsis button.

• Use the plus button to add a new condition in the Filter UI Editor.
• Select CategoryID in the list of data fields.
• Set the criteria operator to Equals.
• Set the operand value to 4.
• Click Apply.

See the following help topic for more information: Filter Series Data.

Step 5. Populate the Chart with Data at Design Time

Click the chart’s smart tag. Select Populate to display data source values instead of mock values at design time.

Step 6. Customize the Chart

To increase the chart’s size, set the WebChartControl.Width property to 640px and WebChartControl.Height property to 360px.

To show series labels, set the LabelsVisibility property to True.

To display each bar with a different color, expand the View property, and set ColorEach to True.

As a result, each data point is displayed separately within the legend.

To modify legend content, set the LegendTextPattern property to “{A}: {V}”.

To change the legend’s position, expand the Legend property in the Properties window. Set AlignmentHorizontal to Center, AlignmentVertical to BottomOutside, and Direction to LeftToRight.

To specify the chart’s title, click the ellipsis button for the Titles property. Set Text to “Product Prices Comparison”.

Results

This section shows the resulting chart and markup.

<dx:WebChartControl ID="WebChartControl1" runat="server" CrosshairEnabled="True"
                            DataSourceID="DataSource"
                            Height="360px" Width="640px">
            <DiagramSerializable>
                <dx:XYDiagram>
                    <AxisX VisibleInPanesSerializable="-1">
                    </AxisX>
                    <AxisY VisibleInPanesSerializable="-1">
                    </AxisY>
                </dx:XYDiagram>
            </DiagramSerializable>
            <Legend Name="Default Legend" AlignmentHorizontal="Center"
                    AlignmentVertical="BottomOutside" Direction="LeftToRight">
            </Legend>
            <SeriesSerializable>
                <dx:Series ArgumentDataMember="ProductName" 
                           FilterString="[CategoryID] = 4" 
                    LabelVisibilityMode="All" LegendName="Default Legend" 
                    LegendTextPattern="{A}: {V}" Name="Series 1" 
                    ValueDataMembersSerializable="UnitPrice">
                    <ViewSerializable>
                        <dx:SideBySideBarSeriesView ColorEach="True">
                        </dx:SideBySideBarSeriesView>
                    </ViewSerializable>
                </dx:Series>
            </SeriesSerializable>
            <Titles>
                <dx:ChartTitle Text="Product Prices Comparison" />
            </Titles>
</dx:WebChartControl>

<asp:SqlDataSource ID="DataSource" runat="server" 
    ConnectionString="<%$ ConnectionStrings:nwindConnectionString %>" 
    ProviderName="<%$ ConnectionStrings:nwindConnectionString.ProviderName %>" 
    SelectCommand="SELECT * FROM [Products]">
</asp:SqlDataSource>