I'm making a simple chart.js and it gives me a default chart without any data shown, and the legend is undefined.
Here is my code:
var default_data = [
{
"year":"Total",
"gnis_id":"1009494",
"geometry":"MULTIPOLYGON",
"metadata":"NA",
"number_of_records":1,
"parkname":"NA",
"region":"NT",
"state":"NC",
"unit_code":"BLRI",
"unit_name":"Blue Ridge Parkway",
"unit_type":"Parkway",
"visitors":871922828},
{
"year":"Total",
"gnis_id":"255952",
"geometry":"MULTIPOLYGON",
"metadata":"http://nrdata.nps.gov/programs/Lands/GOGA_metadata.xml",
"number_of_records":1,
"parkname":"Golden Gate",
"region":"PW",
"state":"CA",
"unit_code":"GOGA",
"unit_name":"Golden Gate National Recreation Area",
"unit_type":"National Recreation Area",
"visitors":611031225
}
];
var ctx = document.getElementById('chart2').getContext('2d');
var chart2 = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
data: default_data,
parsing: {
xAxisKey: 'unit_name',
yAxisKey: 'visitors'
}
}]
},
options: {
}
});
Can anyone see the problem here? I can't find any error as the code is simple enough and it still shows nothing. No message in browser console either.
Look up the latest Chart JS seems like the old verions do not support it. It worked fine for me with the latest version
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<body>
<canvas id="myChart" ></canvas>
<script>
var default_data = [
{
"year":"Total",
"gnis_id":"1009494",
"geometry":"MULTIPOLYGON",
"metadata":"NA",
"number_of_records":1,
"parkname":"NA",
"region":"NT",
"state":"NC",
"unit_code":"BLRI",
"unit_name":"Blue Ridge Parkway",
"unit_type":"Parkway",
"visitors":871922828},
{
"year":"Total",
"gnis_id":"255952",
"geometry":"MULTIPOLYGON",
"metadata":"http://nrdata.nps.gov/programs/Lands/GOGA_metadata.xml",
"number_of_records":1,
"parkname":"Golden Gate",
"region":"PW",
"state":"CA",
"unit_code":"GOGA",
"unit_name":"Golden Gate National Recreation Area",
"unit_type":"National Recreation Area",
"visitors":611031225
}
];
var ctx = document.getElementById('myChart').getContext('2d');
var chart2 = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
data: default_data,
backgroundColor:["red","green"],
parsing: {
xAxisKey: 'unit_name',
yAxisKey: 'visitors'
}
}]
},
options: {
plugins:{
legend: {display: false}
}
}
});
</script>