New to Kendo UI for jQuery? Download free 30-day trial

jQuery Grid Chart Integration

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main
Launch Theme Builder

chart-integration.html

Also available for:

$(document).ready(function() { var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service", dataSource = new kendo.data.DataSource({ transport: { read: { url: crudServiceBaseUrl + "/Products", dataType: "jsonp" }, update: { url: crudServiceBaseUrl + "/Products/Update", dataType: "jsonp" }, destroy: { url: crudServiceBaseUrl + "/Products/Destroy", dataType: "jsonp" }, create: { url: crudServiceBaseUrl + "/Products/Create", dataType: "jsonp" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return { models: kendo.stringify(options.models) }; } } }, batch: true, pageSize: 15, schema: { model: { id: "ProductID", fields: { ProductID: { editable: false, nullable: true }, ProductName: { validation: { required: true } }, UnitPrice: { type: "number", validation: { required: true, min: 1 } }, Discontinued: { type: "boolean" }, UnitsInStock: { type: "number", validation: { min: 0, required: true } } } } } }); $("#grid").kendoGrid({ toolbar: "<button id='generateChartBtn'>Generate Chart</button><ul id='context-menu'></ul>", contextMenu: { body: [ { text: "Generate Chart", icon: "chart-area-stacked", items: [ { text: "Bar Chart", icon: "chart-bar-clustered", items: [ { name: "Bar", icon: "chart-bar-clustered", text: 'Bar', command: "GenerateChartWizardBar" }, { name: "Stacked Bar", icon: "chart-bar-stacked", text: 'Stacked Bar', command: "GenerateChartWizardBarStacked" }, { name: "100% Stacked Bar", icon: "chart-bar-stacked100", text: '100% Stacked Bar', command: "GenerateChartWizardBarStacked100" } ] }, { text: "Pie Chart", icon: "chart-pie", command: "GenerateChartWizardPie" }, { text: "Column Chart", icon: "chart-column-clustered", items: [ { name: "Column", icon: "chart-column-clustered", text: 'Column', command: "GenerateChartWizardColumn" }, { name: "Stacked Column", icon: "chart-column-stacked", text: 'Stacked Column', command: "GenerateChartWizardColumnStacked" }, { name: "100% Stacked Column", icon: "chart-column-stacked100", text: '100% Stacked Column', command: "GenerateChartWizardColumnStacked100" } ] }, { text: "Line Chart", icon: "chart-line", items: [ { name: "Line", icon: "chart-line", text: 'Line', command: "GenerateChartWizardLine" }, { name: "Stacked Line", icon: "chart-line-stacked", text: 'Stacked Line', command: "GenerateChartWizardLineStacked" }, { name: "100% Stacked Line", icon: "chart-line-stacked100", text: '100% Stacked Line', command: "GenerateChartWizardLineStacked100" } ] }, { text: "Scatter Chart", icon: "chart-scatter", command: "GenerateChartWizardScatter" } ] }, 'select' ] }, columns: [ { field: "ProductName", title: "Product Name" }, { field: "UnitPrice", title: "Unit Price", format: "{0:c}" }, { field: "UnitsInStock", title: "Units In Stock" }, { field: "Discontinued" } ], editable: false, pageable: true, selectable: "multiple, rows", dataSource: dataSource, dataBound: function() { var grid = $("#grid").data("kendoGrid"); grid.select("tr:eq(3), tr:eq(4), tr:eq(5), tr:eq(7), tr:eq(9)"); var generateChartBtn = $('#generateChartBtn').data('kendoButton'); if (!generateChartBtn) { $('#generateChartBtn').kendoButton({ icon: "chart-area-stacked", click: function() { $("#context-menu").data('kendoContextMenu').open(); } }) } } }); $("#context-menu").kendoContextMenu({ target: "#generateChartBtn", select: function(e) { var getSelectedData = $(e.item).text() switch (getSelectedData) { case 'Bar': createWizard('bar', false); break; case 'Stacked Bar': createWizard('bar', true); break; case '100% Stacked Bar': createWizard('bar', { type: '100%' }); break; case 'Line': createWizard('line', false); break; case 'Stacked Line': createWizard('line', true) break; case '100% Stacked Line': createWizard('line', { type: '100%' }) break; case 'Column': createWizard('column', false); break; case 'Stacked Column': createWizard('column', true) break; case '100% Stacked Column': createWizard('column', { type: '100%' }) break; case 'Pie Chart': createWizard('pie', false); break; case 'Scatter Chart': createWizard('scatter', false); break; default: if (getSelectedData.includes("Line")) { createWizard('line', false); } else if (getSelectedData.includes("Column")) { createWizard('column', false); } else { createWizard('bar', false); } break; } }, dataSource: [{ text: "Bar Chart", icon: "chart-bar-clustered", items: [ { name: "Bar", iconClass: "chart-bar-clustered", text: 'Bar', command: "GenerateChartWizardBar" }, { name: "Stacked Bar", icon: "chart-bar-stacked", text: 'Stacked Bar', command: "GenerateChartWizardBarStacked" }, { name: "100% Stacked Bar", icon: "chart-bar-stacked100", text: '100% Stacked Bar', command: "GenerateChartWizardBarStacked100" } ] }, { text: "Pie Chart", icon: "chart-pie", command: "GenerateChartWizardPie" }, { text: "Column Chart", icon: "chart-column-clustered", items: [ { name: "Column", icon: "chart-column-clustered", text: 'Column', command: "GenerateChartWizardColumn" }, { name: "Stacked Column", icon: "chart-column-stacked", text: 'Stacked Column', command: "GenerateChartWizardColumnStacked" }, { name: "100% Stacked Column", icon: "chart-column-stacked100", text: '100% Stacked Column', command: "GenerateChartWizardColumnStacked100" } ] }, { text: "Line Chart", icon: "chart-line", items: [ { name: "Line", icon: "chart-line", text: 'Line', command: "GenerateChartWizardLine" }, { name: "Stacked Line", icon: "chart-line-stacked", text: 'Stacked Line', command: "GenerateChartWizardLineStacked" }, { name: "100% Stacked Line", icon: "chart-line-stacked100", text: '100% Stacked Line', command: "GenerateChartWizardLineStacked100" } ] }, { text: "Scatter Chart", icon: "chart-scatter", command: "GenerateChartWizardScatter" }] }) $("#chartwizard").kendoChartWizard({ window: { visible: false, modal: false, draggable: { containment: "#container" } } }); function createWizard(type, stack) { const grid = $("#grid").data("kendoGrid"); const data = kendo.ui.ChartWizard.generateDataRows(grid.getSelectedData(), grid.columns); const chartWizard = $("#chartwizard").data("kendoChartWizard"); if (chartWizard._seriesValueAxisDDL) { chartWizard._seriesValueAxisDDL = null; } chartWizard.setOptions({ dataSource: data, defaultState: { seriesType: type, stack: stack }, dataColumns: grid.columns }); chartWizard.open(); } kendo.ui.grid.commands["GenerateChartWizardBar"] = kendo.ui.grid.GridCommand.extend({ exec: function(e) { createWizard('bar', false) } }); kendo.ui.grid.commands["GenerateChartWizardBarStacked"] = kendo.ui.grid.GridCommand.extend({ exec: function(e) { var stacked = true; createWizard('bar', stacked) } }); kendo.ui.grid.commands["GenerateChartWizardBarStacked100"] = kendo.ui.grid.GridCommand.extend({ exec: function(e) { var stacked = { type: '100%' } createWizard('bar', stacked) } }); kendo.ui.grid.commands["GenerateChartWizardColumn"] = kendo.ui.grid.GridCommand.extend({ exec: function(e) { createWizard('column', false) } }); kendo.ui.grid.commands["GenerateChartWizardColumnStacked"] = kendo.ui.grid.GridCommand.extend({ exec: function(e) { var stacked = true; createWizard('column', stacked) } }); kendo.ui.grid.commands["GenerateChartWizardColumnStacked100"] = kendo.ui.grid.GridCommand.extend({ exec: function(e) { var stacked = { type: '100%' } createWizard('column', stacked) } }); kendo.ui.grid.commands["GenerateChartWizardLine"] = kendo.ui.grid.GridCommand.extend({ exec: function(e) { createWizard('line', false) } }); kendo.ui.grid.commands["GenerateChartWizardLineStacked"] = kendo.ui.grid.GridCommand.extend({ exec: function(e) { var stacked = true; createWizard('line', stacked) } }); kendo.ui.grid.commands["GenerateChartWizardLineStacked100"] = kendo.ui.grid.GridCommand.extend({ exec: function(e) { var stacked = { type: '100%' } createWizard('line', stacked) } }); kendo.ui.grid.commands["GenerateChartWizardPie"] = kendo.ui.grid.GridCommand.extend({ exec: function(e) { createWizard('pie', false) } }); kendo.ui.grid.commands["GenerateChartWizardScatter"] = kendo.ui.grid.GridCommand.extend({ exec: function(e) { createWizard('scatter', false) } }); }); #container { min-height: 700px; width: 100%; position: relative; }

Description

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 Kendo UI for jQuery ChartWizard component to quickly create the desired chart using the Grid data.

This demo demonstrates how to launch the ChartWizard from a Kendo UI for jQuery ContextMenu. Use Ctrl + click to select rows in the Grid. Then right-click and generate a Chart from the custom ContextMenu.

This ChartWizard example is part of a unique collection of hundreds of jQuery demos, with which you can see all Kendo UI for jQuery components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Kendo UI for jQuery Dojo or ThemeBuilder.

jQuery Grid Chart Integration

Description

Support & Learning Resources

Additional Resources