Update plot with AJAX

[josephernest]

Thanks and congrats @alanjones2 for this great tutorial, about how to use Plotly directly with Flask + AJAX!

Small question: why do you create a new plot on each update after an AJAX call?

https://github.com/alanjones2/Flask-Plotly/blob/main/plotcallback-gm2/templates/chartsajax.html#L10

function cb(selection) {
            $.getJSON({
                url: "/callback", data: { 'data': selection }, success: function (result) {
                    Plotly.newPlot('chart', result, {});;
                }
            });
        }

Isn't there a way to do something else than newPlot, but rather "update plot data"?

[alanjones2]

Good question and the answer is probably laziness! I just used newPlot for the first chart and just didn't think about how efficient subsequent plotting would be.

A faster way of doing the same thing would be to use:

Plotly.react('chart', result, {})

Although, performance is not really an issue here, this seems to work the same way and is (apparently) faster than newPlot

[alanjones2]

BTW I've changed the code in the repo

[josephernest]

Thanks @alanjones2!

I just discovered Plotly.react too!

(BTW about "react" does Plotly/Dash use ReactJS or something like this internally to do the AJAX, or did they recode such a system themselves from scratch?)

[alanjones2]

Plotly is based on d3.js and uses that library for creating plots.

The react function redraws only the changes between the given parameters and the current state of the plot. That's why it is normally faster than plot or newPlot

[Yolozers]

Thank you for the code and tutorial. There is an error when i try to Fetch stock: "yFinance failed to decrupt Yahoo data response"

Do you know how to solve this error? Thank you

[alanjones2]

I think that this is an issue with yFinance and Yahoo Finance changing the way it encrypts data. See the yFinance Github page for more details. I don't know if there is a way around this but I won't be able to look any further into it or update this app in the foreseeable future. Apologies, but I simply do not have the time, at present.

[alanjones2]

I did have a quick look. The data comes back ok but not the info so if you comment out the part that fetches this then you will still get the graphs:

                if (response.ok) {
                    //response = await fetch("/callback/getInfo?data=" + Stock);
                    //let infoJson = await response.json();
                    //info(infoJson);
                    Plotly.newPlot('chart', chartJson, {});

You also need to change the Facebook symbol fro 'FB' to 'META'

[alanjones2]

I've updated the repo with these changes and a notice on the web page to say that this functionality has been disabled

[Yolozers]

Thank you!

[ryneb]

Is there an easy way to make the charts responsive? Thought I could add "responsive: true" to this line: Plotly.react('chart', result, {}, {responsive: true });; but that's not working. The charts size correctly when I refresh the page but not when I resize the window.

[alanjones2]

I would have done the same as you! If that doesn't work you could try calling the plot function when a window resize event is fired - see here if you are unsure how it works.

Otherwise, maybe try asking on Stackoverflow

[ryneb]

thanks for the reply! This worked for me:

<script type="text/javascript">
    var graphs = {{graphJSON | safe}};
    graphs.config = { 
        'responsive': true,
    }

    Plotly.react('chart',graphs,{});        
</script>