<!doctype>
<link rel="stylesheet" href="../css/style.css">
<style>
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #282828;
	line-height: 135%;
	margin: 0;
}
.content {
	width: 780px;
	margin: auto;
	display: block;
}
section img {
	width: 25%;
	display: inline-block;
	vertical-align: top;
	margin: 0 3% 0 0;
	border: none;
}
div {
	width: 70%;
	display: inline-block;
	vertical-align: top;
}
a {
	text-decoration: none;
	color: steelblue;
}
a:hover {
	color: lightblue;
}
h1 {
	margin: 1em 0 1em 0;
	font-weight: normal;
}
h2 {
	font-weight: normal;
	margin: 0 0 0.7em 0;
	color: black;
	float: left;
}
section {
	border-top: 1px solid #e0e0e0;
	padding: 1.8em 0;
	display: block;
}
span {
	clear: both;
	display: block;
}
.clear {
	clear: both;
}
#start {
	height: 70px;
}
hr {
	margin-bottom: 40px;
	border: none;
	border-bottom: 1px solid #e0e0e0;
}
img {
	border: none;
}
</style>

<script src="../js/header.js"></script>

<div class="content">

<h1>Rickshaw Examples</h1>

<section>
	<a href="start.html"><img src="screenshots/start.png" id="start"></a>
	<div>
		<h2><a href="start.html">Getting Started</a></h2>
		<span>
			Bare minimum to get a graph on the page with a couple of points.
		</span>
	</div>
</section>

<section>
	<a href="lines.html"><img src="screenshots/lines.png"></a>
	<div>
		<h2><a href="lines.html">Lines & Toggling</a></h2>
		<span>
			Basic lines with a legend and x-axis ticks and labels.  Toggle lines on and off by clicking checkmarks.
		</span>
	</div>
</section>

<section>
	<a href="extensions.html"><img src="screenshots/extensions.png"></a>
	<div>
		<h2><a href="extensions.html">Interactive Real-Time Data</a></h2>
		<span>
			Dig into continuously updating data.  Change line interpolations, zoom in on the x-axis, apply smoothing, stack and un-stack, drag and drop to re-order the stack, toggle data on and off.
		</span>
	</div>
</section>

<section>
	<a href="scatterplot.html"><img src="screenshots/scatterplot.png"></a>
	<div>
		<h2><a href="scatterplot.html">Scatter Plot with Multiple Series</a></h2>
		<span>
			Basic scatter plot with two overlapping series.
		</span>
	</div>
</section>

<section>
	<a href="status.html"><img src="screenshots/status.png"></a>
	<div>
		<h2><a href="status.html">Stacked Bars with Deterministic Colors</a></h2>
		<span>
			Requests per second by HTTP status as stacked bars.  Colors come from a deterministic palette that can carry across graphs.
		</span>
	</div>
</section>

<section>
	<a href="colors.html"><img src="screenshots/colors.png"></a>
	<div>
		<h2><a href="colors.html">Color Schemes</a></h2>
		<span>
			A number of color schemes are built in.  You can specify your own too.
		</span>
	</div>
</section>

<section>
	<a href="stops.html"><img src="screenshots/stops.png"></a>
	<div>
		<h2><a href="stops.html">Interpolated Colors</a></h2>
		<span>
			Interpolate color schemes for graphs with many series.
		</span>
	</div>
</section>

<section>
	<a href="ajax.html"><img src="screenshots/ajax.png"></a>
	<div>
		<h2><a href="ajax.html">Data via AJAX / JSONP</a></h2>
		<span>
			Ask Rickshaw to fetch data via AJAX, rather than specifying in the constructor.  There's a JSONP impelementation too.
		</span>
	</div>
</section>

<section>
	<a href="y_axis.html"><img src="screenshots/y_axis.png"></a>
	<div>
		<h2><a href="y_axis.html">Y-Axis Tick Marks and Grid Lines</a></h2>
		<span>
			Draw y-axis tick marks and grid lines with abbreviated numbers.
		</span>
	</div>
</section>

<section>
	<a href="x_axis.html"><img src="screenshots/x_axis.png"></a>
	<div>
		<h2><a href="x_axis.html">Custom Values on the X-Axis</a></h2>
		<span>
			Add custom values and custom formatting along the x-axis.
		</span>
	</div>
</section>

<section>
	<a href="fixed.html"><img src="screenshots/fixed.png"></a>
	<div>
		<h2><a href="fixed.html">Fixed Window Series for Streaming Data</a></h2>
		<span>
			Fixed-size time window, useful for real-time graphs with socket.io.
		</span>
	</div>
</section>

<section>
	<a href="formatter.html"><img src="screenshots/formatter.png"></a>
	<div>
		<h2><a href="formatter.html">Hover Details Custom Formatting</a></h2>
		<span>
			Send a custom formatter callback for finer control in hover details.
		</span>
	</div>
</section>

<section>
	<a href="hover.html"><img src="screenshots/hover.png"></a>
	<div>
		<h2><a href="hover.html">Subclassed Hover Behavior + Bottom Legend</a></h2>
		<span>
			Subclass hovers to provide an alternate legend at the bottom of the graph.
		</span>
	</div>
</section>

<section>
	<a href="scaled.html"><img src="screenshots/scaled.png"></a>
	<div>
		<h2><a href="scaled.html">Scaled Series</a></h2>
		<span>
			Two series normalized with different scales, with two different scaled Y-axis.
		</span>
	</div>
</section>

<section>
	<a href="logscale.html"><img src="screenshots/logscale.png"></a>
	<div>
		<h2><a href="logscale.html">Log and Absolute Scale</a></h2>
		<span>
			One series drawn using log and absolute scale on one graph.
		</span>
	</div>
</section>

<section>
	<a href="multi.html"><img src="screenshots/multi.png"></a>
	<div>
		<h2><a href="multi.html">Multiple Renderers</a></h2>
		<span>
			Bars, lines, area, and scatterplot graphs all in one setting.
		</span>
	</div>
</section>

<hr>
<br>
</div>

<script src="../js/footer.js"></script>