Tukukkk

I have a firebase catalogue as the following for an Ionic 3 app.

These are answers of many users for a questionnaire for each question's id. Most of them have the format of ratings, to wit values 0 to 5. Currently, i get the data and display the mean value for each question from the answers of all users.

FIREBASE FORMAT:



-submissions

 - Jack

 - George

 - Peter

    -0

        -id: 1.1

        -rating: 5

    -1

        -id: 2.1

        -rating: 2

    -2

    -3

    -4

        -id: 3.2

        -rating: 3

I create the mean values:

 this.submissions = this.afDatabase.list('submissions')

    var formArray : FormArray = new FormArray()

    Array.from(Array(20).keys()).forEach(e => formArray.push(this.createItem()))

    this.survey = this.formBuilder.group({

      //rating: [''],

      //answer: [''],

      items: this.formBuilder.array(formArray.controls)

    })



    this.crunchData()



    this.usersubm = this.afDatabase.list('submissions'+`/`+ this.user).valueChanges();

    this.usersubm.subscribe(_ => {

      this.loading = false

    })

    console.log("usersubm",this.usersubm);

   // this.apokliseis()

  }



  ngOnInit() {

  }







  crunchData() {

    this.submissions.valueChanges().subscribe(

      (results:Submission) => {

        this.loading = false

        console.log('crunchData.results', results)

        this.crunch(results)

      }

    )    

  }



  crunch(results: Submission) {

    var stats = {}

    this.ids = 



    results.forEach((submission) => {

      var programCode = submission[1].answer

      var answerArray = submission as QuestionAnswer



      if (!stats[programCode]) {

        stats[programCode] = {}

        stats[programCode].show = true

      }

      answerArray.forEach((answer: QuestionAnswer) => {

        console.log('answer:', answer.user)









        // include id on list of ids

        if (this.ids.indexOf(answer.id) == -1) this.ids.push(answer.id)



        if (!stats[programCode][answer.id]) {

          stats[programCode][answer.id] = {}

        }

        var questionStats = stats[programCode][answer.id]

        questionStats.title = answer.title



        if (answer.type == 'text') {

          if (!questionStats.answers) questionStats.answers = 



          questionStats.answers.push(answer.answer)

        }



        // average(statistics[programCode][id].ratings

        if (answer.type == 'radio') {

          if (!questionStats.ratings) questionStats.ratings = {}

          if (!questionStats.ratings[answer.rating]) questionStats.ratings[answer.rating] = 0

          questionStats.ratings[answer.rating] += 1

        }



        if (answer.type == 'radio2') {

          if (!questionStats.answers) questionStats.answers = 



          questionStats.answers.push(answer.answer)

        }



      })

    })



    console.log('crunch.stats before', stats)

    this.statistics = stats

    this.crunchAverages(results)

    console.log('crunch.stats', stats)

    Object.keys(this.statistics).forEach(programCode => {

      this.ids.forEach(id => {



        this.apant[id]=  this.statistics[programCode][id].answers



        //this.calculateAverage(this.statistics[programCode][id].ratings)

      })

    })

    console.log('apantiseius x:', this.apant[1.1])





    this.programCodes = Observable.of( Object.keys(stats))

    return stats



}





  crunchAverages(results: Submission) {



    Object.keys(this.statistics).forEach(programCode => {

      this.ids.forEach(id => {

        if (id==2.1 || id==3.1 || id==4.1){

          console.log('gia na doume',  this.statistics[programCode][id].ratings.average)

        }

        console.log("id==",id)



        console.log('crunchAverages',  this.statistics[programCode][id])

        this.calculateAverage(this.statistics[programCode][id].ratings)

      })

    })







  }







  calculateAverage(ratings) {

    if (!ratings) return

    var r1 = ratings[1] ? ratings[1] : 0

    var r2 = ratings[2] ? ratings[2] : 0

    var r3 = ratings[3] ? ratings[3] : 0

    var r4 = ratings[4] ? ratings[4] : 0

    var r5 = ratings[5] ? ratings[5] : 0

    var total = r1 + r2 + r3 + r4 + r5



    ratings.average = (1 * r1 + 2 * r2 + 3 * r3 + 4 * r4 + 5 * r5 ) / total

    ratings.average = Math.round(ratings.average * 1000) / 1000

    ratings.roundedAverage = this.roundAverage(ratings.average)

  }



  roundAverage(average: number) {

    if (average < 0) {

      console.log('roundAverage warning: average < 0')

      return 0

    }

    if (average < 0.25) return 0.00

    if (average < 0.75) return 0.50

    if (average < 1.25) return 1.00

    if (average < 1.75) return 1.50

    if (average < 2.25) return 2.00

    if (average < 2.75) return 2.50

    if (average < 3.25) return 3.00

    if (average < 3.75) return 3.50

    if (average < 4.25) return 4.00

    if (average < 4.75) return 4.50

    if (average > 5.00) console.log('roundAverage warning: average > 5')

    return 5

  }



  createItem(): FormGroup {

    return this.formBuilder.group({

      id: [''],

      rating: [''],

      answer: [''],

      title: ['']

    })

  }

Now, I want to create charts with the average values for each id question so that the average score for each question is visible.

There are some nice Frameworks to create Charts in Ionic. My Favourite one is ChartJS. You should try it out.