hello everyone.
im trying to create a pie chart that will be animated when clicking on a button.
the problem is that i don’t have much knowlege about how to do this in javascript,
i have tried several tutorials but no success.
here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DYNAMIC Pie Chart</title>
<style>
/* the button class CSS*/
#button {
background-color: #4CAF50; /* Green */ border: none;
color: white; padding: 15px 32px; text-align: center;
text-decoration: none; display: inline-block;
font-size: 16px; margin: 4px 10px; cursor: pointer; }
/* main container CSS*/
#PieContainer { width: 600px; height: 500px;
background-color: rgb(201, 194, 194); margin: auto}
.pieC1 {width: 200px; height: 200px; margin: 20px 40px;}
.pieC2 {width: 200px; height: 200px; margin: 20px 40px;}
svg {
width: 180px; height: 180px;
transform: rotate(-90deg);
background: yellowgreen;
border-radius: 50%;
}
/* chart pie with 38%*/
#C_38 {
fill: yellowgreen;
stroke: #655;
stroke-width: 32;
stroke-dasharray: 38 100; /* for 38% */
animation: fillup_38 2s linear;
animation-fill-mode: forwards;
}
/* key frames that will animate the circle*/
@keyframes fillup_38 {
from { stroke-dasharray: 0 158 ; }
to { stroke-dasharray: 38 100; }
}
.move {
animation-name: fillup_38 3s;
animation-delay: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
#C_80 {
fill: yellowgreen;
stroke: #655;
stroke-width: 32;
stroke-dasharray: 80 100;
animation: fillup_80 2s linear;
}
/* key frames that will animate the circle*/
@keyframes fillup_80 {
from { stroke-dasharray: 0 158 ; }
to { stroke-dasharray: 80 100; }
}
.move8 {
animation-name: fillup_80 3s;
animation-delay: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<div id="PieContainer">
<button id="button" type="button" onclick="document.querySelector('pieC1').className='move';">Drive C</button>
<button id="button" type="button" onclick="PIE()" >Drive E</button>
<div class="pieC1">
<svg viewBox="0 0 32 32">
<circle id="C_38" r="16" cx="16" cy="16" />
</svg> </div>
<div class="pieC2">
<svg viewBox="0 0 32 32">
<circle id="C_80" r="16" cx="16" cy="16" />
</svg>
</div>
<script>
/* i have tried this script on the button but it seems that am missing something*/
function PIE() {
document.getElementById('button').addEventListener('click', function() {
document.getElementById('C_80').classList.add('move8');
}); }
</script>
</body>
</html>
