Permalink
Fetching contributors…
Cannot retrieve contributors at this time
242 lines (219 sloc) 5.22 KB
<!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 implementation 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>