Basics

Formatting

Context menu

Drag n Drop

Spreadsheet

Tabs

Export (csv, html, pdf, xlsx )

RTL Layout

Layouts

Rows

Paging

Big data

Columns

Cells

Inline editing

Row Grouping

Pivot

Sorting

Filter

Selections

Nesting / Row details

Tree grid

Charts

Angular

React React

Vue Vue

Knockout

;

How to display inline charts in javascript grid?

Inline charts are the charts which are displayed within the cells of grid

Any chart library can be used to display charts in the cells of grid. Constructors of charting libraries usually require access to the DOM of the container node. We choose column.postRender callback for this task because it's called by the grid when the DOM of the cell is ready.

Asynchronous rendering

Since rendering of charts in multiple cells of grid can take considerable time, it makes the scrolling of grid janky. In order to avoid janky scrollong, we render the charts asynchronously by setting postRenderInterval to >= 0.

The following js files from gRaphaël chart library are used in this demo:
  • raphael-min.js
  • g.raphael.js
  • g.bar.js
  • g.pie.js

Charts are updated automatically when data in the grid is modified by inline editing or copy/paste.