jdg/chartjs_stacked_test
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
José David Guillén 2021-12-01 20:49:30 +01:00
commit 46cb961991
1 changed files with 305 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

305
index.html Normal file
View File

@ -0,0 +1,305 @@
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.1/dist/chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
let data =
[
[
"E ",
8700,
13,
99.93108201240524,
0.14932230645531816,
0
],
[
"ES ",
8628,
60,
99.1040661612681,
0.6891798759476223,
0.20675396278429048
],
[
"TR",
8689,
17,
99.80473236848151,
0.195267631518493,
0
],
[
"FR",
8596,
1,
98.7365035607627,
0.011486331265793705,
1.2520101079715005
],
[
"NDL",
8592,
8,
98.69055823569951,
0.09189065012634964,
1.2175511141741424
],
[
"PTB",
8213,
24,
94.3372386859637,
0.27567195037904896,
5.387089363657253
],
[
"DAN",
7954,
52,
91.36227888812313,
0.5972892258212726,
8.0404318860556
],
[
"RUS",
8181,
182,
93.9696760854583,
2.090512290374454,
3.9398116241672483
],
[
"HEB",
7788,
43,
89.45554789800138,
0.49391224442912934,
10.05053985756949
],
[
"IT ",
7827,
49,
89.90351481736734,
0.5628302320238916,
9.533654950608764
],
[
"CH",
7547,
65,
86.68734206294509,
0.7466115322765908,
12.56604640477832
],
[
"ZHH",
6759,
66,
77.63611302549965,
0.7580978635423845,
21.605789110957957
],
[
"PLK ",
5426,
51,
62.32483344819665,
0.585802894555479,
37.08936365724787
],
[
"CS ",
5175,
54,
59.441764300482426,
0.6202618883528601,
39.93797381116472
],
[
"JP",
4814,
53,
55.2951987135309,
0.6087755570870664,
44.096025729382035
],
[
"GR",
4653,
3,
53.44589937973811,
0.03445899379738112,
46.51964162646451
],
[
"D",
3552,
23,
40.799448656099244,
0.2641856191132552,
58.9363657247875
],
[
"FIN",
1819,
48,
20.89363657247875,
0.5513439007580979,
78.55501952676315
],
[
"HU",
1828,
49,
20.997013553870893,
0.5628302320238916,
78.44015621410522
],
[
"KOR",
1819,
50,
20.89363657247875,
0.5743165632896853,
78.53204686423156
],
[
"SK",
1814,
50,
20.836204916149782,
0.5743165632896853,
78.58947852056053
],
[
"SVE",
1818,
50,
20.88215024121296,
0.5743165632896853,
78.54353319549736
],
[
"NOR",
554,
12,
6.3634275212497124,
0.13783597518952448,
93.49873650356076
],
[
"PTG",
27,
8,
0.31013094417643006,
0.09189065012634964,
99.59797840569722
],
[
"VI",
4,
1,
0.04594532506317482,
0.011486331265793705,
99.94256834367103
],
[
"ENS ",
2,
0,
0.02297266253158741,
0,
99.97702733746841
],
[
"LT",
1,
3,
0.011486331265793705,
0.03445899379738112,
99.95405467493683
],
[
"LV",
0,
3,
0,
0.03445899379738112,
99.96554100620261
]
];
let labels = [], datasets=[[],[],[]];
for(let i=0;i<data.length;i++) {
labels.push(data[i][0]);
datasets[0].push(data[i][3]);
datasets[1].push(data[i][4]);
datasets[2].push(data[i][5]);
}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [
{
label: 'Translated',
data: datasets[0],
backgroundColor: [
'rgba(75, 192, 192, 0.2)',
],
borderColor: [
'rgba(75, 192, 192, 1)',
],
borderWidth: 1
},
{
label: 'To Review',
data: datasets[1],
backgroundColor: [
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
},
{
label: 'Not Translated',
data: datasets[2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
],
borderWidth: 1
},
]
},
options: {
indexAxis: 'y',
scales: {
y: {
beginAtZero: true,
stacked: true
},
x: {
stacked: true,
max:100
}
}
}
});
</script>
</body>
</html>