chart representation

[remymumoh]

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);
        })

[remymumoh]

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
            }

• This reply was modified 4 years, 2 months ago by remymumoh.

[Shashi Ranjan]

@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