Current state
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
<!doctype>
|
||||
<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: 580,
|
||||
height: 250,
|
||||
series: [ {
|
||||
color: 'steelblue',
|
||||
data: data
|
||||
} ]
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,24 @@
|
||||
<!doctype>
|
||||
<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: 580,
|
||||
height: 250,
|
||||
series: [ {
|
||||
color: 'steelblue',
|
||||
data: data
|
||||
} ]
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!doctype>
|
||||
<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: 580,
|
||||
height: 250,
|
||||
series: [ {
|
||||
color: 'steelblue',
|
||||
data: data
|
||||
} ]
|
||||
} );
|
||||
|
||||
var axes = new Rickshaw.Graph.Axis.Time( { graph: graph } );
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!doctype>
|
||||
<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>
|
||||
<div id="chart"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.querySelector("#chart"),
|
||||
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 y_axis = new Rickshaw.Graph.Axis.Y( {
|
||||
graph: graph,
|
||||
orientation: 'left',
|
||||
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
|
||||
element: document.getElementById('y_axis'),
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!doctype>
|
||||
<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;
|
||||
}
|
||||
.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 graph = new Rickshaw.Graph( {
|
||||
element: document.querySelector("#chart"),
|
||||
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: 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_axis'),
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!doctype>
|
||||
<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;
|
||||
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>
|
||||
<div id="chart"></div>
|
||||
</div>
|
||||
<div id="legend"></div>
|
||||
|
||||
<script>
|
||||
var palette = new Rickshaw.Color.Palette();
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.querySelector("#chart"),
|
||||
width: 550,
|
||||
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: 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_axis'),
|
||||
} );
|
||||
|
||||
var legend = new Rickshaw.Graph.Legend( {
|
||||
element: document.querySelector('#legend'),
|
||||
graph: graph
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
106
public/assets/plugins/charts-rickshaw/tutorial/example_07.html
Normal file
106
public/assets/plugins/charts-rickshaw/tutorial/example_07.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<!doctype>
|
||||
<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 {
|
||||
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>
|
||||
|
||||
<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="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>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var palette = new Rickshaw.Color.Palette();
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
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: 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_axis'),
|
||||
} );
|
||||
|
||||
var legend = new Rickshaw.Graph.Legend( {
|
||||
element: document.querySelector('#legend'),
|
||||
graph: graph
|
||||
} );
|
||||
|
||||
var offsetForm = document.getElementById('offset_form');
|
||||
|
||||
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.render();
|
||||
|
||||
}, false);
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
259
public/assets/plugins/charts-rickshaw/tutorial/introduction.html
Normal file
259
public/assets/plugins/charts-rickshaw/tutorial/introduction.html
Normal file
@@ -0,0 +1,259 @@
|
||||
<!doctype>
|
||||
<head>
|
||||
<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">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Taking Rickshaw for a Go</h1>
|
||||
|
||||
<p>
|
||||
Rickshaw is a simple framework for drawing charts of time series data
|
||||
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 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, go right ahead -- it's all there waiting.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Let's start with a simple but complete program that paints a chart:
|
||||
</p>
|
||||
|
||||
<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, first we pull in our dependencies 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.
|
||||
</p>
|
||||
|
||||
<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. 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 <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>
|
||||
We'll begin by drawing a line representing the United States
|
||||
population with a point for each decade from 1910 to 2010. We'll use
|
||||
a short <a href="transform.pl">script</a> we've written 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.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
<section class="example" id="example_02">
|
||||
<header>
|
||||
<a href="example_02.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>
|
||||
|
||||
<p>
|
||||
A trained eye can already see some points of interest there. For
|
||||
instance, ending about a quarter way into the graph there is a short
|
||||
period where the growth rate flattens out significantly. What
|
||||
happened then?
|
||||
</p>
|
||||
|
||||
<p>
|
||||
First we have to answer the question of when the flattening happened.
|
||||
Putting a label on our x axis should help. Rickshaw gives us a helper
|
||||
for time based axes. After we modify our data transformation script
|
||||
to use epoch seconds for the <code>x</code> values we can pass our
|
||||
graph along to <code>Rickshaw.Graph.Axis.Time</code>'s constructor.
|
||||
When the graph's <code>render()</code> function is later called
|
||||
Rickshaw examines the <code>x</code> domain and determines the time
|
||||
unit being used, and labels the graph accordingly. The styling we
|
||||
included lines up the labels nicely across the bottom of our graph.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
||||
<h2>Y-Axis Too</h2>
|
||||
|
||||
<p>
|
||||
Now let's add the pieces to get a <code>y</code> axis. We need a new
|
||||
HTML element to put the <code>y</code> axis in, as well as some
|
||||
styling to position the axis absolutely in relation to the chart.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
We pass along a reference to our graph to
|
||||
<code>Rickshaw.Graph.Axis.Y</code>'s constructor, as well as the
|
||||
element we want to draw the axis inside. We also ask
|
||||
<code>Rickshaw.Fixtures.Number.formatKMBT</code> to help us format the
|
||||
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>
|
||||
|
||||
<h2>Breaking Things Down</h2>
|
||||
|
||||
<p>
|
||||
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>
|
||||
|
||||
<p>
|
||||
Plugging that data into our series parameter leaves us wanting to
|
||||
provide colors for each of those individual series. We'll use the
|
||||
<code>Rickshaw.Color.Palette</code> plugin to pick our colors. Once
|
||||
we've created our palette, calling its <code>color()</code> method
|
||||
returns the next color.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
<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>
|
||||
|
||||
<p>
|
||||
We need a legend! Following a familiar pattern, we add a container
|
||||
div for the legend and style it. Then we call the constructor for the
|
||||
<code>Rickshaw.Graph.Legend</code> plugin, which takes a reference to
|
||||
our newly added DOM element, and a reference to the graph.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
<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>
|
||||
|
||||
<p>
|
||||
It's clear that the South is growing quickly, but instead of painting
|
||||
this chart as a stacked graph it would be nice to see how these growth
|
||||
patterns line up against each other. We set the renderer in a
|
||||
callback, and then ask the graph to update.
|
||||
</p>
|
||||
<p>
|
||||
In addition to setting the default renderer for the graph, we've added
|
||||
a little JavaScript to observe clicks between our stack/line toggle
|
||||
whose job is to update the type of renderer we're using and render the
|
||||
graph appropriately.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
<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>
|
||||
|
||||
<h2>More Later</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<p>
|
||||
If you're clamoring for more, you may enjoy a poke around in the
|
||||
<a href="../examples/">examples</a> directory.
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
<script>
|
||||
var sections = document.querySelectorAll('section.example');
|
||||
|
||||
var htmlEntities = function(str) {
|
||||
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||||
}
|
||||
|
||||
Array.prototype.forEach.call(sections, function(s) {
|
||||
|
||||
var code = s.querySelector('pre');
|
||||
var iframe = s.querySelector('iframe');
|
||||
var anchor = s.querySelector('a');
|
||||
|
||||
var exampleURL = s.getAttribute('id') + ".html";
|
||||
|
||||
iframe.src = exampleURL;
|
||||
|
||||
$.ajax( {
|
||||
url: exampleURL,
|
||||
success: function(r) {
|
||||
code.innerHTML = htmlEntities(r);
|
||||
code.innerHTML = prettyPrintOne(code.innerHTML);
|
||||
}
|
||||
} );
|
||||
|
||||
} );
|
||||
|
||||
</script>
|
||||
</body>
|
||||
82
public/assets/plugins/charts-rickshaw/tutorial/style.css
Normal file
82
public/assets/plugins/charts-rickshaw/tutorial/style.css
Normal file
@@ -0,0 +1,82 @@
|
||||
body {
|
||||
width: 780px;
|
||||
margin: auto;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 13px;
|
||||
color: #282828;
|
||||
line-height: 135%;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: steelblue;
|
||||
}
|
||||
a:hover {
|
||||
color: lightblue;
|
||||
}
|
||||
h1 {
|
||||
margin: 1em 0 1em 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
margin: 1.4em 0 1em 0;
|
||||
color: black;
|
||||
}
|
||||
.tutorial-chart {
|
||||
margin-left: 1%;
|
||||
vertical-align: top;
|
||||
margin-top: 1em;
|
||||
}
|
||||
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;
|
||||
}
|
||||
25
public/assets/plugins/charts-rickshaw/tutorial/transform.pl
Normal file
25
public/assets/plugins/charts-rickshaw/tutorial/transform.pl
Normal file
@@ -0,0 +1,25 @@
|
||||
#!/usr/bin/env perl
|
||||
|
||||
use warnings;
|
||||
use strict;
|
||||
|
||||
my @header;
|
||||
my $data;
|
||||
|
||||
while (<>) {
|
||||
|
||||
# the third line is the header
|
||||
if ($. == 3) {
|
||||
# and we want the years
|
||||
@header = map { m/^(\d{4})/; $1; }
|
||||
(split ',')[1..11];
|
||||
}
|
||||
|
||||
if (m/^United States/) {
|
||||
my $i = -1;
|
||||
$data = "[ " . join(", ", map { "{ x: $header[++$i], y: $_ }" } (split ',')[1..11]) . " ]";
|
||||
last;
|
||||
}
|
||||
}
|
||||
|
||||
print $data;
|
||||
@@ -0,0 +1,32 @@
|
||||
#!/usr/bin/env perl
|
||||
|
||||
use warnings;
|
||||
use strict;
|
||||
|
||||
use Time::Local 'timegm';
|
||||
|
||||
my @header;
|
||||
my $data;
|
||||
|
||||
while (<>) {
|
||||
|
||||
# the third line is the header
|
||||
if ($. == 3) {
|
||||
# and we want the years in epoch seconds
|
||||
@header = map { m/^(\d{4})/; year_to_seconds($1); }
|
||||
(split ',')[1..11];
|
||||
}
|
||||
|
||||
if (m/^United States/) {
|
||||
my $i = -1;
|
||||
$data = "[ " . join(", ", map { "{ x: $header[++$i], y: $_ }" } (split ',')[1..11]) . " ]";
|
||||
last;
|
||||
}
|
||||
}
|
||||
|
||||
sub year_to_seconds {
|
||||
my $year = shift;
|
||||
return timegm(0, 0, 0, 1, 0, $year);
|
||||
}
|
||||
|
||||
print $data;
|
||||
@@ -0,0 +1,34 @@
|
||||
#!/usr/bin/env perl
|
||||
|
||||
use warnings;
|
||||
use strict;
|
||||
|
||||
use Time::Local 'timegm';
|
||||
|
||||
my @header;
|
||||
my $data;
|
||||
|
||||
while (<>) {
|
||||
|
||||
# the third line is the header
|
||||
if ($. == 3) {
|
||||
# and we want the years in epoch seconds
|
||||
@header = map { m/^(\d{4})/; year_to_seconds($1); }
|
||||
(split ',')[1..11];
|
||||
}
|
||||
|
||||
if (m/^(Northeast|Midwest|South|West)/) {
|
||||
my $i = -1;
|
||||
$data .= "\n{\n\tname: \"$1\",\n";
|
||||
$data .= "\tdata: [ " . join(", ", map { "{ x: $header[++$i], y: $_ }" } (split ',')[1..11]) . " ],\n\n},";
|
||||
}
|
||||
|
||||
chop $data && last if m/^Alabama/; # we have what we need now.
|
||||
}
|
||||
|
||||
sub year_to_seconds {
|
||||
my $year = shift;
|
||||
return timegm(0, 0, 0, 1, 0, $year);
|
||||
}
|
||||
|
||||
print "$data\n";
|
||||
28
public/assets/plugins/charts-rickshaw/tutorial/vendor/prettify/prettify.css
vendored
Normal file
28
public/assets/plugins/charts-rickshaw/tutorial/vendor/prettify/prettify.css
vendored
Normal file
@@ -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; }
|
||||
}
|
||||
|
||||
1479
public/assets/plugins/charts-rickshaw/tutorial/vendor/prettify/prettify.js
vendored
Normal file
1479
public/assets/plugins/charts-rickshaw/tutorial/vendor/prettify/prettify.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user