Pie Chart Maker Tool
Women clothing
Pie Chart Maker Tool
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
.chart-container {
position: relative;
margin-top: 40px;
}
#chart {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
#legend {
position: absolute;
top: 0;
right: 0;
padding: 10px;
background-color: #fff;
opacity: 0.8;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.form-container {
margin-top: 40px;
}
form {
max-width: 600px;
margin: 0 auto;
}
label {
display: block;
margin-top: 10px;
}
input[type="text"], textarea {
display: block;
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
button[type="button"] {
display: block;
margin-top: 20px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button[type="button"]:hover {
background-color: #0069d9;
}
function createChart() {
// Get input values
var title = document.getElementById("title").value;
var labels = document.getElementById("labels").value.split(",");
var values = document.getElementById("values").value.split(",");
// Convert values to integers
for (var i = 0; i < values.length; i++) {
values[i] = parseInt(values[i]);
}
// Get chart canvas
var ctx = document.getElementById("chart").getContext("2d");
// Create chart data
var data = {
labels: labels,
datasets: [{
data: values,
backgroundColor: [
"#FF6384",
"#36A2EB",
Comments
Post a Comment