CODEWITHSUNDEEP
javascriptchart.js
Rodent
Rodent

Reputation: 1818

How do I obtain a Chart instance for Chart.js

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!

Upvotes: 5

Views: 1827

Answers (2)

Rodent
Rodent

Reputation: 1818

I discovered that by moving the Chart.min.js included line BELOW the jQuery included line, it springs into life. Like so: 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>

Presumably Chart.js is dependent on jQuery.

Upvotes: 1

rphv
rphv

Reputation: 5537

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>

Upvotes: 3

Related Questions