How can I insert the changed data Flask route to html page for update the graph?

Question

In the redirected Flask route (after clicking the button), I change the data and do not know how to send them further to any display in the form of a graph (the Chart.js graph is on the page, you need to update it somehow or use it somehow). Or how to use plotly express python. Initially and then somehow update this schedule.

I tried to make it so that when - "selecting the date interval" the data for the selected interval was displayed (made a selection). Chart.js - It was also planned to be "updated" when a certain date range was selected. Now I'm thinking how to combine the "date interval selection" and the Chart.js chart. I thought about how to make a request to the database bypassing the backend.

I have been thinking for a week about what can be done or what to build on to solve the problem.

it's route for change data if i get range date from html page

@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')
        y_data = df['tnv'].tolist()
        x_data = df['date'].tolist()
        os_y = y_data
        os_x = x_data
    return jsonify({'htmlresponse': render_template('response.html', column_names=df.columns.values, row_data=list(df.values.tolist()))})

it's html date

<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>

it's range of date for delivery first data into route (code Flask)

<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);
                        }
                    });
                }
                else
                {
                    alert("Please Select the Date")
                }
            });
        });
    </script>

it's static code for graph (how can i format it's for update or other if i select range date? - it's very difficulty for me) I unfortunately can not understand how I can do this difficult task

<script>
      const labels = [{% for item in os_x %}
      "{{ item }}",
          {% endfor %}];
      const datapoints = [{% for item in os_y %}
              {{ item }},
              {% endfor %}];

      const data = {
        labels: labels,
        datasets: [{
          label: 'My First dataset',
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: datapoints,
        }]
      };

      const config = {
        type: 'line',
        data: data,
        options: {}
      };
    </script>
    <script>
      const myChart = new Chart(
        document.getElementById('myChart'),
        config
      );
    </script>