Home › Forums › Chart Support › chart representation › Reply To: chart representation
This is my code, and how am displaying data
still getting ERROR TypeError: l.dataPoints[w].x is undefined
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 }