diff --git a/Calculators/Data-Visualization-Calculator/README.md b/Calculators/Data-Visualization-Calculator/README.md new file mode 100644 index 000000000..a3b98247f --- /dev/null +++ b/Calculators/Data-Visualization-Calculator/README.md @@ -0,0 +1,21 @@ +#

Data Visualization Calculator

+ +## Description :- + +This is a simple web-based calculator that allows users to input numerical data and visualize it using bar charts. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Features :- + +1. User Input: Accepts numerical input from the user. +2. Bar Chart Visualization: Displays a bar for each input number. +3. Clear Functionality: Resets the chart. + +## Screenshots :- + +![image](https://github.com/user-attachments/assets/e0865b50-ff02-4d49-b90d-2cddc10407cb) diff --git a/Calculators/Data-Visualization-Calculator/assets/background.jpg b/Calculators/Data-Visualization-Calculator/assets/background.jpg new file mode 100644 index 000000000..a079dc834 Binary files /dev/null and b/Calculators/Data-Visualization-Calculator/assets/background.jpg differ diff --git a/Calculators/Data-Visualization-Calculator/index.html b/Calculators/Data-Visualization-Calculator/index.html new file mode 100644 index 000000000..d22cb736e --- /dev/null +++ b/Calculators/Data-Visualization-Calculator/index.html @@ -0,0 +1,38 @@ + + + + + + + + + Data Visualization Calculator + + + +
+

Data Visualization Calculator

+ +
+
+ + +
+ +
+ + +
+ + +
+ +
+ +
+
+ + + + + \ No newline at end of file diff --git a/Calculators/Data-Visualization-Calculator/script.js b/Calculators/Data-Visualization-Calculator/script.js new file mode 100644 index 000000000..83614110c --- /dev/null +++ b/Calculators/Data-Visualization-Calculator/script.js @@ -0,0 +1,47 @@ +document.getElementById("generate-chart").addEventListener("click", function () { + const labelsInput = document.getElementById("labels").value; + const valuesInput = document.getElementById("values").value; + + if (!labelsInput || !valuesInput) { + alert("Please fill in both labels and values!"); + return; + } + + const labels = labelsInput.split(",").map(label => label.trim()); + const values = valuesInput.split(",").map(value => parseFloat(value.trim())); + + if (labels.length !== values.length) { + alert("The number of labels must match the number of values!"); + return; + } + + // Create the chart + const ctx = document.getElementById("chart").getContext("2d"); + + // Destroy the previous chart instance if it exists + if (window.myChart) { + window.myChart.destroy(); + } + + window.myChart = new Chart(ctx, { + type: 'bar', + data: { + labels: labels, + datasets: [{ + label: 'Values', + data: values, + backgroundColor: 'rgba(54, 162, 235, 0.6)', + borderColor: 'rgba(54, 162, 235, 1)', + borderWidth: 1 + }] + }, + options: { + responsive: true, + scales: { + y: { + beginAtZero: true + } + } + } + }); +}); \ No newline at end of file diff --git a/Calculators/Data-Visualization-Calculator/style.css b/Calculators/Data-Visualization-Calculator/style.css new file mode 100644 index 000000000..dc0b1cdc4 --- /dev/null +++ b/Calculators/Data-Visualization-Calculator/style.css @@ -0,0 +1,63 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f9; + background-image: url('assets/background.jpg'); + background-size: cover; + background-position: center; +} + +.container { + max-width: 600px; + margin: 50px auto; + padding: 20px; + background: #ffffff; + border-radius: 8px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; + color: #333; +} + +.form-group { + margin-bottom: 15px; +} + +label { + display: block; + font-weight: bold; + margin-bottom: 5px; +} + +input { + width: 100%; + padding: 8px; + margin-top: 5px; + border: 1px solid #ccc; + border-radius: 4px; +} + +button { + width: 100%; + padding: 10px; + color: #fff; + background: #007bff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background: #0056b3; +} + +.chart-container { + margin-top: 20px; + padding: 15px; + background: #e9f7ef; + border: 1px solid #c3e6cb; + border-radius: 4px; +} \ No newline at end of file diff --git a/calculators.json b/calculators.json index decae1056..8808b32e6 100644 --- a/calculators.json +++ b/calculators.json @@ -665,6 +665,12 @@ "link": "./Calculators/Data-Size-Calculator/index.html", "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Data-Size-Calculator" }, + { + "title": "Data Visualization Calculator", + "description": "Displays a bar chart for input data.", + "link": "./Calculators/Data-Visualization-Calculator/index.html", + "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Data-Visualization-Calculator" + }, { "title": "Date Time Calculator", "description": "Calculates Date & Time of the specific period.",