chikoski/gist:4166572

## gistfile1.html
<!doctype html>
<html lang="ja">
  <head>
    <title>論プロテンプレート</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheets/bootstrap.min.css">

    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }
      textarea{
        width: 100%;
        height: 10em;
      }
    </style>
    <link rel="stylesheet" href="stylesheets/bootstrap-responsive.min.css">
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
	<div class="container">
          <a class="brand" href="#">Project Name</a>
        </div>
      </div>
    </div>

    <div class="container">
      <h1>論プロテンプレート</h1>
	  <canvas id="canvas" width="600" height="300"></canvas>
    </div>
	<script type="text/javascript" src="http://ipl.sfc.keio.ac.jp/text/pro-2011-9/lib/usdjpy.js"></script>
    <script type="text/javascript">

	  function drawXAxis(ctx){
	   ctx.lineWidth = 3.0;
	   ctx.strokeStyle ="black";
	   ctx.beginPath();
       ctx.moveTo(0, 300);
	   ctx.lineTo(600, 300);
	   ctx.stroke();
	   ctx.closePath();
	  }
	  function drawYAxis(ctx){
	   ctx.lineWidth =3.0;
	   ctx.strokeStyle ="black";
	   ctx.beginPath();
       ctx.moveTo(0, 300);
	   ctx.lineTo(0, 0);
	   ctx.stroke();
	   ctx.closePath();
	  }

	  function drawAxis(ctx){
	    drawXAxis(ctx);
		drawYAxis(ctx);
	  }

	  function drawLineChart(ctx){
	  ctx.lineWidth = 3.0;
      ctx.strokeStyle = "#800";
	  var i = 1;
	  var dx = 600 / usdjpy.length;
	  var uy = 300 / 90;
	  ctx.beginPath();
	  ctx.moveTo(0, 300 - usdjpy[0][1] * uy);
	  while(i < usdjpy.length){
	    var record = usdjpy[i];
		var y = 300 - record[1] * uy;
	    ctx.lineTo(i*dx, y);
	    i =  i + 1;
	  }
	  ctx.stroke();
	  ctx.closePath();
	  }

      var canvas = document.getElementById("canvas");
	  var ctx = canvas.getContext("2d");

	  drawAxis(ctx);
	  drawLineChart(ctx);


    </script>
  </body>
</html>
	<!doctype html>
	<html lang="ja">
	<head>
	<title>論プロテンプレート</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="stylesheets/bootstrap.min.css">

	<style type="text/css">
	body {
	padding-top: 60px;
	padding-bottom: 40px;
	}
	.sidebar-nav {
	padding: 9px 0;
	}
	textarea{
	width: 100%;
	height: 10em;
	}
	</style>
	<link rel="stylesheet" href="stylesheets/bootstrap-responsive.min.css">
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	</head>
	<body>
	<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="navbar-inner">
	<div class="container">
	<a class="brand" href="#">Project Name</a>
	</div>
	</div>
	</div>

	<div class="container">
	<h1>論プロテンプレート</h1>
	<canvas id="canvas" width="600" height="300"></canvas>
	</div>
	<script type="text/javascript" src="http://ipl.sfc.keio.ac.jp/text/pro-2011-9/lib/usdjpy.js"></script>
	<script type="text/javascript">

	function drawXAxis(ctx){
	ctx.lineWidth = 3.0;
	ctx.strokeStyle ="black";
	ctx.beginPath();
	ctx.moveTo(0, 300);
	ctx.lineTo(600, 300);
	ctx.stroke();
	ctx.closePath();
	}
	function drawYAxis(ctx){
	ctx.lineWidth =3.0;
	ctx.strokeStyle ="black";
	ctx.beginPath();
	ctx.moveTo(0, 300);
	ctx.lineTo(0, 0);
	ctx.stroke();
	ctx.closePath();
	}

	function drawAxis(ctx){
	drawXAxis(ctx);
	drawYAxis(ctx);
	}

	function drawLineChart(ctx){
	ctx.lineWidth = 3.0;
	ctx.strokeStyle = "#800";
	var i = 1;
	var dx = 600 / usdjpy.length;
	var uy = 300 / 90;
	ctx.beginPath();
	ctx.moveTo(0, 300 - usdjpy[0][1] * uy);
	while(i < usdjpy.length){
	var record = usdjpy[i];
	var y = 300 - record[1] * uy;
	ctx.lineTo(i*dx, y);
	i = i + 1;
	}
	ctx.stroke();
	ctx.closePath();
	}

	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");

	drawAxis(ctx);
	drawLineChart(ctx);


	</script>
	</body>
	</html>