Criar grafico interativo
Galera estou com uma duvida tenho um projeto e quero que toda vez que eu mude um valor dentro de um input o grafico mude também de acordo com os valores inseridos. Estou criando a função oninput para isso, mas não funciona mesmo colocando o return, estou usando a biblioteca chart.js
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Graficos</title>
<style>
.grafico{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="grafico">
<canvas id="myChart" ></canvas>
</div>
<input type="text" value="8" id="done" class="taskPorcent" oninput="changeValue()">
<input type="text" value="2" id="no_done" class="taskPorcent" oninput="changeValue()">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
let taskDone = document.querySelector('#done');
let taskNotDone = document.querySelector('#no_done');
let taskPorcent = document.querySelector('.taskPorcent');
array = []
function changeValue(){
array = [taskDone.value, taskNotDone.value]
return array
}
console.log(array)
const myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Tarefas Feitas', 'Tarefas Não Feitas'],
datasets: [{
data: [taskDone.value,taskNotDone.value],
backgroundColor: [
'hsl(214, 84%, 56%)',
'hsl(192, 91%, 96%)',
],
}]
},
});
//console.log(myChart["data"])
</script>
</body>
</html>Discussão (0)
Carregando comentários...