You must be logged in to post your query.
Home › Forums › Chart Support › chart representation
Tagged: chart
i am trying to loop through my array to display data, i get the error
TypeError: l.dataPoints[w].x is undefined
how am looping to to get each value,
this.httpClient.get<any>(this.api).subscribe((result: HomeRural[]) => { result.forEach(homerural => { this.completed.push(homerural.completed); console.log(this.completed); })
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 }
@remymumoh,
Can you kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with the sample data so that we can run the code locally, understand the scenario better and help you out?
— Shashi Ranjan Team CanvasJS
You must be logged in to reply to this topic. Login/Register