Take a snapshot of current dash graph

Dash Python
1

Hi there,
I went through multiple posts around downloading images from rendered dash graph but can’t figure out how to do…
A django app is rendering a dash graph for the user. All’s fine so far…

       app = DjangoDash(_name) 
        log.debug(f"Dash app {_name} created...")

        # app.css.append_css({
        # "external_url": external_stylesheets
        # })
        app.layout = html.Div(
            html.Div([
                html.Div([
                    html.Div([
                        dcc.Graph(
                            id=_name,
                            figure={
                                'data': [
                                    {'x': data['ts'], 'y': data.iloc[:,1], 'type': 'line', 'name': 'SF'},
                                ],
                                'layout': {
                                    'autosize':True
                                }
                            },
                            config={
                            }
                        )
                    ], className = '')
                ], className = 'row')
            ])
        )

The user is able to zoom and play with the graph layout.
When he clicks on a button - not the dash toolbar - I want to take a snapshot of the current graph and send it back to django to save it (with ajax).

My question: how should I do from the javascript code to capture and generate the PNG from the current graph as it may be different from the initial one (zoom, pan, etc) ? Should I link the generated app URL (graph iframe source : graph/app/…)? How to do ?

`<iframe src="/graph/app/TC-T002920161092020-1_2-0/" style="
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    " frameborder="0"></iframe>`

HTML2CANVAS doesn’t help either as it is an IFRAME.

Thank you for yout hints…

2

I found how to do. See snippet here:

                   $('.btn-test-result').click(function (e){
                        var iframe = document.getElementsByTagName("iframe")[0];            
                        var elmnt = iframe.contentWindow.document.getElementsByClassName("svg-container")[0];

                        html2canvas(elmnt).then(canvas => {
                            $.ajax({
                                url: '......',
                                type: "POST",
                                headers: {'X-CSRFToken': '{{ csrf_token }}'},
                                data: {
                                    "result" : this.getAttribute('result'),
                                    "trend" : canvas.toDataURL()
                                },
                                dataType: 'json',
                                success: function (data) {
                                    // Refresh page
                                    location.reload(true)
                                }
                            });
    
                        });
                        e.preventDefault();
                    });
3

You could probably also pass the figure back into a callback (State('your-graph', 'figure') and then use kaleido to take an image server side: https://plotly.com/python/static-image-export/

4

Thank you. It could help.indeed but in this specific app the button that triggers the capture is not part of the dash app.
It is located outside the iframe.

Anyway, I learned something today. Thx.