ag-Grid Graphing Integration

ag-Grid is great at displaying tabular data - it is after all the Best Data Grid for Enterprise in the world!

Sometimes however a picture (or graph) is worth a thousand words, so in this section we offer some examples of how
you can interact with external Graphs, or embed Graphs into ag-Grid itself.

External Graphs using D3

D3 is a powerful Graphing Library. In this example we provide an example that displays a simple ag-Grid table of stock
data that when clicked on provides a simple time-series chart of the corresponding data. Multiple rows (or stocks) can be
selected to provide a comparison between stocks.

Inline Graphs using jQuery Sparklines

jQuery Sparklines is a great library that offers small but rich graphs - idea for use within ag-Grid.

In this example we demonstrate the following:

Close Trend: Inline summary trend graph. If clicked on the full time-series
will be displayed below.

Average Volume: The average volume per year in a Bar Graph.

Target Expenditure: Illustrates how a graph can be used withing a cell editor. If double clicked (or enter
pressed) a popup editor in the form of a Pie Chart will be shown - when a segment is clicked on the value
will be saved down to the grid.

Expenditure: Expenditure shown in a Pie Chart.

Welcome to ag-Grid

Niall Crosby spent years building Enterprise Web Applications and found the JavaScript
data grid choice frustrating. That frustration led to Niall quitting his job and
setting up the ag-Grid project.
Read more about ag-Grid →