chart representation

• September 2, 2020 at 3:32 pm #30920
  
  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);
          })

  

  September 2, 2020 at 4:02 pm #30921
  
  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.
  September 3, 2020 at 7:01 pm #30928
  
  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