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.