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:

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