Что за ошибка и как исправить в chart.js??

Question

Neoliz @timofeydeys

Свобода творцов

Что за ошибка и как исправить в chart.js??

Добрый вечер дорогие форумчане. Требуется ваша помощь в следующем вопросе. Подключил chart.js для красивых графиков, но она не работает.
Браузерная консоль выдает след ошибку: IndexSizeError: Index or size is negative or greater than the allowed amount Chart.min.js:10:0

Перерыв пол интернета так и не нашел проблему. Самое интересное, что Line график в другом шаблоне того же приложения отрисовывает без проблем.
А код который не работает, прекрасно работает в простой html страничке.

Этот код швыряет ошибку:

{% extends "crm/main_struct.html" %}
{% load staticfiles %}
{% block content %}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="{% static 'js/main/Chart.min.js' %}"></script>
<script>
$(document).ready(function() {
  $('ul.tabs_AB').each(function() {
    $(this).find('li').each(function(i) {
      $(this).click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        var p = $(this).parents('div.ABcontainer_test');
        p.find('div.ABtest').hide();
        p.find('div.ABtest:eq(' + i + ')').show();
      });
    });
  });
})
</script>

<div class="ABcontainer_test">
    <ul class="tabs_AB">
        <li class="inl-bl_a_b">Добавить тест</li>
        {% for test in abTestList%}
            <li class="inl-bl_a_b">{{test.name}}</li>
    {% endfor %}
    </ul>
    <div class="ABtest">
        <form method="POST">
            {% csrf_token %}
        <div class="name_AB">
            <label>Название</label>
            <input name="name" type="text" value="" style="float: right; width: 150px; height: 20px;"/>
        </div>
        <div class="variantA_AB">
            <label>Вариант А</label>
            <input name="variantA" type="text" value="" style="float: right;"/>
        </div>
        <div class="variantB_AB">
            <label>Вариант Б</label>
            <input name="variantB" type="text" value="" style="float: right;"/>
        </div>
            <input name="id" type="text" value="0" style="display:none" />
            <button type="submit" value="">Сохранить</button>
        </form>
    </div>
    {% for i in abTestList %}
    <div class="ABtest">
        <form method="POST">
            {% csrf_token %}
        <div class="name_AB">
            <label>Название</label>
            <input name="name" type="text" value="{{i.name}}" style="float: right; width: 150px; height: 20px;"/>
        </div>
        <div class="variantA_AB">
            <label>Вариант А</label>
            <input name="variantA" type="text" value="{{i.variantA}}" style="float: right;"/>
        </div>
        <div class="variantB_AB">
            <label>Вариант Б</label>
            <input name="variantB" type="text" value="{{i.variantB}}" style="float: right;"/>
        </div>
            <input name="id" type="text" value="{{i.id}}" style="display:none" />
            <button type="submit" value="">Сохранить</button>
        </form>
        <canvas id="result{{i.id}}" height="300" width="300"></canvas>
        <script>
           $(document).ready(function() {
                val1 = 85;
                val2 = 15;

              var pieData = [
              {
                value: val1,
                label: 'Вариант А',
                color: '#811bd6'
              },
              {
                value: val2,
                label: 'Вариант Б',
                color: '#6ae128'
              }
            ]
            var ctx = document.getElementById("result{{i.id}}").getContext("2d");
            var skillsChart = new Chart(ctx).Pie(pieData);
            });
        </script>
    </div>

    {% endfor %}
</div>
{% endblock %}

А этот код работает:

<html>
<head>
  <meta http-equiv="content-type" content="text/html;" charset="utf-8"/>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="Chart.min.js"></script>
</head>
<body>
  <canvas id="skills" width="300" height="300"></canvas>
  <script>
  sum = 200.0;
  val1 = 15;
  val2 = 105;

  var pieData = [
  {
    value: val1,
    label: 'Вариант А',
    color: '#811bd6'
  },
  {
    value: val2,
    label: 'Вариант Б',
    color: '#6ae128'
  }
]
var context = document.getElementById('skills').getContext('2d');
var skillsChart = new Chart(context).Pie(pieData);
  </script>
</body>
</html>