What is the error and how to fix it in chart.js??

N

Neoliz2015-11-24 21:01:29

Django

Neoliz, 2015-11-24 21:01:29

Good evening dear forum users. Your help is required in the following question. I included chart.js for pretty charts, but it doesn't work.
Browser console throws the following error: IndexSizeError: Index or size is negative or greater than the allowed amount Chart.min.js:10:0 Breaking
the Internet floor did not find the problem. The most interesting thing is that the Line graph in another template of the same application draws without problems.
And the code that doesn't work works great in a simple html page.
This code is throwing an error:

{% 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 %}

And this code works:

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

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Vitaly F., 2015-12-11
@timofeydeys

Canvas isn't hidden via css (display: none) by any chance?