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 - ideal 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.