Line Graph Maker Tool

Labels (comma separated):

Data (comma separated):

body { font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; margin: 0; padding: 0; } .container { max-width: 800px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: center; } h1 { color: #4CAF50; } .form-container { margin-bottom: 20px; } .input-group { margin: 10px 0; } label { display: block; font-weight: bold; margin-bottom: 5px; } input { width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; } button { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: #fff; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } .chart-container { margin-top: 20px; } canvas { width: 100% !important; max-width: 100%; height: auto !important; } function drawChart() { const labels = document.getElementById('labels').value.split(',').map(label => label.trim()); const data = document.getElementById('data').value.split(',').map(value => parseFloat(value.trim())); if (labels.length !== data.length || labels.includes('') || data.includes(NaN)) { alert('Please ensure that labels and data are correctly formatted and matched.'); return; } const ctx = document.getElementById('lineChart').getContext('2d'); new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: 'Line Graph', data: data, backgroundColor: 'rgba(75, 192, 192, 0.2)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1, fill: false, pointBackgroundColor: 'rgba(75, 192, 192, 1)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(75, 192, 192, 1)', }] }, options: { responsive: true, scales: { x: { beginAtZero: true }, y: { beginAtZero: true } } } }); }

Explanation

1. HTML:

   • Includes input fields for labels and data, and a button to draw the chart.
   • Contains a canvas element for rendering the line chart.

2. CSS:

   • Styles the input fields, button, and chart container.
   • Provides a responsive and visually appealing design.

3. JavaScript:

   • drawChart function extracts labels and data from the input fields, validates them, and then uses Chart.js to draw the line chart.
   • Configures the Chart.js chart with the provided data and labels, and styles the chart with colors and other settings.

This code provides a complete, responsive, and colorful Line Graph Maker Tool. You can further customize it by adding more features or style responsive code of Pie Chart Maker