I am building a python based web server ( Yes, python is a bad choice for web server, but this is the only choice I have There is another great choice for my purpose, e.g. PHP, but I am restricted to python )
I use ProtoVis for some data visualization. (a JavaScript based visualization tool)
The following piece of code works if I just copy and paste them into a test file and rename .html (provided that I have the protovis library extracted beside it)
If you want to try, get it here https://github.com/mbostock/protovis/zipball/v3.3.1
<html>
<head>
<title>Area Chart</title>
<link type="text/css" rel="stylesheet" href="ex.css?3.2"/>
<script type="text/javascript" src="protovis/protovis.js"></script>
<style type="text/css">
#fig {
width: 430px;
height: 225px;
}
</style>
</head>
<body>
<div id="center">
<div id="fig">
<script type="text/javascript+protovis">
var data = pv.range(0, 10, .1).map(function(x) {
return {x: x, y: Math.sin(x) + Math.random() * .5 + 2};
});
/* Sizing and scales. */
var w = 400,
h = 200,
x = pv.Scale.linear(data, function(d) d.x).range(0, w),
y = pv.Scale.linear(0, 4).range(0, h);
/* The root panel. */
var vis = new pv.Panel()
.width(w)
.height(h)
.bottom(20)
.left(20)
.right(10)
.top(5);
/* Y-axis and ticks. */
vis.add(pv.Rule)
.data(y.ticks(5))
.bottom(y)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("left").add(pv.Label)
.text(y.tickFormat);
/* X-axis and ticks. */
vis.add(pv.Rule)
.data(x.ticks())
.visible(function(d) d)
.left(x)
.bottom(-5)
.height(5)
.anchor("bottom").add(pv.Label)
.text(x.tickFormat);
/* The area with top line. */
vis.add(pv.Area)
.data(data)
.bottom(1)
.left(function(d) x(d.x))
.height(function(d) y(d.y))
.fillStyle("rgb(121,173,210)")
.anchor("top").add(pv.Line)
.lineWidth(3);
vis.render();
</script>
</div>
</div>
</body>
</html>
However, if I return the above code in a baseHTTPserver, it does not seem to work. From my investigation, it seems that the library at "protovis/protovis.js" is not properly included.
if url[0] == "/chart":
self.send_response(200)
self.send_header("Content-type","text/html")
self.end_headers()
self.wfile.write(chart())
return
where chart() function returns the lines above.
I am working under CentOS 6.2 with python 2.6, is there anything special I need to do in baseHTTPserver to include that javascript library that I am using? The same code worked fine with Apache + PHP where I simply echo them.
Any idea?
======================== Solution ========================
Unlike Apache+PHP, BaseHTTPServer will not just serve anything you put into that folder. You have to either do it yourself, as Matthew described, or serve protovis.js from a different server (could even be a SimpleHTTPServer running on a different port). – Vasiliy Faronov
See Matthew Adams's instruction below
What I had to do to fix the problem was to add another method into do_GET() that handles the JavaScript file
if url[0] == "/protovis/protovis.js":
f = open("protovis/protovis.js","rb")
for each_line in f:
self.wfile.write(each_line)
return
which solves the problem.
Thank you all for the solution, I really appreciate it
Make sure that you are serving protovis/protovis.js using your BaseHTTPServer. Basically the browser will "see" the line <script type="text/javascript" src="protovis/protovis.js"></script> when it is reading the html output it gets, and then request that the server actually send the protovis/protovis.js file. I didn't see the python code in that github download, so I can't specifically show how to do this in the context of your code, but check out SimpleHTTPRequestHandler. Using that, you can add to the do_GET() method to have the server send protovis/protovis.js when it is requested (that is, when self.path is protovis/protovis.js).