this is my js file

var ctx = document.getElementById('myChart').getContext('2d');

debugger
// Retrieve email id from element with id 'myChart'
var email_id = $("#myChart").attr("email_id")

$.ajax({
  url:"/chart2",
  type:"POST",
  contentType: 'application/json;charset=UTF-8',
  data: JSON.stringify({'email_id':  email_id}),
  error: function() {
      alert("Error");
  },
  success: function(data, status, xhr) {

    var chartDim = {};
      
    var chartDim = data.chartDim; 
    var xLabels = data.labels;

    // # New Output 
    // # var chartDim = data.chartDim; 
    // # {'usr_1': [[datetime1, 600], [datetime2, 600], ...], {'hotel_2': [[],[], ...]}  ...}
    // # var xLabels = data.labels;
    // # // [] 

    debugger
    var vLabels = []; 
    // ['usr_1', 'usr_2', ...] 
    var vData = [];
    // [ [{'x': datetime_1, 'y':666}, {'x': datetime_2, 'y':1200} ...]

    for (const [key, values] of Object.entries(chartDim)) {
      vLabels.push(key);
      let xy = [];
      for (let i = 0; i < values.length; i++) {
        debugger
        // let d = new Date(xLabels[i]+'+8');
        let d = new Date(values[i][0]);
        let year = d.getFullYear();
        let month = ('' + (d.getMonth()+1)).padStart(2, '0');
        let day = ('' + d.getDate()).padStart(2, '0');
        // let hour = ('' + d.getHours()).padStart(2, '0');
        // let mins = ('' + d.getMinutes()).padStart(2, '0');
        // aDateTime = year + '-' + month + '-' + day + ' ' + hour + ':' + mins
        aDateTime = year + '-' + month + '-' + day
        xy.push({'x': aDateTime, 'y': values[i][1]});
      }
      vData.push(xy);
    }

    debugger

    var myChart = new Chart(ctx, {
      data: {
      // labels: xLabels,
      datasets: []
      },
      options: {
          responsive: true,
          maintainaspectratio: false,
        //   scales: {
        //     x: {
        //         type: 'time',
        //         time: {
        //             unit: 'hour',
        //         }
        //     },
        //     y: {
        //         type: 'category',
        //         labels: xLabels,
        //         grid: {
        //           borderColor: "rgba(249, 238, 236, 0.74)"
        //         }
        //     }
        // }
        scales: {
          x: {
            type: 'time',
            time: {
              // "parser": "MM/DD/YYYY HH:mm",
              parser: 'yyyy-MM-dd',
            },
            scaleLabel: {
              display: true,
              labelString: 'Date'
            }
          },
          y: {
            scaleLabel: {
              display: true,
              labelString: 'value'
            }
          }
        }
      }
    });

    debugger
    
    for (i= 0; i < vLabels.length; i++ ) {
      myChart.data.datasets.push({
      label: vLabels[i], // Flight#
      type: "line",
      // borderColor: '#'+(0x1ff0000+Math.random()*0xffffff).toString(16).substr(1,6),
      borderColor: '#'+(0x1100000+Math.random()*0xffffff).toString(16).substr(1,6),
      backgroundColor: "rgba(249, 238, 236, 0.74)",
      data: vData[i],
      spanGaps: true
      });
      myChart.update();
    }
}
})

and this is my html
{% extends "base.html" %}
{% block mainblock %}

<div class="card-header">
    <h3>BMI Chart (by Backend)</h3>
</div>
<div class="card-body">
        <!-- Create a div where the graph will take place -->
        <div class="chart-container" style="position: relative; width: 100%; height: 80vh;">
            <canvas id="myChart" width="400" height="300" email_id="{{email_id}}"></canvas>
        </div>        
</div>

<script src="{{ url_for('static', filename='js/myChart_CSV2.js') }}"></script>

{% endblock %}

my chart successfully rendered by it has nothing. It is just an empty graph. Can you help me troubleshoot?