aggrid: No data available to be charted

user_12253307 0
Viewed 808

I have a newbie question on ag-grid enterprise (using v23.0.0). When I create a simple grid, and then do these user actions:

  1. Right click on a numeric cell
  2. Choose Chart Range, Column, Grouped (actually, none of the charting options work...)

I get No data available to be charted.

This works fine in the demo (https://www.ag-grid.com/example.php), but not in my application. What do I need to do to get the data to be displayed in the chart?

I am using the Flask web application framework to host my Python code. Here is my HTML/JavaScript code:

agpoc.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="{{url_for('static', filename='ag-grid-enterprise.js')}}"></script>
    <script src="{{url_for('static', filename='agpoc.js')}}"></script>
</head>
<body>
    <div id="salesGrid" style="height: 200px; width:500px;" class="ag-theme-balham"></div>
</body>
</html>

agpoc.js:

document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#salesGrid');
    new agGrid.Grid(gridDiv, gridOptions);
});

var columnDefs = [
    {headerName: "brand", field: "brand"},
    {headerName: "sales", field: "sales", type: "numericColumn"}
];
var rowData = [
    {"brand": "Brand X", "sales": "270.12"},
    {"brand": "Brand Y", "sales": "400.89"}
];

var gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  enableCharts: true,
  enableRangeSelection: true,
};

I have debugged this and it appears that the following code within ag-grid-enterprise.js:

ChartDataModel.prototype.getSelectedValueColState()

returns an empty list. I do not understand what example.js is doing that I am not doing wrt this behavior.

Does anyone have any pointers?

Thank you

ag-grid
1 Answers

So this can be a little confusing. In your particular example it's as your sales are strings and not numbers.

For things to work by default you must make sure that for each row there is a numerical value available. Having an undefined or null for example will cause the no data available issue.

To get around this, you need to define a chartDataType on the colDef of the particular column you're interested in.

Here is an example where I prepend a row with age as null yet it still works due to defining the chartDataType as series

https://plnkr.co/edit/nyzxLY5tntyURkK3

Edit* This looks like a bug soon to be fixed:

If chartDataType in the column definition is not provided, AG Grid infers whether the data is numeric (for plotting as a series values), or not (for plotting as category values) based on the first row in the column. If the first row in this column doesn't contain a numeric value, it's treated as a category value which cannot be charted, as described here:
https://www.ag-grid.com/javascript-data-grid/integrated-charts-range-chart/#inferred-by-the-grid

This is why please set chartDataType='series' on columns you want to chart in order to avoid cases where there's a null/undefined value in the first row, which infers the column as a category column and prevents it from charting.

The answer still applies for now.

user_15927830
Related