1

I'm trying to include the vis.js library into my Meteor application. I have the library included and I'm rendering the page without errors, however, the vis.js timeline is rendering with only horizontal lines, and no objects.

I am definitely populating my dataset as I have confirmed it via console.

Here is my code.

Template.events_timeline.rendered = function () {
  drawTimeline();
};

function drawTimeline(){
  var container = document.getElementById('timeline');
  var event = Events.find();

  if (event.count() === 0) {
    console.log('found no events');
    return;
  }
  data = new vis.DataSet({
    type: { start: 'ISODate', end: 'ISODate' }
  });

  var i = 1;
  event.forEach(function (ev) {
    data.add([{id: i, content: ev.content, start: ev.startDate, end: ev.endDate}]);
    i++;
  });

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, data, options);
}

My template is as follows. Very basic.

<template name="events_timeline">
  <div id="timeline"></div>
</template>

Result. https://i.stack.imgur.com/etuiU.jpg

I was able to get the graph to render with data on it's own with the above code and some changes to the router, but I cannot seem to get the chart to work when embedding the chart template in, for example, a layout template.

The following router changes renders the chart correctly, with data from the Events collection.

this.route('events_timeline', {
    path: '/timeline',
    waitOn: function() {
      return Meteor.subscribe('events');
    },
    notFoundTemplate:'data_not_found',
    action: function() {
      if(this.ready()) {
        this.setLayout('events_timeline');
        this.render();
      } else {
        this.setLayout('loading');
        this.render('loading');
      }
    }
  });

If I replace ...

this.setLayout('events_timeline');

... With ...

this.setLayout('layout');

... Then I still get the blank chart.

I think I'm missing something with how to correctly waitOn the data for a specific template.

rene
  • 41,474
  • 78
  • 114
  • 152
gird
  • 11
  • 2
  • Is it logging 'found no events' to the console? Are you using iron-router? – David Weldon Jul 14 '14 at 18:07
  • Thanks for the quick response. No 'found no events' log in the console. Yes, I'm using iron-router and serving up the Events collection to the appropriate page. I have confirmed via console.log(data) that the dataset is being populated appropriately, so I have access to the data. I've even tried a static data set. (ie [{content: 'blah', startDate: date, endDate: date}, etc, etc]) – gird Jul 14 '14 at 18:14
  • looks to me like a classical case of rendering when (initially) there is no data present. Could that be? All you may need is to wait for the data, for instance, by rendering a `loadingTemplate` first (see iron-router documentation). – Christian Fritz Jul 15 '14 at 01:59
  • Looks like you're right. Although, I'm still having trouble getting the template that the graph is in to wait on the data. See my updates. – gird Jul 15 '14 at 14:48

0 Answers0