Dynamically populate highcharts data

Question

I'm playing around with a backbone marionette app trying to dynamically populate highcharts data but I'm running into some trouble.

I created a basic survey app and I wanted to create a chart that shows the results of each question. However I don't know how many questions the survey might have or how many answers each question might have.

So what I do is populate an array that looks like this answerArray[answerId] = numberOfTimesSelected like this:

questions: (survey) =>
      questions = survey.get('questions')
      questions.each (question) =>
        length = question.get('answers').length
        answers = question.get('answers')
        answerArray = []
        if length < 7
          question.get('answers').each (answer) ->
            answerArray[answer.id] = 0

        survey.get('responses').each (response) =>
          date = Math.floor(new Date(response.get('created_date')) / 86400000)
          if date > (@minDate - 1) && date < (@maxDate + 1)
            if response.get('completed')
              choices = response.get('choices')
              choices.each (choice) ->
                if choice.get('question_id') == question.get('id')
                  answerArray[choice.get('answer_id')] = answerArray[choice.get('answer_id')] + 1

Now a highcharts chart is populated like this:

$('#' + question.get('id')).highcharts({
          chart: {
            marginRight: 50,
            marginTop: 0,
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
          },
          title: {
            text: '',
            style: {
              fontSize: 10
            }
          },
          tooltip: {
            pointFormat: '<b>{point.percentage:.1f}%</b>'
          },
          credits: {
            enabled: false
          },
          exporting: {
            enabled: true
          },
          plotOptions: {
            pie: {
              size: 300,
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                enabled: false
              },
              showInLegend: true
            }
          },
          series: [{
            type: 'pie',
            name: question.get('title'),
            states: {
               hover: {
                brightness: 0
              }
            },
            data: [
              {
                name: "14-17",
                y: 22,
                color: "#E8DF66"
              },
              {
                name: "18-24",
                y: 42,
                color: "#8C8C8B"
              },
              {
                name: "25-34",
                y: 11,
                color: "#687D68"
              },
              {
                name: "35-44",
                y: 55,
                color: "#217C7E"
              },
              {
                name: "45-54",
                y: 231,
                color: "#BEE7E8"
              },
              {
                name: "55+",
                y: 224,
                color: "#634357"
              }
            ]
          }]
        })

So I'm able to populate a graph for each question with that static data. But I need some way to dynamically change the data. Something like

data: [ question.get('answers').each (answer) ->
              {
                name: answer.get('title'),
                y: answerArray[answer.get('id')],
                color: "#E8DF66"
              }
        ]

But that doesn't actually work. Any ideas how I could do something like that?

Answer 1

So I just ended up dynamically creating an object for each and then creating an array of those and using that array as the data.

Create the array/object:

graphData = []
        question.get('answers').each (answer) ->
          graphPiece = {}
          graphPiece["name"] = answer.get('title')
          graphPiece["y"] = answerArray[answer.get('id')]
          graphPiece["color"] = "#E8DF66"
          graphData.push(graphPiece)

Use the data in the highcharts graph:

series: [{
            type: 'pie',
            name: question.get('title'),
            states: {
               hover: {
                brightness: 0
              }
            },
            data: graphData
          }]