Data from chart don't showed. Labels - ok, data - nothing)
There is only links for chart.js and canvas initialization in HTML HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script> -->
<title>Title</title>
</head>
<body>
<h2>text</h2>
<canvas id="bar-chart-horizontal" width="800" height="450"></canvas>
</body>
<script src="/Users/***/Documents/django_website/js.js"></script>
</html>
JS code divided bay two parts: the first -creation data for future use in chart, the second - chart creation. JS
var lineChartData = { labels: ["Australia", "China", "USA", "New Zeland", "Sweden", "Norway", "Finland", "Netherlands"], datasets: [] },
array = ["[0,0,36,0,0,0,0,0]", "[20,60,15,9,2,3,39,364]"];
function getDataset(index, data) {
return {
datasets: [{
backgroundColor: ["#c45850", "#3cba9f","#8e5ea2","#e8c3b9","#e8c3b9","#e8c3b9","#e8c3b9","#e8c3b9"],
data: data
}]
};
}
array.forEach(function (a, i) {
lineChartData.datasets.push(getDataset(i, JSON.parse(a)));
});
// -----------------------------------------------------------------------------
new Chart(document.getElementById("bar-chart-horizontal"), {
type: 'horizontalBar',
data: {
labels: ["Australia", "China", "USA", "New Zeland", "Sweden", "Norway", "Finland", "Netherlands"],
lineChartData
},
options: {
legend: { display: false },
title: {
display: true,
text: ''
},
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
It looks like there is a small mistake, but I can't find it.
Give this a shot:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<title>Title</title>
</head>
<body>
<h2>text</h2>
<canvas id="bar-chart-horizontal" width="1100" height="400"></canvas>
</body>
<script>
const labels = [
"Australia",
"China",
"USA",
"New Zealand",
"Sweden",
"Norway",
"Finland",
"Netherlands",
];
const backgroundColor = [
"#c45850",
"#3cba9f",
"#8e5ea2",
"#e8c3b9",
"#e8c3b9",
"#e8c3b9",
"#e8c3b9",
"#e8c3b9",
];
const chartPlots = [
[0, 0, 36, 0, 0, 0, 0, 0],
[20, 60, 15, 9, 2, 3, 39, 364],
];
const datasets = chartPlots.map((data, index) => ({
data,
backgroundColor,
}));
const data = {
labels,
datasets,
};
const options = {
legend: { display: false },
title: {
display: true,
text: "Chart Title",
},
scales: {
xAxes: [
{
stacked: true,
},
],
yAxes: [
{
stacked: true,
},
],
},
};
const chartConfig = {
type: "horizontalBar",
data: data,
options,
};
new Chart(document.getElementById("bar-chart-horizontal"), chartConfig);
</script>
</html>