Skip to main content

Lesson 3 - Bind Chart Series to Data

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

Lesson3_Result

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.24.1: Data & Analytics toolbox tab.

Add a Chart Control

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.

Bind a Chart Control to Data Source

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

HowTo - AddChart_5

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.

BrowseAccessDataFile

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

Note

The default path is C:\Users\Public\Documents\DevExpress Demos 24.1\Components\Data\NWind.mdb

Select Microsoft Access Database File

Click OK to close the dialog.

AddConnection

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

Lesson3_ChooseDataConnection

Select the Products table and click Next >.

ASP_Lesson3_3

Click the Test Query button to test the database connection.

Click Finish to complete data source creation.

TestQuery

Step 3. Add a Series and Specify Its Data

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

ASP_Lesson3_4

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

Lesson3_ChooseSeriesView

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

Specify ArgumentDataMember

Set the Value of the ValueDataMembers property to UnitPrice.

ASP_Lesson3_5

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.

ASP_Lesson3_6

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.

ASP_Lesson3_7

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.

Lesson3_LabelsVisibility

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

Lesson3_ColorEach

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

Chart Control - Colored Bars

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

Lesson3_LegendTextPattern

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.

Lesson3_LegendCustomization

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

Lesson3_Title

Results

This section shows the resulting chart and markup.

Lesson3_Result

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