Returning Dash Ag Grid filtered data to plotly charts

Dash Python
1

Hello Everyone,

How to return the filtered values from dash-ag-grid columns to update the plotly.express horizontal bar charts? My use case has 25 columns and 100000 rows of data. The columns types are dates( 6 of them), some number columns and remaining text or string columns. I am able to filter the columns basd on the examples in the dash-ag-grid. Only columns that have date filters cannot be filtered, may be because the browser date picker has “mm/dd/yyyy” format and columns have “yyyy-dd-mm” format. Synchronizing the formats using valueFormatter did not work for me.

Any help on filtering dates and returning all the filtered data after multiple filtering of various columns to plotly.express figure would be much highly appreciated.

I have tried filterModel, virtualRowData, filtered_rows in the callbacks but was not successful in updating the graph from the dash-ag-grid table.

Thank you in advance.

Best,
Bijoy

2

Hi Bijoy,
returning the filtered data should work with virtualRowData. Adam explain it in Introduction to Dash Ag Grid - YouTube around Timestamp 8:00.
Filtering dates could be a bit tricky indeed. For me worked below code. Very important to set the d3 format in the first line exactly to the format of the date field in your dataframe). Otherwise always 1970-01-01 will be shown in the grid.

tradedatefrom_obj = "d3.utcParse('%Y-%m-%dT%H:%M:%S')(params.data.tradedatefrom)"
{"headerName": "Date from",
  "filter": "agDateColumnFilter",
  "valueGetter": {"function": tradedatefrom_obj},
   "valueFormatter": {"function": f"d3.timeFormat('%Y-%m-%d')({tradedatefrom_obj})"},
    "filterParams": {
             "browserDatePicker": True,
     },
 }
1 Like