meteor piechart doesn't show up completely

Question

Here is the JS code that I'm using to render a pieChart on a web page using Meteor. The problem I have is that this code almost works except that the chart when displayed shows on the legends and labels but we cannot see pie(it is just empty). The javaScript code is as

[I'm not able to post the image here]

if (Meteor.isClient) {

Template.pienvd3.rendered = function() {

    nv.addGraph(function() {
                var pchart = nv.models.pieChart()
                .x(function(d) { return d.label })
                .y(function(d) { return d.value })
                .showLabels(true);

                d3.select("#piechart svg")
                .datum(pieVar.find().fetch())
                .transition().duration(350)
                .call(pchart);

                return pchart;
                });
};}

This is my collection in MongoDB by name "pienvd3"

{
"_id" : ObjectId("54d37d5b30cd72c0dde2611b"),
"label" : "One",
"value" : 29.765957771107
}
{
"_id" : ObjectId("54d37d5b30cd72c0dde2611c"),
"label" : "Two",
"value" : 0
}
--- so on till Eight---
{
"_id" : ObjectId("54d37d5b30cd72c0dde26121"),
"label" : "Seven",
"value" : 13.925743130903
 }
{
"_id" : ObjectId("54d37d5b30cd72c0dde26122"),
"label" : "Eight",
"value" : 5.1387322875705
}

I published the collection and also declared it

Meteor.publish(null, function () {
           return pieVar.find();
           });
pieVar = new Meteor.Collection("pienvd3");
pieVar.allow({
         insert: function () {
         return true;
         },
         update: function () {
         return true;
         },
         remove: function () {
         return true;
         }
         });

Now I'm actually not able to understand what exactly is the problem. P.S: I need to make this chart reactive and I've included all the necessary packages for d3. when I refresh the page even this image disappears saying NO DATA FOUND

Thank you

I also get `RangeError: Maximum call stack size exceeded.` as error in the console — Greenhorn, Feb 05 '15 at 14:51

Ethaan · Answer 1 · 2015-02-06T05:45:15.260

Change the return outside the function.

Template.pienvd3.rendered = function() {

    nv.addGraph(function() {
                var pchart = nv.models.pieChart()
                .x(function(d) { return d.label })
                .y(function(d) { return d.value })
                .showLabels(true);

                d3.select("#piechart svg")
                .datum(pieVar.find().fetch())
                .transition().duration(350)
                .call(pchart);         
                });
  return pchart;
};}

And like @johnnytop say, if you have autopublish package remove, bee sure to subscribe the collection.

Meteor.subscribe('pienvd3');

Router.route('/testPage', {name: 'testPage'});
this.route('testPage', {
  path: '/testPage',
    waitOn: function(){
        return Meteor.subscribe("pieVar");
    },
    data: function(){
      return return pieVar.find();;
    }
});

Also idont know why but you are publishing Null data

change to this.

Meteor.publish('pieVar' function () {
           return pieVar.find();
          });

Also declare this collection inside the lib folder like this /lib/collections.js

pieVar = new Meteor.Collection("pieVar");

It could be for some Reasons that you don't have the data on the client side.

You are subscribing Wrong (i need to see the subscription method)
The collection its not available on the client (declare them on the lib folder)

so it should be the `nv.addGraph function`, what `package` are you using, can i see the docs? — Ethaan, Feb 06 '15 at 06:41

score 0 · Accepted Answer · answered Feb 23 '15 at 06:24

0

Thank you all.... No need of any corrections to the code. I got it worked by changing the _id of the documents. I gave my own _id instead of the auto generated _ids in mongoldb

answered Feb 23 '15 at 06:24

Greenhorn

580
6
20

meteor piechart doesn't show up completely

2 Answers2