Meter with visjs


#1

Hi there meteorites, iv’ve with some problems regarding using visjs and do a time line …And i cant ‘target’ the

with that i mean…
-------------------------------------HTML---------------------------------------------------

simple {{>TimeData}}
<h1>TimeLine</h1>
  <div id="example-timeline"></div>
----------------------------------------/HTML---------------------------------------------------- --------------------------------------ClientSide------------------------------------------------- import { Template } from 'meteor/templating'; import { ReactiveVar } from 'meteor/reactive-var';

import ‘./main.html’;

Template.TimeData.onCreated(function(){
console.log(‘created TimeData template’);
drawTimeLine();
});

function drawTimeLine(){

var container = document.getElementById('example-timeline');
var data = new vis.DataSet([
	{
		id: 1,
		content: 'First event',
		start: '2014-08-01'
	},
	{
	    id: 2,
	    content: 'Pi and Mash',
	    start: '2014-08-08'
	}, 
	{
	    id: 3,
	    content: 'Wikimania',
	    start: '2014-08-08',
	    end: '2014-08-10'
	}, 
	{
	    id: 4,
	    content: 'Something else',
	    start: '2014-08-20'
	}, 
	{
	    id: 5,
	    content: 'Summer bank holiday',
	    start: '2014-08-25'
	}
]);

var options = {};
var timeline = new vis.Timeline(container,data,options);

};
---------------------------------/client-----------------------------------------------------
when i run on chrome console it says that no container provided.i’m new to javascript and meteor itself and i dont know where to go.
thnkz in advance :slight_smile:


#2

Try changing your onCreated function to onRendered


#3

EDIT:
Ah well @reoh was a bit faster there :smiley:

Use onRendered instead of onCreated in this case.

onCreated triggers when the template is created but not rendered to the DOM yet. So your function can’t find the container, because at this point is isn’t there yet.

onRendered on the other hand triggers when the template is rendered to the DOM. So your function should find it.

See if that works. Not 100% sure if that’s all. :slight_smile:


#4

+1 for adding the explanation :wink:


#5

i was about to say that , u explained why.i tought onCreated would to what onRendered does but only once :slight_smile: thnkz
i will take a look and see if it works and ill feedback you.
thnkz again


#6

+1 for fast support :smiley:

+10 for both of us (teamwork-bonus) :grin:


#7

Haha, nice. Yeah see if it works. If not just feel free to ask more. :slight_smile:


#8

i will ask then :smiley:
giving me this now …

Unable to resolve some modules:

“./main.html” in /C/Users/Nelso/Desktop/newTimeline/timeline/server/main.js (os.windows.x86_32)

i havent touch in that file:
----------------------serverSide main.js------------------------------------------------
import { Meteor } from ‘meteor/meteor’;
import ‘./main.html’;

Meteor.startup(() => {
// code to run on server at startup
});


#9

It’s saying it can’t find a main.html file in the /timeline/server folder. You can probably just delete that import './main.html' line unless you’re using server side rendering.


#10

Hi,
Is there possible to create Drag & Drop diagram in Visjs?