I am writing a small nodejs application to pick up content from couchdb and plan to visualize it using vis.js In the process, I learnt about express, jade and have utilized them. However now I realize that vis.js must be called from the jade template. So I added the following to my jade file
doctype html
html(lang="en")
head
title= title
link(rel="stylesheet", href="css/bootstrap.css", type="text/css")
link(rel="stylesheet", href="css/main.css", type="text/css")
body(style="background-image:url(/images/background.jpg)")
div(class="container", id="visualization")
script.
var options = {};
var data = new vis.DataSet(options);
var container = document.getElementById('visualization');
new vis.Timeline(container, data, options);
Does it make sense to do this? I have got errors related to indentation and spaces (as typical to jade). Thanks!
Yes, the issue is your indentation. This should be correct:
doctype html
html(lang="en")
head
title= title
link(rel="stylesheet", href="css/bootstrap.css", type="text/css")
link(rel="stylesheet", href="css/main.css", type="text/css")
body(style="background-image:url(/images/background.jpg)")
div(class="container", id="visualization")
script.
var options = {};
var data = new vis.DataSet(options);
var container = document.getElementById('visualization');
new vis.Timeline(container, data, options);
You can also simplify div(class="container", id="visualization") to #visualization.container
make sure to load vis's css and js file in your template and then you can get the data from the database through node and send it to the view and use it .
app.get('/therout', function(req, res) {
var dbdata;
// get the data from the database
res.render('viewname', { dbdata: dbdata})
}
in the template
data = new vis.DataSet(dbdata);
It looks like Jade expects either all elements be aligned by space or by tab but not both. Once I changed all the lines to be aligned by space, it worked. Thanks everyone.