Chart View Tutorial. Step 2: Categories and Series
- 4 minutes to read
In the previous topic, we created a grid control containing a Chart View. This View was bound to the CARS table in the DemosDB database. By default, the column diagram becomes active once the View has been created. Note that the grid control does not display any data yet:
The next step is to designate the categories within the Chart View. To do this you must select the chvCars View from within the Structure Navigator and expand the Categories property in the Object Inspector. Expand the DataBinding property which allows the data-aware properties of the categories to be edited. Use the combo box near the FieldName property to choose the field from the View’s bound data source and select the Model field:
This will categorize the data within the Chart View by the car models. The Chart View now displays tick-mark labels which correspond to category values:
Note that the categories are displayed in a zigzag manner and the text of the wide labels is automatically truncated and ends with ellipses to avoid clipping. For demonstration purposes in this tutorial, we’ll reduce the number of categories displayed within the chart by filtering the data in the bound dataset by the car category. Select the qryCars dataset and set its Filter property to “Category = ‘SALOON’” and the Filtered property to True as shown in the screenshot below:
As a result, the Chart View now contains information on the saloon cars only and thus the categories within the chart are limited to the ones shown in the following screenshot:
The next step is to create the data series which will provide the data to render the Chart View. To accomplish this, activate the Component Editor by clicking on the Customize… button of the Structure Navigator. The Component Editor contains a Series tab on the right. Click the Add… button to add a series. This will display a dropdown menu which lists all the numeric data source fields. Choose sequentially the Cyl and Liter fields. The corresponding series will be created. Note that the fields for which the series have been created in the View are displayed as checked in the dropdown menu:
Once data series have been added to the View, their names and the names of the fields linked to the series appear within the list on the Series page. Here you can remove specific series from the View by pressing the Delete button or the Del key or, by unchecking the corresponding field in the dropdown menu which appears when the Add… button is clicked. See the Create and Delete Series topic for details on creating series within Chart Views.
The following screenshot demonstrates how the grid control looks when both the series linked to the Cyl and Liter fields have been created:
The properties of each data series can be modified using the Component Editor and the Object Inspector. Select the chvCarsSeries1 series which is linked to the Cyl field and change its name to “chvCarsSeriesCyl”.
A data series can also be selected in a Chart View by clicking either the corresponding data marker in the chart’s plot area or the corresponding legend item. Select the chvCarsSeries2 series, which is linked to the Liter field, and change its name to “chvCarsSeriesLiter” using any of the techniques described above. Note that the borders of the data markers and the legend items that correspond to the selected data series are displayed in inverted color thus allowing you to easily distinguish which series is currently selected.
In a similar manner you can change any of the data series properties even the data binding settings. See the TcxGridDBChartSeries class description for details on the settings of data-aware series.
See the next topic for a snapshot of the View options setup.