Chartjs-Displaying a chart using Chart.js

by

2👍

Data variable is not yet initialized when you are calling “new Chart”. Move the “new Chart” to end of JS block.

A tip – to check for errors use JS console.

Edit: The were two additional JavaScript errors – options variable was not intialized and Line was undefined variable. Please check my reply below for demo link.

1👍

You didn’t declared the options variable either pass an empty array for options.

new Chart(context).Line(data,{});

Or declare the variable

var options = { ... } 
new Chart(context).Line(data, options);

0👍

I think I have a solution to ‘options’ problem.
If you remove options from:

new Chart(context).Line(data,options);

so it looks like that:

new Chart(context).Line(data);

does it work?

It is because

Line.defaults = { ... }

is just a list of options you may change – you are not supposed to put the whole thing to your html file.

In other words instead of for example:

Line.defaults = { scaleOverlay : true, scaleOverride : true }

try:

var options = { scaleOverlay : true, scaleOverride : true }

The tutorial on the homepage of chartjs is confusing in this regard a little bit because it tells you to use an array of settings that are default in the main file. But you are supposed to just take the “insides” and use them, not the whole thing and it does not say to actually create options variable for it.
It took me an hour to figure out but only because I have made a mistake of not checking up JS Console immediatelly, as @Lauris hinted out in his answer 🙂

Also make sure that this:

<script src="../../../Downloads/Chart.js-master/Chart.js"></script>

points to a correct file. It looks like you just did that to hide the real path from StackOverflow community. In that case nevermind.

I hope this helps!

Leave a comment