'Flask for use in the updated Charts.js on page with (if) change value from html datepicker

Have a good day! I try to depict insert several (two) objects on the page and embed add the ability (so that you can) update these objects. There is a main element on the page - the choice of a date range. When you select a start date and an end date and click the button in the same way (two objects should be updated). The first object is a table. The table (object) is updated. The second object is a graph. This object is not updated. What can be done to update the second object (chart)? I need to update Charts.js and one table if change range datepicker.

<div class="row">
        <div class="col-md-3">
            <input type="text" name="From" id="From" class="form-control" placeholder="From Date"/>
        </div>
        <div class="col-md-3">
            <input type="text" name="to" id="to" class="form-control" placeholder="To Date"/>
        </div>
        <div class="col-md-6">
            <input type="button" name="range" id="range" value="Range" class="btn btn-success"/>
        </div>
      </div>
      <div id="purchase_order"></div>
      <hr>
      <div class="row" style="align-content: center">
            <div class="text" style="align-content: center">
            </div>
            <div class="outer-wrapper" style="align-content: center">
                <div class="table-wrapper" id="table-wrapper" style="align-content: center">
                    <table>
                        <thead>
                            {% for col in column_names %}
                            <th>{{col}}</th>
                            {% endfor %}
                        </thead>
                        <tbody>
                            {% for row in row_data %}
                            <tr>
                                {% for cell in row %}
                                <td>{{ cell }}</td>
                                {% endfor %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
      </div>


<div class="row">
        <div class="col-md-1">
        </div>
        <div class="col-md-10">
            <div>
              <canvas id="myChart" width="800px" style="align-content: center"></canvas>
            </div>
        </div>
        <div class="col-md-1">
        </div>
      </div>

it's script

<script>
        $(document).ready(function (){
            $.datepicker.setDefaults({
                dateFormat: 'yy-mm-dd'
            });
            $(function (){
                $("#From").datepicker();
                $("#to").datepicker();
            });
            $('#range').click(function (){
                var From = $('#From').val();
                var to = $('#to').val();
                if (From != '' && to != '')
                {
                    $.ajax({
                        url:"/range",
                        method:"POST",
                        data:{From:From, to:to},
                        success:function (data)
                        {
                            $('#table-wrapper').html(data);
                            $('#table-wrapper').append(data.htmlresponse);
                        }
                    });
                    $.ajax({
                        url:"/range2",
                        method:"POST",
                        data:{From:From, to:to},
                        success:function (data)
                        {
                            $('#myChart').html(data);
                            $('#myChart').append(data.htmlresponse2);
                        }
                    });
                }
                else
                {
                    alert("Please Select the Date")
                }
            });
        });
    </script>

it's Flask code

@app.route('/', methods=['GET','POST'])
@app.route('/index')
def home_page():  # put application's code here
    if request.method=="POST":
        upload_excel=request.files['upload_excel']
        if upload_excel.filename != '':
            filepath=os.path.join(app.config["UPLOAD_FOLDER"],upload_excel.filename)
            upload_excel.save(filepath)
            data=pd.read_excel(upload_excel)
            data.to_sql('kotel', con=db.engine, if_exists="append", index=False)
            return print(data)
    df = pd.read_sql('select * from kotel', con=db.engine)
    df['date'] = df['date'].dt.round('2min')
    y_data = df['tnv'].tolist()
    x_data = df['date'].tolist()
    print(y_data)
    type(y_data)
    print(x_data)
    df_graph = df.copy()
    df_graph.drop(df_graph.columns[[0, 1, 2]], axis=1, inplace=True)
    print(df_graph)
    # df['date'] = pd.to_datetime(df['date'], format="%Y.%d.%B %H")

    return render_template('index new.html', column_names=df.columns.values, row_data=list(df.values.tolist()), column_names_graph=df_graph.columns.values, os_y = y_data, os_x = x_data)


@app.route("/range", methods=["POST","GET"])
def range():
    if request.method == 'POST':
        From = request.form['From']
        to = request.form['to']
        df = pd.read_sql('select * from kotel', con=db.engine)
        df['date'] = pd.to_datetime(df['date'])
        df = df.loc[(df['date'] >= From) & (df['date'] <= to)]
        df['date'] = df['date'].dt.round('2min')
    return jsonify({'htmlresponse': render_template('response.html', column_names=df.columns.values, row_data=list(df.values.tolist()))}), df


@app.route("/range2", methods=["POST","GET"])
def range2():
    df_new = pd.read_sql('select * from table_1', con=db.engine)
    y_data = df_new['temper'].tolist()
    x_data = df_new['rashod'].tolist()
    return jsonify({'htmlresponse2': render_template('response2.html', os_y = y_data, os_x = x_data)})

it's extended html 1 add (response.html)

<table>
    <thead>
        {% for col in column_names %}
        <th>{{col}}</th>
        {% endfor %}
    </thead>
    <tbody>
        {% for row in row_data %}
        <tr>
            {% for cell in row %}
            <td>{{ cell }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source