CODEWITHSUNDEEP
google-visualizationmeteor
user1458025
user1458025

Reputation: 51

Meteor and google charts

I am trying to use meteor to get chart updates using google charts system. So what i do is that i create a collection and then supply that to the "data" of google chart (for example pie chart). The problem is that the javascript code for google charts only work in the tag and therefore i can't use the simple tempting of Meteor which only runs in the . so what i do is that i put the following code into head section of my html :

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
    </script>
and then in Meteor.startup in Meteor.is_client i call :
google.setOnLoadCallback(drawChart);
 in drawChart the data is defined as follow:

var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

i feed the addRows of the data with the data that i get from my Collection. But when i try to add data to it using client side mongo, It does not update automatically . It just shows up when i refresh the page. Do you have any idea how can i know of the changes in my collection and then Rerender my chart in real-time based on the changes in my Mongo collection ? thx.

Upvotes: 1

Views: 1222

Answers (2)

user1458025
user1458025

Reputation: 51

Ok. I found the solution. Spilaris, what you said is only called once when the the subscription completes. I needed to observe the db for changes.

Upvotes: 0

Spiralis
Spiralis

Reputation: 3342

I suggest that you manually subscribe to the collection and feed the data to the google chart when changed.

See: Meteor.subscribe(). I then think you can detect changes via the third argument, an onComplete callback function you define yourself. I believe that the data passed to this function when the data is changed on the server indicates whether the data has been added, removed, moved or changed. In this onComplete function you will then update the google chart.

Good luck.

Upvotes: 1

Related Questions