New to Kendo UI for Angular? Start a free 30-day trial

Angular Data Grid Chart Integration

Integrating charts within the Angular Grid provides a visual representation of the data, making trends, patterns, and outliers more clear compared to raw table data.

Use the Kendo UI for Angular Chart Wizard component to quickly create the desired chart using the Grid data.

The following example demonstrates how to launch the Chart Wizard from a Context Menu.

Change Theme

Theme

Loading ...

Generating Chart from Grid Selection

You can create charts from the Grid row and cell selection. Use one of the following methods to set up the Chart Wizard component:

Using Data-Binding Directive—Reduce the repetitive boilerplate code when creating charts from the Grid data.
Using Grid Selected Keys—Create charts from the Grid selectedKeys property collection.

Using Data-Binding Directives

To bind the Chart Wizard component and create charts based on the Grid selection:

Set the kendoGridBinding and kendoGridSelectBy directives of the Grid.

Apply the kendoChartWizardGridBinding directive and set the chartWizardData property.

html

<kendo-grid
    [kendoGridBinding]="data"
    kendoGridSelectBy="ID"
    [selectable]="selectionSettings"
    kendoChartWizardGridBinding
    [(chartWizardData)]="wizardData">
</kendo-grid>

Set the data property of the Chart Wizard component to the wizardData array.
html
```
<kendo-chartwizard [data]="wizardData"></kendo-chartwizard>
```

The following example demonstrates the chart integration when using binding directives.

Change Theme

Theme

Loading ...

Using Grid Selected Keys

The Chart Wizard component expects data of type ChartWizardDataRow. To map the selectedKeys array to the supported format, use the built-in getWizardDataFromGridSelection method.

import { getWizardDataFromGridSelection } from '@progress/kendo-angular-chart-wizard';

@ViewChild('grid') public grid: GridComponent;
public data: any[] = sampleData;
public mySelection: { itemKey: any; columnKey: number }[] = [];
public selectionKey = 'ID';

public onSelectionChange(): void {
    this.wizardData = getWizardDataFromGridSelection({
        grid: this.grid,
        data: this.data,
        selectedKeys: this.mySelection,
        selectionKey: this.selectionKey,
    });
}

The following example demonstrates the getWizardDataFromGridSelection helper method in action.

Change Theme

Theme

Loading ...

Generating Chart from Custom Data

You can bind the Chart Wizard component without selecting any Grid rows or cells by providing a custom collection to the selectedKeys field of the getWizardDataFromGridSelection helper method.

plotAllData(): void {
    this.wizardData = getWizardDataFromGridSelection({
        grid: this.grid,
        data: this.data,
        selectedKeys: this.data.map(item => item.ID),
        selectionKey: 'ID'
    });
}

The following example demonstrates how plot all data of the Grid.

Change Theme

Theme

Loading ...

Angular Data Grid Chart Integration

Generating Chart from Grid Selection

Using Data-Binding Directives

Using Grid Selected Keys

Generating Chart from Custom Data

Suggested Links