Combining a chart with data grid is the most obvious scenario for all real-time dashboards. The following code example explains this.
You can synchronize the data source/items source of the data grid with chart by binding the same data source between the chart and data grid.
You can also synchronically make the selection between the data grid and chart by binding the SelectedIndex (row index) property of data grid with the SelectedIndex property of the chart’s selection behavior as follows.
The following screenshot illustrates the output.
Figure 1: Synchronized SfChart and SfDataGrid.
The following screenshot illustrates the output after the selection has been made on the segment of SfChart.
When a segment in column series is selected using the mouse click, the corresponding SfDataGrid row also will be selected and vice-versa.
Figure 2: Synchronized SfChart and SfDataGrid after the selection has been made on the SfChart.
The ListenPropertyChange property should be set to true for listening the update of the properties in the underlying data source.
The following screenshot illustrates the output after editing the data in a cell.
Note: The segment is updated only when the cell loses its focus (since it updates the underlying values after that).
Figure 3: Synchronized SfChart and SfDataGrid after the cell data is changed.
This page will automatically be redirected to the sign-in page in 10 seconds.