gistfile1.txt

<!doctype>

  <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
	<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
	<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
	<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
	<link type="text/css" rel="stylesheet" href="css/extensions.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<script src="../vendor/d3.v3.js"></script>

<script src="../rickshaw.js"></script>
<script src="../src/js/Rickshaw.Graph.RangeSlider.js"></script>

<style>
#chart {
	position: relative;
	left: 40px;
}
#y_axis {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40px;
}
</style>

<div id="chart_container">
	<div id="y_axis"></div>
	<div id="chart"></div>
	<div id="slider"></div>
</div>

<script>

// instantiate our graph!

var graph = new Rickshaw.Graph( {
	element: document.getElementById("chart"),
	renderer: 'line',
	height: 300,
	width: 800,
	series: [
		{
			data: [ { x: 3, y: 120 }, { x: 4, y: 890 }, { x: 5, y: 38 }, { x: 6, y: 70 }, { x: 7, y: 32 } ],
			color: "#c05020"
		}, {
			data: [ { x: 0, y: 80 }, { x: 1, y: 200 }, { x: 2, y: 100 }, { x: 3, y: 520 }, { x: 4, y: 133 } ],
			color: "#30c020"
		}, {
			data: [ { x: 0, y: 200 }, { x: 1, y: 390 }, { x: 2, y: 1000 }, { x: 3, y: 200 }, { x: 4, y: 230 } ],
			color: "#6060c0"
		}
	]
} );

var y_ticks = new Rickshaw.Graph.Axis.Y( {
	graph: graph,
	orientation: 'left',
	tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
	element: document.getElementById('y_axis'),
} );

var slider = new Rickshaw.Graph.RangeSlider( {
	graph: graph,
	element: document.getElementById("slider"),
} );

graph.render();

</script>