const cases = document.querySelector('coronovirus-input');
const deaths = document.querySelector('deaths-input');
const recovered =document.querySelector('recovered-input');
const ctx = document.getElementById('mychart').getContext("2d");
let mychart = new CharacterData(ctx , {
type:'pie',
data: {
labels : ['Active Cases','Deaths','Recovered'],
datasets : [
{
label:'# of votes',
data : [0,0,0],
backgroundColor:['#2adece','#dd3b79','#ff766b'],
borderWidth:1
}
]
}
});
const updateChartValue = (input, dataOrder) => {
input.addEventListener ('change', e => {
mychart.data.datasets[0].data[DataOrder] = e.target.value;
mychart.update();
});
};
updateChartValue(cases,0);
updateChartValue(deaths,1);
updateChartValue(recovered,2);
Hi Guys I cant solve this problem... i want to make pie chart but I cant I am newbie to share any post in this website sorry if I did any mistakes This Error
I see several issues in the code you posted, but most notably the constructor for initialising mychart should be new Chart() rather than new CharacterData() (possible typo due to auto-completion in your editor?).
Second, mind that selectors for element ids must be prefixed with #.
Finally the updateChartValue shows a mismatch in the case of the dataOrder argument and where it is used (capital 'D').
See solution here https://codepen.io/beezital/pen/zYEmKRG
const cases = document.querySelector('#coronovirus-input');
const deaths = document.querySelector('#deaths-input');
const recovered =document.querySelector('#recovered-input');
const ctx = document.getElementById('mychart').getContext("2d");
let mychart = new Chart(ctx , {
type:'pie',
data: {
labels : ['Active Cases','Deaths','Recovered'],
datasets : [
{
label:'# of votes',
data : [10,20,30],
backgroundColor:['#2adece','#dd3b79','#ff766b'],
borderWidth:1
}
]
}
});
const updateChartValue = (input, dataOrder) => {
input.addEventListener ('change', e => {
mychart.data.datasets[0].data[dataOrder] = e.target.value;
mychart.update();
});
};
updateChartValue(cases,0);
updateChartValue(deaths,1);
updateChartValue(recovered,2);