I'm working with Node.js and trying to display a chart, generated out of coordinates from a txt file, which is uploaded to the server. My problem: When I open the web page and upload the file, everything works perfectly, but the chart is not working: I get the following error: UncaughtSyntaxError: Unexpected token var.
If I render the webpage without node.js everything works fine.
The code:
var express = require("express");
var app = express();
var fs = require('fs'); // we will need it for file uploads
var port = process.env.PORT || 3000;
app.configure(function(){
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
app.get('/', function(req, res) {
res.send('<form method="post" enctype="multipart/form-data">'
+ '<p>Image: <input type="file" name="uploadfile" /></p>'
+ '<p><input type="submit" value="Upload" /></p>'
+ '</form>');
});
app.post('/', function(req, res){
// .. Upload and file reading
// .. var obj[key1] (X-Values) and var obj[key2] (Y-Values) are generated
// ..
res.send('<head><title>Line Chart</title><script src="../Chart.js"></script><meta name = "viewport" content = "initial-scale = 1, user-scalable = no"><style>canvas{ }</style></head><body><canvas id="canvas" height="450" width="600"></canvas>'
+'<script type="text/javascript">'
+' '
+'var lineChartData = { '
+'labels : [ ' + obj[key1] + ' ],'
+'datasets : [{'
+'fillColor : "rgba(151,187,205,0.5)",'
+'strokeColor : "rgba(0, 0, 0, 0.831373)",'
+'pointColor : "rgba(151,187,205,1)",'
+'pointStrokeColor : "gba(76, 255, 178, 0.831373)",'
+'data : ['+ obj[key2] + ' ]'
+'} ] } '
+'var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);'
+'</script>'
+'</body></html>'
);
};
});
});
});
app.listen(port, function() {
console.log("Listening on " + port);
});
I hope you can help me..
Greetings,
JS
I'm working with Node.js and trying to display a chart, generated out of coordinates from a txt file, which is uploaded to the server. My problem: When I open the web page and upload the file, everything works perfectly, but the chart is not working: I get the following error: UncaughtSyntaxError: Unexpected token var.
If I render the webpage without node.js everything works fine.
The code:
var express = require("express");
var app = express();
var fs = require('fs'); // we will need it for file uploads
var port = process.env.PORT || 3000;
app.configure(function(){
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
app.get('/', function(req, res) {
res.send('<form method="post" enctype="multipart/form-data">'
+ '<p>Image: <input type="file" name="uploadfile" /></p>'
+ '<p><input type="submit" value="Upload" /></p>'
+ '</form>');
});
app.post('/', function(req, res){
// .. Upload and file reading
// .. var obj[key1] (X-Values) and var obj[key2] (Y-Values) are generated
// ..
res.send('<head><title>Line Chart</title><script src="../Chart.js"></script><meta name = "viewport" content = "initial-scale = 1, user-scalable = no"><style>canvas{ }</style></head><body><canvas id="canvas" height="450" width="600"></canvas>'
+'<script type="text/javascript">'
+' '
+'var lineChartData = { '
+'labels : [ ' + obj[key1] + ' ],'
+'datasets : [{'
+'fillColor : "rgba(151,187,205,0.5)",'
+'strokeColor : "rgba(0, 0, 0, 0.831373)",'
+'pointColor : "rgba(151,187,205,1)",'
+'pointStrokeColor : "gba(76, 255, 178, 0.831373)",'
+'data : ['+ obj[key2] + ' ]'
+'} ] } '
+'var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);'
+'</script>'
+'</body></html>'
);
};
});
});
});
app.listen(port, function() {
console.log("Listening on " + port);
});
I hope you can help me..
Greetings,
JS
Share Improve this question asked Jan 28, 2014 at 14:40 JStJSt 8192 gold badges11 silver badges22 bronze badges 1- You need to look at what is actually being sent to the browser. I would suggest looking into a template system for building HTML; they're small and fast and they make life much easier. – Pointy Commented Jan 28, 2014 at 14:47
2 Answers
Reset to default 4Since you don't use newlines in your code sample this will be the output:
var lineChartData = { labels : [ undefined ],datasets : [{fillColor : "rgba(151,187,205,0.5)",strokeColor : "rgba(0, 0, 0, 0.831373)",pointColor : "rgba(151,187,205,1)",pointStrokeColor : "gba(76, 255, 178, 0.831373)",data : [undefined ]} ] } var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
Which is invalid Javascript since you need to close the 'lineChardData' object with a ;
Change it to this and it will work:
res.send('<head><title>Line Chart</title><script src="../Chart.js"></script><meta name = "viewport" content = "initial-scale = 1, user-scalable = no"><style>canvas{ }</style></head><body><canvas id="canvas" height="450" width="600"></canvas>'
+'<script type="text/javascript">'
+' '
+'var lineChartData = { '
+'labels : [ ' + obj[key1] + ' ],'
+'datasets : [{'
+'fillColor : "rgba(151,187,205,0.5)",'
+'strokeColor : "rgba(0, 0, 0, 0.831373)",'
+'pointColor : "rgba(151,187,205,1)",'
+'pointStrokeColor : "gba(76, 255, 178, 0.831373)",'
+'data : ['+ obj[key2] + ' ]'
+'} ] }; '
+'var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);'
+'</script>'
+'</body></html>'
);
Also I don't think it's nice or good practise to output HTML/javascript data directly from Node.js this way ..
You're not sending any line breaks so (trimmed down) the JavaScript interpreter sees the following invalid code:
var lineChartData = { /*...*/} var myLine = new Chart(/*...*/);
Put a semicolon after the first var statement and it will work:
var lineChartData = { /*...*/}; var myLine = new Chart(/*...*/);
// ^ Put me here
If there was a line break in the output it would work without the semicolon as ASI would step in, so that's another possible solution.