I’ve been trying to get Chart.js version 2.2.1 to show a simple chart using the tutorial from another site..
Even with the most basic data nothing will show. If I use the minified version, the version off CDN nada,nothing, zip.
In Brackets version 1.0.2 works fine, but version 2.2.1 comes up with lots of jshint errors.
I even tried it out on JSFiddle and still nothing with the lastest verson.
Being new to javascript I am wondering if there is something obvious that I am missing, otherwise I will continue to just use an older version.
Here is the working code. I have only added the beginning of the Chart.js file.
<canvas width="300px" height="300px" id="my-chart"></canvas>
* Chart.js
* http://chartjs.org/
* Version: 1.0.2
*
* Copyright 2015 Nick Downie
* Released under the MIT license
* https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
*/
var pieData = [
{
value: 25,
label: 'Java',
color: '#811BD6'
},
{
value: 10,
label: 'Scala',
color: '#9CBABA'
},
{
value: 30,
label: 'PHP',
color: '#D18177'
},
{
value : 35,
label: 'HTML',
color: '#6AE128'
}
];
var context = document.getElementById('my-chart').getContext('2d');
var skillsChart = new Chart(context).Pie(pieData);
If I use version 2.2.1 of Chart.js nothing happens.
/*!
* Chart.js
* http://chartjs.org/
* Version: 2.2.1
*
* Copyright 2016 Nick Downie
* Released under the MIT license
* https://github.com/chartjs/Chart.js/blob/master/LICENSE.md
*/
Below are fiddles to the two versions
Working Chart.js version 1.0.2 fiddle
Not working Chart.js version 2.2.1 fiddle
The syntax has changed since 1.0. Your javascript in 2.2.1 should be:
var data = {
labels: [
"Java",
"Scala",
"PHP",
"HTML"
],
datasets: [
{
data: [25, 10, 30, 35],
backgroundColor: [
"#811BD6",
"#9CBABA",
"#D18177",
"#6AE128"
]
}]
};
var ctx = document.getElementById("my-chart");
var myPieChart = new Chart(ctx,{
type: 'pie',
data: data
});