While trying to display the realtime data using flot chart, I am getting the following error in the client code
Uncaught Invalid dimensions for plot, width = 1584, height = 0
Cant figure out why the height = 0. I think something is wrong in my index.jade file. Seems its throwing error in the following statement in index.jade
var plot = $.plot($("#placeholder"), [ getInitData() ], options);
Here are my app.js, index.js, index.jade and style.css.
App.js
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('/', routes.index);
var httpServer = http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
var io = require('socket.io').listen(httpServer);
io.sockets.on('connection', function(socket) {
socket.emit('welcome', {'salutation':'TMP36 Sensor output!'});
});
index.js file
exports.index = function(req, res){
res.render('index', { title: 'Temperature Monitor',
domain: 'localhost' });
};
index.jade
doctype 5
html
head
title= title
script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js')
script(type='text/javascript', src='/javascripts/flot/jquery.js')
script(type='text/javascript', src='/javascripts/flot/jquery.flot.js')
script(type='text/javascript', src='./socket.io/socket.io.js')
script
$(document).ready(function(){
var socket = io.connect();
var val = 10;
var temp;
var totalPoints = 300;
var res = [];
function getInitData() {// zip the generated y values with the x values
for (var i = 0; i < totalPoints; ++i){
res.push([i, 0]);
}
return res;
}
// Options for Flot plot
var options = {
series: { shadowSize: 0 }, // drawing is faster without shadows
yaxis: { min: 0, max: 50, color: "#bbbb00" },
xaxis: { show: false },
};
var plot = $.plot($("#placeholder"), [ getInitData() ], options);
socket.on('welcome', function(data) {
val = data.salutation ;
res.push([totalPoints, val]); // push on the end side
res.shift(); // remove first value to maintain 300 points
for (i=0;i<totalPoints;i++) { res[i][0] = i; }
plot.setData([ res ]);
plot.draw();
$('#temperature').text("Current Temperature: :" + val );
});
});
link(rel='stylesheet', href='/stylesheets/style.css')
body
h1= title
p Welcome to #{title}
#placeholder
p graph here
#temperature
p temperature val
Style.css h1, h2, h3 { font-size: 22px; color: #464646; }
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
placeholder {
width:600px;
height:300px;
}
I have a equivalent html client of index.jade which works fine. I hit the above error while converting the html version of the client to jade. The html version of the client is -
index.html
<!--!DOCTYPE html-->
<html lang='en'>
<head>
<title>Data Collector</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
<script language="javascript" type="text/javascript" src="../3rdParty/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../3rdParty/flot/jquery.flot.js"></script>
<script src='/socket.io/socket.io.js'></script>
<script>
$(document).ready(function(){
var socket = io.connect();
var val = 10;
var temp ;
var totalPoints = 300;
var res = [];
function getInitData() {
// zip the generated y values with the x values
for (var i = 0; i < totalPoints; ++i){
res.push([i, 0]);
}
return res;
}
// Options for Flot plot
var options = {
series: { shadowSize: 0 }, // drawing is faster without shadows
yaxis: { min: 0, max: 50, color: "#bbbb00" },
xaxis: { show: false },
};
var plot = $.plot($("#placeholder"), [ getInitData() ], options);
socket.on('welcome', function(data) {
// Convert value to integer
//val = ((parseInt(data.salutation) / 1023)*100)*10;
val = data.salutation ;
// Push new value to Flot Plot
res.push([totalPoints, val]); // push on the end side
res.shift(); // remove first value to maintain 300 points
// reinitialize the x axis data points to 0 to 299.
for (i=0;i<totalPoints;i++) { res[i][0] = i; }
// Redraw the plot
plot.setData([ res ]);
plot.draw();
$('#temperature').text("Current Temperature: :" + val );
});
});
</script>
</head>
<body>
<h1>Temperature Monitor</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<div id='temperature'><p>Temperature</p></div>
</body>
This is the output of the html client
Flot needs to be able to read the width & height of the placeholder div. Your Jade output produces a placeholder with no set height, and no derived height from any parent or child elements. Its height is therefore zero, which prevents Flot from using it.
Your HTML example works because you have set the width & height using an inline style.