How do I obtain a Chart instance for Chart.js

Question

I am using Python/Django with the default Django templates. I have this in the head (other django static files in this location work fine):

<script type="text/javascript" src="{% static "js/Chart.min.js" %}"></script>

Naturally, I have Chart.min.js extracted from the master Chart.js download into the static js directory.

In my body I have:

<div class="graph">
    <canvas id="dgraph" width="600" height="400"></canvas>              
</div>

Also in the body I have:

<script type="text/javascript" src="{% static "js/stuff.js" %}"></script>

In stuff.js I have:

    var data = [
    {
        value: 20,
        color:"#878BB6"
    },
    {
        value : 40,
        color : "#4ACAB4"
    },
    {
        value : 10,
        color : "#FF8153"
    },
    {
        value : 30,
        color : "#FFEA88"
    }
];

// Get the context of the canvas element we want to select

var ctx = document.getElementById("dgraph").getContext("2d");
new Chart(ctx).Doughnut(data, {});

However, when I try and display this in a browser (Chrome as it happens) I see this in the console:

Uncaught ReferenceError: Chart is not defined

Where on earth is the Chart object obtained from? It seems to be pretty fundamental and I feel as if I've followed every instruction available on google and stackoverflow. Please help!

Answer 1

The Chart object is defined in Chart.min.js. It looks like that script isn't being loaded.

I think you're missing quotes around the value of the src attribute in the <script> tag in your header - try:

<script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>