Creating bar chart with highcharts and meteorhacks:aggregate


#1

Hello all,

What I’m trying to accomplish is following: I’m trying to obtain the number of registered users per month and display them in a dashboard using highcharts.

All the combinations that I have tried, doesn’t seem to work.

Can somebody at least point me in the right direction as to how to accomplish this?

Thank you in advance.


#2

This is not too difficult - but maybe you could tell us:

  • Version of Meteor?
  • Blaze, React, Angular, …?
  • Which Atmosphere Highcharts package or NPM module?

Or even better, a repo or some code you’ve already written.


#3

What the actual error? Where are you stuck? Here is my code for serverside user aggregation:

   pipeline  =   [
   { $group : {'_id': {  year : { $year : "$createdAt" }, month : { $month : "$createdAt" } }, count: { $sum: 1 }} },
   { $sort : { "_id" : 1 } }
   ]

 result = Meteor.users.aggregate(pipeline);


 result.forEach(function (post) {
    MonthData.upsert({$and:[{year:post._id.year},{month:post._id.month}]},{
    $set:{
      year: post._id.year ,
      month: post._id.month ,
      usersJoined: post.count
    }
  })

I do not know what format Higchart wants.


#4

Thanks a bunch for your response. Meteor version is 1.2, I’m using Blaze. I would like to create column chart. I’m using official highcharts package.


#5

I’ll set up a simple repo to demo this. Just off for the afternoon now, so it won’t be until tomorrow. Someone else can chip in if they’d like in the meantime :slight_smile:


#6

I was able to aggregate data, created a method that I run on onRendered function and I get the result, as an array. What I do not understand is how to pass the result to highcharts series data.


#7

Also with the onRendered function you take the Array and put it into the chart!

under series data and then the array!

$('#container').highcharts({
        series: [{
            name: 'Data',
            data: arrayname1
        }, {
            name: 'Data2',
            data: arrayname2
        }]
    });

You really need to make sure the array is in an acceptable format for highcharts. this is most likely the error.


#8

You are right. I get the data as object array. How can I adjust it to Highcharts format?


#9

I have stringified the objects into an JSON array. This is the response I get:

{"_id":{"month":5,"year":2016},"count":4}, {"_id":{"month":5,"year":2016},"count":4}, {"_id":{"month":3,"year":2016},"count":1}

How can I pass this data to Highcharts?


#10

Sorry for the lateness of a reply - somewhat tied up this morning. Anyway, this code takes your sample aggregation results and fires off a Highcharts column graph.

Just a few points to make:

  1. I used highcharts:highcharts-meteor (which I think you’re using), but maazalik:highcharts is easier to use.
  2. In Meteor 1.3, the NPM highcharts module is even easier. I highly recommend updating.
  3. I haven’t added the aggregation coding - you seem to be okay with that.
  4. Your sample result has two data points with the same year, month and value - I changed one of those.
  5. I haven’t made the graph pretty.
  6. I haven’t annotated the code. If you want a deeper explanation, DM me or add to this topic.

Meteor 1.3 - Highcharts usage help