rickshaw/examples/index.html

Rickshaw is a JavaScript toolkit for creating interactive time series graphs, developed at [Shutterstock](http://www.shutterstock.com)

<!doctype>
<style>
body {
	width: 780px;
	margin: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #282828;
	line-height: 135%;
}
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;
}
span {
	clear: both;
	display: block;
}
.clear {
	clear: both;
}
#start {
	height: 70px;
}
hr {
	margin-bottom: 40px;
	border: none;
	border-bottom: 1px solid #e0e0e0;
}
</style>
<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 continously 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>

<hr>
<br>