unable to draw graphs using Vis.js in tornado

Hi all iam trying to draw a graph using vis.js in tornado framework but i am unable to achieve that how to direct the file i am right now getting only Helloworld in the url but not the graph thanks in advance

enter code here Tornado
 import tornado.httpserver
 import tornado.ioloop
 import tornado.options
 import tornado.web
 import os


 from tornado.options import define, options

 define("port", default=8888, help="run on the given port", type=int)
 settings = {
"static_path": os.path.join(os.path.dirname(__file__), "static"),
"template_path":os.path.join(os.path.dirname(__file__), "templates"),
 }


 class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("graph.html")




 def main():
     tornado.options.parse_command_line()
     application = tornado.web.Application([
    (r"/", MainHandler),
    (r"/", tornado.web.StaticFileHandler,
 dict(path=settings['static_path'])),

],**settings)
    http_server = tornado.httpserver.HTTPServer(application)
    http_server.listen(options.port)
    tornado.ioloop.IOLoop.current().start()


if __name__ == "__main__":
    main()

here is the HTML

enter code here
 <html>
 <head>
 <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
 <meta content="utf-8" http-equiv="encoding">
 <title>Graph2d | Basic Example</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript"src="{{ static_url("vis.js") }}"></script>
<link rel="stylesheet" href="{{ static_url("vis.css") }}"
<script src="../static/vis.js"></script>
<link href="../static/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body>
<h1>helloworld</h1>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
  ];

var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18'
  };
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

Solution

I have tested and everything seems to be ok. Make sure that you have static dir. How I've tested

~$ virtualenv test
~$ source test/bin/activate  # activate virtualenv
~$ pip install tornado
~$ mkdir static
~$ mkdir templates
~$ wget https://cdnjs.cloudflare.com/ajax/libs/vis/4.11.0/vis.min.css -O static/vis.css
~$ wget https://cdnjs.cloudflare.com/ajax/libs/vis/4.11.0/vis.min.js -O static/vis.js
~$ # copy your HTML into templates/graph.html
~$ # copy your py into app.py
~$ python app.py
[I 160106 20:46:51 web:1946] 200 GET / (127.0.0.1) 7.46ms
[I 160106 20:46:51 web:1946] 200 GET /static/vis.js?v=1a407e3a47f81c53518823bd11369678 (127.0.0.1) 10.71ms
[I 160106 20:46:51 web:1946] 200 GET /static/vis.css?v=4e678a04d8440cf16f35838950d9d673 (127.0.0.1) 1.67ms