Take a snapshot of current dash graph

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…

1 post - 1 participant

Read full topic