CODEWITHSUNDEEP
ajaxflaskplotly.js
lammy
lammy

Reputation: 467

Update a plotly.js Plot with new data

I am taking my very first steps with Plotly.js and AJAX. However, I am stuck when it comes to passing the new data to the plot. Although the data is received (as confirmed by console.log()), it destroys the plot when using "Plotly.newPlot(). I can't seem to figure out where am I going wrong. I tried researching the issue, but all examples are not applicable in my case.

Expected behavior:

After clicking the button (chartId="chart1"), priceplot.js should send a request to the route '/updatepriceplot' which returns a JSON response based on the selection from request.form["chartOption"].

Actual behavior:

The plot is empty after clicking the button (chartId="chart1")

Here is my Flask route:

@server_bp.route('/priceplot', methods=["GET"])
def priceplot():
    form_priceplot = pricePlot_options()

    plot = createPlot()
    return render_template("priceplot.html", plot=plot, form_priceplot=form_priceplot)

@server_bp.route('/updatepriceplot', methods=["POST"])
def update_priceplot():

    # a = request.form["chartId"]
    chartOption = request.form["chartOption"]
    plot = updateData(chartOption)

    return plot

Here is the PricePlot function returning a new JSON file.

def createPlot():

    df =  pd.read_json('data_{}.json'.format("1"))
    df = df.dropna()
    data = [go.Scatter(x=df['Timestamp'], y=df['Value'])]

    graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)

    return graphJSON

def updateData(chartOption=None):

    # load the json data
    df =  pd.read_json('data_{}.json'.format(chartOption))
    df = df.dropna()
    data = [go.Scatter(x=df['Timestamp'], y=df['Value'])]

    graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)

    return graphJSON

The HTML template:

{% extends "base.html" %}

{% block content %}

<!DOCTYPE html>
<html>

<head lang="en">
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='js/priceplot.js') }}"></script>
</head>

<body>

    <div id="chartSectionchart1" class="panel panel-default">
        <div class="panel-heading">
            <h3>Chart <span id="chartIdHead"></span>{{ chartOption }}</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="chart" id="graph">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <p>
                <button type="button" class="btn btn-primary updateButton" chartId="chart1">Update</button>
            </p>
            <p>
                {{ form_priceplot.option_priceplot(size=1, class="form-control", id="chartOption") }}
            </p>
        </div>
    </div>
</body>

    <script>
        var graphs = {{ plot | safe}};
        Plotly.plot('graph', graphs, {});
    </script>
{% endblock %}

The priceplot.js

    $(document).ready(function(){
    $(".updateButton").on("click", function(){
        var chartId = $(this).attr("chartId")
        var chartOption = $("#chartOption").val()
        console.log(chartId)
        console.log(chartOption)

        req = $.ajax({
            url : "/updatepriceplot",
            type : "POST",
            data : {chartId: chartId, chartOption : chartOption}
        });

        req.done(function(data) {
            $("#chartSectionchart1").fadeOut(300).fadeIn(300);
            var graphs = data;
            console.log(graphs)
            Plotly.newPlot('graph', graphs, {});     

        });


    });
});

Upvotes: 4

Views: 6339

Answers (1)

lammy
lammy

Reputation: 467

The problem has been solved thanks to the clever help of people in the chat:

The JSON data needs to be parse before updating the plot:

Revised priceplot.js

    $(document).ready(function(){
        $(".updateButton").on("click", function(){
            var chartId = $(this).attr("chartId")
            var chartOption = $("#chartOption").val()
            console.log(chartId)
            console.log(chartOption)

            req = $.ajax({
                url : "/updatepriceplot",
                type : "POST",
                data : {chartId: chartId, chartOption : chartOption}
            });

            req.done(function(data) {
                $("#chartSectionchart1").fadeOut(100).fadeIn(100);
                var graphs = JSON.parse(data);
                console.log(graphs)
                Plotly.react('graph', graphs, {});     
            });
        });
    });

Upvotes: 6

Related Questions