Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

155 lines (143 sloc) 3.327 kb
<!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>
Jump to Line
Something went wrong with that request. Please try again.