1971 lines
63 KiB
JavaScript
1971 lines
63 KiB
JavaScript
function prepareChart(chartType, chartData, labels, header) {
|
|
const data = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
data: chartData,
|
|
backgroundColor: [
|
|
'rgba(210,105,30,0.8)',
|
|
'rgba(244,164,96,0.8)',
|
|
'rgba(222,184,135,0.8)',
|
|
'rgba(188,143,143,0.8)',
|
|
'rgba(176,196,222,0.8)',
|
|
'rgba(184,134,11,0.8)',
|
|
'rgba(238,232,170,0.8)',
|
|
'rgba(189,183,107,0.8)',
|
|
'rgba(128,128,0,0.8)',
|
|
'rgba(255,255,0,0.8)',
|
|
'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)',
|
|
'rgba(143,188,143,0.8)',
|
|
'rgba(0,255,255,0.8)',
|
|
'rgba(230,230,250,0.8)',
|
|
'rgba(105,105,105,0.8)'
|
|
],
|
|
borderColor: [
|
|
'rgb(255, 99, 132,0.8)',
|
|
'rgb(75, 192, 192,0.8)',
|
|
'rgb(255, 205, 86,0.8)',
|
|
'rgba(255,182,193,0.8)',
|
|
'rgba(219,112,147,0.8)',
|
|
'rgba(139,69,19,0.8)',
|
|
'rgba(210,105,30,0.8)',
|
|
'rgba(244,164,96,0.8)',
|
|
'rgba(222,184,135,0.8)',
|
|
'rgba(188,143,143,0.8)',
|
|
'rgba(176,196,222,0.8)',
|
|
'rgba(184,134,11,0.8)',
|
|
'rgba(238,232,170,0.8)',
|
|
'rgba(189,183,107,0.8)',
|
|
'rgba(128,128,0,0.8)',
|
|
'rgba(255,255,0,0.8)',
|
|
'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)',
|
|
'rgba(143,188,143,0.8)',
|
|
'rgba(0,255,255,0.8)',
|
|
'rgba(230,230,250,0.8)',
|
|
'rgba(105,105,105,0.8)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
};
|
|
|
|
// for line chart
|
|
const data2 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
data: chartData,
|
|
fill: false,
|
|
borderColor: 'rgb(75, 192, 192)',
|
|
tension: 0.4
|
|
}]
|
|
};
|
|
|
|
// for radar chart
|
|
const data3 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
data: chartData,
|
|
fill: true,
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
pointBackgroundColor: 'rgb(255, 99, 132)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(255, 99, 132)'
|
|
}]
|
|
};
|
|
|
|
if (chartType == 'bar') {
|
|
|
|
const ctx1 = document.getElementById('chart3').getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'bar',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'doughnut') {
|
|
|
|
const ctx2 = document.getElementById('chart3').getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'doughnut',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'pie') {
|
|
const ctx2 = document.getElementById('chart3').getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'pie',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'line') {
|
|
const ctx2 = document.getElementById('chart3').getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'line',
|
|
data: data2,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'radar') {
|
|
const ctx2 = document.getElementById('chart3').getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'radar',
|
|
data: data3,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
function prepareChart6(chartType, chartData, chartData1, chartData2, chartData3, chartData4, chartData5, chartData6, chartData7, labels, header) {
|
|
// for line chart
|
|
const data2 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: "Female",
|
|
fill: false,
|
|
borderColor: 'rgb(255, 99, 132,0.8)',
|
|
backgroundColor: 'rgb(255, 99, 132,0.8)',
|
|
data: chartData7,
|
|
}, {
|
|
label: "Male",
|
|
fill: false,
|
|
borderColor: 'rgb(150, 99, 132,0.8)',
|
|
backgroundColor: 'rgb(150, 99, 132,0.8)',
|
|
data: chartData6,
|
|
},
|
|
{
|
|
label: "Blue Collar",
|
|
fill: false,
|
|
borderColor: 'rgb(255, 99, 100,0.8)',
|
|
backgroundColor: 'rgb(255, 99, 100,0.8)',
|
|
data: chartData5,
|
|
}, {
|
|
label: "White Collar",
|
|
fill: false,
|
|
borderColor: 'rgb(50, 78, 168)',
|
|
backgroundColor: 'rgb(50, 78, 168)',
|
|
data: chartData4,
|
|
}, {
|
|
label: "Total",
|
|
fill: false,
|
|
borderColor: 'rgb(168, 50, 64)',
|
|
backgroundColor: 'rgb(168, 50, 64)',
|
|
data: chartData3,
|
|
}, {
|
|
label: "Non Emp",
|
|
fill: false,
|
|
borderColor: 'rgb(166, 168, 50)',
|
|
backgroundColor: 'rgb(166, 168, 50)',
|
|
data: chartData2,
|
|
}, {
|
|
label: "Contractual Emp",
|
|
fill: false,
|
|
borderColor: 'rgb(128, 0, 0)',
|
|
backgroundColor: 'rgb(128, 0, 0)',
|
|
data: chartData1,
|
|
}, {
|
|
label: "Regular Emp",
|
|
fill: false,
|
|
borderColor: 'rgb(255, 215, 0)',
|
|
backgroundColor: 'rgb(255, 215, 0)',
|
|
data: chartData,
|
|
}]
|
|
};
|
|
|
|
// for bar chart
|
|
const data = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: "Female",
|
|
borderColor: 'rgb(190, 20, 255)',
|
|
backgroundColor: 'rgb(190, 20, 255)',
|
|
borderWidth: 1,
|
|
data: chartData7,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "Male",
|
|
borderColor: 'rgb(120, 230, 255)',
|
|
backgroundColor: 'rgb(120, 230, 255)',
|
|
borderWidth: 1,
|
|
data: chartData6,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "Blue Collar",
|
|
borderColor: 'rgb(255, 12, 20)',
|
|
backgroundColor: 'rgb(255, 12, 20)',
|
|
borderWidth: 1,
|
|
data: chartData5,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "White Collar",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(50, 78, 168)',
|
|
borderWidth: 1,
|
|
data: chartData4,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "Total",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(120, 100, 120)',
|
|
borderWidth: 1,
|
|
data: chartData3,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "Non Emp",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(166, 168, 50)',
|
|
borderWidth: 1,
|
|
data: chartData2,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "Contractual Emp",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(128, 0, 0)',
|
|
borderWidth: 1,
|
|
data: chartData1,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "Regular Emp",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(255, 215, 0)',
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
|
|
// for pie and doughnut chart
|
|
const data3 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: "Female",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)', 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData7,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "Male",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)', 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData6,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "Blue Collar",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)', 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData5,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "White Collar",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData4,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "Total",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData3,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "Non Emp",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData2,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "Contractual Emp",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData1,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "Regular Emp",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
|
|
//for radar chart
|
|
const data4 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: "Female",
|
|
fill: true,
|
|
data: chartData7,
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
pointBackgroundColor: 'rgb(255, 99, 132)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(255, 99, 132)'
|
|
}, {
|
|
label: "Male",
|
|
fill: true,
|
|
data: chartData6,
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
pointBackgroundColor: 'rgb(255, 99, 132)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(255, 99, 132)'
|
|
}, {
|
|
label: "Blue Collar",
|
|
fill: true,
|
|
data: chartData5,
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
pointBackgroundColor: 'rgb(255, 99, 132)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(255, 99, 132)'
|
|
}, {
|
|
label: "White Collar",
|
|
data: chartData4,
|
|
backgroundColor: 'rgba(50, 78, 168, 0.2)',
|
|
borderColor: 'rgb(50, 78, 168)',
|
|
pointBackgroundColor: 'rgb(50, 78, 168)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(50, 78, 168)'
|
|
}, {
|
|
label: "Total",
|
|
data: chartData3,
|
|
backgroundColor: 'rgba(168, 50, 64, 0.2)',
|
|
borderColor: 'rgb(168, 50, 64)',
|
|
pointBackgroundColor: 'rgb(168, 50, 64)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(168, 50, 64)'
|
|
}, {
|
|
label: "Non Emp",
|
|
data: chartData2,
|
|
backgroundColor: 'rgba(166, 168, 50, 0.2)',
|
|
borderColor: 'rgb(166, 168, 50)',
|
|
pointBackgroundColor: 'rgb(166, 168, 50)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(166, 168, 50)'
|
|
}, {
|
|
label: "Contractual Emp",
|
|
data: chartData1,
|
|
backgroundColor: 'rgba(128, 0, 0, 0.2)',
|
|
borderColor: 'rgb(128, 0, 0)',
|
|
pointBackgroundColor: 'rgb(128, 0, 0)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(128, 0, 0)'
|
|
}, {
|
|
label: "Regular Emp",
|
|
data: chartData,
|
|
backgroundColor: 'rgba(255, 215, 0, 0.2)',
|
|
borderColor: 'rgb(255, 215, 0)',
|
|
pointBackgroundColor: 'rgb(255, 215, 0)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(255, 215, 0)'
|
|
}]
|
|
};
|
|
|
|
if (chartType == 'bar') {
|
|
const ctx1 = document.getElementById('chart4').getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'bar',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'doughnut') {
|
|
const ctx1 = document.getElementById('chart4').getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'doughnut',
|
|
data: data3,
|
|
options: {
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
},
|
|
},
|
|
});
|
|
} else if (chartType == 'pie') {
|
|
const ctx1 = document.getElementById('chart4').getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'pie',
|
|
data: data3,
|
|
options: {
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'line') {
|
|
const ctx1 = document.getElementById('chart4').getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'line',
|
|
data: data2,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
},
|
|
tension: 0.4,
|
|
}
|
|
});
|
|
} else if (chartType == 'radar') {
|
|
const ctx2 = document.getElementById('chart4').getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'radar',
|
|
data: data4,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function prepareChart2(chartType, labels, header, chartData1, chartData2) {
|
|
// for line chart
|
|
const data2 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: "Before",
|
|
fill: false,
|
|
borderColor: 'rgb(50, 168, 82)',
|
|
backgroundColor: 'rgb(50, 168, 82)',
|
|
data: chartData1,
|
|
}, {
|
|
label: "After",
|
|
fill: false,
|
|
borderColor: 'rgb(50, 78, 168)',
|
|
backgroundColor: 'rgb(50, 78, 168)',
|
|
data: chartData2,
|
|
}]
|
|
};
|
|
|
|
// for bar chart
|
|
const data = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: "Before",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(50, 168, 82)',
|
|
borderWidth: 1,
|
|
data: chartData1,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "After",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(50, 78, 168)',
|
|
borderWidth: 1,
|
|
data: chartData2,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
|
|
// for pie and doughnut chart
|
|
const data3 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: "Before",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData1,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: "After",
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData2,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
|
|
//for radar chart
|
|
const data4 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: "Before",
|
|
fill: true,
|
|
data: chartData1,
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
pointBackgroundColor: 'rgb(255, 99, 132)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(255, 99, 132)'
|
|
}, {
|
|
label: "After",
|
|
data: chartData2,
|
|
backgroundColor: 'rgba(50, 78, 168, 0.2)',
|
|
borderColor: 'rgb(50, 78, 168)',
|
|
pointBackgroundColor: 'rgb(50, 78, 168)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(50, 78, 168)'
|
|
}]
|
|
};
|
|
|
|
if (chartType == 'bar') {
|
|
const ctx1 = document.getElementById('chart3').getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'bar',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'doughnut') {
|
|
const ctx1 = document.getElementById('chart3').getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'doughnut',
|
|
data: data3,
|
|
options: {
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
},
|
|
},
|
|
});
|
|
} else if (chartType == 'pie') {
|
|
const ctx1 = document.getElementById('chart3').getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'pie',
|
|
data: data3,
|
|
options: {
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'line') {
|
|
const ctx1 = document.getElementById('chart3').getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'line',
|
|
data: data2,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
},
|
|
tension: 0.4,
|
|
}
|
|
});
|
|
} else if (chartType == 'radar') {
|
|
const ctx2 = document.getElementById('chart3').getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'radar',
|
|
data: data4,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function prepareChart5(chartType, chartData5, labels, header, chartData4, chartData3, chartData2, chartData1, chartData) {
|
|
// for line chart
|
|
const data2 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: new Date().getFullYear() - 5,
|
|
fill: false,
|
|
borderColor: 'rgb(50, 168, 82)',
|
|
backgroundColor: 'rgb(50, 168, 82)',
|
|
data: chartData5,
|
|
}, {
|
|
label: new Date().getFullYear() - 4,
|
|
fill: false,
|
|
borderColor: 'rgb(50, 78, 168)',
|
|
backgroundColor: 'rgb(50, 78, 168)',
|
|
data: chartData4,
|
|
}, {
|
|
label: new Date().getFullYear() - 3,
|
|
fill: false,
|
|
borderColor: 'rgb(168, 50, 64)',
|
|
backgroundColor: 'rgb(168, 50, 64)',
|
|
data: chartData3,
|
|
}, {
|
|
label: new Date().getFullYear() - 2,
|
|
fill: false,
|
|
borderColor: 'rgb(166, 168, 50)',
|
|
backgroundColor: 'rgb(166, 168, 50)',
|
|
data: chartData2,
|
|
}, {
|
|
label: new Date().getFullYear() - 1,
|
|
fill: false,
|
|
borderColor: 'rgb(128, 0, 0)',
|
|
backgroundColor: 'rgb(128, 0, 0)',
|
|
data: chartData1,
|
|
}, {
|
|
label: new Date().getFullYear(),
|
|
fill: false,
|
|
borderColor: 'rgb(255, 215, 0)',
|
|
backgroundColor: 'rgb(255, 215, 0)',
|
|
data: chartData,
|
|
}]
|
|
};
|
|
|
|
// for bar chart
|
|
const data = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: new Date().getFullYear() - 5,
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(50, 168, 82)',
|
|
borderWidth: 1,
|
|
data: chartData5,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: new Date().getFullYear() - 4,
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(50, 78, 168)',
|
|
borderWidth: 1,
|
|
data: chartData4,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: new Date().getFullYear() - 3,
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(168, 50, 64)',
|
|
borderWidth: 1,
|
|
data: chartData3,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: new Date().getFullYear() - 2,
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(166, 168, 50)',
|
|
borderWidth: 1,
|
|
data: chartData2,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: new Date().getFullYear() - 1,
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(128, 0, 0)',
|
|
borderWidth: 1,
|
|
data: chartData1,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: new Date().getFullYear(),
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(255, 215, 0)',
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
|
|
// for pie and doughnut chart
|
|
const data3 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: new Date().getFullYear() - 5,
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData5,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: new Date().getFullYear() - 4,
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData4,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: new Date().getFullYear() - 3,
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData3,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: new Date().getFullYear() - 2,
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData2,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: new Date().getFullYear() - 1,
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData1,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: new Date().getFullYear(),
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
|
|
//for radar chart
|
|
const data4 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: new Date().getFullYear() - 5,
|
|
fill: true,
|
|
data: chartData5,
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
pointBackgroundColor: 'rgb(255, 99, 132)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(255, 99, 132)'
|
|
}, {
|
|
label: new Date().getFullYear() - 4,
|
|
data: chartData4,
|
|
backgroundColor: 'rgba(50, 78, 168, 0.2)',
|
|
borderColor: 'rgb(50, 78, 168)',
|
|
pointBackgroundColor: 'rgb(50, 78, 168)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(50, 78, 168)'
|
|
}, {
|
|
label: new Date().getFullYear() - 3,
|
|
data: chartData3,
|
|
backgroundColor: 'rgba(168, 50, 64, 0.2)',
|
|
borderColor: 'rgb(168, 50, 64)',
|
|
pointBackgroundColor: 'rgb(168, 50, 64)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(168, 50, 64)'
|
|
}, {
|
|
label: new Date().getFullYear() - 2,
|
|
data: chartData2,
|
|
backgroundColor: 'rgba(166, 168, 50, 0.2)',
|
|
borderColor: 'rgb(166, 168, 50)',
|
|
pointBackgroundColor: 'rgb(166, 168, 50)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(166, 168, 50)'
|
|
}, {
|
|
label: new Date().getFullYear() - 1,
|
|
data: chartData1,
|
|
backgroundColor: 'rgba(128, 0, 0, 0.2)',
|
|
borderColor: 'rgb(128, 0, 0)',
|
|
pointBackgroundColor: 'rgb(128, 0, 0)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(128, 0, 0)'
|
|
}, {
|
|
label: new Date().getFullYear(),
|
|
data: chartData,
|
|
backgroundColor: 'rgba(255, 215, 0, 0.2)',
|
|
borderColor: 'rgb(255, 215, 0)',
|
|
pointBackgroundColor: 'rgb(255, 215, 0)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(255, 215, 0)'
|
|
}]
|
|
};
|
|
|
|
if (chartType == 'bar') {
|
|
const ctx1 = document.getElementById('chart3').getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'bar',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'doughnut') {
|
|
const ctx1 = document.getElementById('chart3').getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'doughnut',
|
|
data: data3,
|
|
options: {
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
},
|
|
},
|
|
});
|
|
} else if (chartType == 'pie') {
|
|
const ctx1 = document.getElementById('chart3').getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'pie',
|
|
data: data3,
|
|
options: {
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'line') {
|
|
const ctx1 = document.getElementById('chart3').getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'line',
|
|
data: data2,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
},
|
|
tension: 0.4,
|
|
}
|
|
});
|
|
} else if (chartType == 'radar') {
|
|
const ctx2 = document.getElementById('chart3').getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'radar',
|
|
data: data4,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function prepareChart_dynamic_id(chartType, chartData, labels, header, id) {
|
|
const data = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
data: chartData,
|
|
backgroundColor: [
|
|
'rgba(210,105,30,0.8)',
|
|
'rgba(244,164,96,0.8)',
|
|
'rgba(222,184,135,0.8)',
|
|
'rgba(188,143,143,0.8)',
|
|
'rgba(176,196,222,0.8)',
|
|
'rgba(184,134,11,0.8)',
|
|
'rgba(238,232,170,0.8)',
|
|
'rgba(189,183,107,0.8)',
|
|
'rgba(128,128,0,0.8)',
|
|
'rgba(255,255,0,0.8)',
|
|
'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)',
|
|
'rgba(143,188,143,0.8)',
|
|
'rgba(0,255,255,0.8)',
|
|
'rgba(230,230,250,0.8)',
|
|
'rgba(105,105,105,0.8)'
|
|
],
|
|
borderColor: [
|
|
'rgb(255, 99, 132,0.8)',
|
|
'rgb(75, 192, 192,0.8)',
|
|
'rgb(255, 205, 86,0.8)',
|
|
'rgba(255,182,193,0.8)',
|
|
'rgba(219,112,147,0.8)',
|
|
'rgba(139,69,19,0.8)',
|
|
'rgba(210,105,30,0.8)',
|
|
'rgba(244,164,96,0.8)',
|
|
'rgba(222,184,135,0.8)',
|
|
'rgba(188,143,143,0.8)',
|
|
'rgba(176,196,222,0.8)',
|
|
'rgba(184,134,11,0.8)',
|
|
'rgba(238,232,170,0.8)',
|
|
'rgba(189,183,107,0.8)',
|
|
'rgba(128,128,0,0.8)',
|
|
'rgba(255,255,0,0.8)',
|
|
'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)',
|
|
'rgba(143,188,143,0.8)',
|
|
'rgba(0,255,255,0.8)',
|
|
'rgba(230,230,250,0.8)',
|
|
'rgba(105,105,105,0.8)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
};
|
|
|
|
// for line chart
|
|
const data2 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
data: chartData,
|
|
fill: false,
|
|
borderColor: 'rgb(75, 192, 192)',
|
|
tension: 0.4
|
|
}]
|
|
};
|
|
|
|
// for radar chart
|
|
const data3 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
data: chartData,
|
|
fill: true,
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
pointBackgroundColor: 'rgb(255, 99, 132)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(255, 99, 132)'
|
|
}]
|
|
};
|
|
|
|
if (chartType == 'bar') {
|
|
|
|
const ctx1 = document.getElementById(id).getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'bar',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'doughnut') {
|
|
|
|
const ctx2 = document.getElementById(id).getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'doughnut',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'pie') {
|
|
const ctx2 = document.getElementById(id).getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'pie',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'line') {
|
|
const ctx2 = document.getElementById(id).getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'line',
|
|
data: data2,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'radar') {
|
|
const ctx2 = document.getElementById(id).getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'radar',
|
|
data: data3,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
function prepareChart_dynamic_id(chartType, chartData, labels, header, id) {
|
|
const data = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
data: chartData,
|
|
backgroundColor: [
|
|
'rgba(210,105,30,0.8)',
|
|
'rgba(244,164,96,0.8)',
|
|
'rgba(222,184,135,0.8)',
|
|
'rgba(188,143,143,0.8)',
|
|
'rgba(176,196,222,0.8)',
|
|
'rgba(184,134,11,0.8)',
|
|
'rgba(238,232,170,0.8)',
|
|
'rgba(189,183,107,0.8)',
|
|
'rgba(128,128,0,0.8)',
|
|
'rgba(255,255,0,0.8)',
|
|
'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)',
|
|
'rgba(143,188,143,0.8)',
|
|
'rgba(0,255,255,0.8)',
|
|
'rgba(230,230,250,0.8)',
|
|
'rgba(105,105,105,0.8)'
|
|
],
|
|
borderColor: [
|
|
'rgb(255, 99, 132,0.8)',
|
|
'rgb(75, 192, 192,0.8)',
|
|
'rgb(255, 205, 86,0.8)',
|
|
'rgba(255,182,193,0.8)',
|
|
'rgba(219,112,147,0.8)',
|
|
'rgba(139,69,19,0.8)',
|
|
'rgba(210,105,30,0.8)',
|
|
'rgba(244,164,96,0.8)',
|
|
'rgba(222,184,135,0.8)',
|
|
'rgba(188,143,143,0.8)',
|
|
'rgba(176,196,222,0.8)',
|
|
'rgba(184,134,11,0.8)',
|
|
'rgba(238,232,170,0.8)',
|
|
'rgba(189,183,107,0.8)',
|
|
'rgba(128,128,0,0.8)',
|
|
'rgba(255,255,0,0.8)',
|
|
'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)',
|
|
'rgba(143,188,143,0.8)',
|
|
'rgba(0,255,255,0.8)',
|
|
'rgba(230,230,250,0.8)',
|
|
'rgba(105,105,105,0.8)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
};
|
|
|
|
// for line chart
|
|
const data2 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
data: chartData,
|
|
fill: false,
|
|
borderColor: 'rgb(75, 192, 192)',
|
|
tension: 0.4
|
|
}]
|
|
};
|
|
|
|
// for radar chart
|
|
const data3 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
data: chartData,
|
|
fill: true,
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
pointBackgroundColor: 'rgb(255, 99, 132)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(255, 99, 132)'
|
|
}]
|
|
};
|
|
|
|
if (chartType == 'bar') {
|
|
|
|
const ctx1 = document.getElementById(id).getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'bar',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'doughnut') {
|
|
|
|
const ctx2 = document.getElementById(id).getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'doughnut',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'pie') {
|
|
const ctx2 = document.getElementById(id).getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'pie',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'line') {
|
|
const ctx2 = document.getElementById(id).getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'line',
|
|
data: data2,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'radar') {
|
|
const ctx2 = document.getElementById(id).getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'radar',
|
|
data: data3,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
function prepareChart_for_two_datasets_with_dynamic_id(chartType, chartData1, chartData2, labels, header, id) {
|
|
// for line chart
|
|
const data2 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'BMI(<25)',
|
|
fill: false,
|
|
borderColor: 'rgb(50, 78, 168)',
|
|
backgroundColor: 'rgb(50, 78, 168)',
|
|
data: chartData1,
|
|
}, {
|
|
label: 'BMI(>=25)',
|
|
fill: false,
|
|
borderColor: 'rgb(168, 50, 64)',
|
|
backgroundColor: 'rgb(168, 50, 64)',
|
|
data: chartData2,
|
|
}]
|
|
};
|
|
|
|
// for bar chart
|
|
const data = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'BMI(<25)',
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(50, 78, 168)',
|
|
borderWidth: 1,
|
|
data: chartData1,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: 'BMI(>=25)',
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: 'rgb(168, 50, 64)',
|
|
borderWidth: 1,
|
|
data: chartData2,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
|
|
// for pie and doughnut chart
|
|
const data3 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'BMI(<25)',
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData1,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: 'BMI(>=25)',
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
|
|
'rgba(124,252,0,0.8)',
|
|
'rgba(128,0,0,0.8)',
|
|
'rgba(178,34,34,0.8)',
|
|
'rgba(220,20,60,0.8)',
|
|
'rgba(255,0,0,0.8)',
|
|
'rgba(255,99,71,0.8)',
|
|
'rgba(205,92,92,0.8)',
|
|
'rgba(233,150,122,0.8)',
|
|
'rgba(255,140,0,0.8)',
|
|
'rgba(255,215,0,0.8)',
|
|
'rgba(152,251,152,0.8)'],
|
|
// borderWidth: 2,
|
|
data: chartData2,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
|
|
//for radar chart
|
|
const data4 = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'BMI(<25)',
|
|
data: chartData1,
|
|
backgroundColor: 'rgba(50, 78, 168, 0.2)',
|
|
borderColor: 'rgb(50, 78, 168)',
|
|
pointBackgroundColor: 'rgb(50, 78, 168)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(50, 78, 168)'
|
|
}, {
|
|
label: 'BMI(>=25)',
|
|
data: chartData2,
|
|
backgroundColor: 'rgba(168, 50, 64, 0.2)',
|
|
borderColor: 'rgb(168, 50, 64)',
|
|
pointBackgroundColor: 'rgb(168, 50, 64)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(168, 50, 64)'
|
|
}]
|
|
};
|
|
|
|
if (chartType == 'bar') {
|
|
const ctx1 = document.getElementById(id).getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'bar',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'doughnut') {
|
|
const ctx1 = document.getElementById(id).getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'doughnut',
|
|
data: data3,
|
|
options: {
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
},
|
|
},
|
|
});
|
|
} else if (chartType == 'pie') {
|
|
const ctx1 = document.getElementById(id).getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'pie',
|
|
data: data3,
|
|
options: {
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
}
|
|
}
|
|
});
|
|
} else if (chartType == 'line') {
|
|
const ctx1 = document.getElementById(id).getContext('2d');
|
|
const myChart1 = new Chart(ctx1, {
|
|
type: 'line',
|
|
data: data2,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header
|
|
},
|
|
tension: 0.4,
|
|
}
|
|
});
|
|
} else if (chartType == 'radar') {
|
|
const ctx2 = document.getElementById(id).getContext('2d');
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: 'radar',
|
|
data: data4,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
layout: {
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
$('#startDate1').datepicker({
|
|
format: "mm-yyyy",
|
|
viewMode: "months",
|
|
minViewMode: "months"
|
|
});
|
|
$('#endDate1').datepicker({
|
|
format: "mm-yyyy",
|
|
viewMode: "months",
|
|
minViewMode: "months"
|
|
});
|
|
|
|
function open_pdf() {
|
|
html2canvas(document.getElementById("report_div"), {
|
|
onrendered: function (canvas) {
|
|
var img = canvas.toDataURL(); //image data of canvas
|
|
// var doc = new jsPDF('p','pt','a2');
|
|
var doc = new jsPDF('l', 'mm', [300, 350]);
|
|
doc.addImage(img, 10, 10);
|
|
doc.save('graph.pdf');
|
|
}
|
|
});
|
|
}
|