maxott/index.html

## index.html
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
  <head>
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="expires" content="0" />
	<title>Line Chart</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.10.0"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js?1.10.0"></script>
        <script type="text/javascript" src="http://omf.mytestbed.net/projects/omf/repository/revisions/master/raw/omf-common/ruby/omf-common/web/tab/graph3/js/line_chart3.js"></script>
        <script type="text/javascript" src="http://omf.mytestbed.net/projects/omf/repository/revisions/master/raw/omf-common/ruby/omf-common/web/tab/graph3/js/focus_context3.js"></script>
    <style type="text/css"> @import url("http://bl.ocks.org/style.css");</style>
    <style type="text/css">
path {
   stroke-width: 2;
   fill: none;
}

line {
    stroke: black;
}

.grids {
    stroke: #ccc;
    stroke-width: 1;
}

text {
    font-family: Arial;
    font-size: 9pt;
}


.oml-lineGraph .graph-area {
  cursor: crosshair;
}

.oml-lineGraph .select-rect {
  cursor: hand;
  fill: #FF8080;
  fill-opacity: 0.4;
}
	</style>
</head>
  <body>
    <h1>Line Chart</h1>

    <div id="graph1"></div><p>
    <button onclick="on_line2_1()">2 Line</button>
    <button onclick="on_line3_1()">3 Line</button>

    <h1>Focus + Context</h1>

    <div id="graph2"></div><p>
    <div id="x_min">x_min: <span>--</span></div>
    <div id="x_max">x_max: <span>--</span></div><p>
    <button onclick="on_line2_2()">2 Line</button>
    <button onclick="on_line3_2()">3 Line</button>

    <script type="text/javascript" src="test4.js"></script>


 </body>
</html>

## test4.js
function create_time_series(ystart) {
  var start = new Date(1990, 0, 1);
  var year = 1000 * 60 * 60 * 24 * 365;
  var data = d3.range(0, 20, .02).map(function(x) {
      return {
          x: new Date(start.getTime() + year * x),
	  y: (ystart + .1 * (Math.sin(x * 2 * Math.PI))
                + Math.random() * .1) * Math.pow(1.18, x)
                + Math.random() * .1};
    });
  var end = data[data.length - 1].x;
  return data;
}
var s1 = create_time_series(1);
var s2 = create_time_series(2);
var s3 = create_time_series(3);

opts1 = {
 data: [s1, s2],
 height: 300,
 width: 600,
 x: 30, y: 20,
 base_el: '#graph1',
 xaxis: {label: function f(d) {return d3.time.format("%Y")(new Date(d))}},
 // yaxis: {show_labels: false}
};

var graph1 = new OML.lineChart(opts1);
function on_line2_1() {
  graph1.update([s1, s2]);
}
function on_line3_1() {
  graph1.update([s1, s2, s3]);
}


opts = {
 data: [s1, s2],
 height: 300,
 width: 600,
 x: 30, y: 20,
 base_el: '#graph2',
 context: {
  height: 0.2,
  margin: {bottom: 20},
  xaxis: {label: function f(d) {return d3.time.format("%Y")(new Date(d))}},
  yaxis: {show_labels: false}
 },
 focus: {
  margin: {bottom: 20},
  ymin : 0,
  xaxis: {ticks: 5,
	  label: function f(d) {return d3.time.format("%m/%y")(new Date(d))}},
 }
};

var graph2 = new OML.focusContext(opts);
function on_line2_2() {
  graph2.update([s1, s2]);
}
function on_line3_2() {
  graph2.update([s1, s2, s3]);
}
	<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
	<html>
	<head>
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="expires" content="0" />
	<title>Line Chart</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.10.0"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js?1.10.0"></script>
	<script type="text/javascript" src="http://omf.mytestbed.net/projects/omf/repository/revisions/master/raw/omf-common/ruby/omf-common/web/tab/graph3/js/line_chart3.js"></script>
	<script type="text/javascript" src="http://omf.mytestbed.net/projects/omf/repository/revisions/master/raw/omf-common/ruby/omf-common/web/tab/graph3/js/focus_context3.js"></script>
	<style type="text/css"> @import url("http://bl.ocks.org/style.css");</style>
	<style type="text/css">
	path {
	stroke-width: 2;
	fill: none;
	}

	line {
	stroke: black;
	}

	.grids {
	stroke: #ccc;
	stroke-width: 1;
	}

	text {
	font-family: Arial;
	font-size: 9pt;
	}


	.oml-lineGraph .graph-area {
	cursor: crosshair;
	}

	.oml-lineGraph .select-rect {
	cursor: hand;
	fill: #FF8080;
	fill-opacity: 0.4;
	}
	</style>
	</head>
	<body>
	<h1>Line Chart</h1>

	<div id="graph1"></div><p>
	<button onclick="on_line2_1()">2 Line</button>
	<button onclick="on_line3_1()">3 Line</button>

	<h1>Focus + Context</h1>

	<div id="graph2"></div><p>
	<div id="x_min">x_min: <span>--</span></div>
	<div id="x_max">x_max: <span>--</span></div><p>
	<button onclick="on_line2_2()">2 Line</button>
	<button onclick="on_line3_2()">3 Line</button>

	<script type="text/javascript" src="test4.js"></script>


	</body>
	</html>
	function create_time_series(ystart) {
	var start = new Date(1990, 0, 1);
	var year = 1000 * 60 * 60 * 24 * 365;
	var data = d3.range(0, 20, .02).map(function(x) {
	return {
	x: new Date(start.getTime() + year * x),
	y: (ystart + .1 * (Math.sin(x * 2 * Math.PI))
	+ Math.random() * .1) * Math.pow(1.18, x)
	+ Math.random() * .1};
	});
	var end = data[data.length - 1].x;
	return data;
	}
	var s1 = create_time_series(1);
	var s2 = create_time_series(2);
	var s3 = create_time_series(3);

	opts1 = {
	data: [s1, s2],
	height: 300,
	width: 600,
	x: 30, y: 20,
	base_el: '#graph1',
	xaxis: {label: function f(d) {return d3.time.format("%Y")(new Date(d))}},
	// yaxis: {show_labels: false}
	};

	var graph1 = new OML.lineChart(opts1);
	function on_line2_1() {
	graph1.update([s1, s2]);
	}
	function on_line3_1() {
	graph1.update([s1, s2, s3]);
	}


	opts = {
	data: [s1, s2],
	height: 300,
	width: 600,
	x: 30, y: 20,
	base_el: '#graph2',
	context: {
	height: 0.2,
	margin: {bottom: 20},
	xaxis: {label: function f(d) {return d3.time.format("%Y")(new Date(d))}},
	yaxis: {show_labels: false}
	},
	focus: {
	margin: {bottom: 20},
	ymin : 0,
	xaxis: {ticks: 5,
	label: function f(d) {return d3.time.format("%m/%y")(new Date(d))}},
	}
	};

	var graph2 = new OML.focusContext(opts);
	function on_line2_2() {
	graph2.update([s1, s2]);
	}
	function on_line3_2() {
	graph2.update([s1, s2, s3]);
	}