Chart.js не отображается с JQuery & Ajax Looped Dataset? (Django_rest)

Question

Я пытаюсь превратить этот РУЧНОЙ код в метод DYNAMIC Loop, который перебирает данные. Но зацикленный подход не появляется на графике?

Спасибо заранее тоже!

Что я пытаюсь построить & Что меня беспокоит

То, что я пробовал, но все еще не работает

1. Я пытался изменить метод цикла с помощью (как показано ниже) .. НО по-прежнему не работает ..

$.each(array, function(index, value) {
   lineChartData.datasets.push(getDataset(index,value))
})

2. Я обнаружил еще одну проблему хотя ...

Для ручного захода, данные есть.

console.log('Manually', graph2.data.datasets);

(4) [{…}, {…}, {…}, {…}]
0:{label: "P1", data: Array(4), _meta: {…}}
1:{label: "P2", data: Array(4), _meta: {…}}
2:{label: "P3", data: Array(4), _meta: {…}}
3:{label: "P4", data: Array(4), _meta: {…}}
length:4
__proto__:Array(0) 

Но в циклическом подходе НЕТ данных ???

console.log('Loop way', graph3.data.datasets);

[]
length:0
__proto__:Array(0)

РУЧНОЙ КОД :

{% block jquery %}
<script>

$(document).ready(function(){

   var endpoint = '/api/asset/?search=Asset';//' /api/asset'
   var v = [];
   var vl = [];

      function getDataset(index, data) {
          return {
              label: 'Label '+ index,
              fillColor: 'rgba(220,220,220,0.2)',
              strokeColor: 'rgba(220,220,220,1)',
              pointColor: 'rgba(220,220,220,1)',
              pointStrokeColor: '#fff',
              pointHighlightFill: '#fff',
              pointHighlightStroke: 'rgba(220,220,220,1)',
              data: data
          };
      }


      $.ajax({
          method: 'GET',
          url: endpoint,
          data: {company: 'company',
          value: 'value',
          year: 'year',
          type: 'type',
          id: 'id'},
          success: function(data){

              setChart();

              for( var i = 0; i < data.length; i++){
                  v.push(parseInt(data[i].value));
                  vl.push(data[i].company);
              }



              var size = 4;
              var vv = new Array(Math.ceil(v.length / size)).fill("")
                  .map(function() { return this.splice(0, size) }, v.slice());
              //CONSOLE OUTPUT-1
              console.log(vv);


              var ctx2 = document.getElementById('myChart2').getContext('2d');
              var graph2 = new Chart(ctx2,{
                  type: 'line',
                  label: 'test',
                  data: {
                      labels:['2015', '2016', '2017', '2018'],
                      datasets:[
                          {label: 'P1',
                          data:vv[0]},
                          {label: 'P2',
                          data:vv[1]},
                          {label: 'P3',
                          data:vv[2]},
                          {label: 'P4',
                          data:vv[3]},

                          ]
                  }
              });

КОД ДИНАМИЧЕСКОГО ПЕТЛЯ:

              var lineChartData = { labels: ['2015', '2016', '2017', '2018'], datasets: [] }, array = vv;


              var ctx3 = document.getElementById('myChart3').getContext('2d');
              var graph3 = new Chart(ctx3,{
                  type: 'line',
                  label: 'test',
                  data: //array.forEach(function (a, i) {
                      //lineChartData.datasets.push(getDataset(i,JSON.parseInt(a)));console.log(lineChartData);})
                      //lineChartData.datasets.push(getDataset(i,a));})
                        $.each(array, function(index, value) {
                            lineChartData.datasets.push(getDataset(index,value))
                        })
              });
              //CONSOLE OUTPUT-2
              console.log(lineChartData);

function setChart(){}

{% endblock %}
})

ОБРАЗЕЦ ДАННЫХ API Ниже приведен пример извлечения

var endpoint = '/api/asset/?search=Asset':

HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

[
    {
        "company": "P1",
        "value": "100.00",
        "year": 2015,
        "type": "Asset",
        "id": 1
    },
    {
        "company": "P2",
        "value": "120.00",
        "year": 2016,
        "type": "Asset",
        "id": 2
    },
    {
        "company": "P3",
        "value": "90.00",
        "year": 2017,
        "type": "Asset",
        "id": 3
    },
    {
        "company": "P4",
        "value": "130.00",
        "year": 2018,
        "type": "Asset",
        "id": 4

HTML-код

<canvas id="myChart2"></canvas>
<canvas id="myChart3"></canvas>

Консольные выходы 1-й вывод консоли выглядит хорошо после нажатия, чтобы отделить необходимые метки и данные ...

** Выход на консоль - 1

(4) [Array(4), Array(4), Array(4), Array(4)]
0:(4) [100, 120, 90, 130, _chartjs: {…}, push: ƒ, pop: ƒ, shift: ƒ, splice: ƒ, …]
1:(4) [105, 95, 80, 115]
2:(4) [133, 138, 141, 111]
3:(4) [93, 90, 119, 109]
length:4
pop:ƒ ()
push:ƒ ()
shift:ƒ ()
splice:ƒ ()
unshift:ƒ ()
_chartjs:{listeners: Array(1)}
__proto__:Array(0)

2-й вывод консоли тоже выглядит нормально ... ** Краткий вывод на консоль - 2

{labels: Array(4), datasets: Array(4)}
datasets:(4) [{…}, {…}, {…}, {…}]
labels:(4) [2015, 2016, 2017, 2018]
__proto__:Object

** Открытие раскрывающегося списка для первого массива для краткого вывода на консоль - 2

{labels: Array(4), datasets: Array(4)}
datasets:Array(4)
0:
data:(4) [100, 120, 90, 130, _chartjs: {…}, push: ƒ, pop: ƒ, shift: ƒ, splice: ƒ, …]
fillColor:"rgba(220,220,220,0.2)"
label:"Label 0"
pointColor:"rgba(220,220,220,1)"
pointHighlightFill:"#fff"
pointHighlightStroke:"rgba(220,220,220,1)"
pointStrokeColor:"#fff"
strokeColor:"rgba(220,220,220,1)"
__proto__:Object

1:
data:(4) [105, 95, 80, 115]
fillColor:"rgba(220,220,220,0.2)"
label:"Label 1"
pointColor:"rgba(220,220,220,1)"
pointHighlightFill:"#fff"
pointHighlightStroke:"rgba(220,220,220,1)"
pointStrokeColor:"#fff"
strokeColor:"rgba(220,220,220,1)"
__proto__:Object