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 jQuery 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. The example below demonstrates how you can use the generateDataRows method to create charts from the selected Grid cells or rows. To enable the generation of a chart, get a reference to the Grid component and pass the Grid selection and the Grid columns to the generateDataRows method:

const grid = $("#grid").data("kendoGrid");
const data = kendo.ui.ChartWizard.generateDataRows(grid.getSelectedData(), grid.columns);

In the example below you can select multiple cells using Ctrl + click and then press the Button on top to create Charts based on the selection in the Grid.

EditPreviewOpen In Dojo

    <button id="btn">Create Chart</button>
    <div id="grid"></div>
    <div id="chartwizard"></div>
    <script>
      $(document).ready(function () {
        const dataSource = new kendo.data.DataSource({
          type: "odata",
          transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
          },
          schema: {
            model: {
              fields: {
                OrderID: { type: "number" },
                Freight: { type: "number" },
                ShipName: { type: "string" },
                OrderDate: { type: "date" },
                ShipCity: { type: "string" }
              }
            }
          },
          pageSize: 15,
          serverPaging: true,
          serverFiltering: true,
          serverSorting: true
        });

        $("#grid").kendoGrid({
          dataSource: dataSource,
          selectable: {
            mode: "multiple, cells",
          },
          pageable: {
            pageSize: 10,
            buttonCount: 5,
          },
          scrollable: true,
          navigatable: true,
          columns: [
            {
              field:"OrderID",
            },
            "Freight",
            {
              field: "ShipName",
              title: "Ship Name"
            }, {
              field: "ShipCity",
              title: "Ship City"
            }
          ],
        });

        $("#chartwizard").kendoChartWizard({
          dataSource: dataSource,
          window: {
            visible: true,
          },
          dataColumns:  [
            {
              field:"OrderID",
            },
            "Freight",
            {
              field: "ShipName",
              title: "Ship Name"
            }, {
              field: "ShipCity",
              title: "Ship City"
            }
          ],
          dataBound: function (e) {
            const chartWizard = e.sender;
            const grid = $("#grid").data("kendoGrid");
            chartWizard.open();
          }
        });

        $("#btn").kendoButton({
          click: () => {
            const grid = $("#grid").data("kendoGrid");
            const data = kendo.ui.ChartWizard.generateDataRows(grid.getSelectedData(), grid.columns);
            const chartWizard = $("#chartwizard").data("kendoChartWizard");
            chartWizard.setOptions({ dataSource: data });
          },
        });
      })
    </script>