wulrahman/graph.html

## graph.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Roulette</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <canvas id="c" width="500" height="375"></canvas>
  <script src="graph.js"></script>
</body>
</html>

## graph.js
if (document.getElementById('c')) {

  // context
  let c_canvas = document.getElementById("c");
  let context = c_canvas.getContext("2d");

  // grid

  let draw_grid = (o) => {

    // create a 2 context object
    let grid = o.canvas.getContext("2d");

    // set line width
    grid.lineWidth = o.style.linewidth;

    grid.beginPath();

    // draw horizontal grid y-plane bottom
    for (var y = o.style.linewidth/2; y < o.height; y += o.spacing.y) {
      // update current working coordinations and create new line object
      // plot top right top_right
      grid.moveTo(o.offset.x, -y + o.offset.y);
      grid.lineTo(o.offset.x + o.width, -y + o.offset.y);

      // plot to left
      grid.moveTo(o.offset.x, -y + o.offset.y);
      grid.lineTo(-(o.offset.x + o.width), -y + o.offset.y);

      // plot bottom left
      grid.moveTo(o.offset.x, y + o.offset.y);
      grid.lineTo(-(o.offset.x + o.width), y + o.offset.y);

      //plot bottom right
      grid.moveTo(o.offset.x, y + o.offset.y);
      grid.lineTo(o.offset.x + o.width, y + o.offset.y);

    }

    // draw vertical grid on the x-plane bottom
    for (var x = o.style.linewidth/2; x < o.width; x += o.spacing.x) {
      // update current working coordinations and create new line object

      // plot top right top_right
      grid.moveTo(x + o.offset.x, o.offset.y);
      grid.lineTo(x + o.offset.x, -o.height + o.offset.y);

      // plot to left
      grid.moveTo(-x + o.offset.x, o.offset.y);
      grid.lineTo(-x + o.offset.x, -o.height + o.offset.y);

      // plot bottom left
      grid.moveTo(-x + o.offset.x, o.offset.y);
      grid.lineTo(-x + o.offset.x, o.height + o.offset.y);

      // plot bottom right
      grid.moveTo(x + o.offset.x, o.offset.y);
      grid.lineTo(x + o.offset.x, o.height + o.offset.y);
    }

    // set grid style
    grid.strokeStyle = o.style.linecolor;

    //  draw grid
    grid.stroke();

  }


    // axis
  let draw_axis = (o) => {

    // create a 2 context object
    let axis = o.canvas.getContext("2d");

    axis.beginPath();

    // set line width
    axis.lineWidth = o.style.linewidth;

    // update current working coordinations and create new line object
    axis.moveTo(0, o.intersect.y);
    axis.lineTo(o.canvas.offsetWidth, o.intersect.y);

    axis.moveTo(o.intersect.x, 0);
    axis.lineTo(o.intersect.x, o.canvas.offsetHeight);

    // set axis style
    axis.strokeStyle = o.style.linecolor;

    //  draw axis
    axis.stroke();
  }

  grid_setting = {
    offset:{
      x:60,
      y:(c_canvas.offsetHeight/2),
    },
    height:c_canvas.offsetWidth,
    width:c_canvas.offsetWidth,
    spacing:{
      x:10,
      y:10,
    },
    style:{
      linecolor:"#eee",
      linewidth:1
    },
    canvas:c_canvas,
  };

  draw_grid(grid_setting);

  draw_axis({
    intersect:{
      x:grid_setting.offset.x,
      y:grid_setting.offset.y
    },
    canvas:c_canvas,
    style:{
      linecolor:"#000",
      linewidth:2
    },
  });


  // text
  context.font = "bold 12px sans-serif";
  context.fillStyle = "gray";
  context.fillText("plays", 248, 42);
  context.fillText("winnings", 28, 42);


  // graphing functons
  let rouletteRed = (function() {
    var winnings = 0;
    return function() {
      winnings += Math.random() < 17/36 ? 1 : -1;
      return winnings;
    };
  })();

  let rouletteBlue = (function() {
    var winnings = 0;
    return function() {
      winnings += Math.random() < 1/36 ? 35 : -1;
      return winnings;
    };
  })();

  let lineGraph = function(o) {

    // create a 2 context object
    let line = o.canvas.getContext("2d");

    // set line width
    line.lineWidth = o.style.linewidth;

    line.beginPath();
    line.moveTo(o.offset.x, o.offset.y);

    // generate plot to fill canvas width - x offset
    for(var i = (o.offset.x)+1; i < o.canvas.offsetWidth; i++) {
      line.lineTo(i, -o.data() + o.offset.y);
    }

    // set line style
    line.strokeStyle = o.style.linecolor;

    // draw line
    line.stroke();
  };

  lineGraph({
    data: rouletteRed,
    offset:{
      x:grid_setting.offset.x,
      y:grid_setting.offset.y
    },
    style: {
      linecolor:'#e00',
      linewidth:1
    },
    canvas:c_canvas,
  });

  lineGraph({
    data: rouletteBlue,
    offset:{
      x:grid_setting.offset.x,
      y:grid_setting.offset.y
    },
    style: {
      linecolor:'#00e',
      linewidth:1
    },
    canvas:c_canvas,
  });
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Roulette</title>
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<style>
	article, aside, figure, footer, header, hgroup,
	menu, nav, section { display: block; }
	</style>
	</head>
	<body>
	<canvas id="c" width="500" height="375"></canvas>
	<script src="graph.js"></script>
	</body>
	</html>
	if (document.getElementById('c')) {

	// context
	let c_canvas = document.getElementById("c");
	let context = c_canvas.getContext("2d");

	// grid

	let draw_grid = (o) => {

	// create a 2 context object
	let grid = o.canvas.getContext("2d");

	// set line width
	grid.lineWidth = o.style.linewidth;

	grid.beginPath();

	// draw horizontal grid y-plane bottom
	for (var y = o.style.linewidth/2; y < o.height; y += o.spacing.y) {
	// update current working coordinations and create new line object
	// plot top right top_right
	grid.moveTo(o.offset.x, -y + o.offset.y);
	grid.lineTo(o.offset.x + o.width, -y + o.offset.y);

	// plot to left
	grid.moveTo(o.offset.x, -y + o.offset.y);
	grid.lineTo(-(o.offset.x + o.width), -y + o.offset.y);

	// plot bottom left
	grid.moveTo(o.offset.x, y + o.offset.y);
	grid.lineTo(-(o.offset.x + o.width), y + o.offset.y);

	//plot bottom right
	grid.moveTo(o.offset.x, y + o.offset.y);
	grid.lineTo(o.offset.x + o.width, y + o.offset.y);

	}

	// draw vertical grid on the x-plane bottom
	for (var x = o.style.linewidth/2; x < o.width; x += o.spacing.x) {
	// update current working coordinations and create new line object

	// plot top right top_right
	grid.moveTo(x + o.offset.x, o.offset.y);
	grid.lineTo(x + o.offset.x, -o.height + o.offset.y);

	// plot to left
	grid.moveTo(-x + o.offset.x, o.offset.y);
	grid.lineTo(-x + o.offset.x, -o.height + o.offset.y);

	// plot bottom left
	grid.moveTo(-x + o.offset.x, o.offset.y);
	grid.lineTo(-x + o.offset.x, o.height + o.offset.y);

	// plot bottom right
	grid.moveTo(x + o.offset.x, o.offset.y);
	grid.lineTo(x + o.offset.x, o.height + o.offset.y);
	}

	// set grid style
	grid.strokeStyle = o.style.linecolor;

	// draw grid
	grid.stroke();

	}


	// axis
	let draw_axis = (o) => {

	// create a 2 context object
	let axis = o.canvas.getContext("2d");

	axis.beginPath();

	// set line width
	axis.lineWidth = o.style.linewidth;

	// update current working coordinations and create new line object
	axis.moveTo(0, o.intersect.y);
	axis.lineTo(o.canvas.offsetWidth, o.intersect.y);

	axis.moveTo(o.intersect.x, 0);
	axis.lineTo(o.intersect.x, o.canvas.offsetHeight);

	// set axis style
	axis.strokeStyle = o.style.linecolor;

	// draw axis
	axis.stroke();
	}

	grid_setting = {
	offset:{
	x:60,
	y:(c_canvas.offsetHeight/2),
	},
	height:c_canvas.offsetWidth,
	width:c_canvas.offsetWidth,
	spacing:{
	x:10,
	y:10,
	},
	style:{
	linecolor:"#eee",
	linewidth:1
	},
	canvas:c_canvas,
	};

	draw_grid(grid_setting);

	draw_axis({
	intersect:{
	x:grid_setting.offset.x,
	y:grid_setting.offset.y
	},
	canvas:c_canvas,
	style:{
	linecolor:"#000",
	linewidth:2
	},
	});


	// text
	context.font = "bold 12px sans-serif";
	context.fillStyle = "gray";
	context.fillText("plays", 248, 42);
	context.fillText("winnings", 28, 42);


	// graphing functons
	let rouletteRed = (function() {
	var winnings = 0;
	return function() {
	winnings += Math.random() < 17/36 ? 1 : -1;
	return winnings;
	};
	})();

	let rouletteBlue = (function() {
	var winnings = 0;
	return function() {
	winnings += Math.random() < 1/36 ? 35 : -1;
	return winnings;
	};
	})();

	let lineGraph = function(o) {

	// create a 2 context object
	let line = o.canvas.getContext("2d");

	// set line width
	line.lineWidth = o.style.linewidth;

	line.beginPath();
	line.moveTo(o.offset.x, o.offset.y);

	// generate plot to fill canvas width - x offset
	for(var i = (o.offset.x)+1; i < o.canvas.offsetWidth; i++) {
	line.lineTo(i, -o.data() + o.offset.y);
	}

	// set line style
	line.strokeStyle = o.style.linecolor;

	// draw line
	line.stroke();
	};

	lineGraph({
	data: rouletteRed,
	offset:{
	x:grid_setting.offset.x,
	y:grid_setting.offset.y
	},
	style: {
	linecolor:'#e00',
	linewidth:1
	},
	canvas:c_canvas,
	});

	lineGraph({
	data: rouletteBlue,
	offset:{
	x:grid_setting.offset.x,
	y:grid_setting.offset.y
	},
	style: {
	linecolor:'#00e',
	linewidth:1
	},
	canvas:c_canvas,
	});
	}