Line Graph Tool is very useful tool that we use for data analysis in our web and mobile applications,
here is the complete working code of line graph tool written in Javascript, HTML and css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Graph Maker Tool</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.form-section {
margin-bottom: 30px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
}
input[type="text"], input[type="number"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.buttons {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
canvas {
margin-top: 20px;
}
.table-container {
overflow-x: auto;
margin-top: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
th {
background-color: #007bff;
color: #fff;
}
td {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<h1>Line Graph Maker Tool</h1>
<div class="form-section">
<div class="form-group">
<label for="labels">Enter Labels (comma-separated):</label>
<input type="text" id="labels" placeholder="e.g., Jan, Feb, Mar">
</div>
<div class="form-group">
<label for="data">Enter Data Points (comma-separated):</label>
<input type="text" id="data" placeholder="e.g., 10, 20, 30">
</div>
<div class="form-group">
<label for="title">Graph Title:</label>
<input type="text" id="title" placeholder="e.g., Monthly Sales">
</div>
<div class="form-group">
<label for="color">Line Color:</label>
<input type="color" id="color" value="#007bff">
</div>
<div class="buttons">
<button id="generate">Generate Graph</button>
<button id="reset">Reset</button>
</div>
</div>
<canvas id="lineGraph" width="400" height="200"></canvas>
</div>
<script>
const generateButton = document.getElementById('generate');
const resetButton = document.getElementById('reset');
const labelsInput = document.getElementById('labels');
const dataInput = document.getElementById('data');
const titleInput = document.getElementById('title');
const colorInput = document.getElementById('color');
const ctx = document.getElementById('lineGraph').getContext('2d');
let chartInstance;
function generateGraph() {
const labels = labelsInput.value.split(',').map(label => label.trim());
const data = dataInput.value.split(',').map(value => parseFloat(value.trim()));
const title = titleInput.value;
const color = colorInput.value;
if (chartInstance) {
chartInstance.destroy();
}
chartInstance = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: title || 'My Line Graph',
data: data,
borderColor: color,
borderWidth: 2,
fill: false,
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: true
},
tooltip: {
enabled: true
}
},
scales: {
x: {
title: {
display: true,
text: 'Labels'
}
},
y: {
title: {
display: true,
text: 'Values'
}
}
}
}
});
}
function resetForm() {
labelsInput.value = '';
dataInput.value = '';
titleInput.value = '';
colorInput.value = '#007bff';
if (chartInstance) {
chartInstance.destroy();
}
}
generateButton.addEventListener('click', generateGraph);
resetButton.addEventListener('click', resetForm);
</script>
</body>
</html>