This is my code, and how am displaying data
still getting ERROR TypeError: l.dataPoints[w].x is undefined
this.httpClient.get<any>(this.api).subscribe((result: HomeRural[]) => {
result.forEach(x => {
this.completed.push(x.completed);
this.nohouseholdabsentathome.push(x.nohouseholdabsentathome);
this.entirehouseholdabsent.push(x.entirehouseholdabsent);
this.refused.push(x.entirehouseholdabsent);
this.dwellingvacant.push(x.dwellingvacant);
this.addressnotadwelling.push(x.addressnotadwelling);
this.dwellingdestroyed.push(x.dwellingdestroyed);
this.dwellingnotfound.push(x.dwellingnotfound);
this.inaccessibleduetoflooding.push(x.inaccessibleduetoflooding);
this.withdrawn.push(x.withdrawn);
this.stopinterview.push(x.stopinterview);
this.noofcompletedhousehold.push(x.noofcompletedhousehold);
this.athomereschedulevisit.push(x.athomereschedulevisit);
this.other.push(x.other);
});
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: true,
zoomEnabled: true,
//theme: "light2", // "light1", "light2", "dark1", "dark2"
title: {
text: "FC-1R: Household completion rate (rural)",
fontStyle: "italic"
},
axisY: {
title: "Percent distribution of sampled households by results of household interview",
suffix: "%",
titleFontColor: "#4F81BC",
lineColor: "#4F81BC",
labelFontColor: "#4F81BC",
tickColor: "#4F81BC",
// viewportMinimum: -50,
viewportMaximum: 100
},
//dataPointWidth: 20,
axisX: {
title: "Teams",
titleFontStyle: "italic"
},
toolTip: {
shared: true
},
subtitles: [{
text: "Zambia PHIA, 2020",
fontColor: "red",
fontSize: 20
}],
data: [{
type: "column",
yValueFormatString: "#, ##0.##'%'",
color: "green",
name: "Completed",
legendText: "Completed",
showInLegend: true,
dataPoints: this.completed
}
,
{
type: "column",
yValueFormatString: "#, ##0.##'%'",
name: "No household member at home",
legendText: "No household member at home",
showInLegend: true,
dataPoints: this.nohouseholdabsentathome
}
,
{
type: "column",
yValueFormatString: "#, ##0.##'%'",
name: "Entire household absent for extended period of time",
legendText: "Entire household absent for extended period of time",
showInLegend: true,
dataPoints: this.entirehouseholdabsent
}
,
{
type: "column",
yValueFormatString: "#, ##0.##'%'",
color: "red",
name: "Refused",
legendText: "Refused",
showInLegend: true,
dataPoints: this.refused
}
,
{
type: "column",
yValueFormatString: "#, ##0.##'%'",
name: "Dwelling vacant",
legendText: "Dwelling vacant",
showInLegend: true,
dataPoints: this.dwellingvacant
}
,
{
type: "column",
yValueFormatString: "#, ##0.##'%'",
name: "Address not a dwelling",
legendText: "Address not a dwelling",
showInLegend: true,
dataPoints: this.addressnotadwelling
}
,
{
type: "column",
yValueFormatString: "#, ##0.##'%'",
name: "Dwelling destroyed",
legendText: "Dwelling destroyed",
showInLegend: true,
dataPoints: this.dwellingdestroyed
}