CODEWITHSUNDEEP
google-visualizationmeteor
Peter
Peter

Reputation: 13

Google Chart (Visualization) and Meteor Live HTML - How to integrate?

I am trying to implement google charts into my meteor project. I especially want to use Meteor's Live HTML technique to auto update the charts on data changes.

I have a few issues, that I don't know how to resolve properly. I am not asking to answers these issues specifically but am looking for a best practice integration approach. I only post the issues to clarify my problem:

1) In order to create a google chart you always need to have an existing dom element that is attached to the site. This approach does not work properly with Meteors approach to declare a html fragment that you then attach to the document. If I try to create a google chart in the fragment the element doesn't yet exist.

2) When creating the dom element beforehand and then updating the element (by using appendChild with the same ID), they charts do get updated but they somehow grow bigger for every update ?!?

3) Should it be possible to declare a template (e.g. name = "chartContainer") in HTML that contains a single div (e.g. id = "chartDiv"), directly reference this template in HTML and still create a live html fragment in javascript (e.g. Template.chartContainer = Meteor.ui.render(...)) that gets updated? For me this doesn't work... although I am not sure this is the right approach to address my issues.

Any advice / examples on best practices would be great.

THX Peter

Upvotes: 0

Views: 796

Answers (1)

zwippie
zwippie

Reputation: 15515

You could postpone the chart initialization until the required dom element (the chart container) is on the screen.

<template name="chart">
  <div id="chart"></div>
  {{init}}
</template>

And the JS:

Template.chart.init = function() {
  Meteor.defer(function(){
    // Chart initialization code goes here...
  });
}

This does not address the live changing data problem, although I think this is possible by calling the init function when needed.

Upvotes: 1

Related Questions