Help with Building an Array for HighCharts

help
1

Hi,

I’m having a problem building an array to display in HighCharts; Can you help me? thanks in advance!

Here is the HighCharts example code for a Pie Chart:

‘’’
return {

  chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false
  },
  title: {
      text: "Number of Customers by Billing Plan"
  },
  tooltip: {
      pointFormat: '<b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
      pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
              enabled: true,
              format: '<b>{point.name}</b>: {point.y:.0f}',
              style: {
                  color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
              },
              showInLegend: true,
              connectorColor: 'silver'
          }
      }
  },
  credits: {
    enabled: false
},
  series: [{
      type: 'pie',
      name: 'customers',
      data: 
           
    [
      
            ["One",   1],
           ['Two',       2],
           ['Three',   0],
           ['Four',    4],
           ['Five',    7],
           ['Six',     19],
           ['Seven',     50]
     
    ]
    
    
  }]

};
‘’’

I am replacing the data section with the following and receving ‘slice’ in the pie chart

‘’’
EndUserPieChart()
{
id = Session.get(‘id’);

var endUserPieChart = [];



var codes = Codes.find({}).map( function(p){ return p._id });


AreaArray =   Codes.find({}).map( function(p){ return p.code });

//Get Code Array
for (i = 0; i < codes.length; i++) { 
    
    
    Area = AreaArray[i];
    Area = Area.toString();


    Meteor.call('CountEndUsersByCode', codes[i], function(error, result){
        if(error){
            console.log(error);
        }else{
           


            endUserPieChart[endUserPieChart.length] = [Area, result]; 
           


     
        }
        });


        
       
        


}



return {




  chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false
  },
  title: {
      text: "End Users By Area"
  },
  tooltip: {
      pointFormat: '<b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
      pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
              enabled: true,
              format: '<b>{point.name}</b>: {point.y:.0f}',
              style: {
                  color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
              },
              showInLegend: true,
              connectorColor: 'silver'
          }
      }
  },
  credits: {
    enabled: false
},
  series: [{
      type: 'pie',
      name: 'end users',
      data: 
           
    [
        endUserPieChart
          
    ]
    
    
  }]

};

}
‘’’

2

Could you please edit your code and wrap with triple-backticks (you seem to have used a mix of “smart-quotes”). Something like this:

```
your
code
here
```

Thanks :slight_smile:

3

I’ve added some comments to your code. Hopefully you’ll be able to see what you need to do here:

EndUserPieChart() {
  id = Session.get('id'); // Not used anywhere - why is this here?

  var endUserPieChart = [];
  var codes = Codes.find({}).map(function (p) {
    return p._id
  });

  // If Codes changes before this section, due to reactivity, there will be no
  // correlation between AreaArray and codes
  AreaArray = Codes.find({}).map(function (p) {
    return p.code
  });

  //Get Code Array
  // This is an expensive way to do this. Why not make one method call (including the
  // above stuff), which returns everything?
  for (i = 0; i < codes.length; i++) {
    Area = AreaArray[i];
    Area = Area.toString();
    Meteor.call('CountEndUsersByCode', codes[i], function (error, result) {
      if (error) {
        console.log(error);
      } else {
        // What are you trying to do here? This looks overly convoluted.
        // You resulting array will look something like this. Note that someResult may be
        // more complex than I can tell from this snippet:
        // [
        //   [ 'some area', someResult ],
        //   [ 'some other area', someOtherResult ],
        //   [ 'yet another area', yetAnotherResult ]
        // ]
        // Have you considered using array.push() here?
        endUserPieChart[endUserPieChart.length] = [Area, result];
      }
    });
  }

  return {
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false
    },
    title: {
      text: "End Users By Area"
    },
    tooltip: {
      pointFormat: '<b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b>: {point.y:.0f}',
          style: {
            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
          },
          showInLegend: true,
          connectorColor: 'silver'
        }
      }
    },
    credits: {
      enabled: false
    },
    series: [{
      type: 'pie',
      name: 'end users',
      data: // You have now defined an array with one object element (the endUserPieChart array).
      // If you compare this with what HighCharts is expecting, you'll see how different it is:
      // [
      //   [
      //     [ 'some area', someResult ],
      //     [ 'some other area', someOtherResult ],
      //     [ 'yet another area', yetAnotherResult ]
      //   ]
      // ]
        [
          endUserPieChart
        ]
    }]
  };
}