Home forums Chart Support chart representation

Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #30920

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

    data json how it is displayed

    #30921

    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 1 month, 3 weeks ago by remymumoh.
    #30928

    @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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.