Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

consolidate tutorial examples

  • Loading branch information...
commit e14776f24379e9f04d1bb41aaa3284111e427fad 1 parent 0424c17
@dchester dchester authored
View
30 tutorial/example_01.html
@@ -1,28 +1,24 @@
<!doctype>
-<head>
- <script src="../vendor/d3.min.js"></script>
- <script src="../vendor/d3.layout.min.js"></script>
- <script src="../rickshaw.min.js"></script>
-</head>
-
-<body>
+<script src="/vendor/d3.min.js"></script>
+<script src="/vendor/d3.layout.min.js"></script>
+<script src="/rickshaw.min.js"></script>
<div id="chart"></div>
<script>
+
+var data = [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 17 }, { x: 3, y: 42 } ];
+
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
- width: 600,
- height: 400,
- series: [
- {
- data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
- color: 'steelblue'
- }
- ]
+ width: 580,
+ height: 250,
+ series: [ {
+ color: 'steelblue',
+ data: data
+ } ]
} );
graph.render();
-</script>
-</body>
+</script>
View
30 tutorial/example_02.html
@@ -1,28 +1,24 @@
<!doctype>
-<head>
- <script src="../vendor/d3.min.js"></script>
- <script src="../vendor/d3.layout.min.js"></script>
- <script src="../rickshaw.min.js"></script>
-</head>
-
-<body>
+<script src="/vendor/d3.min.js"></script>
+<script src="/vendor/d3.layout.min.js"></script>
+<script src="/rickshaw.min.js"></script>
<div id="chart"></div>
<script>
+
+var data = [ { x: 1910, y: 92228531 }, { x: 1920, y: 106021568 }, { x: 1930, y: 123202660 }, { x: 1940, y: 132165129 }, { x: 1950, y: 151325798 }, { x: 1960, y: 179323175 }, { x: 1970, y: 203211926 }, { x: 1980, y: 226545805 }, { x: 1990, y: 248709873 }, { x: 2000, y: 281421906 }, { x: 2010, y: 308745538 } ];
+
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
- width: 600,
- height: 400,
- series: [
- {
- data: [ { x: 1910, y: 92228531 }, { x: 1920, y: 106021568 }, { x: 1930, y: 123202660 }, { x: 1940, y: 132165129 }, { x: 1950, y: 151325798 }, { x: 1960, y: 179323175 }, { x: 1970, y: 203211926 }, { x: 1980, y: 226545805 }, { x: 1990, y: 248709873 }, { x: 2000, y: 281421906 }, { x: 2010, y: 308745538 } ],
- color: 'steelblue'
- }
- ]
+ width: 580,
+ height: 250,
+ series: [ {
+ color: 'steelblue',
+ data: data
+ } ]
} );
graph.render();
-</script>
-</body>
+</script>
View
35 tutorial/example_03.html
@@ -1,34 +1,27 @@
<!doctype>
-<head>
- <link type="text/css" rel="stylesheet" href="../rickshaw.min.css">
- <script src="../vendor/d3.min.js"></script>
- <script src="../vendor/d3.layout.min.js"></script>
- <script src="../rickshaw.min.js"></script>
-</head>
-
-<body>
+<link rel="stylesheet" href="/rickshaw.min.css">
+<script src="/vendor/d3.min.js"></script>
+<script src="/vendor/d3.layout.min.js"></script>
+<script src="/rickshaw.min.js"></script>
<div id="chart"></div>
<script>
+
+var data = [ { x: -1893456000, y: 92228531 }, { x: -1577923200, y: 106021568 }, { x: -1262304000, y: 123202660 }, { x: -946771200, y: 132165129 }, { x: -631152000, y: 151325798 }, { x: -315619200, y: 179323175 }, { x: 0, y: 203211926 }, { x: 315532800, y: 226545805 }, { x: 631152000, y: 248709873 }, { x: 946684800, y: 281421906 }, { x: 1262304000, y: 308745538 } ];
+
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
- width: 600,
- height: 400,
- series: [
- {
- data: [ { x: -1893456000, y: 92228531 }, { x: -1577923200, y: 106021568 }, { x: -1262304000, y: 123202660 }, { x: -946771200, y: 132165129 }, { x: -631152000, y: 151325798 }, { x: -315619200, y: 179323175 }, { x: 0, y: 203211926 }, { x: 315532800, y: 226545805 }, { x: 631152000, y: 248709873 }, { x: 946684800, y: 281421906 }, { x: 1262304000, y: 308745538 } ],
- color: 'steelblue'
- }
- ]
+ width: 580,
+ height: 250,
+ series: [ {
+ color: 'steelblue',
+ data: data
+ } ]
} );
-var axes = new Rickshaw.Graph.Axis.Time( {
- graph: graph
-} );
+var axes = new Rickshaw.Graph.Axis.Time( { graph: graph } );
graph.render();
</script>
-
-</body>
View
69 tutorial/example_04.html
@@ -1,32 +1,25 @@
<!doctype>
-<head>
- <link type="text/css" rel="stylesheet" href="../rickshaw.min.css">
- <script src="../vendor/d3.min.js"></script>
- <script src="../vendor/d3.layout.min.js"></script>
- <script src="../rickshaw.min.js"></script>
-
- <style>
- #chart {
- position: relative;
- left: 80px;
- }
- .rickshaw_graph .y_ticks {
- left: 0;
- }
- .rickshaw_graph .y_tick {
- stroke: #808080;
- }
- #y_axis {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 80px;
- }
- </style>
-
-</head>
-
-<body>
+<link type="text/css" rel="stylesheet" href="/rickshaw.min.css">
+<script src="/vendor/d3.min.js"></script>
+<script src="/vendor/d3.layout.min.js"></script>
+<script src="/rickshaw.min.js"></script>
+
+<style>
+#chart_container {
+ position: relative;
+ font-family: Arial, Helvetica, sans-serif;
+}
+#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>
@@ -36,19 +29,15 @@
<script>
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
- width: 600,
- height: 400,
- series: [
- {
- data: [ { x: -1893456000, y: 92228531 }, { x: -1577923200, y: 106021568 }, { x: -1262304000, y: 123202660 }, { x: -946771200, y: 132165129 }, { x: -631152000, y: 151325798 }, { x: -315619200, y: 179323175 }, { x: 0, y: 203211926 }, { x: 315532800, y: 226545805 }, { x: 631152000, y: 248709873 }, { x: 946684800, y: 281421906 }, { x: 1262304000, y: 308745538 } ],
- color: 'steelblue'
- }
- ]
+ width: 540,
+ height: 240,
+ series: [ {
+ data: [ { x: -1893456000, y: 92228531 }, { x: -1577923200, y: 106021568 }, { x: -1262304000, y: 123202660 }, { x: -946771200, y: 132165129 }, { x: -631152000, y: 151325798 }, { x: -315619200, y: 179323175 }, { x: 0, y: 203211926 }, { x: 315532800, y: 226545805 }, { x: 631152000, y: 248709873 }, { x: 946684800, y: 281421906 }, { x: 1262304000, y: 308745538 } ],
+ color: 'steelblue'
+ } ]
} );
-var x_axis = new Rickshaw.Graph.Axis.Time( {
- graph: graph
-} );
+var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );
var y_axis = new Rickshaw.Graph.Axis.Y( {
graph: graph,
@@ -60,5 +49,3 @@
graph.render();
</script>
-
-</body>
View
74 tutorial/example_05.html
@@ -1,32 +1,28 @@
<!doctype>
-<head>
- <link type="text/css" rel="stylesheet" href="../rickshaw.min.css">
- <script src="../vendor/d3.min.js"></script>
- <script src="../vendor/d3.layout.min.js"></script>
- <script src="../rickshaw.min.js"></script>
+<link type="text/css" rel="stylesheet" href="/rickshaw.min.css">
+<script src="/vendor/d3.min.js"></script>
+<script src="/vendor/d3.layout.min.js"></script>
+<script src="/rickshaw.min.js"></script>
- <style>
- #chart {
- position: relative;
- left: 80px;
- }
- .rickshaw_graph .y_ticks {
- left: 0;
- }
- .rickshaw_graph .y_tick {
- stroke: #808080;
- }
- #y_axis {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 80px;
- }
- </style>
-
-</head>
-
-<body>
+<style>
+#chart_container {
+ position: relative;
+ font-family: Arial, Helvetica, sans-serif;
+}
+#chart {
+ position: relative;
+ left: 40px;
+}
+.rickshaw_graph .y_ticks {
+ left: 0;
+}
+#y_axis {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 40px;
+}
+</style>
<div id="chart_container">
<div id="y_axis"></div>
@@ -34,43 +30,37 @@
</div>
<script>
-var palette = new Rickshaw.Color.Palette();
+ var palette = new Rickshaw.Color.Palette();
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
- width: 600,
- height: 400,
+ width: 540,
+ height: 250,
series: [
{
name: "Northeast",
data: [ { x: -1893456000, y: 25868573 }, { x: -1577923200, y: 29662053 }, { x: -1262304000, y: 34427091 }, { x: -946771200, y: 35976777 }, { x: -631152000, y: 39477986 }, { x: -315619200, y: 44677819 }, { x: 0, y: 49040703 }, { x: 315532800, y: 49135283 }, { x: 631152000, y: 50809229 }, { x: 946684800, y: 53594378 }, { x: 1262304000, y: 55317240 } ],
- color: "#018571"
- //color: palette.color)(
+ color: palette.color()
},
{
name: "Midwest",
data: [ { x: -1893456000, y: 29888542 }, { x: -1577923200, y: 34019792 }, { x: -1262304000, y: 38594100 }, { x: -946771200, y: 40143332 }, { x: -631152000, y: 44460762 }, { x: -315619200, y: 51619139 }, { x: 0, y: 56571663 }, { x: 315532800, y: 58865670 }, { x: 631152000, y: 59668632 }, { x: 946684800, y: 64392776 }, { x: 1262304000, y: 66927001 } ],
- color: "#DFC27D"
- //color: palette.color()
+ color: palette.color()
},
{
name: "South",
data: [ { x: -1893456000, y: 29389330 }, { x: -1577923200, y: 33125803 }, { x: -1262304000, y: 37857633 }, { x: -946771200, y: 41665901 }, { x: -631152000, y: 47197088 }, { x: -315619200, y: 54973113 }, { x: 0, y: 62795367 }, { x: 315532800, y: 75372362 }, { x: 631152000, y: 85445930 }, { x: 946684800, y: 100236820 }, { x: 1262304000, y: 114555744 } ],
- color: "#80CDC1"
- //color: palette.color()
+ color: palette.color()
},
{
name: "West",
data: [ { x: -1893456000, y: 7082086 }, { x: -1577923200, y: 9213920 }, { x: -1262304000, y: 12323836 }, { x: -946771200, y: 14379119 }, { x: -631152000, y: 20189962 }, { x: -315619200, y: 28053104 }, { x: 0, y: 34804193 }, { x: 315532800, y: 43172490 }, { x: 631152000, y: 52786082 }, { x: 946684800, y: 63197932 }, { x: 1262304000, y: 71945553 } ],
- color: "#A6611A"
- //color: palette.color()
+ color: palette.color()
}
]
} );
-var x_axis = new Rickshaw.Graph.Axis.Time( {
- graph: graph
-} );
+var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );
var y_axis = new Rickshaw.Graph.Axis.Y( {
graph: graph,
@@ -82,5 +72,3 @@
graph.render();
</script>
-
-</body>
View
70 tutorial/example_06.html
@@ -1,38 +1,31 @@
<!doctype>
-<head>
- <link type="text/css" rel="stylesheet" href="../rickshaw.min.css">
- <script src="../vendor/d3.min.js"></script>
- <script src="../vendor/d3.layout.min.js"></script>
- <script src="../rickshaw.min.js"></script>
+<link type="text/css" rel="stylesheet" href="/rickshaw.min.css">
+<script src="/vendor/d3.min.js"></script>
+<script src="/vendor/d3.layout.min.js"></script>
+<script src="/rickshaw.min.js"></script>
- <style>
- #chart_container {
- float: left;
- }
- #chart {
- left: 80px;
- }
- .rickshaw_graph .y_ticks {
- left: 0;
- }
- .rickshaw_graph .y_tick {
- stroke: #808080;
- }
- #y_axis {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 80px;
- }
- #legend {
- float: left;
- left: 100px;
- }
- </style>
-
-</head>
-
-<body>
+<style>
+#chart_container {
+ position: relative;
+ display: inline-block;
+ font-family: Arial, Helvetica, sans-serif;
+}
+#chart {
+ display: inline-block;
+ margin-left: 40px;
+}
+#y_axis {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 40px;
+}
+#legend {
+ display: inline-block;
+ vertical-align: top;
+ margin: 0 0 0 10px;
+}
+</style>
<div id="chart_container">
<div id="y_axis"></div>
@@ -40,14 +33,13 @@
</div>
<div id="legend"></div>
-
<script>
var palette = new Rickshaw.Color.Palette();
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
- width: 300,
- height: 230,
+ width: 550,
+ height: 250,
series: [
{
name: "Northeast",
@@ -72,9 +64,7 @@
]
} );
-var x_axis = new Rickshaw.Graph.Axis.Time( {
- graph: graph
-} );
+var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );
var y_axis = new Rickshaw.Graph.Axis.Y( {
graph: graph,
@@ -91,5 +81,3 @@
graph.render();
</script>
-
-</body>
View
136 tutorial/example_07.html
@@ -1,136 +1,91 @@
<!doctype>
-<head>
- <link type="text/css" rel="stylesheet" href="../rickshaw.min.css">
- <script src="../vendor/d3.min.js"></script>
- <script src="../vendor/d3.layout.min.js"></script>
- <script src="../rickshaw.min.js"></script>
+<link type="text/css" rel="stylesheet" href="/rickshaw.min.css">
+<script src="/vendor/d3.min.js"></script>
+<script src="/vendor/d3.layout.min.js"></script>
+<script src="/rickshaw.min.js"></script>
<style>
- #chart06_container {
- display: inline-block;
- }
- #chart06 {
- display: inline-block;
- }
- #legend06 {
- display: inline-block;
- margin-left: 42px;
- position: relative;
- bottom: 156px;
- }
- #offset_form06 {
- display: inline-block;
- position: relative;
- right: 116px;
- bottom: 86px;
- }
- .rickshaw_graph .y_ticks {
- left: 0;
- }
- .rickshaw_graph .y_tick {
- stroke: #808080;
- }
- #y_axis06 {
- float: left;
- width: 80px;
- }
- form.toggler {
- display: block;
- margin: 0;
- }
- form.toggler input[type=radio] {
- margin: 0 7px;
- width: 39px;
- height: 26px;
- position: absolute;
- -moz-appearance: button;
- }
- form.toggler label {
- display: inline-block;
- padding: 0;
- width: 39px;
- padding-top: 27px;
- text-align: center;
- font-size: 10px;
- color: #808080;
- background-repeat: no-repeat;
- position: relative;
- margin: 0 7px;
- cursor: pointer;
- }
- label[for=stack] {
- background: url(../examples/images/om_stack.png);
- }
- label[for=lines] {
- background: url(../examples/images/om_lines.png);
- }
+#chart_container {
+ display: inline-block;
+ font-family: Arial, Helvetica, sans-serif;
+}
+#chart {
+ float: left;
+}
+#legend {
+ float: left;
+ margin-left: 15px;
+}
+#offset_form {
+ float: left;
+ margin: 2em 0 0 15px;
+ font-size: 13px;
+}
+#y_axis {
+ float: left;
+ width: 40px;
+}
</style>
-</head>
-<body>
-<div id="tutorial-chart06-container">
-<div id="chart06_container">
- <div id="y_axis06"></div>
- <div id="chart06"></div>
- <div id="legend06"></div>
- <div id="offset_form06">
+<div id="chart_container">
+ <div id="y_axis"></div>
+ <div id="chart"></div>
+ <div id="legend"></div>
<form id="offset_form" class="toggler">
- <input type="radio" name="offset" id="stack" value="zero" checked>
+ <input type="radio" name="offset" id="lines" value="lines" checked>
+ <label class="lines" for="lines">lines</label><br>
+ <input type="radio" name="offset" id="stack" value="zero">
<label class="stack" for="stack">stack</label>
- <input type="radio" name="offset" id="lines" value="lines">
- <label class="lines" for="lines">lines</label>
</form>
- </div>
</div>
<script>
var palette = new Rickshaw.Color.Palette();
var graph = new Rickshaw.Graph( {
- element: document.querySelector("#chart06"),
- width: 300,
- height: 230,
+ element: document.querySelector("#chart"),
+ width: 540,
+ height: 240,
+ renderer: 'line',
series: [
{
name: "Northeast",
data: [ { x: -1893456000, y: 25868573 }, { x: -1577923200, y: 29662053 }, { x: -1262304000, y: 34427091 }, { x: -946771200, y: 35976777 }, { x: -631152000, y: 39477986 }, { x: -315619200, y: 44677819 }, { x: 0, y: 49040703 }, { x: 315532800, y: 49135283 }, { x: 631152000, y: 50809229 }, { x: 946684800, y: 53594378 }, { x: 1262304000, y: 55317240 } ],
- color: "#018571"
+ color: palette.color()
},
{
name: "Midwest",
data: [ { x: -1893456000, y: 29888542 }, { x: -1577923200, y: 34019792 }, { x: -1262304000, y: 38594100 }, { x: -946771200, y: 40143332 }, { x: -631152000, y: 44460762 }, { x: -315619200, y: 51619139 }, { x: 0, y: 56571663 }, { x: 315532800, y: 58865670 }, { x: 631152000, y: 59668632 }, { x: 946684800, y: 64392776 }, { x: 1262304000, y: 66927001 } ],
- color: "#DFC27D"
+ color: palette.color()
},
{
name: "South",
data: [ { x: -1893456000, y: 29389330 }, { x: -1577923200, y: 33125803 }, { x: -1262304000, y: 37857633 }, { x: -946771200, y: 41665901 }, { x: -631152000, y: 47197088 }, { x: -315619200, y: 54973113 }, { x: 0, y: 62795367 }, { x: 315532800, y: 75372362 }, { x: 631152000, y: 85445930 }, { x: 946684800, y: 100236820 }, { x: 1262304000, y: 114555744 } ],
- color: "#80CDC1"
+ color: palette.color()
},
{
name: "West",
data: [ { x: -1893456000, y: 7082086 }, { x: -1577923200, y: 9213920 }, { x: -1262304000, y: 12323836 }, { x: -946771200, y: 14379119 }, { x: -631152000, y: 20189962 }, { x: -315619200, y: 28053104 }, { x: 0, y: 34804193 }, { x: 315532800, y: 43172490 }, { x: 631152000, y: 52786082 }, { x: 946684800, y: 63197932 }, { x: 1262304000, y: 71945553 } ],
- color: "#A6611A"
+ color: palette.color()
}
]
} );
-var x_axis = new Rickshaw.Graph.Axis.Time( {
- graph: graph
-} );
+var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );
var y_axis = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
- element: document.getElementById('y_axis06'),
+ element: document.getElementById('y_axis'),
} );
var legend = new Rickshaw.Graph.Legend( {
- element: document.querySelector('#legend06'),
+ element: document.querySelector('#legend'),
graph: graph
} );
-var offsetForm = document.getElementById('offset_form06');
+var offsetForm = document.getElementById('offset_form');
offsetForm.addEventListener('change', function(e) {
var offsetMode = e.target.value;
@@ -142,11 +97,10 @@
graph.setRenderer('stack');
graph.offset = offsetMode;
}
- graph.update();
+ graph.render();
}, false);
graph.render();
+
</script>
-</div>
-</body>
View
1,089 tutorial/introduction.html
@@ -1,98 +1,47 @@
<!doctype>
<head>
+ <link rel="stylesheet" href="rickshaw.min.css">
+ <link rel="stylesheet" href="vendor/prettify/prettify.css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
+ <script src="vendor/prettify/prettify.js"></script>
<link rel="stylesheet" href="style.css">
- <link rel="stylesheet" href="../rickshaw.min.css">
- <script src="../vendor/d3.min.js"></script>
- <script src="../vendor/d3.layout.min.js"></script>
- <script src="../rickshaw.min.js"></script>
</head>
<body>
-<h1>Taking Rickshaw for a Drive</h1>
+<h1>Taking Rickshaw for a Go</h1>
<p>
-Rickshaw makes charting time series data easy.
-</p>
-
-<p>
-Building on top of Mike Bostock's
-delightful <a href="http://mbostock.github.com/d3/">d3.js</a> library,
Rickshaw is a simple framework for drawing charts of time series data
-on a web page. These charts can be powered by static historical data
-sets, or living data that continuously updates.
+on a web page, built on top of Mike Bostock's delightful
+<a href="http://mbostock.github.com/d3/">d3 library</a>. These charts
+can be powered by static historical data sets, or living data that
+continuously updates in real time.
</p>
<p>
-Rickshaw builds on top of d3.js technically, and spiritually too.
+Rickshaw builds on top of d3 technically, and spiritually too.
Rickshaw makes every effort to provide help for common problems
without obscuring anything underneath it. If you need to reach down
-to d3 or the svg layers below, it's just data.
+to d3 or the svg layers below, go right ahead -- it's all there waiting.
</p>
<p>
-Let's start with a simple but complete program that paints a chart.
+Let's start with a simple but complete program that paints a chart:
</p>
-<pre>
-&lt;!doctype&gt;
-&lt;head&gt;
-&lt;script src=&quot;../vendor/d3.min.js&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;../vendor/d3.layout.min.js&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;../rickshaw.min.js&quot;&gt;&lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-
-&lt;div id=&quot;chart&quot;&gt;&lt;/div&gt;
-
-&lt;script&gt;
-
-var graph = new Rickshaw.Graph( {
- element: document.querySelector(&quot;#chart&quot;),
- width: 300,
- height: 230,
- series: [
- {
- data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
- color: 'steelblue'
- }
- ]
-} );
-
-graph.render();
-&lt;/script&gt;
-
-&lt;/body&gt;
-</pre>
-
-<div class="tutorial-chart" id="tutorial-chart01-container">
-
-<div id="chart01"></div>
-
-<script>
-var graph = new Rickshaw.Graph( {
- element: document.querySelector("#chart01"),
- width: 300,
- height: 230,
- series: [
- {
- data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
- color: 'steelblue'
- }
- ]
-} );
-
-graph.render();
-</script>
-
-</div>
-
-<h2>Real Data</h2>
+<section class="example" id="example_01">
+ <header>
+ <a href="example_01.html" target="_blank">view</a>
+ <h3>Example 01</h3>
+ </header>
+ <iframe scrolling="no"></iframe>
+ <pre class="prettyprint"></pre>
+</section>
<p>
-Breaking that down a bit, we first pull in our dependancies and create
-a div to hold our chart. Then in our <code>script</code>
+Breaking that down, first we pull in our dependancies and create
+a div to hold our chart. Then in our <code>script</code> we
call <code>Rickshaw.Graph</code>'s constructor, and pass along an
element reference to our chart container, some layout instructions,
and a series of data objects.
@@ -101,21 +50,17 @@
<p>
The <code>series</code> object has a couple of slots,
a <code>data</code> array of coordinate objects, and a color to draw
-them with.
-</p>
-
-<p>
-Lastly, we call the render() method on our previously declared graph
-object, which creates paints our chart on the screen.
+them with. Finally, we call the render() method on our just instantiated
+graph object, which creates paints our chart on the screen.
</p>
+<h2>Let's Try with Real Data</h2>
<p>
Our previous work allowed us to paint a chart of made up values with
minimal scaffolding. That was fun, but it doesn't tell us anything
-interesting about data. Let's use population change data from the
-<a href="http://2010.census.gov/2010census/data/pop_change.csv">2010
-U.S. Census</a> to power our chart, and see what we find.
+interesting about data. Let's use <a href="http://2010.census.gov/2010census/data/pop_change.csv">population change data</a> from the
+2010 U.S. Census to power our chart, and see what we find.
</p>
<p>
@@ -123,78 +68,23 @@
population with a point for each decade from 1910 to 2010. We'll use
a short program to massage the CSV data at the census.gov URL into a
JavaScript data structure that <code>Rickshaw.Graph</code>'s constructor can take
-as its <code>data</code> argument:
+as its <code>data</code> argument.
</p>
-<br>
-<pre>
-% curl -s http://2010.census.gov/2010census/data/pop_change.csv | ./transform.pl
-</pre>
-
-(Our <a href="./transform01.pl">transform.pl</a> source.)
-
-outputs:
-
-<br>
-<pre>[ { x: 1910, y: 92228531 }, { x: 1920, y: 106021568 }, { x: 1930, y: 123202660 }, { x: 1940, y: 132165129 }, { x: 1950, y: 151325798 }, { x: 1960, y: 179323175 }, { x: 1970, y: 203211926 }, { x: 1980, y: 226545805 }, { x: 1990, y: 248709873 }, { x: 2000, y: 281421906 }, { x: 2010, y: 308745538 } ]</pre>
-
<p>
-which we can replace our previous data argument with.
+Piping that CSV data through <a href="transform.pl">transform.pl</a> gives
+us JSON data that we can take and feed into our graph below.
</p>
<br>
-<pre>
-&lt;!doctype&gt;
-&lt;head&gt;
-&lt;script src=&quot;../vendor/d3.min.js&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;../vendor/d3.layout.min.js&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;../rickshaw.min.js&quot;&gt;&lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-
-&lt;div id=&quot;chart&quot;&gt;&lt;/div&gt;
-
-&lt;script&gt;
-var graph = new Rickshaw.Graph( {
- element: document.querySelector(&quot;#chart&quot;),
- width: 300,
- height: 230,
- series: [
- {
- color: 'steelblue',
- data: [ { x: 1910, y: 92228531 }, { x: 1920, y: 106021568 }, { x: 1930, y: 123202660 }, { x: 1940, y: 132165129 }, { x: 1950, y: 151325798 }, { x: 1960, y: 179323175 }, { x: 1970, y: 203211926 }, { x: 1980, y: 226545805 }, { x: 1990, y: 248709873 }, { x: 2000, y: 281421906 }, { x: 2010, y: 308745538 } ]
- }
- ]
-} );
-
-graph.render();
-&lt;/script&gt;
-
-&lt;/body&gt;
-</pre>
-
-<div class="tutorial-chart" id="tutorial-chart02-container">
- <div id="chart02"></div>
-
- <script>
- var graph = new Rickshaw.Graph( {
- element: document.querySelector("#chart02"),
- height: 230,
- width: 300,
- series: [
- {
- color: 'steelblue',
- data: [ { x: 1910, y: 92228531 }, { x: 1920, y: 106021568 }, { x: 1930, y: 123202660 }, { x: 1940, y: 132165129 }, { x: 1950, y: 151325798 }, { x: 1960, y: 179323175 }, { x: 1970, y: 203211926 }, { x: 1980, y: 226545805 }, { x: 1990, y: 248709873 }, { x: 2000, y: 281421906 }, { x: 2010, y: 308745538 } ]
- }
- ]
- } );
-
- graph.render();
- </script>
-
- </div>
-</div>
+<section class="example" id="example_02">
+ <header>
+ <a href="example02.html" target="_blank">view</a>
+ <h3>Example 02</h3>
+ </header>
+ <iframe scrolling="no"></iframe>
+ <pre class="prettyprint linenums"></pre>
+</section>
<h2>Time on the X-Axis</h2>
@@ -217,74 +107,21 @@
included lines up the labels nicely across the bottom of our graph.
</p>
-(Our updated <a href="./transform02.pl">transform.pl</a> that uses
-epoch seconds for <code>x</code>.)
-
-<br>
-Combining this all brings our source listing and graph to:<br>
+<p>
+Our updated <a href="./transform_epoch.pl">transform_epoch.pl</a> uses epoch
+seconds for <code>x</code>. Let's see how we do.
+</p>
<br>
-<pre>
-&lt;!doctype&gt;
-&lt;head&gt;
- &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;../rickshaw.min.css&quot;&gt;
- &lt;script src=&quot;../vendor/d3.min.js&quot;&gt;&lt;/script&gt;
- &lt;script src=&quot;../vendor/d3.layout.min.js&quot;&gt;&lt;/script&gt;
- &lt;script src=&quot;../rickshaw.min.js&quot;&gt;&lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-
-&lt;div id=&quot;chart&quot;&gt;&lt;/div&gt;
-
-&lt;script&gt;
-var graph = new Rickshaw.Graph( {
- element: document.querySelector(&quot;#chart&quot;),
- width: 300,
- height: 230,
- series: [
- {
- data: [ { x: -1893456000, y: 92228531 }, { x: -1577923200, y: 106021568 }, { x: -1262304000, y: 123202660 }, { x: -946771200, y: 132165129 }, { x: -631152000, y: 151325798 }, { x: -315619200, y: 179323175 }, { x: 0, y: 203211926 }, { x: 315532800, y: 226545805 }, { x: 631152000, y: 248709873 }, { x: 946684800, y: 281421906 }, { x: 1262304000, y: 308745538 } ],
- color: 'steelblue'
- }
- ]
-} );
-
-var axes = new Rickshaw.Graph.Axis.Time( {
- graph: graph
-} );
-
-graph.render();
-
-&lt;/script&gt;
-
-&lt;/body&gt;
-</pre>
+<section class="example" id="example_03">
+ <header>
+ <a href="example_03.html" target="_blank">view</a>
+ <h3>Example 03</h3>
+ </header>
+ <iframe scrolling="no"></iframe>
+ <pre class="prettyprint linenums"></pre>
+</section>
-<div class="tutorial-chart" id="tutorial-chart03-container">
- <div id="chart03"></div>
-
- <script>
- var graph = new Rickshaw.Graph( {
- element: document.querySelector("#chart03"),
- width: 300,
- height: 230,
- series: [
- {
- data: [ { x: -1893456000, y: 92228531 }, { x: -1577923200, y: 106021568 }, { x: -1262304000, y: 123202660 }, { x: -946771200, y: 132165129 }, { x: -631152000, y: 151325798 }, { x: -315619200, y: 179323175 }, { x: 0, y: 203211926 }, { x: 315532800, y: 226545805 }, { x: 631152000, y: 248709873 }, { x: 946684800, y: 281421906 }, { x: 1262304000, y: 308745538 } ],
- color: 'steelblue'
- }
- ]
- } );
-
- var axes = new Rickshaw.Graph.Axis.Time( {
- graph: graph
- } );
-
- graph.render();
- </script>
- </div>
-</div>
<h2>Y-Axis Too</h2>
@@ -302,142 +139,24 @@
numbers on our <code>y</code> ticks in there.
</p>
+<section class="example" id="example_04">
+ <header>
+ <a href="example_04.html" target="_blank">view</a>
+ <h3>Example 04</h3>
+ </header>
+ <iframe scrolling="no"></iframe>
+ <pre class="prettyprint linenums"></pre>
+</section>
<br>
-<pre>
-&lt;!doctype&gt;
-&lt;head&gt;
- &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;../rickshaw.min.css&quot;&gt;
- &lt;script src=&quot;../vendor/d3.min.js&quot;&gt;&lt;/script&gt;
- &lt;script src=&quot;../vendor/d3.layout.min.js&quot;&gt;&lt;/script&gt;
- &lt;script src=&quot;../rickshaw.min.js&quot;&gt;&lt;/script&gt;
-
- &lt;style&gt;
- #chart {
- position: relative;
- left: 80px;
- }
- .rickshaw_graph .y_ticks {
- left: 0;
- }
- .rickshaw_graph .y_tick {
- stroke: #808080;
- }
- #y_axis {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 80px;
- }
- &lt;/style&gt;
-
-&lt;/head&gt;
-
-&lt;body&gt;
-
-&lt;div id=&quot;chart_container&quot;&gt;
- &lt;div id=&quot;y_axis&quot;&gt;&lt;/div&gt;
- &lt;div id=&quot;chart&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;script&gt;
-var graph = new Rickshaw.Graph( {
- element: document.querySelector(&quot;#chart&quot;),
- width: 300,
- height: 230,
- series: [
- {
- data: [ { x: -1893456000, y: 92228531 }, { x: -1577923200, y: 106021568 }, { x: -1262304000, y: 123202660 }, { x: -946771200, y: 132165129 }, { x: -631152000, y: 151325798 }, { x: -315619200, y: 179323175 }, { x: 0, y: 203211926 }, { x: 315532800, y: 226545805 }, { x: 631152000, y: 248709873 }, { x: 946684800, y: 281421906 }, { x: 1262304000, y: 308745538 } ],
- color: 'steelblue'
- }
- ]
-} );
-
-var x_axis = new Rickshaw.Graph.Axis.Time( {
- graph: graph
-} );
-
-var y_axis = new Rickshaw.Graph.Axis.Y( {
- graph: graph,
- orientation: 'left',
- tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
- element: document.getElementById('y_axis'),
-} );
-
-graph.render();
-
-&lt;/script&gt;
-
-&lt;/body&gt;
-
-</pre>
-
-<style>
- #chart04_container {
- display: inline-block;
- }
- #chart04 {
- display: inline-block;
- }
- .rickshaw_graph .y_ticks {
- left: 0;
- }
- .rickshaw_graph .y_tick {
- stroke: #808080;
- }
- #y_axis04 {
- float: left;
- width: 44px;
- }
-</style>
-
-<div class="tutorial-chart" id="tutorial-chart04-container">
- <div id="chart04_container">
- <div id="y_axis04"></div>
- <div id="chart04"></div>
- </div>
-
- <script>
- var graph = new Rickshaw.Graph( {
- element: document.querySelector("#chart04"),
- height: 230,
- series: [
- {
- data: [ { x: -1893456000, y: 92228531 }, { x: -1577923200, y: 106021568 }, { x: -1262304000, y: 123202660 }, { x: -946771200, y: 132165129 }, { x: -631152000, y: 151325798 }, { x: -315619200, y: 179323175 }, { x: 0, y: 203211926 }, { x: 315532800, y: 226545805 }, { x: 631152000, y: 248709873 }, { x: 946684800, y: 281421906 }, { x: 1262304000, y: 308745538 } ],
- color: 'steelblue'
- }
- ]
- } );
-
- var x_axis = new Rickshaw.Graph.Axis.Time( {
- graph: graph
- } );
-
- var y_axis = new Rickshaw.Graph.Axis.Y( {
- graph: graph,
- orientation: 'left',
- tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
- element: document.getElementById('y_axis04'),
- } );
-
- graph.render();
- </script>
-</div>
<h2>Breaking Things Down</h2>
<p>
-The Great Depression left a mark.
-</p>
-
-<p>
-We should break that data down by region. Some simple changes to our
-data transformation gives us the regional data for our series.
+The Great Depression left a mark. We should break that data down by
+region. Some simple changes to our data transformation gives us the
+regional data for our series. Here's <a href="transform_region.pl">transform_region.pl</a>.
</p>
-(A <a href="./transform03.pl">transform.pl</a> that breaks down by region.)
-
-<h2>Color Palettes</h2>
-
<p>
Plugging that data into our series parameter leaves us wanting to
provide colors for each of those individual series. We'll use the
@@ -447,163 +166,14 @@
</p>
<br>
-<pre>
-&lt;!doctype&gt;
-&lt;head&gt;
- &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;../rickshaw.min.css&quot;&gt;
- &lt;script src=&quot;../vendor/d3.min.js&quot;&gt;&lt;/script&gt;
- &lt;script src=&quot;../vendor/d3.layout.min.js&quot;&gt;&lt;/script&gt;
- &lt;script src=&quot;../rickshaw.min.js&quot;&gt;&lt;/script&gt;
-
- &lt;style&gt;
- #chart {
- position: relative;
- left: 80px;
- }
- .rickshaw_graph .y_ticks {
- left: 0;
- }
- .rickshaw_graph .y_tick {
- stroke: #808080;
- }
- #y_axis {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 80px;
- }
- &lt;/style&gt;
-
-&lt;/head&gt;
-
-&lt;body&gt;
-
-&lt;div id=&quot;chart_container&quot;&gt;
- &lt;div id=&quot;y_axis&quot;&gt;&lt;/div&gt;
- &lt;div id=&quot;chart&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;script&gt;
-var palette = new Rickshaw.Color.Palette();
-
-var graph = new Rickshaw.Graph( {
- element: document.querySelector(&quot;#chart&quot;),
- width: 300,
- height: 230,
- series: [
- {
- name: &quot;Northeast&quot;,
- data: [ { x: -1893456000, y: 25868573 }, { x: -1577923200, y: 29662053 }, { x: -1262304000, y: 34427091 }, { x: -946771200, y: 35976777 }, { x: -631152000, y: 39477986 }, { x: -315619200, y: 44677819 }, { x: 0, y: 49040703 }, { x: 315532800, y: 49135283 }, { x: 631152000, y: 50809229 }, { x: 946684800, y: 53594378 }, { x: 1262304000, y: 55317240 } ],
- color: palette.color()
- },
- {
- name: &quot;Midwest&quot;,
- data: [ { x: -1893456000, y: 29888542 }, { x: -1577923200, y: 34019792 }, { x: -1262304000, y: 38594100 }, { x: -946771200, y: 40143332 }, { x: -631152000, y: 44460762 }, { x: -315619200, y: 51619139 }, { x: 0, y: 56571663 }, { x: 315532800, y: 58865670 }, { x: 631152000, y: 59668632 }, { x: 946684800, y: 64392776 }, { x: 1262304000, y: 66927001 } ],
- color: palette.color()
- },
- {
- name: &quot;South&quot;,
- data: [ { x: -1893456000, y: 29389330 }, { x: -1577923200, y: 33125803 }, { x: -1262304000, y: 37857633 }, { x: -946771200, y: 41665901 }, { x: -631152000, y: 47197088 }, { x: -315619200, y: 54973113 }, { x: 0, y: 62795367 }, { x: 315532800, y: 75372362 }, { x: 631152000, y: 85445930 }, { x: 946684800, y: 100236820 }, { x: 1262304000, y: 114555744 } ],
- color: palette.color()
- },
- {
- name: &quot;West&quot;,
- data: [ { x: -1893456000, y: 7082086 }, { x: -1577923200, y: 9213920 }, { x: -1262304000, y: 12323836 }, { x: -946771200, y: 14379119 }, { x: -631152000, y: 20189962 }, { x: -315619200, y: 28053104 }, { x: 0, y: 34804193 }, { x: 315532800, y: 43172490 }, { x: 631152000, y: 52786082 }, { x: 946684800, y: 63197932 }, { x: 1262304000, y: 71945553 } ],
- color: palette.color()
- }
- ]
-} );
-
-var x_axis = new Rickshaw.Graph.Axis.Time( {
- graph: graph
-} );
-
-var y_axis = new Rickshaw.Graph.Axis.Y( {
- graph: graph,
- orientation: 'left',
- tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
- element: document.getElementById('y_axis'),
-} );
-
-graph.render();
-
-&lt;/script&gt;
-
-&lt;/body&gt;
-
-</pre>
-
-
-<style>
- #chart05_container {
- display: inline-block;
- }
- #chart05 {
- display: inline-block;
- }
- .rickshaw_graph .y_ticks {
- left: 0;
- }
- .rickshaw_graph .y_tick {
- stroke: #808080;
- }
- #y_axis05 {
- float: left;
- width: 80px;
- }
-</style>
-<div class="tutorial-chart" id="tutorial-chart05-container">
-<div id="chart05_container">
- <div id="y_axis05"></div>
- <div id="chart05"></div>
-</div>
-
-<script>
-var palette = new Rickshaw.Color.Palette();
-
-var graph = new Rickshaw.Graph( {
- element: document.querySelector("#chart05"),
- width: 300,
- height: 230,
- series: [
- {
- name: "Northeast",
- data: [ { x: -1893456000, y: 25868573 }, { x: -1577923200, y: 29662053 }, { x: -1262304000, y: 34427091 }, { x: -946771200, y: 35976777 }, { x: -631152000, y: 39477986 }, { x: -315619200, y: 44677819 }, { x: 0, y: 49040703 }, { x: 315532800, y: 49135283 }, { x: 631152000, y: 50809229 }, { x: 946684800, y: 53594378 }, { x: 1262304000, y: 55317240 } ],
- color: palette.color()
- },
- {
- name: "Midwest",
- data: [ { x: -1893456000, y: 29888542 }, { x: -1577923200, y: 34019792 }, { x: -1262304000, y: 38594100 }, { x: -946771200, y: 40143332 }, { x: -631152000, y: 44460762 }, { x: -315619200, y: 51619139 }, { x: 0, y: 56571663 }, { x: 315532800, y: 58865670 }, { x: 631152000, y: 59668632 }, { x: 946684800, y: 64392776 }, { x: 1262304000, y: 66927001 } ],
- color: palette.color()
- },
- {
- name: "South",
- data: [ { x: -1893456000, y: 29389330 }, { x: -1577923200, y: 33125803 }, { x: -1262304000, y: 37857633 }, { x: -946771200, y: 41665901 }, { x: -631152000, y: 47197088 }, { x: -315619200, y: 54973113 }, { x: 0, y: 62795367 }, { x: 315532800, y: 75372362 }, { x: 631152000, y: 85445930 }, { x: 946684800, y: 100236820 }, { x: 1262304000, y: 114555744 } ],
- color: palette.color()
- },
- {
- name: "West",
- data: [ { x: -1893456000, y: 7082086 }, { x: -1577923200, y: 9213920 }, { x: -1262304000, y: 12323836 }, { x: -946771200, y: 14379119 }, { x: -631152000, y: 20189962 }, { x: -315619200, y: 28053104 }, { x: 0, y: 34804193 }, { x: 315532800, y: 43172490 }, { x: 631152000, y: 52786082 }, { x: 946684800, y: 63197932 }, { x: 1262304000, y: 71945553 } ],
- color: palette.color()
- }
- ]
-} );
-
-var x_axis = new Rickshaw.Graph.Axis.Time( {
- graph: graph
-} );
-
-var y_axis = new Rickshaw.Graph.Axis.Y( {
- graph: graph,
- orientation: 'left',
- tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
- element: document.getElementById('y_axis05'),
-} );
-
-graph.render();
-
-</script>
-</div>
+<section class="example" id="example_05">
+ <header>
+ <a href="example_05.html" target="_blank">view</a>
+ <h3>Example 05</h3>
+ </header>
+ <iframe scrolling="no"></iframe>
+ <pre class="prettyprint linenums"></pre>
+</section>
<h2>What Are We Looking At?</h2>
@@ -615,187 +185,14 @@
</p>
<br>
-<pre>
-&lt;!doctype&gt;
-&lt;head&gt;
- &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;../rickshaw.min.css&quot;&gt;
- &lt;script src=&quot;../vendor/d3.min.js&quot;&gt;&lt;/script&gt;
- &lt;script src=&quot;../vendor/d3.layout.min.js&quot;&gt;&lt;/script&gt;
- &lt;script src=&quot;../rickshaw.min.js&quot;&gt;&lt;/script&gt;
-
- &lt;style&gt;
- #chart_container {
- float: left;
- }
- #chart {
- left: 80px;
- }
- .rickshaw_graph .y_ticks {
- left: 0;
- }
- .rickshaw_graph .y_tick {
- stroke: #808080;
- }
- #y_axis {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 80px;
- }
- #legend {
- float: left;
- left: 100px;
- }
- &lt;/style&gt;
-
-&lt;/head&gt;
-
-&lt;body&gt;
-
-&lt;div id=&quot;chart_container&quot;&gt;
- &lt;div id=&quot;y_axis&quot;&gt;&lt;/div&gt;
- &lt;div id=&quot;chart&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;
-&lt;div id=&quot;legend&quot;&gt;&lt;/div&gt;
-
-
-&lt;script&gt;
-var palette = new Rickshaw.Color.Palette();
-
-var graph = new Rickshaw.Graph( {
- element: document.querySelector(&quot;#chart&quot;),
- width: 300,
- height: 230,
- series: [
- {
- name: &quot;Northeast&quot;,
- data: [ { x: -1893456000, y: 25868573 }, { x: -1577923200, y: 29662053 }, { x: -1262304000, y: 34427091 }, { x: -946771200, y: 35976777 }, { x: -631152000, y: 39477986 }, { x: -315619200, y: 44677819 }, { x: 0, y: 49040703 }, { x: 315532800, y: 49135283 }, { x: 631152000, y: 50809229 }, { x: 946684800, y: 53594378 }, { x: 1262304000, y: 55317240 } ],
- color: "#018571"
- },
- {
- name: &quot;Midwest&quot;,
- data: [ { x: -1893456000, y: 29888542 }, { x: -1577923200, y: 34019792 }, { x: -1262304000, y: 38594100 }, { x: -946771200, y: 40143332 }, { x: -631152000, y: 44460762 }, { x: -315619200, y: 51619139 }, { x: 0, y: 56571663 }, { x: 315532800, y: 58865670 }, { x: 631152000, y: 59668632 }, { x: 946684800, y: 64392776 }, { x: 1262304000, y: 66927001 } ],
- color: "#DFC27D"
- },
- {
- name: &quot;South&quot;,
- data: [ { x: -1893456000, y: 29389330 }, { x: -1577923200, y: 33125803 }, { x: -1262304000, y: 37857633 }, { x: -946771200, y: 41665901 }, { x: -631152000, y: 47197088 }, { x: -315619200, y: 54973113 }, { x: 0, y: 62795367 }, { x: 315532800, y: 75372362 }, { x: 631152000, y: 85445930 }, { x: 946684800, y: 100236820 }, { x: 1262304000, y: 114555744 } ],
- color: "#80CDC1"
- },
- {
- name: &quot;West&quot;,
- data: [ { x: -1893456000, y: 7082086 }, { x: -1577923200, y: 9213920 }, { x: -1262304000, y: 12323836 }, { x: -946771200, y: 14379119 }, { x: -631152000, y: 20189962 }, { x: -315619200, y: 28053104 }, { x: 0, y: 34804193 }, { x: 315532800, y: 43172490 }, { x: 631152000, y: 52786082 }, { x: 946684800, y: 63197932 }, { x: 1262304000, y: 71945553 } ],
- color: "#A6611A"
- }
- ]
-} );
-
-var x_axis = new Rickshaw.Graph.Axis.Time( {
- graph: graph
-} );
-
-var y_axis = new Rickshaw.Graph.Axis.Y( {
- graph: graph,
- orientation: 'left',
- tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
- element: document.getElementById('y_axis'),
-} );
-
-var legend = new Rickshaw.Graph.Legend( {
- element: document.querySelector('#legend'),
- graph: graph
-} );
-
-graph.render();
-
-&lt;/script&gt;
-
-&lt;/body&gt;
-
-</pre>
-
-
-<style>
- #chart06_container {
- display: inline-block;
- }
- #chart06 {
- display: inline-block;
- }
- #legend06 {
- display: inline-block;
- margin-left: 42px;
- position: relative;
- bottom: 156px;
- }
- .rickshaw_graph .y_ticks {
- left: 0;
- }
- .rickshaw_graph .y_tick {
- stroke: #808080;
- }
- #y_axis06 {
- float: left;
- width: 80px;
- }
-</style>
-
-<div class="tutorial-chart" id="tutorial-chart06-container">
-<div id="chart06_container">
- <div id="y_axis06"></div>
- <div id="chart06"></div>
- <div id="legend06"></div>
-</div>
-
-<script>
-var palette = new Rickshaw.Color.Palette();
-
-var graph = new Rickshaw.Graph( {
- element: document.querySelector("#chart06"),
- height: 230,
- series: [
- {
- name: "Northeast",
- data: [ { x: -1893456000, y: 25868573 }, { x: -1577923200, y: 29662053 }, { x: -1262304000, y: 34427091 }, { x: -946771200, y: 35976777 }, { x: -631152000, y: 39477986 }, { x: -315619200, y: 44677819 }, { x: 0, y: 49040703 }, { x: 315532800, y: 49135283 }, { x: 631152000, y: 50809229 }, { x: 946684800, y: 53594378 }, { x: 1262304000, y: 55317240 } ],
- color: "#018571"
- },
- {
- name: "Midwest",
- data: [ { x: -1893456000, y: 29888542 }, { x: -1577923200, y: 34019792 }, { x: -1262304000, y: 38594100 }, { x: -946771200, y: 40143332 }, { x: -631152000, y: 44460762 }, { x: -315619200, y: 51619139 }, { x: 0, y: 56571663 }, { x: 315532800, y: 58865670 }, { x: 631152000, y: 59668632 }, { x: 946684800, y: 64392776 }, { x: 1262304000, y: 66927001 } ],
- color: "#DFC27D"
- },
- {
- name: "South",
- data: [ { x: -1893456000, y: 29389330 }, { x: -1577923200, y: 33125803 }, { x: -1262304000, y: 37857633 }, { x: -946771200, y: 41665901 }, { x: -631152000, y: 47197088 }, { x: -315619200, y: 54973113 }, { x: 0, y: 62795367 }, { x: 315532800, y: 75372362 }, { x: 631152000, y: 85445930 }, { x: 946684800, y: 100236820 }, { x: 1262304000, y: 114555744 } ],
- color: "#80CDC1"
- },
- {
- name: "West",
- data: [ { x: -1893456000, y: 7082086 }, { x: -1577923200, y: 9213920 }, { x: -1262304000, y: 12323836 }, { x: -946771200, y: 14379119 }, { x: -631152000, y: 20189962 }, { x: -315619200, y: 28053104 }, { x: 0, y: 34804193 }, { x: 315532800, y: 43172490 }, { x: 631152000, y: 52786082 }, { x: 946684800, y: 63197932 }, { x: 1262304000, y: 71945553 } ],
- color: "#A6611A"
- }
- ]
-} );
-
-var x_axis = new Rickshaw.Graph.Axis.Time( {
- graph: graph
-} );
-
-var y_axis = new Rickshaw.Graph.Axis.Y( {
- graph: graph,
- orientation: 'left',
- tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
- element: document.getElementById('y_axis06'),
-} );
-
-var legend = new Rickshaw.Graph.Legend( {
- element: document.querySelector('#legend06'),
- graph: graph
-} );
-
-graph.render();
-</script>
-</div>
+<section class="example" id="example_06">
+ <header>
+ <a href="example_06.html" target="_blank">view</a>
+ <h3>Example 06</h3>
+ </header>
+ <iframe scrolling="no"></iframe>
+ <pre class="prettyprint linenums"></pre>
+</section>
<h2>Unstacking</h2>
@@ -807,315 +204,55 @@
</p>
<br>
-<pre>
-&lt;!doctype&gt;
-&lt;head&gt;
- &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;../rickshaw.min.css&quot;&gt;
- &lt;script src=&quot;../vendor/d3.min.js&quot;&gt;&lt;/script&gt;
- &lt;script src=&quot;../vendor/d3.layout.min.js&quot;&gt;&lt;/script&gt;
- &lt;script src=&quot;../rickshaw.min.js&quot;&gt;&lt;/script&gt;
+<section class="example" id="example_07">
+ <header>
+ <a href="example_07.html" target="_blank">view</a>
+ <h3>Example 07</h3>
+ </header>
+ <iframe scrolling="no"></iframe>
+ <pre class="prettyprint"></pre>
+</section>
-&lt;style&gt;
- #chart_container {
- display: inline-block;
- }
- #chart {
- display: inline-block;
- }
- #legend {
- display: inline-block;
- margin-left: 42px;
- position: relative;
- bottom: 156px;
- }
- #offset_form {
- display: inline-block;
- position: relative;
- right: 116px;
- bottom: 86px;
- }
- .rickshaw_graph .y_ticks {
- left: 0;
- }
- .rickshaw_graph .y_tick {
- stroke: #808080;
- }
- #y_axis {
- float: left;
- width: 80px;
- }
- form.toggler {
- display: block;
- margin: 0;
- }
- form.toggler input[type=radio] {
- margin: 0 7px;
- width: 39px;
- height: 26px;
- position: absolute;
- -moz-appearance: button;
- }
- form.toggler label {
- display: inline-block;
- padding: 0;
- width: 39px;
- padding-top: 27px;
- text-align: center;
- font-size: 10px;
- color: #808080;
- background-repeat: no-repeat;
- position: relative;
- margin: 0 7px;
- cursor: pointer;
- }
- label[for=stack] {
- background: url(../examples/images/om_stack.png);
- }
- label[for=lines] {
- background: url(../examples/images/om_lines.png);
- }
-&lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-&lt;div id=&quot;tutorial-chart-container&quot;&gt;
-&lt;div id=&quot;chart_container&quot;&gt;
- &lt;div id=&quot;y_axis&quot;&gt;&lt;/div&gt;
- &lt;div id=&quot;chart&quot;&gt;&lt;/div&gt;
- &lt;div id=&quot;legend&quot;&gt;&lt;/div&gt;
- &lt;div id=&quot;offset_form&quot;&gt;
- &lt;form id=&quot;offset_form&quot; class=&quot;toggler&quot;&gt;
- &lt;input type=&quot;radio&quot; name=&quot;offset&quot; id=&quot;stack&quot; value=&quot;zero&quot;&gt;
- &lt;label class=&quot;stack&quot; for=&quot;stack&quot;&gt;stack&lt;/label&gt;
- &lt;input type=&quot;radio&quot; name=&quot;offset&quot; id=&quot;lines&quot; value=&quot;lines&quot; checked&gt;
- &lt;label class=&quot;lines&quot; for=&quot;lines&quot;&gt;lines&lt;/label&gt;
- &lt;/form&gt;
- &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;script&gt;
-var palette = new Rickshaw.Color.Palette();
-
-var graph = new Rickshaw.Graph( {
- element: document.querySelector(&quot;#chart&quot;),
- width: 300,
- height: 230,
- renderer: 'line',
- series: [
- {
- name: &quot;Northeast&quot;,
- data: [ { x: -1893456000, y: 25868573 }, { x: -1577923200, y: 29662053 }, { x: -1262304000, y: 34427091 }, { x: -946771200, y: 35976777 }, { x: -631152000, y: 39477986 }, { x: -315619200, y: 44677819 }, { x: 0, y: 49040703 }, { x: 315532800, y: 49135283 }, { x: 631152000, y: 50809229 }, { x: 946684800, y: 53594378 }, { x: 1262304000, y: 55317240 } ],
- color: &quot;#018571&quot;
- },
- {
- name: &quot;Midwest&quot;,
- data: [ { x: -1893456000, y: 29888542 }, { x: -1577923200, y: 34019792 }, { x: -1262304000, y: 38594100 }, { x: -946771200, y: 40143332 }, { x: -631152000, y: 44460762 }, { x: -315619200, y: 51619139 }, { x: 0, y: 56571663 }, { x: 315532800, y: 58865670 }, { x: 631152000, y: 59668632 }, { x: 946684800, y: 64392776 }, { x: 1262304000, y: 66927001 } ],
- color: &quot;#DFC27D&quot;
- },
- {
- name: &quot;South&quot;,
- data: [ { x: -1893456000, y: 29389330 }, { x: -1577923200, y: 33125803 }, { x: -1262304000, y: 37857633 }, { x: -946771200, y: 41665901 }, { x: -631152000, y: 47197088 }, { x: -315619200, y: 54973113 }, { x: 0, y: 62795367 }, { x: 315532800, y: 75372362 }, { x: 631152000, y: 85445930 }, { x: 946684800, y: 100236820 }, { x: 1262304000, y: 114555744 } ],
- color: &quot;#80CDC1&quot;
- },
- {
- name: &quot;West&quot;,
- data: [ { x: -1893456000, y: 7082086 }, { x: -1577923200, y: 9213920 }, { x: -1262304000, y: 12323836 }, { x: -946771200, y: 14379119 }, { x: -631152000, y: 20189962 }, { x: -315619200, y: 28053104 }, { x: 0, y: 34804193 }, { x: 315532800, y: 43172490 }, { x: 631152000, y: 52786082 }, { x: 946684800, y: 63197932 }, { x: 1262304000, y: 71945553 } ],
- color: &quot;#A6611A&quot;
- }
- ]
-} );
-
-var x_axis = new Rickshaw.Graph.Axis.Time( {
- graph: graph
-} );
-
-var y_axis = new Rickshaw.Graph.Axis.Y( {
- graph: graph,
- orientation: 'left',
- tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
- element: document.getElementById('y_axis'),
-} );
-
-var legend = new Rickshaw.Graph.Legend( {
- element: document.querySelector('#legend'),
- graph: graph
-} );
-
-var offsetForm = document.getElementById('offset_form');
+<h2>More Later</h2>
-offsetForm.addEventListener('change', function(e) {
- var offsetMode = e.target.value;
+<p>
+We're just getting started, but that's all for today. Next time we'll
+get into stacked bars, and different line interpolations, and smoothing,
+and zooming.
+</p>
- if (offsetMode == 'lines') {
- graph.setRenderer('line');
- graph.offset = 'zero';
- } else {
- graph.setRenderer('stack');
- graph.offset = offsetMode;
- }
- graph.update();
+<p>
+If you're clamoring for more, you may enjoy a poke around in the
+<a href="../examples/">examples</a> directory.
+</p>
-}, false);
+<br><br>
+<script>
+var sections = document.querySelectorAll('section.example');
-graph.render();
-&lt;/script&gt;
-&lt;/div&gt;
-&lt;/body&gt;
+var htmlEntities = function(str) {
+ return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
-</pre>
+Array.prototype.forEach.call(sections, function(s) {
-<style>
- #chart07_container {
- display: inline-block;
- }
- #chart07 {
- display: inline-block;
- }
- #legend07 {
- display: inline-block;
- margin-left: 42px;
- position: relative;
- bottom: 156px;
- }
- #offset_form07 {
- display: inline-block;
- position: relative;
- right: 116px;
- bottom: 86px;
- }
- .rickshaw_graph .y_ticks {
- left: 0;
- }
- .rickshaw_graph .y_tick {
- stroke: #808080;
- }
- #y_axis07 {
- float: left;
- width: 80px;
- }
- form.toggler {
- display: block;
- margin: 0;
- }
- form.toggler input[type=radio] {
- margin: 0 7px;
- width: 39px;
- height: 26px;
- position: absolute;
- -moz-appearance: button;
- }
- form.toggler label {
- display: inline-block;
- padding: 0;
- width: 39px;
- padding-top: 27px;
- text-align: center;
- font-size: 10px;
- color: #808080;
- background-repeat: no-repeat;
- position: relative;
- margin: 0 7px;
- cursor: pointer;
- }
- label[for=stack] {
- background: url(../examples/images/om_stack.png);
- }
- label[for=lines] {
- background: url(../examples/images/om_lines.png);
- }
-</style>
-</head>
+ var code = s.querySelector('pre');
+ var iframe = s.querySelector('iframe');
+ var anchor = s.querySelector('a');
-<body>
-<div class="tutorial-chart" id="tutorial-chart07-container">
-<div id="chart07_container">
- <div id="y_axis07"></div>
- <div id="chart07"></div>
- <div id="legend07"></div>
- <div id="offset_form07">
- <form id="offset_form" class="toggler">
- <input type="radio" name="offset" id="stack" value="zero">
- <label class="stack" for="stack">stack</label>
- <input type="radio" name="offset" id="lines" value="lines" checked>
- <label class="lines" for="lines">lines</label>
- </form>
- </div>
-</div>
+ var exampleURL = s.getAttribute('id') + ".html";
-<script>
-var palette = new Rickshaw.Color.Palette();
+ iframe.src = exampleURL;
-var graph = new Rickshaw.Graph( {
- element: document.querySelector("#chart07"),
- width: 300,
- height: 230,
- renderer: 'line',
- series: [
- {
- name: "Northeast",
- data: [ { x: -1893456000, y: 25868573 }, { x: -1577923200, y: 29662053 }, { x: -1262304000, y: 34427091 }, { x: -946771200, y: 35976777 }, { x: -631152000, y: 39477986 }, { x: -315619200, y: 44677819 }, { x: 0, y: 49040703 }, { x: 315532800, y: 49135283 }, { x: 631152000, y: 50809229 }, { x: 946684800, y: 53594378 }, { x: 1262304000, y: 55317240 } ],
- color: "#018571"
- },
- {
- name: "Midwest",
- data: [ { x: -1893456000, y: 29888542 }, { x: -1577923200, y: 34019792 }, { x: -1262304000, y: 38594100 }, { x: -946771200, y: 40143332 }, { x: -631152000, y: 44460762 }, { x: -315619200, y: 51619139 }, { x: 0, y: 56571663 }, { x: 315532800, y: 58865670 }, { x: 631152000, y: 59668632 }, { x: 946684800, y: 64392776 }, { x: 1262304000, y: 66927001 } ],
- color: "#DFC27D"
- },
- {
- name: "South",
- data: [ { x: -1893456000, y: 29389330 }, { x: -1577923200, y: 33125803 }, { x: -1262304000, y: 37857633 }, { x: -946771200, y: 41665901 }, { x: -631152000, y: 47197088 }, { x: -315619200, y: 54973113 }, { x: 0, y: 62795367 }, { x: 315532800, y: 75372362 }, { x: 631152000, y: 85445930 }, { x: 946684800, y: 100236820 }, { x: 1262304000, y: 114555744 } ],
- color: "#80CDC1"
- },
- {
- name: "West",
- data: [ { x: -1893456000, y: 7082086 }, { x: -1577923200, y: 9213920 }, { x: -1262304000, y: 12323836 }, { x: -946771200, y: 14379119 }, { x: -631152000, y: 20189962 }, { x: -315619200, y: 28053104 }, { x: 0, y: 34804193 }, { x: 315532800, y: 43172490 }, { x: 631152000, y: 52786082 }, { x: 946684800, y: 63197932 }, { x: 1262304000, y: 71945553 } ],
- color: "#A6611A"
+ $.ajax( {
+ url: exampleURL,
+ success: function(r) {
+ code.innerHTML = htmlEntities(r);
+ code.innerHTML = prettyPrintOne(code.innerHTML);
}
- ]
-} );
-
-var x_axis = new Rickshaw.Graph.Axis.Time( {
- graph: graph
-} );
-
-var y_axis = new Rickshaw.Graph.Axis.Y( {
- graph: graph,
- orientation: 'left',
- tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
- element: document.getElementById('y_axis07'),
-} );
+ } );
-var legend = new Rickshaw.Graph.Legend( {
- element: document.querySelector('#legend07'),
- graph: graph
} );
-var offsetForm = document.getElementById('offset_form07');
-
-offsetForm.addEventListener('change', function(e) {
- var offsetMode = e.target.value;
-
- if (offsetMode == 'lines') {
- graph.setRenderer('line');
- graph.offset = 'zero';
- } else {
- graph.setRenderer('stack');
- graph.offset = offsetMode;
- }
- graph.update();
-
-}, false);
-
-graph.render();
</script>
-</div>
-
-<h2>More Later</h2>
-
-<p>
-That's all for today. If you're clamoring for more, you may enjoy a
-poke around in the <a href="../examples">examples</a> directory.
-</p>
-
-<br><br>
</body>
View
76 tutorial/style.css
@@ -1,34 +1,82 @@
body {
- width: 800px;
+ width: 780px;
margin: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #282828;
+ line-height: 135%;
}
-pre {
- padding: 0.5em;
- background: #f4f4f4;
- border: 1px solid #eaeaea;
- white-space: pre-wrap;
- display: inline-block;
- vertical-align: top;
+a {
+ text-decoration: none;
+ color: steelblue;
+}
+a:hover {
+ color: lightblue;
}
h1 {
- margin: 0 0 0.2em 0;
+ margin: 1em 0 1em 0;
font-weight: normal;
}
h2 {
font-weight: normal;
- margin: 1em 0 0.2em 0;
+ margin: 1.4em 0 1em 0;
+ color: black;
}
.tutorial-chart {
margin-left: 1%;
vertical-align: top;
margin-top: 1em;
}
-#tutorial-chart04-container,
-#tutorial-chart05-container,
-#tutorial-chart06-container,
-#tutorial-chart07-container {
+code {
+ background-color: #f0f0f0;
+ padding: 2px;
+}
+section.example {
+ border: 1px solid #e4e4e4;
+}
+
+pre.prettyprint {
+ border: none;
+ border-top: 1px solid #e8e8e8;
+ background: #f0f0f0;
+ padding: 14px 14px;
+ margin: 0;
+ white-space: pre-wrap;
+}
+section iframe {
+ width: 580px;
+ height: 270px;
border: none;
+ margin: 0 auto 12px auto;
+ display: block;
+}
+section header {
+ border-bottom: 1px solid #e8e8e8;
+ color: #b0b0b0;
+ margin: 0 0 16px 0;
+}
+section header a:hover {
+ color: steelblue;
+}
+section header a {
+ color: #d0d0d0;
+ text-decoration: none;
+ margin: 6px 10px 0 0;
+}
+section header h3 {
+ font-weight: normal;
+ margin: 0 0 10px 0;
+ position: relative;
+ padding: 6px 0 0 8px;
+ pointer-events: none;
+}
+section header a {
+ float: right;
+}
+.linenums {
+ color: #d0d0d0;
+}
+#example_06 iframe,
+#example_07 iframe {
+ width: 750px;
}
View
28 tutorial/vendor/prettify/prettify.css
@@ -0,0 +1,28 @@
+/* Pretty printing styles. Used with prettify.js. */
+
+.str { color: #080; }
+.kwd { color: #008; }
+.com { color: #800; }
+.typ { color: #606; }
+.lit { color: #066; }
+.pun { color: #660; }
+.pln { color: #000; }
+.tag { color: #008; }
+.atn { color: #606; }
+.atv { color: #080; }
+.dec { color: #606; }
+pre.prettyprint { padding: 2px; border: 1px solid #888; }
+
+@media print {
+ .str { color: #060; }
+ .kwd { color: #006; font-weight: bold; }
+ .com { color: #600; font-style: italic; }
+ .typ { color: #404; font-weight: bold; }
+ .lit { color: #044; }
+ .pun { color: #440; }
+ .pln { color: #000; }
+ .tag { color: #006; font-weight: bold; }
+ .atn { color: #404; }
+ .atv { color: #060; }
+}
+
View
1,479 tutorial/vendor/prettify/prettify.js
@@ -0,0 +1,1479 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ * <p>
+ *
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source. At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles. It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ * {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules. See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ * {@code class=prettyprint.}
+ * You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ * printer needs to do more substantial DOM manipulations to support that, so
+ * some css styles may not be preserved.
+ * </ol>
+ * That's it. I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}. Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ * Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ * @overrides window
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+/** the number of characters between tab columns */
+window['PR_TAB_WIDTH'] = 8;
+
+/** Walks the DOM returning a properly escaped version of innerHTML.
+ * @param {Node} node
+ * @param {Array.<string>} out output buffer that receives chunks of HTML.
+ */
+window['PR_normalizedHtml']
+
+/** Contains functions for creating and registering new language handlers.
+ * @type {Object}
+ */
+ = window['PR']
+
+/** Pretty print a chunk of code.
+ *
+ * @param {string} sourceCodeHtml code as html
+ * @return {string} code as html, but prettier
+ */
+ = window['prettyPrintOne']
+/** Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+ * {@code class=prettyprint} and prettify them.
+ * @param {Function?} opt_whenDone if specified, called when the last entry
+ * has been finished.
+ */
+ = window['prettyPrint'] = void 0;
+
+/** browser detection. @extern @returns false if not IE, otherwise the major version. */
+window['_pr_isIE6'] = function () {
+ var ieVersion = navigator && navigator.userAgent &&
+ navigator.userAgent.match(/\bMSIE ([678])\./);
+ ieVersion = ieVersion ? +ieVersion[1] : false;
+ window['_pr_isIE6'] = function () { return ieVersion; };
+ return ieVersion;
+};
+
+
+(function () {
+ // Keyword lists for various languages.
+ var FLOW_CONTROL_KEYWORDS =
+ "break continue do else for if return while ";
+ var C_KEYWORDS = FLOW_CONTROL_KEYWORDS + "auto case char const default " +
+ "double enum extern float goto int long register short signed sizeof " +
+ "static struct switch typedef union unsigned void volatile ";
+ var COMMON_KEYWORDS = C_KEYWORDS + "catch class delete false import " +
+ "new operator private protected public this throw true try typeof ";
+ var CPP_KEYWORDS = COMMON_KEYWORDS + "alignof align_union asm axiom bool " +
+ "concept concept_map const_cast constexpr decltype " +
+ "dynamic_cast explicit export friend inline late_check " +
+ "mutable namespace nullptr reinterpret_cast static_assert static_cast " +
+ "template typeid typename using virtual wchar_t where ";
+ var JAVA_KEYWORDS = COMMON_KEYWORDS +
+ "abstract boolean byte extends final finally implements import " +
+ "instanceof null native package strictfp super synchronized throws " +
+ "transient ";
+ var CSHARP_KEYWORDS = JAVA_KEYWORDS +
+ "as base by checked decimal delegate descending event " +
+ "fixed foreach from group implicit in interface internal into is lock " +
+ "object out override orderby params partial readonly ref sbyte sealed " +
+ "stackalloc string select uint ulong unchecked unsafe ushort var ";
+ var JSCRIPT_KEYWORDS = COMMON_KEYWORDS +
+ "debugger eval export function get null set undefined var with " +
+ "Infinity NaN ";
+ var PERL_KEYWORDS = "caller delete die do dump elsif eval exit foreach for " +
+ "goto if import last local my next no our print package redo require " +
+ "sub undef unless until use wantarray while BEGIN END ";
+ var PYTHON_KEYWORDS = FLOW_CONTROL_KEYWORDS + "and as assert class def del " +
+ "elif except exec finally from global import in is lambda " +
+ "nonlocal not or pass print raise try with yield " +
+ "False True None ";
+ var RUBY_KEYWORDS = FLOW_CONTROL_KEYWORDS + "alias and begin case class def" +
+ " defined elsif end ensure false in module next nil not or redo rescue " +
+ "retry self super then true undef unless until when yield BEGIN END ";
+ var SH_KEYWORDS = FLOW_CONTROL_KEYWORDS + "case done elif esac eval fi " +
+ "function in local set then until ";
+ var ALL_KEYWORDS = (
+ CPP_KEYWORDS + CSHARP_KEYWORDS + JSCRIPT_KEYWORDS + PERL_KEYWORDS +
+ PYTHON_KEYWORDS + RUBY_KEYWORDS + SH_KEYWORDS);
+
+ // token style names. correspond to css classes
+ /** token style for a string literal */
+ var PR_STRING = 'str';
+ /** token style for a keyword */
+ var PR_KEYWORD = 'kwd';
+ /** token style for a comment */
+ var PR_COMMENT = 'com';
+ /** token style for a type */
+ var PR_TYPE = 'typ';
+ /** token style for a literal value. e.g. 1, null, true. */
+ var PR_LITERAL = 'lit';
+ /** token style for a punctuation string. */
+ var PR_PUNCTUATION = 'pun';
+ /** token style for a punctuation string. */
+ var PR_PLAIN = 'pln';
+
+ /** token style for an sgml tag. */
+ var PR_TAG = 'tag';
+ /** token style for a markup declaration such as a DOCTYPE. */
+ var PR_DECLARATION = 'dec';
+ /** token style for embedded source. */
+ var PR_SOURCE = 'src';
+ /** token style for an sgml attribute name. */
+ var PR_ATTRIB_NAME = 'atn';
+ /** token style for an sgml attribute value. */
+ var PR_ATTRIB_VALUE = 'atv';
+
+ /**
+ * A class that indicates a section of markup that is not code, e.g. to allow
+ * embedding of line numbers within code listings.
+ */
+ var PR_NOCODE = 'nocode';
+
+ /** A set of tokens that can precede a regular expression literal in
+ * javascript.
+ * http://www.mozilla.org/js/language/js20/rationale/syntax.html has the full
+ * list, but I've removed ones that might be problematic when seen in
+ * languages that don't support regular expression literals.
+ *
+ * <p>Specifically, I've removed any keywords that can't precede a regexp
+ * literal in a syntactically legal javascript program, and I've removed the
+ * "in" keyword since it's not a keyword in many languages, and might be used
+ * as a count of inches.
+ *
+ * <p>The link a above does not accurately describe EcmaScript rules since
+ * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+ * very well in practice.
+ *
+ * @private
+ */
+ var REGEXP_PRECEDER_PATTERN = function () {
+ var preceders = [
+ "!", "!=", "!==", "#", "%", "%=", "&", "&&", "&&=",
+ "&=", "(", "*", "*=", /* "+", */ "+=", ",", /* "-", */ "-=",
+ "->", /*".", "..", "...", handled below */ "/", "/=", ":", "::", ";",
+ "<", "<<", "<<=", "<=", "=", "==", "===", ">",
+ ">=", ">>", ">>=", ">>>", ">>>=", "?", "@", "[",
+ "^", "^=", "^^", "^^=", "{", "|", "|=", "||",
+ "||=", "~" /* handles =~ and !~ */,
+ "break", "case", "continue", "delete",
+ "do", "else", "finally", "instanceof",
+ "return", "throw", "try", "typeof"
+ ];
+ var pattern = '(?:^^|[+-]';
+ for (var i = 0; i < preceders.length; ++i) {
+ pattern += '|' + preceders[i].replace(/([^=<>:&a-z])/g, '\\$1');
+ }
+ pattern += ')\\s*'; // matches at end, and matches empty string
+ return pattern;
+ // CAVEAT: this does not properly handle the case where a regular
+ // expression immediately follows another since a regular expression may
+ // have flags for case-sensitivity and the like. Having regexp tokens
+ // adjacent is not valid in any language I'm aware of, so I'm punting.
+ // TODO: maybe style special characters inside a regexp as punctuation.
+ }();
+
+ // Define regexps here so that the interpreter doesn't have to create an
+ // object each time the function containing them is called.