Angular Data Grid Chart Integration

Integrating charts within the 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.

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:

1. Set the kendoGridBinding and kendoGridSelectBy directives of the Grid.

2. Apply the kendoChartWizardGridBinding directive and set the chartWizardData property.

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

3. Set the data property of the Chart Wizard component to the wizardData array.

   Copy Code<kendo-chartwizard [data]="wizardData"></kendo-chartwizard>

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

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.

Copy Codeimport { 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.

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.

Copy CodeplotAllData(): 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.

Suggested Links

• Chart Wizard Overview
• API Index of the Grid
• API Index of the Chart Wizard
• Angular Data Grid Context Menu