I am trying to use the Chartist.js framework to create charts and graphs for my site. But for some reason I keep getting the error "Chartist is not defined"
I can't figure out how to fix this error. Please see the code below:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Chartist.js - Simple line chart</title>
<script>
// THIS IS WHERE THE ERROR OCCURS
new Chartist.Line('.ct-chart', {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[2, 3, 2, 4, 5],
[0, 2.5, 3, 2, 3],
[1, 2, 2.5, 3.5, 4]
]
}, {
width: 500,
height: 300
});
</script>
</head>
<body>
<div class="ct-chart"></div>
</body>
</html>
Does anyone know what I am doing wrong? Thanks in advance.
Move your scripts to the footer:
<!DOCTYPE html>
<html>
<head>
<link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Chartist.js - Simple line chart</title>
</head>
<body>
<div class="ct-chart"></div>
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script>
// THIS IS WHERE THE ERROR OCCURS
new Chartist.Line('.ct-chart', {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[2, 3, 2, 4, 5],
[0, 2.5, 3, 2, 3],
[1, 2, 2.5, 3.5, 4]
]
}, {
width: 500,
height: 300
});
</script>
</body>
</html>
http://plnkr.co/edit/3sAdiBJaaue3x9kgBRZw?p=preview
And it's working like a charm :)