157 lines
4.1 KiB
JavaScript
157 lines
4.1 KiB
JavaScript
|
|
// // Sample data
|
|
// const dataItems = [
|
|
// { id: 1, name: "Question 1", description: "Description for Item 1" },
|
|
// { id: 2, name: "Question 2", description: "Description for Item 2" },
|
|
// ];
|
|
|
|
// // Function to display data items on the webpage
|
|
// function displayDataItems() {
|
|
// const container = document.getElementById("data-container");
|
|
|
|
// // Clear previous content
|
|
// container.innerHTML = "";
|
|
|
|
// // Loop through data items and create HTML elements
|
|
// dataItems.forEach(item => {
|
|
// const itemElement = document.createElement("div");
|
|
// itemElement.classList.add("data-item");
|
|
// itemElement.innerHTML = `
|
|
// <h2>${item.name}</h2>
|
|
// <p>${item.description}</p>
|
|
// `;
|
|
// container.appendChild(itemElement);
|
|
// });
|
|
// }
|
|
|
|
// // Call the function to display data items when the page loads
|
|
// window.onload = displayDataItems;
|
|
|
|
// // Sample data for the questionnaire results
|
|
// const questionnaireData = {
|
|
// labels: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'],
|
|
// datasets: [{
|
|
// label: 'Responses',
|
|
// data: [20, 35, 15, 10, 20], // Sample response counts for each option
|
|
// backgroundColor: [
|
|
// 'rgba(255, 99, 132, 0.2)',
|
|
// 'rgba(54, 162, 235, 0.2)',
|
|
// 'rgba(255, 206, 86, 0.2)',
|
|
// 'rgba(75, 192, 192, 0.2)',
|
|
// 'rgba(153, 102, 255, 0.2)'
|
|
// ],
|
|
// borderColor: [
|
|
// 'rgba(255, 99, 132, 1)',
|
|
// 'rgba(54, 162, 235, 1)',
|
|
// 'rgba(255, 206, 86, 1)',
|
|
// 'rgba(75, 192, 192, 1)',
|
|
// 'rgba(153, 102, 255, 1)'
|
|
// ],
|
|
// borderWidth: 1
|
|
// }]
|
|
// };
|
|
|
|
// // Chart configuration
|
|
// const chartConfig = {
|
|
// type: 'bar',
|
|
// data: questionnaireData,
|
|
// options: {
|
|
// scales: {
|
|
// yAxes: [{
|
|
// ticks: {
|
|
// beginAtZero: true
|
|
// }
|
|
// }]
|
|
// }
|
|
// }
|
|
// };
|
|
|
|
// // Create the chart
|
|
// const ctx = document.getElementById('chart').getContext('2d');
|
|
// const myChart = new Chart(ctx, chartConfig);
|
|
|
|
// Sample data for the questionnaire results
|
|
const question1Data = {
|
|
labels: ['Option A', 'Option B', 'Option C'],
|
|
datasets: [{
|
|
label: 'Responses',
|
|
data: [40, 30, 20],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.2)',
|
|
'rgba(54, 162, 235, 0.2)',
|
|
'rgba(255, 206, 86, 0.2)'
|
|
],
|
|
borderColor: [
|
|
'rgba(255, 99, 132, 1)',
|
|
'rgba(54, 162, 235, 1)',
|
|
'rgba(255, 206, 86, 1)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
};
|
|
|
|
const question2Data = {
|
|
labels: ['Option A', 'Option B', 'Option C'],
|
|
datasets: [{
|
|
label: 'Responses',
|
|
data: [25, 35, 40],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.2)',
|
|
'rgba(54, 162, 235, 0.2)',
|
|
'rgba(255, 206, 86, 0.2)'
|
|
],
|
|
borderColor: [
|
|
'rgba(255, 99, 132, 1)',
|
|
'rgba(54, 162, 235, 1)',
|
|
'rgba(255, 206, 86, 1)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
};
|
|
|
|
// Chart configurations for each question
|
|
const chartConfig1 = {
|
|
type: 'pie',
|
|
data: question1Data,
|
|
options: {
|
|
responsive: true,
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Question 1 Responses'
|
|
},
|
|
animation: {
|
|
animateScale: true,
|
|
animateRotate: true
|
|
}
|
|
}
|
|
};
|
|
|
|
const chartConfig2 = {
|
|
type: 'pie',
|
|
data: question2Data,
|
|
options: {
|
|
responsive: true,
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Question 2 Responses'
|
|
},
|
|
animation: {
|
|
animateScale: true,
|
|
animateRotate: true
|
|
}
|
|
}
|
|
};
|
|
|
|
// Create the charts
|
|
const ctx1 = document.getElementById('chart1').getContext('2d');
|
|
const myChart1 = new Chart(ctx1, chartConfig1);
|
|
|
|
const ctx2 = document.getElementById('chart2').getContext('2d');
|
|
const myChart2 = new Chart(ctx2, chartConfig2);
|