Chartjs в функции успеха AJAX

Question

Я новичок в веб-разработке Django.

Изначально я использовал HTML и JavaScript для форматирования и визуализации результата, представляющего собой список кортежей. Он будет ссылаться на n рисунков и создавать n холстов для n, в результате cat_result.

{% if cat_result %}
 <h3>We found {{ count }} result{{ count|pluralize }} </h3>
 {% for res in cat_results %}
var img = document.createElement("img");
img.setAttribute('id', 'pic'+{{res.2}});
//linking to a picture based on res.2
document.body.appendChild(img);
var canv = document.createElement("canvas");
canv.setAttribute('id', 'canv'+{{res.2}});
document.body.appendChild(canv);
//a plot using chart.js with values res.3, res4, res.5
 {% endfor %}
{% endif %}

Теперь я использую AJAX для получения данных. Я хочу построить с помощью cat_result[i][8], cat_result[i][9], cat_result[i][10] внутри цикла в функции успеха AJAX, но ниже не создал холст или построил на нем.

Я не уверен, как у меня может быть Javascriptработать с replaceWith HTML, или что я должен сделать, чтобы включить Javascript в цикл вывода успеха ajax.

<form id="cat_select">{% csrf_token %} 
<input class="l2" name="l2" id="l2" type="text" style="width:30%">
<input class="l3" name="l3" id="l3" type="text" style="width:50%">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="cat_submit">Submit</button>
</form>
  <h2 class="result-box">The result is : <strong id="result"></strong></h2>
<script type="text/javascript">
$(document).on('submit','#cat_select',function(e){
    e.preventDefault();
    $.ajax({
        type:'POST',
        url:'/cat_select',
        data:{
            l2:$('#l2').val(),
            l3:$('#l3').val(),
            csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
        },
        success: function server_response(response) {
                // convert to json format
                const r = JSON.parse(response);
                console.log(r);
                var text=$('<i></i>');
                for (i=0; i<cat_result.length;i++){
                text.append('<id="result">' + cat_result[i][0]+'<br>');
                canvas_and_plot(cat_result[i][8],cat_result[i][9],cat_result[i][10])
               };
                $('#result').replaceWith(text);
}
});

function canvas_and_plot(a,b,c) {
var canv = document.createElement("canvas");
canv.width = 200;
canv.height = 200;
canv.setAttribute('id', 'result');
canv.style.position = 'relative';
canv.style.float = 'left';
document.body.appendChild(canv);
var C = document.getElementById(canv.getAttribute('id'));
 if (C.getContext) {              
    if (C.getContext) {
            new Chart(document.getElementById(canv.getAttribute('id')), {
            type: 'line',
            data: {
                labels: ["1","2","3"],
                datasets: [
                    {
                        label: ["Count"],
                        backgroundColor: "rgba(62, 149, 205, 0.5)",
                        borderColor : "rgba(62, 149, 205, 1)",
                        pointBackgroundColor: "rgba(62, 149, 205, 1)",
                        data: [a,b,c] 
                    },
                ]
            },
options: {
    responsive: false,
    maintainAspectRatio: false,
scales: {
    yAxes: [{
        ticks: {
            beginAtZero:true
        }
    }]
    }}
  });
}
}
}

</script>

Как я могу построить в цикле с результатом успеха ajax? Спасибо.