2012-06-15 4 views
1

meteor를 사용하여 Google 차트 시스템을 사용하여 차트 업데이트를 얻으려고합니다. 그래서 내가하는 일은 컬렉션을 만든 다음이를 Google 차트의 "데이터"(예 : 원형 차트)에 공급한다는 것입니다. 문제는 Google 차트의 자바 스크립트 코드가 태그에서만 작동하기 때문에 Meteor의 간단한 유혹을 사용할 수 없다는 것입니다.유성 및 Google 차트

<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] 
     ]); 

은 내가 내 컬렉션에서 얻는 데이터와 데이터의했던 addRows를 공급 : 그래서 내가하는 일은 내가 내 HTML의 헤드 섹션에 다음 코드를 넣어 것입니다. 하지만 클라이언트 쪽 mongo를 사용하여 데이터를 추가하려고하면 자동으로 업데이트되지 않습니다. 페이지를 새로 고침하면 나타납니다. Mongo 컬렉션의 변경 내용을 바탕으로 내 컬렉션의 변경 사항을 어떻게 알 수 있고 내 차트를 실시간으로 다시 볼 수 있습니까? thx.

답변

1

컬렉션에 수동으로 가입하고 변경시 데이터를 Google 차트에 피드하는 것이 좋습니다.

참조 : Meteor.subscribe(). 그런 다음 세 번째 인수 인 onComplete 콜백 함수를 통해 변경 사항을 감지 할 수 있다고 생각합니다. 데이터가 서버에서 변경 될 때이 함수에 전달 된 데이터는 데이터가 추가, 제거, 이동 또는 변경되었는지 여부를 나타냅니다. 이 onComplete 함수에서 Google 차트를 업데이트합니다.

행운을 빈다.

+0

다음 코드로 시도해 보았습니다. – user1458025

+0

제공된 링크를 따라갈 때 코드를 찾을 수 없습니다. 그러나 나는 당신이 해결책을 찾았다는 것을 읽었다 (http://stackoverflow.com/a/11062767/95008). – Spiralis

0

확인. 해결책을 찾았습니다. Spilaris, 당신이 말한 것은 구독이 완료되었을 때 한 번만 호출됩니다. 나는 변화를 위해 db를 관찰 할 필요가 있었다.

+0

아. 내가 참조. 어쩌면 같은 코드로 어려움을 겪고있는 사람들을위한 샘플로 제공 할 수 있습니까? – Spiralis