Back

Grid with charts

In this section you can find out how Generic UI grid work with charts. The grid used in this example portraits couple of the popular stocks and their fictional quarterly earnings. The source data from the grid is easily exported to the Chart.js, which then constructs stocks chart.

You can use 'Chart type' select, to switch chart type between bar or line. To display only one stock just select it in the grid.

Check the source code section, to see how was it done.

Chart type:

Source code

In this source code you can see how Generic UI grid works with Chart.js. Our grid is extremely versatile and can easily be used with any external library. The grid source is exported to chart using this function stockQuarterlyEarnings(). To get the data from the selected grid item, we used itemsSelected output. This output checks if any of the grid entries is selected. The stocksSelected() function sends selected item value to the chart and it renders it in the chart area.

We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.