Is there a bug with Chart.js? Every time I add any of the graphs at Chart.js to my website I get an error, but when I used the graph as stand-alone program it runs smoothly without errors. I am using HTML5.
JavaScript
x
31
31
1
<html>2
<head>3
<meta charset="utf-8" />4
<title>Rice Consumption</title>5
<script src='Chart.min.js'></script>6
</head>7
<body>8
9
<canvas id="rice" width="600" height="400"></canvas>10
11
<script>12
var riceData = {13
labels : ["January","February","March","April","May","June"],14
datasets :15
[16
{17
fillColor : "rgba(172,194,132,0.4)",18
strokeColor : "#ACC26D",19
pointColor : "#fff",20
pointStrokeColor : "#9DB86D",21
data : [203000,15600,99000,25100,30500,24700]22
}23
]24
}25
26
var rice = document.getElementById('rice').getContext('2d');27
new Chart(rice).Line(riceData);28
</script>29
</body>30
</html>31
SOLVED: I just decoupled the script from the canvas element (made another file for the script to execute its function).
Updated HTML:
JavaScript
1
13
13
1
<html>2
<head>3
<meta charset="utf-8" />4
<title>Rice Consumption</title>5
<script src='Chart.min.js'></script>6
</head>7
<body>8
<canvas id="rice" width="600" height="400"></canvas>9
<script src='Chart.min.js'></script>10
<script src='rice.js'></script>11
</body>12
</html>13
New JavaScript file:
JavaScript
1
16
16
1
var riceData = {2
labels : ["January","February","March","April","May","June"],3
datasets : [4
{5
fillColor : "rgba(172,194,132,0.4)",6
strokeColor : "#ACC26D",7
pointColor : "#fff",8
pointStrokeColor : "#9DB86D",9
data : [203000,15600,99000,25100,30500,24700]10
}11
]12
}13
14
var rice = document.getElementById('rice').getContext('2d');15
new Chart(rice).Line(riceData);16
Advertisement
Answer
here is a working jsfiddle of your code:
new Chart(rice).Line(riceData);
http://jsfiddle.net/mahmalsami/jqcthmyo/
So the problem is definitively coming from your external Chart.min.js inclusion
You may find a 404 on your js get. Please make sure you’re linking to the correct js folder. (try accessing your localhost/Chart.min.js to see if you can access to your file)