Display meteor aggregation Json data in google charts

help
1

Iam a newbie for meteor and google charts, want to display the google
chart with meteor mongodb aggregate Json data. reactivar get returns empty dataset. the following is the client javascript. Appreciate any help on this. thanks

  function getData(){
      var instance = this;
    this.getData = new ReactiveVar(null);
    Meteor.call("getAggregateCategoriesSum",function(errors,results){
    console.log("results value: "+ JSON.stringify(results))
    instance.getData.set(results);
    console.log("inside call back function"+instance.getData.get())// displaying the data
    })
    console.log("outside call back function"+ instance.getData.get()); // data is empty ????
    return instance.getData.get();

}

     Template.GooglechartsPie.onRendered(function () {
            console.log("iam from render function")

           google.load('visualization', '1.0', {'packages':['corechart'], callback: drawChart});
         function drawChart() {
    console.log("parsedata"+getData());
    var data = google.visualization.arrayToDataTable(getData()); //calling the getdata function

  var options = {
    legend: 'none',
    pieSliceText: 'label',
    title: 'Swiss Language Use (100 degree rotation)',
    'width':400,
    'height':300,
    pieStartAngle: 100,
  };
  
    console.log("get element by id"+document.getElementById('Googlechart'))
    var chart = new google.visualization.PieChart(document.getElementById('Googlechart'));
    chart.draw(data, options);
  }

})
2

Put your getData code in Template.GooglechartsPie.onCreated (without the return).

Wrap your var data = ...in a this.autorun(function () {...});.

Replace the getData() call with Template.instance().getData.get()

Now your arrayToDataTable will be reactively called when the data is changed in the getData ReactiveVar!

1 Like
3

Maybe something like this (untested):

Template.GooglechartsPie.onCreated(function() {
  var instance = this;
  instance.getData = new ReactiveVar(null);
  Meteor.call("getAggregateCategoriesSum", function(errors, results) {
    if (errors) {
      // Handle errors
    } else {
      instance.getData.set(results);
    }
  });
});

Template.GooglechartsPie.onRendered(function() {
  var instance = this;
  google.load('visualization', '1.0', {
    'packages': ['corechart'],
    callback: drawChart
  });

  function drawChart() {
    var options = {
      legend: 'none',
      pieSliceText: 'label',
      title: 'Swiss Language Use (100 degree rotation)',
      'width': 400,
      'height': 300,
      pieStartAngle: 100,
    };

    instance.autorun(function() {
      var getData = instance.getData.get();
      if (getData !== null) {
        var data = google.visualization.arrayToDataTable(getData);
        var chart = new google.visualization.PieChart(document.getElementById('Googlechart'));
        chart.draw(data, options);
      }
    });
  }
});
1 Like
4

@robfallows, thanks for sharing the code. i can see the getdata in the autorun, but the getdata is returning json object. So i changeg visulization from arraytodDatable to DataTable to handle the json data. But for some reason visualization data is empty. Any idea why?

       console.log("before visualization"+JSON.stringify(getData))

       var data = new google.visualization.DataTable(getData);  
        console.log("after visulization"+JSON.stringify(data))

strong texton console i get the following
before visualization[{"_id":“Household”,“totalAmount”:520},{"_id":“Insurance”,“totalAmount”:235},{"_id":“Family”,“totalAmount”:1358},{"_id":“Utilities”,“totalAmount”:5371.5},{"_id":“Automobile”,“totalAmount”:500},{"_id":“Home Office”,“totalAmount”:290},{"_id":“Travel”,“totalAmount”:14},{"_id":“Food”,“totalAmount”:303}]
DashboardCategoriesChart.js:100
after visulization"{“cols”:[],“rows”:[]}"

5

It looks like you’re getting the data you expected back from your method. However, a quick scan of the Google Visualization API (which I’m not familiar with) seems to indicate that you’ll need to map your results into the correct format for the API.

1 Like
6

thanks, i am going through the API, will be back if i am successful. In any case thanks a lot.

1 Like
7

@robfallows - as you said its just we have to follow the visualization API data format. iam able to display the graph now. thanks a ton for guiding to the right direction.

8

You’re most welcome :smile: