In my recent coding project, I created a script to gather user input and then present it in various chart formats. However, upon executing the code, the selected chart fails to display after inputting values and clicking on the "generate chart" button. Here is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div id="header">
<h1>School Project</h1>
</div>
<nav>
<a href="#" onclick="showChartsPage()">Charts</a>
<a href="#" onclick="showFormsPage()">Send Forms</a>
</nav>
<div id="chartsPage">
<h2>Chart Display Page</h2>
</div>
<form id="dataForm">
<div>
<label for="labelsInput">Labels (comma-separated):</label>
<input type="text" id="labelsInput" placeholder="Label 1, Label 2, Label 3">
</div>
<label for="dataInput">Enter Data: </label>
<input type="text" id="dataInput" required>
<label for="chartType">Select Chart Type you want:</label>
<select id="chartType">
<option value="bar">Bar Chart</option>
<option value="pie">Pie Chart</option>
<option value="radar">Radar Chart</option>
<option value="line">Line Chart</option>
</select>
<button onclick="generateChart()">Generate the selected chart</button>
<div><canvas id="myChart"></canvas></div>
</form>
<div id="formsPage" class="card" style="display: none;">
<h2>Send Google Forms</h2>
<img src="Project/download.png" alt="Picture of a Form">
<p>Send Created Google Forms here</p>
<button onclick="sendGoogleForm()">Send Google Form</button>
</div>
<script>
function showChartsPage() {
document.getElementById('chartsPage').style.display = 'block';
document.getElementById('formsPage').style.display = 'none';
}
function showFormsPage() {
document.getElementById('chartsPage').style.display = 'none';
document.getElementById('formsPage').style.display = 'block';
}
function generateChart() {
const dataInput = document.getElementById("dataInput").value;
const labelsInput = document.getElementById('labelsInput').value;
const dataArray = dataInput.split(",").map(Number);
const chartType = document.getElementById('chartType').value;
const labels = labelsInput.split(',').map(label => label.trim());
const data = dataInput.split(',').map(value => parseFloat(value.trim()));
const ctx = document.getElementById('myChart').getContext('2d');
if (window.myChart) {
window.myChart.destroy();
}
window.myChart = new Chart(ctx, {
type: chartType,
data: {
labels: Array.from({
length: dataArray.length
}, (_, i) => i + 1),
datasets: [{
label: 'User Data',
data: dataArray,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
});
}
function generateChart() {
const chartType = document.getElementById('chartType').value;
const userData = document.getElementById('userData').value.split(',').map(Number);
// Use Chart.js to create a chart
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: chartType,
data: {
labels: Array.from({
length: userData.length
}, (_, i) => i + 1),
datasets: [{
label: 'User Data',
data: userData,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
</script>
</body>
</html>
The above is the code segment that I have been working on lately.
Upon troubleshooting, I confirmed that Chart.js was properly installed. Multiple attempts with different scripts led to the same outcome where instead of displaying the desired chart, the area remained blank.