Permalink
Browse files

consolidate tutorial examples

  • Loading branch information...
1 parent 0424c17 commit e14776f24379e9f04d1bb41aaa3284111e427fad @dchester dchester committed Nov 23, 2011
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -1,76 +1,66 @@
<!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>
<div id="chart"></div>
</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>
Oops, something went wrong. Retry.

0 comments on commit e14776f

Please sign in to comment.