Line Graph Maker Tool
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f7f6;
color: #333;
}
.container {
max-width: 900px;
margin: 30px auto;
padding: 20px;
background-color: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1 {
text-align: center;
color: #4CAF50;
}
.form-container {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
label {
font-weight: bold;
margin-bottom: 8px;
}
input {
padding: 10px;
margin-bottom: 15px;
border: 2px solid #ddd;
border-radius: 4px;
}
input:focus {
border-color: #4CAF50;
}
button {
padding: 10px 20px;
border: none;
background-color: #4CAF50;
color: white;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.chart-container {
margin-top: 20px;
}
@media (max-width: 600px) {
.container {
padding: 15px;
}
h1 {
font-size: 1.5em;
}
input, button {
font-size: 14px;
}
}
document.getElementById("createGraph").addEventListener("click", function() {
const dataPoints = document.getElementById("data-points").value.split(",").map(Number);
const labels = document.getElementById("labels").value.split(",");
if (dataPoints.length !== labels.length) {
alert("Data points and labels must have the same length!");
return;
}
const ctx = document.getElementById("lineChart").getContext("2d");
if (window.lineChartInstance) {
window.lineChartInstance.destroy(); // Destroy the old chart before creating a new one
}
window.lineChartInstance = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Data Points',
data: dataPoints,
fill: false,
borderColor: 'rgba(75, 192, 192, 1)',
tension: 0.1,
pointBackgroundColor: 'rgba(75, 192, 192, 1)',
pointRadius: 5,
pointHoverRadius: 8
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Line Graph'
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `Value: ${tooltipItem.raw}`;
}
}
}
},
scales: {
x: {
title: {
display: true,
text: 'Labels'
}
},
y: {
title: {
display: true,
text: 'Values'
},
min: 0
}
}
}
});
});
