Line Graph Maker Tool
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
}
.container {
max-width: 900px;
margin: 40px auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #4CAF50;
margin-bottom: 20px;
}
.form-container {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 20px;
}
label {
font-weight: bold;
}
input[type="text"], input[type="color"], button {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ddd;
}
input[type="text"] {
width: 100%;
}
button {
background-color: #4CAF50;
color: white;
cursor: pointer;
border: none;
}
button:hover {
background-color: #45a049;
}
.graph-container {
margin-top: 20px;
text-align: center;
}
canvas {
max-width: 100%;
height: auto;
border: 2px solid #ddd;
border-radius: 8px;
}
document.getElementById('generateGraph').addEventListener('click', function () {
// Get the input values
const labelsInput = document.getElementById('labels').value.trim();
const dataInput = document.getElementById('data').value.trim();
const lineColor = document.getElementById('lineColor').value;
// Validate input
if (!labelsInput || !dataInput) {
alert('Please fill in both Labels and Data points.');
return;
}
// Convert input values into arrays
const labels = labelsInput.split(',').map(label => label.trim());
const data = dataInput.split(',').map(value => parseFloat(value.trim()));
// Check if data and labels lengths match
if (labels.length !== data.length) {
alert('The number of labels must match the number of data points.');
return;
}
// Create the chart
createLineChart(labels, data, lineColor);
});
// Function to create the line chart
function createLineChart(labels, data, lineColor) {
const ctx = document.getElementById('lineGraph').getContext('2d');
// Destroy any existing chart before creating a new one
if (window.lineChart) {
window.lineChart.destroy();
}
// Create the new line chart
window.lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Data Points',
data: data,
fill: false,
borderColor: lineColor,
tension: 0.1,
pointRadius: 5,
pointBackgroundColor: lineColor,
pointBorderColor: '#fff',
pointBorderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
}
Manhunt Underway for Suspect in Active Shooter Situation That Shuts Down I-75 in Kentucky In a shocking turn of events, authorities in K...
No comments:
Post a Comment