AG Grid Rendering Plotly Charts in Django Dash

Dash Python
1

I’m trying to use Dash AG Grid with plots in the columns.

# Example of the table columnDefs
columnDefs = [
    {
        'field': 'Value A',
        'headerName': 'Value A',
    },

    {
        'field': 'Charts',
        'headerName': 'Charts',
        'cellRenderer': 'DCC_GraphClickData'
    },
]

This works when using Dash with this function for rendering in static/assets/rendering.js:

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagcomponentfuncs.DCC_GraphClickData = function (props) {
    const {setData} = props;
    function setProps() {
        const graphProps = arguments[0];
        if (graphProps['clickData']) {
            setData(graphProps);
        }
    }
    return React.createElement(window.dash_core_components.Graph, {
        figure: props.value,
        setProps,
        style: {height: '100%'},
        config: {displayModeBar: false, 'staticPlot': true},
    });
};

However, I cannot achieve the same functionality in Django Dash. I’ve tried adding the JavaScript with:

html.Script(src='static/assets/rendering.js')

However, it doesn’t work, and when I inspect the element on the page, it says
'AG Grid could not find ‘DCC_GraphClickData’ component. Check that it has been registered as described in JavaScript Data Grid: Components ’

I’ve also tried assigning it directly in columnDefs to “cellRenderer” by putting the JavaScript function in triple quotes.

2

Hello @TARpa,

What library are you using for Dash Django/DAG?

3

I’m using django-plotly-dash

4

And what version of dash-ag-grid?

5

dash-ag-grid ==2.3.0
dash==2.9.3

6

Is your script loading properly?

7

Thanks for your help, your question/comment led me on the right path. It works if I provide the full URL to the file like this:

app = DjangoDash('app_name', external_scripts=['http://<host-name>/assets/js/rendering.js'])

1 Like