Current state
This commit is contained in:
44
public/assets/plugins/charts-rickshaw/examples/ajax.html
Normal file
44
public/assets/plugins/charts-rickshaw/examples/ajax.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!doctype>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="chart_container">
|
||||
<div id="chart"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
var ajaxGraph = new Rickshaw.Graph.Ajax( {
|
||||
|
||||
element: document.getElementById("chart"),
|
||||
width: 400,
|
||||
height: 200,
|
||||
renderer: 'line',
|
||||
dataURL: 'data/data.json',
|
||||
onData: function(d) { d[0].data[0].y = 80; return d },
|
||||
series: [
|
||||
{
|
||||
name: 'New York',
|
||||
color: '#c05020',
|
||||
}, {
|
||||
name: 'London',
|
||||
color: '#30c020',
|
||||
}, {
|
||||
name: 'Tokyo',
|
||||
color: '#6060c0'
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
52
public/assets/plugins/charts-rickshaw/examples/bars.html
Normal file
52
public/assets/plugins/charts-rickshaw/examples/bars.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!doctype>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="chart"></div>
|
||||
|
||||
<script>
|
||||
|
||||
// set up our data series with 50 random data points
|
||||
|
||||
var seriesData = [ [], [], [] ];
|
||||
var random = new Rickshaw.Fixtures.RandomData(150);
|
||||
|
||||
for (var i = 0; i < 70; i++) {
|
||||
random.addData(seriesData);
|
||||
}
|
||||
|
||||
// instantiate our graph!
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
width: 960,
|
||||
height: 500,
|
||||
renderer: 'bar',
|
||||
series: [
|
||||
{
|
||||
color: "#c05020",
|
||||
data: seriesData[0],
|
||||
}, {
|
||||
color: "#30c020",
|
||||
data: seriesData[1],
|
||||
}, {
|
||||
color: "#6060c0",
|
||||
data: seriesData[2],
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
88
public/assets/plugins/charts-rickshaw/examples/colors.html
Normal file
88
public/assets/plugins/charts-rickshaw/examples/colors.html
Normal file
@@ -0,0 +1,88 @@
|
||||
<!doctype>
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="../rickshaw.min.js"></script>
|
||||
|
||||
<style>
|
||||
section {
|
||||
width: 300px;
|
||||
height: 250px;
|
||||
float: left;
|
||||
margin: 16px;
|
||||
}
|
||||
section div {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
span {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #808080;
|
||||
display: inline-block;
|
||||
margin: 4px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<script>
|
||||
|
||||
var schemes = [
|
||||
'spectrum14',
|
||||
'colorwheel',
|
||||
'cool',
|
||||
'spectrum2000',
|
||||
'spectrum2001',
|
||||
'classic9',
|
||||
'munin'
|
||||
];
|
||||
|
||||
schemes.forEach( function(name) {
|
||||
|
||||
var palette = new Rickshaw.Color.Palette( { scheme: name } );
|
||||
|
||||
var seriesData = [];
|
||||
|
||||
palette.scheme.forEach( function() {
|
||||
seriesData.push([]);
|
||||
} );
|
||||
|
||||
var random = new Rickshaw.Fixtures.RandomData(150);
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
random.addData(seriesData);
|
||||
}
|
||||
|
||||
var section = document.createElement('section');
|
||||
var element = document.createElement('div');
|
||||
var caption = document.createElement('span');
|
||||
|
||||
caption.innerHTML = name;
|
||||
|
||||
section.appendChild(element);
|
||||
section.appendChild(caption);
|
||||
document.body.appendChild(section);
|
||||
|
||||
var series = [];
|
||||
|
||||
seriesData.forEach( function(s) {
|
||||
series.push( {
|
||||
data: s,
|
||||
color: palette.color()
|
||||
} );
|
||||
} );
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: element,
|
||||
series: series
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
} );
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
@@ -0,0 +1,167 @@
|
||||
#chart {
|
||||
display: inline-block;
|
||||
}
|
||||
#chart path {
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
}
|
||||
#preview {
|
||||
margin-top: 10px;
|
||||
}
|
||||
#legend {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 8px;
|
||||
}
|
||||
#legend_container {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 26px;
|
||||
width: 0;
|
||||
}
|
||||
#chart_container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
#smoother {
|
||||
margin: 0 0 10px 16px;
|
||||
width: 100px;
|
||||
}
|
||||
.rickshaw_graph .detail {
|
||||
left: -1000;
|
||||
}
|
||||
#chart {
|
||||
border: none;
|
||||
width: 100%
|
||||
}
|
||||
#side_panel {
|
||||
padding: 0 20px 20px 0;
|
||||
width: 240px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
#side_panel section {
|
||||
color: #505050;
|
||||
font-size: 12px;
|
||||
}
|
||||
#side_panel section h6 {
|
||||
margin: 0 0 1em 0;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
#side_panel .ui-slider-horizontal {
|
||||
height: 1px !important;
|
||||
border-color: #e0e0e0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#side_panel .ui-slider-handle {
|
||||
border-color: #a0a0a0;
|
||||
height: 9px !important;
|
||||
width: 9px !important;
|
||||
top: -5px !important;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
#legend {
|
||||
background-color: white;
|
||||
margin-left: 0;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
}
|
||||
#legend .label {
|
||||
color: #404040;
|
||||
}
|
||||
#legend .action {
|
||||
color: black;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#legend ul {
|
||||
padding: 0;
|
||||
}
|
||||
#smoother {
|
||||
margin: 5px 0 0 10px;
|
||||
width: 90%;
|
||||
}
|
||||
#renderer_form.toggler {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
#renderer_form.toggler input[type=radio]:checked {
|
||||
outline: 2px solid steelblue;
|
||||
}
|
||||
#renderer_form.toggler input[type=radio] {
|
||||
-moz-appearance: button;
|
||||
background: white;
|
||||
margin: 0 7px;
|
||||
width: 39px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
#renderer_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;
|
||||
}
|
||||
#interpolation_form,
|
||||
#offset_form {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
width: 45%;
|
||||
}
|
||||
#interpolation_form label,
|
||||
#offset_form label {
|
||||
display: block;
|
||||
}
|
||||
label[for=area] {
|
||||
background: url(../images/om_stack.png);
|
||||
}
|
||||
label[for=line] {
|
||||
background: url(../images/om_lines.png);
|
||||
}
|
||||
label[for=bar] {
|
||||
background: url(../images/om_bar.png);
|
||||
}
|
||||
label[for=scatter] {
|
||||
background: url(../images/om_scatter.png);
|
||||
}
|
||||
#offset_form label,
|
||||
#interpolation_form label {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2em center;
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
#offset_form label span,
|
||||
#interpolation_form label span {
|
||||
padding-left: 36px;
|
||||
}
|
||||
label[for=stack] {
|
||||
background-image: url(../images/offset_stack.png);
|
||||
}
|
||||
label[for=pct] {
|
||||
background-image: url(../images/offset_pct.png);
|
||||
}
|
||||
label[for=stream] {
|
||||
background-image: url(../images/offset_stream.png);
|
||||
}
|
||||
label[for=value] {
|
||||
background-image: url(../images/offset_value.png);
|
||||
}
|
||||
label[for=cardinal] {
|
||||
background-image: url(../images/interp_cardinal.png);
|
||||
}
|
||||
label[for=linear] {
|
||||
background-image: url(../images/interp_linear.png);
|
||||
}
|
||||
label[for=step] {
|
||||
background-image: url(../images/interp_step.png);
|
||||
}
|
||||
21
public/assets/plugins/charts-rickshaw/examples/css/lines.css
Normal file
21
public/assets/plugins/charts-rickshaw/examples/css/lines.css
Normal file
@@ -0,0 +1,21 @@
|
||||
div, span, p, td {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
#chart {
|
||||
display: inline-block;
|
||||
}
|
||||
#legend {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 8px;
|
||||
}
|
||||
#legend_container {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 26px;
|
||||
width: 0;
|
||||
}
|
||||
#chart_container {
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"color": "blue",
|
||||
"name": "New York",
|
||||
"data": [ { "x": 0, "y": 40 }, { "x": 1, "y": 49 }, { "x": 2, "y": 38 }, { "x": 3, "y": 30 }, { "x": 4, "y": 32 } ]
|
||||
}, {
|
||||
"name": "London",
|
||||
"data": [ { "x": 0, "y": 19 }, { "x": 1, "y": 22 }, { "x": 2, "y": 29 }, { "x": 3, "y": 20 }, { "x": 4, "y": 14 } ]
|
||||
}, {
|
||||
"name": "Tokyo",
|
||||
"data": [ { "x": 0, "y": 8 }, { "x": 1, "y": 12 }, { "x": 2, "y": 15 }, { "x": 3, "y": 11 }, { "x": 4, "y": 10 } ]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
callback([
|
||||
{
|
||||
'color': 'blue',
|
||||
'name': 'London',
|
||||
'data': [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
|
||||
}, {
|
||||
'name': 'New York',
|
||||
'data': [ { x: 0, y: 19 }, { x: 1, y: 22 }, { x: 2, y: 29 }, { x: 3, y: 20 }, { x: 4, y: 14 } ],
|
||||
}, {
|
||||
'name': 'Tokyo',
|
||||
'data': [ { x: 0, y: 8 }, { x: 1, y: 12 }, { x: 2, y: 15 }, { x: 3, y: 11 }, { x: 4, y: 10 } ],
|
||||
}
|
||||
]);
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"color": "blue",
|
||||
"name": "New York",
|
||||
"data": [ { "x": 0, "y": 50 }, { "x": 1, "y": 32 }, { "x": 2, "y": 38 }, { "x": 3, "y": 30 }, { "x": 4, "y": 32 } ]
|
||||
}, {
|
||||
"name": "London",
|
||||
"data": [ { "x": 0, "y": 19 }, { "x": 1, "y": 76 }, { "x": 2, "y": 28 }, { "x": 3, "y": 20 }, { "x": 4, "y": 14 } ]
|
||||
}, {
|
||||
"name": "Tokyo",
|
||||
"data": [ { "x": 0, "y": 8 }, { "x": 1, "y": 12 }, { "x": 2, "y": 14 }, { "x": 3, "y": 11 }, { "x": 4, "y": 28 } ]
|
||||
}
|
||||
]
|
||||
|
||||
File diff suppressed because one or more lines are too long
280
public/assets/plugins/charts-rickshaw/examples/extensions.html
Normal file
280
public/assets/plugins/charts-rickshaw/examples/extensions.html
Normal file
@@ -0,0 +1,280 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/extensions.css?v=2">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
||||
<script>
|
||||
jQuery.noConflict();
|
||||
</script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
|
||||
|
||||
<script src="../src/js/Rickshaw.js"></script>
|
||||
<script src="../src/js/Rickshaw.Class.js"></script>
|
||||
<script src="../src/js/Rickshaw.Compat.ClassList.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Renderer.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Renderer.Area.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Renderer.Line.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Renderer.Bar.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Renderer.ScatterPlot.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Renderer.Stack.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.RangeSlider.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.RangeSlider.Preview.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.HoverDetail.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Annotate.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Legend.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Axis.Time.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Behavior.Series.Toggle.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Behavior.Series.Order.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Behavior.Series.Highlight.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Smoother.js"></script>
|
||||
<script src="../src/js/Rickshaw.Fixtures.Time.js"></script>
|
||||
<script src="../src/js/Rickshaw.Fixtures.Time.Local.js"></script>
|
||||
<script src="../src/js/Rickshaw.Fixtures.Number.js"></script>
|
||||
<script src="../src/js/Rickshaw.Fixtures.RandomData.js"></script>
|
||||
<script src="../src/js/Rickshaw.Fixtures.Color.js"></script>
|
||||
<script src="../src/js/Rickshaw.Color.Palette.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Axis.Y.js"></script>
|
||||
|
||||
<script src="js/extensions.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="content">
|
||||
|
||||
<form id="side_panel">
|
||||
<h1>Random Data in the Future</h1>
|
||||
<section><div id="legend"></div></section>
|
||||
<section>
|
||||
<div id="renderer_form" class="toggler">
|
||||
<input type="radio" name="renderer" id="area" value="area" checked>
|
||||
<label for="area">area</label>
|
||||
<input type="radio" name="renderer" id="bar" value="bar">
|
||||
<label for="bar">bar</label>
|
||||
<input type="radio" name="renderer" id="line" value="line">
|
||||
<label for="line">line</label>
|
||||
<input type="radio" name="renderer" id="scatter" value="scatterplot">
|
||||
<label for="scatter">scatter</label>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div id="offset_form">
|
||||
<label for="stack">
|
||||
<input type="radio" name="offset" id="stack" value="zero" checked>
|
||||
<span>stack</span>
|
||||
</label>
|
||||
<label for="stream">
|
||||
<input type="radio" name="offset" id="stream" value="wiggle">
|
||||
<span>stream</span>
|
||||
</label>
|
||||
<label for="pct">
|
||||
<input type="radio" name="offset" id="pct" value="expand">
|
||||
<span>pct</span>
|
||||
</label>
|
||||
<label for="value">
|
||||
<input type="radio" name="offset" id="value" value="value">
|
||||
<span>value</span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="interpolation_form">
|
||||
<label for="cardinal">
|
||||
<input type="radio" name="interpolation" id="cardinal" value="cardinal" checked>
|
||||
<span>cardinal</span>
|
||||
</label>
|
||||
<label for="linear">
|
||||
<input type="radio" name="interpolation" id="linear" value="linear">
|
||||
<span>linear</span>
|
||||
</label>
|
||||
<label for="step">
|
||||
<input type="radio" name="interpolation" id="step" value="step-after">
|
||||
<span>step</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h6>Smoothing</h6>
|
||||
<div id="smoother"></div>
|
||||
</section>
|
||||
<section></section>
|
||||
</form>
|
||||
|
||||
<div id="chart_container">
|
||||
<div id="chart"></div>
|
||||
<div id="timeline"></div>
|
||||
<div id="preview"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// set up our data series with 150 random data points
|
||||
|
||||
var seriesData = [ [], [], [], [], [], [], [], [], [] ];
|
||||
var random = new Rickshaw.Fixtures.RandomData(150);
|
||||
|
||||
for (var i = 0; i < 150; i++) {
|
||||
random.addData(seriesData);
|
||||
}
|
||||
|
||||
var palette = new Rickshaw.Color.Palette( { scheme: 'classic9' } );
|
||||
|
||||
// instantiate our graph!
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
width: 900,
|
||||
height: 500,
|
||||
renderer: 'area',
|
||||
stroke: true,
|
||||
preserve: true,
|
||||
series: [
|
||||
{
|
||||
color: palette.color(),
|
||||
data: seriesData[0],
|
||||
name: 'Moscow'
|
||||
}, {
|
||||
color: palette.color(),
|
||||
data: seriesData[1],
|
||||
name: 'Shanghai'
|
||||
}, {
|
||||
color: palette.color(),
|
||||
data: seriesData[2],
|
||||
name: 'Amsterdam'
|
||||
}, {
|
||||
color: palette.color(),
|
||||
data: seriesData[3],
|
||||
name: 'Paris'
|
||||
}, {
|
||||
color: palette.color(),
|
||||
data: seriesData[4],
|
||||
name: 'Tokyo'
|
||||
}, {
|
||||
color: palette.color(),
|
||||
data: seriesData[5],
|
||||
name: 'London'
|
||||
}, {
|
||||
color: palette.color(),
|
||||
data: seriesData[6],
|
||||
name: 'New York'
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
var preview = new Rickshaw.Graph.RangeSlider( {
|
||||
graph: graph,
|
||||
element: document.getElementById('preview'),
|
||||
} );
|
||||
|
||||
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
|
||||
graph: graph,
|
||||
xFormatter: function(x) {
|
||||
return new Date(x * 1000).toString();
|
||||
}
|
||||
} );
|
||||
|
||||
var annotator = new Rickshaw.Graph.Annotate( {
|
||||
graph: graph,
|
||||
element: document.getElementById('timeline')
|
||||
} );
|
||||
|
||||
var legend = new Rickshaw.Graph.Legend( {
|
||||
graph: graph,
|
||||
element: document.getElementById('legend')
|
||||
|
||||
} );
|
||||
|
||||
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
|
||||
graph: graph,
|
||||
legend: legend
|
||||
} );
|
||||
|
||||
var order = new Rickshaw.Graph.Behavior.Series.Order( {
|
||||
graph: graph,
|
||||
legend: legend
|
||||
} );
|
||||
|
||||
var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {
|
||||
graph: graph,
|
||||
legend: legend
|
||||
} );
|
||||
|
||||
var smoother = new Rickshaw.Graph.Smoother( {
|
||||
graph: graph,
|
||||
element: document.querySelector('#smoother')
|
||||
} );
|
||||
|
||||
var ticksTreatment = 'glow';
|
||||
|
||||
var xAxis = new Rickshaw.Graph.Axis.Time( {
|
||||
graph: graph,
|
||||
ticksTreatment: ticksTreatment,
|
||||
timeFixture: new Rickshaw.Fixtures.Time.Local()
|
||||
} );
|
||||
|
||||
xAxis.render();
|
||||
|
||||
var yAxis = new Rickshaw.Graph.Axis.Y( {
|
||||
graph: graph,
|
||||
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
|
||||
ticksTreatment: ticksTreatment
|
||||
} );
|
||||
|
||||
yAxis.render();
|
||||
|
||||
|
||||
var controls = new RenderControls( {
|
||||
element: document.querySelector('form'),
|
||||
graph: graph
|
||||
} );
|
||||
|
||||
// add some data every so often
|
||||
|
||||
var messages = [
|
||||
"Changed home page welcome message",
|
||||
"Minified JS and CSS",
|
||||
"Changed button color from blue to green",
|
||||
"Refactored SQL query to use indexed columns",
|
||||
"Added additional logging for debugging",
|
||||
"Fixed typo",
|
||||
"Rewrite conditional logic for clarity",
|
||||
"Added documentation for new methods"
|
||||
];
|
||||
|
||||
setInterval( function() {
|
||||
random.removeData(seriesData);
|
||||
random.addData(seriesData);
|
||||
graph.update();
|
||||
|
||||
}, 3000 );
|
||||
|
||||
function addAnnotation(force) {
|
||||
if (messages.length > 0 && (force || Math.random() >= 0.95)) {
|
||||
annotator.add(seriesData[2][seriesData[2].length-1].x, messages.shift());
|
||||
annotator.update();
|
||||
}
|
||||
}
|
||||
|
||||
addAnnotation(true);
|
||||
setTimeout( function() { setInterval( addAnnotation, 6000 ) }, 6000 );
|
||||
|
||||
var previewXAxis = new Rickshaw.Graph.Axis.Time({
|
||||
graph: preview.previews[0],
|
||||
timeFixture: new Rickshaw.Fixtures.Time.Local(),
|
||||
ticksTreatment: ticksTreatment
|
||||
});
|
||||
|
||||
previewXAxis.render();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
54
public/assets/plugins/charts-rickshaw/examples/fixed.html
Normal file
54
public/assets/plugins/charts-rickshaw/examples/fixed.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!doctype>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/extensions.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
<script src="../rickshaw.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="content">
|
||||
<div id="chart"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
var tv = 250;
|
||||
|
||||
// instantiate our graph!
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
width: 900,
|
||||
height: 500,
|
||||
renderer: 'line',
|
||||
series: new Rickshaw.Series.FixedDuration([{ name: 'one' }], undefined, {
|
||||
timeInterval: tv,
|
||||
maxDataPoints: 100,
|
||||
timeBase: new Date().getTime() / 1000
|
||||
})
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
// add some data every so often
|
||||
|
||||
var i = 0;
|
||||
var iv = setInterval( function() {
|
||||
|
||||
var data = { one: Math.floor(Math.random() * 40) + 120 };
|
||||
|
||||
var randInt = Math.floor(Math.random()*100);
|
||||
data.two = (Math.sin(i++ / 40) + 4) * (randInt + 400);
|
||||
data.three = randInt + 300;
|
||||
|
||||
graph.series.addData(data);
|
||||
graph.render();
|
||||
|
||||
}, tv );
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!doctype>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
|
||||
<style>
|
||||
.rickshaw_graph .detail .x_label { display: none }
|
||||
.rickshaw_graph .detail .item { line-height: 1.4; padding: 0.5em }
|
||||
.detail_swatch { float: right; display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 0 }
|
||||
.rickshaw_graph .detail .date { color: #a0a0a0 }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="chart_container">
|
||||
<div id="chart"></div>
|
||||
<div id="legend_container">
|
||||
<div id="smoother" title="Smoothing"></div>
|
||||
<div id="legend"></div>
|
||||
</div>
|
||||
<div id="slider"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// set up our data series with 50 random data points
|
||||
|
||||
var seriesData = [ [], [], [] ];
|
||||
var random = new Rickshaw.Fixtures.RandomData(150);
|
||||
|
||||
for (var i = 0; i < 150; i++) {
|
||||
random.addData(seriesData);
|
||||
}
|
||||
|
||||
// instantiate our graph!
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
width: 960,
|
||||
height: 500,
|
||||
renderer: 'line',
|
||||
series: [
|
||||
{
|
||||
color: "#c05020",
|
||||
data: seriesData[0],
|
||||
name: 'New York'
|
||||
}, {
|
||||
color: "#30c020",
|
||||
data: seriesData[1],
|
||||
name: 'London'
|
||||
}, {
|
||||
color: "#6060c0",
|
||||
data: seriesData[2],
|
||||
name: 'Tokyo'
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
|
||||
graph: graph,
|
||||
formatter: function(series, x, y) {
|
||||
var date = '<span class="date">' + new Date(x * 1000).toUTCString() + '</span>';
|
||||
var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
|
||||
var content = swatch + series.name + ": " + parseInt(y) + '<br>' + date;
|
||||
return content;
|
||||
}
|
||||
} );
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
46
public/assets/plugins/charts-rickshaw/examples/gaps.html
Normal file
46
public/assets/plugins/charts-rickshaw/examples/gaps.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!doctype html>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
<link type="text/css" rel="stylesheet" href="../rickshaw.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
|
||||
<div id="chart"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var palette = new Rickshaw.Color.Palette();
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
renderer: 'area',
|
||||
stroke: true,
|
||||
series: [
|
||||
{
|
||||
data: [ { x: 0, y: 19 }, { x: 1, y: 30 }, { x: 2, y: 22 }, { x: 3, y: 29 }, { x: 4, y: 21 }, { x: 5, y: 29 } ],
|
||||
name: 'new york',
|
||||
color: palette.color()
|
||||
}, {
|
||||
data: [ { x: 0, y: 19 }, { x: 1, y: 29 }, { x: 2, y: 22 }, { x: 3, y: 27 }, { x: 4, y: 21 }, { x: 5, y: 29 } ],
|
||||
name: 'boston',
|
||||
color: palette.color()
|
||||
}, {
|
||||
data: [ { x: 0, y: 19 }, { x: 1, y: 22 }, { x: 2, y: 10 }, { x: 3, y: null }, { x: 4, y: 21 }, { x: 5, y: 29 } ],
|
||||
name: 'los angeles',
|
||||
color: palette.color()
|
||||
}, {
|
||||
data: [ { x: 0, y: 19 }, { x: 1, y: 10 }, { x: 2, y: 22 }, { x: 3, y: null }, { x: 4, y: 21 }, { x: 5, y: 29 } ],
|
||||
name: 'san francisco',
|
||||
color: palette.color()
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
new Rickshaw.Graph.HoverDetail({ graph: graph });
|
||||
|
||||
</script>
|
||||
130
public/assets/plugins/charts-rickshaw/examples/hover.html
Normal file
130
public/assets/plugins/charts-rickshaw/examples/hover.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<!doctype>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif
|
||||
}
|
||||
#chart_container {
|
||||
width: 960px;
|
||||
}
|
||||
.swatch {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
.label {
|
||||
display: inline-block;
|
||||
}
|
||||
.line {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 30px;
|
||||
}
|
||||
#legend {
|
||||
text-align: center;
|
||||
}
|
||||
.rickshaw_graph .detail {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="chart_container">
|
||||
<div id="chart"></div><br>
|
||||
<div id="legend"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// set up our data series with 50 random data points
|
||||
|
||||
var seriesData = [ [], [], [] ];
|
||||
var random = new Rickshaw.Fixtures.RandomData(150);
|
||||
|
||||
for (var i = 0; i < 150; i++) {
|
||||
random.addData(seriesData);
|
||||
}
|
||||
|
||||
// instantiate our graph!
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
width: 960,
|
||||
height: 500,
|
||||
renderer: 'line',
|
||||
series: [
|
||||
{
|
||||
color: "#c05020",
|
||||
data: seriesData[0],
|
||||
name: 'New York'
|
||||
}, {
|
||||
color: "#30c020",
|
||||
data: seriesData[1],
|
||||
name: 'London'
|
||||
}, {
|
||||
color: "#6060c0",
|
||||
data: seriesData[2],
|
||||
name: 'Tokyo'
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
var legend = document.querySelector('#legend');
|
||||
|
||||
var Hover = Rickshaw.Class.create(Rickshaw.Graph.HoverDetail, {
|
||||
|
||||
render: function(args) {
|
||||
|
||||
legend.innerHTML = args.formattedXValue;
|
||||
|
||||
args.detail.sort(function(a, b) { return a.order - b.order }).forEach( function(d) {
|
||||
|
||||
var line = document.createElement('div');
|
||||
line.className = 'line';
|
||||
|
||||
var swatch = document.createElement('div');
|
||||
swatch.className = 'swatch';
|
||||
swatch.style.backgroundColor = d.series.color;
|
||||
|
||||
var label = document.createElement('div');
|
||||
label.className = 'label';
|
||||
label.innerHTML = d.name + ": " + d.formattedYValue;
|
||||
|
||||
line.appendChild(swatch);
|
||||
line.appendChild(label);
|
||||
|
||||
legend.appendChild(line);
|
||||
|
||||
var dot = document.createElement('div');
|
||||
dot.className = 'dot';
|
||||
dot.style.top = graph.y(d.value.y0 + d.value.y) + 'px';
|
||||
dot.style.borderColor = d.series.color;
|
||||
|
||||
this.element.appendChild(dot);
|
||||
|
||||
dot.className = 'dot active';
|
||||
|
||||
this.show();
|
||||
|
||||
}, this );
|
||||
}
|
||||
});
|
||||
|
||||
var hover = new Hover( { graph: graph } );
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 570 B |
Binary file not shown.
|
After Width: | Height: | Size: 571 B |
Binary file not shown.
|
After Width: | Height: | Size: 382 B |
Binary file not shown.
|
After Width: | Height: | Size: 642 B |
Binary file not shown.
|
After Width: | Height: | Size: 686 B |
Binary file not shown.
|
After Width: | Height: | Size: 879 B |
Binary file not shown.
|
After Width: | Height: | Size: 707 B |
BIN
public/assets/plugins/charts-rickshaw/examples/images/om_bar.png
Normal file
BIN
public/assets/plugins/charts-rickshaw/examples/images/om_bar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 418 B |
Binary file not shown.
|
After Width: | Height: | Size: 454 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 950 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 298 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,46 @@
|
||||
<!doctype html>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
<link type="text/css" rel="stylesheet" href="../rickshaw.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
|
||||
<div id="chart"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var palette = new Rickshaw.Color.Palette();
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
renderer: 'line',
|
||||
interpolation: 'cardinal',
|
||||
series: [
|
||||
{
|
||||
data: [ { x: 0, y: 19 }, { x: 1, y: 30 }, { x: 2, y: 22 }, { x: 3, y: 29 }, { x: 4, y: 26 }, { x: 5, y: 35 } ],
|
||||
name: 'new york',
|
||||
color: palette.color()
|
||||
}, {
|
||||
data: [ { x: 0, y: 49 }, { x: 1, y: 35 }, { x: 2, y: 32 }, { x: 3, y: 38 }, { x: 4, y: 37 } ],
|
||||
name: 'boston',
|
||||
color: palette.color()
|
||||
}, {
|
||||
data: [ { x: 0, y: 19 }, { x: 1, y: 22 }, { x: 2, y: 10 }, { x: 4, y: 21 }, { x: 5, y: 17 } ],
|
||||
name: 'los angeles',
|
||||
color: palette.color()
|
||||
}, {
|
||||
data: [ { x: 1, y: 9 }, { x: 2, y: 3 }, { x: 3, y: 8 }, { x: 4, y: 14 }, { x: 5, y: 13 } ],
|
||||
name: 'san francisco',
|
||||
color: palette.color()
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
new Rickshaw.Graph.HoverDetail({ graph: graph });
|
||||
|
||||
</script>
|
||||
241
public/assets/plugins/charts-rickshaw/examples/index.html
Normal file
241
public/assets/plugins/charts-rickshaw/examples/index.html
Normal file
@@ -0,0 +1,241 @@
|
||||
<!doctype>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 13px;
|
||||
color: #282828;
|
||||
line-height: 135%;
|
||||
margin: 0;
|
||||
}
|
||||
.content {
|
||||
width: 780px;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
section img {
|
||||
width: 25%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 0 3% 0 0;
|
||||
border: none;
|
||||
}
|
||||
div {
|
||||
width: 70%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: steelblue;
|
||||
}
|
||||
a:hover {
|
||||
color: lightblue;
|
||||
}
|
||||
h1 {
|
||||
margin: 1em 0 1em 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
margin: 0 0 0.7em 0;
|
||||
color: black;
|
||||
float: left;
|
||||
}
|
||||
section {
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding: 1.8em 0;
|
||||
display: block;
|
||||
}
|
||||
span {
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
#start {
|
||||
height: 70px;
|
||||
}
|
||||
hr {
|
||||
margin-bottom: 40px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../js/header.js"></script>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<h1>Rickshaw Examples</h1>
|
||||
|
||||
<section>
|
||||
<a href="start.html"><img src="screenshots/start.png" id="start"></a>
|
||||
<div>
|
||||
<h2><a href="start.html">Getting Started</a></h2>
|
||||
<span>
|
||||
Bare minimum to get a graph on the page with a couple of points.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="lines.html"><img src="screenshots/lines.png"></a>
|
||||
<div>
|
||||
<h2><a href="lines.html">Lines & Toggling</a></h2>
|
||||
<span>
|
||||
Basic lines with a legend and x-axis ticks and labels. Toggle lines on and off by clicking checkmarks.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="extensions.html"><img src="screenshots/extensions.png"></a>
|
||||
<div>
|
||||
<h2><a href="extensions.html">Interactive Real-Time Data</a></h2>
|
||||
<span>
|
||||
Dig into continuously updating data. Change line interpolations, zoom in on the x-axis, apply smoothing, stack and un-stack, drag and drop to re-order the stack, toggle data on and off.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="scatterplot.html"><img src="screenshots/scatterplot.png"></a>
|
||||
<div>
|
||||
<h2><a href="scatterplot.html">Scatter Plot with Multiple Series</a></h2>
|
||||
<span>
|
||||
Basic scatter plot with two overlapping series.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="status.html"><img src="screenshots/status.png"></a>
|
||||
<div>
|
||||
<h2><a href="status.html">Stacked Bars with Deterministic Colors</a></h2>
|
||||
<span>
|
||||
Requests per second by HTTP status as stacked bars. Colors come from a deterministic palette that can carry across graphs.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="colors.html"><img src="screenshots/colors.png"></a>
|
||||
<div>
|
||||
<h2><a href="colors.html">Color Schemes</a></h2>
|
||||
<span>
|
||||
A number of color schemes are built in. You can specify your own too.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="stops.html"><img src="screenshots/stops.png"></a>
|
||||
<div>
|
||||
<h2><a href="stops.html">Interpolated Colors</a></h2>
|
||||
<span>
|
||||
Interpolate color schemes for graphs with many series.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="ajax.html"><img src="screenshots/ajax.png"></a>
|
||||
<div>
|
||||
<h2><a href="ajax.html">Data via AJAX / JSONP</a></h2>
|
||||
<span>
|
||||
Ask Rickshaw to fetch data via AJAX, rather than specifying in the constructor. There's a JSONP impelementation too.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="y_axis.html"><img src="screenshots/y_axis.png"></a>
|
||||
<div>
|
||||
<h2><a href="y_axis.html">Y-Axis Tick Marks and Grid Lines</a></h2>
|
||||
<span>
|
||||
Draw y-axis tick marks and grid lines with abbreviated numbers.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="x_axis.html"><img src="screenshots/x_axis.png"></a>
|
||||
<div>
|
||||
<h2><a href="x_axis.html">Custom Values on the X-Axis</a></h2>
|
||||
<span>
|
||||
Add custom values and custom formatting along the x-axis.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="fixed.html"><img src="screenshots/fixed.png"></a>
|
||||
<div>
|
||||
<h2><a href="fixed.html">Fixed Window Series for Streaming Data</a></h2>
|
||||
<span>
|
||||
Fixed-size time window, useful for real-time graphs with socket.io.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="formatter.html"><img src="screenshots/formatter.png"></a>
|
||||
<div>
|
||||
<h2><a href="formatter.html">Hover Details Custom Formatting</a></h2>
|
||||
<span>
|
||||
Send a custom formatter callback for finer control in hover details.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="hover.html"><img src="screenshots/hover.png"></a>
|
||||
<div>
|
||||
<h2><a href="hover.html">Subclassed Hover Behavior + Bottom Legend</a></h2>
|
||||
<span>
|
||||
Subclass hovers to provide an alternate legend at the bottom of the graph.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="scaled.html"><img src="screenshots/scaled.png"></a>
|
||||
<div>
|
||||
<h2><a href="scaled.html">Scaled Series</a></h2>
|
||||
<span>
|
||||
Two series normalized with different scales, with two different scaled Y-axis.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="logscale.html"><img src="screenshots/logscale.png"></a>
|
||||
<div>
|
||||
<h2><a href="logscale.html">Log and Absolute Scale</a></h2>
|
||||
<span>
|
||||
One series drawn using log and absolute scale on one graph.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="multi.html"><img src="screenshots/multi.png"></a>
|
||||
<div>
|
||||
<h2><a href="multi.html">Multiple Renderers</a></h2>
|
||||
<span>
|
||||
Bars, lines, area, and scatterplot graphs all in one setting.
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<script src="../js/footer.js"></script>
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
var RenderControls = function(args) {
|
||||
|
||||
var $ = jQuery;
|
||||
|
||||
this.initialize = function() {
|
||||
|
||||
this.element = args.element;
|
||||
this.graph = args.graph;
|
||||
this.settings = this.serialize();
|
||||
|
||||
this.inputs = {
|
||||
renderer: this.element.elements.renderer
|
||||
};
|
||||
|
||||
this.element.addEventListener('change', function(e) {
|
||||
|
||||
this.settings = this.serialize();
|
||||
|
||||
this.syncOptions();
|
||||
this.settings = this.serialize();
|
||||
|
||||
var config = {
|
||||
renderer: this.settings.renderer
|
||||
};
|
||||
|
||||
this.graph.configure(config);
|
||||
this.graph.render();
|
||||
|
||||
}.bind(this), false);
|
||||
}
|
||||
|
||||
this.serialize = function() {
|
||||
|
||||
var values = {};
|
||||
var pairs = $(this.element).serializeArray();
|
||||
|
||||
pairs.forEach( function(pair) {
|
||||
values[pair.name] = pair.value;
|
||||
} );
|
||||
|
||||
return values;
|
||||
};
|
||||
|
||||
this.syncOptions = function() {
|
||||
|
||||
var options = this.rendererOptions[this.settings.renderer];
|
||||
|
||||
};
|
||||
|
||||
this.rendererOptions = {
|
||||
|
||||
area: {
|
||||
interpolation: true,
|
||||
offset: ['zero', 'wiggle', 'expand', 'value'],
|
||||
defaults: { offset: 'zero' }
|
||||
},
|
||||
line: {
|
||||
interpolation: true,
|
||||
offset: ['expand', 'value'],
|
||||
defaults: { offset: 'value' }
|
||||
},
|
||||
bar: {
|
||||
interpolation: false,
|
||||
offset: ['zero', 'wiggle', 'expand', 'value'],
|
||||
defaults: { offset: 'zero' }
|
||||
},
|
||||
scatterplot: {
|
||||
interpolation: false,
|
||||
offset: ['value'],
|
||||
defaults: { offset: 'value' }
|
||||
}
|
||||
};
|
||||
|
||||
this.initialize();
|
||||
};
|
||||
|
||||
58
public/assets/plugins/charts-rickshaw/examples/jsonp.html
Normal file
58
public/assets/plugins/charts-rickshaw/examples/jsonp.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!doctype>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="chart_container">
|
||||
<div id="chart"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// subclass to hard-code callback name so we can call this in a static context
|
||||
|
||||
Rickshaw.Graph.JSONP.Static = Rickshaw.Class.create( Rickshaw.Graph.JSONP, {
|
||||
request: function() {
|
||||
$.ajax( {
|
||||
url: this.dataURL,
|
||||
success: this.success.bind(this),
|
||||
error: this.error.bind(this),
|
||||
dataType: 'jsonp',
|
||||
jsonpCallback: 'callback'
|
||||
} );
|
||||
}
|
||||
} );
|
||||
|
||||
var jsonpGraph = new Rickshaw.Graph.JSONP.Static( {
|
||||
|
||||
element: document.getElementById("chart"),
|
||||
width: 400,
|
||||
height: 200,
|
||||
renderer: 'line',
|
||||
dataURL: 'data/data.jsonp',
|
||||
onData: function(d) { Rickshaw.Series.zeroFill(d); return d },
|
||||
series: [
|
||||
{
|
||||
name: 'New York',
|
||||
color: '#c05020',
|
||||
}, {
|
||||
name: 'London',
|
||||
color: '#30c020',
|
||||
}, {
|
||||
name: 'Tokyo',
|
||||
color: '#6060c0'
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
88
public/assets/plugins/charts-rickshaw/examples/legend.html
Normal file
88
public/assets/plugins/charts-rickshaw/examples/legend.html
Normal file
@@ -0,0 +1,88 @@
|
||||
<!doctype>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
|
||||
<script src="../vendor/d3.min.js"></script>
|
||||
<script src="../vendor/d3.layout.min.js"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="chart_container">
|
||||
<div id="chart"></div>
|
||||
<div id="legend_container">
|
||||
<div id="smoother" title="Smoothing"></div>
|
||||
<div id="legend"></div>
|
||||
</div>
|
||||
<div id="slider"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// set up our data series with 50 random data points
|
||||
|
||||
var seriesData = [ [], [], [] ];
|
||||
var random = new Rickshaw.Fixtures.RandomData(150);
|
||||
|
||||
for (var i = 0; i < 150; i++) {
|
||||
random.addData(seriesData);
|
||||
}
|
||||
|
||||
// instantiate our graph!
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
width: 960,
|
||||
height: 500,
|
||||
renderer: 'area',
|
||||
series: [
|
||||
{
|
||||
color: "#c05020",
|
||||
data: seriesData[0],
|
||||
name: 'New York'
|
||||
}, {
|
||||
color: "#30c020",
|
||||
data: seriesData[1],
|
||||
name: 'London'
|
||||
}, {
|
||||
color: "#6060c0",
|
||||
data: seriesData[2],
|
||||
name: 'Tokyo'
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
var legend = new Rickshaw.Graph.Legend( {
|
||||
graph: graph,
|
||||
element: document.getElementById('legend')
|
||||
|
||||
} );
|
||||
|
||||
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
|
||||
graph: graph,
|
||||
legend: legend
|
||||
} );
|
||||
|
||||
var order = new Rickshaw.Graph.Behavior.Series.Order( {
|
||||
graph: graph,
|
||||
legend: legend
|
||||
} );
|
||||
|
||||
var highlight = new Rickshaw.Graph.Behavior.Series.Highlight( {
|
||||
graph: graph,
|
||||
legend: legend
|
||||
} );
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
34
public/assets/plugins/charts-rickshaw/examples/lineplot.html
Normal file
34
public/assets/plugins/charts-rickshaw/examples/lineplot.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<link type="text/css" rel="stylesheet" href="../rickshaw.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
|
||||
<div id="chart"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
width: 500,
|
||||
element: document.getElementById("chart"),
|
||||
renderer: 'lineplot',
|
||||
padding: { top: 0.1 },
|
||||
series: [
|
||||
{
|
||||
data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
|
||||
color: 'steelblue',
|
||||
name: "blue",
|
||||
}, {
|
||||
data: [ { x: 0, y: 19 }, { x: 1, y: 22 }, { x: 2, y: 32 }, { x: 3, y: 20 }, { x: 4, y: 21 } ],
|
||||
color: 'lightblue',
|
||||
name: "light blue"
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
var hover = new Rickshaw.Graph.HoverDetail({ graph: graph });
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
82
public/assets/plugins/charts-rickshaw/examples/lines.html
Normal file
82
public/assets/plugins/charts-rickshaw/examples/lines.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<!doctype>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="chart_container">
|
||||
<div id="chart"></div>
|
||||
<div id="legend_container">
|
||||
<div id="smoother" title="Smoothing"></div>
|
||||
<div id="legend"></div>
|
||||
</div>
|
||||
<div id="slider"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// set up our data series with 50 random data points
|
||||
|
||||
var seriesData = [ [], [], [] ];
|
||||
var random = new Rickshaw.Fixtures.RandomData(150);
|
||||
|
||||
for (var i = 0; i < 150; i++) {
|
||||
random.addData(seriesData);
|
||||
}
|
||||
|
||||
// instantiate our graph!
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
width: 960,
|
||||
height: 500,
|
||||
renderer: 'line',
|
||||
series: [
|
||||
{
|
||||
color: "#c05020",
|
||||
data: seriesData[0],
|
||||
name: 'New York'
|
||||
}, {
|
||||
color: "#30c020",
|
||||
data: seriesData[1],
|
||||
name: 'London'
|
||||
}, {
|
||||
color: "#6060c0",
|
||||
data: seriesData[2],
|
||||
name: 'Tokyo'
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
|
||||
graph: graph
|
||||
} );
|
||||
|
||||
var legend = new Rickshaw.Graph.Legend( {
|
||||
graph: graph,
|
||||
element: document.getElementById('legend')
|
||||
|
||||
} );
|
||||
|
||||
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
|
||||
graph: graph,
|
||||
legend: legend
|
||||
} );
|
||||
|
||||
var axes = new Rickshaw.Graph.Axis.Time( {
|
||||
graph: graph
|
||||
} );
|
||||
axes.render();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
100
public/assets/plugins/charts-rickshaw/examples/logscale.html
Normal file
100
public/assets/plugins/charts-rickshaw/examples/logscale.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!doctype html>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
<script src="../rickshaw.js"></script>
|
||||
|
||||
<style>
|
||||
#chart {
|
||||
position: relative;
|
||||
left: 40px;
|
||||
width: 800px;
|
||||
height: 300px;
|
||||
}
|
||||
#y_axis {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
}
|
||||
#y_axis_2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 840px;
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="chart_container">
|
||||
<div id="y_axis"></div>
|
||||
<div id="chart"></div>
|
||||
<div id="y_axis_2"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
var random = new Rickshaw.Fixtures.RandomData(12 * 60 * 60);
|
||||
|
||||
var series = [[]];
|
||||
|
||||
for (var i = 0; i < 300; i++) {
|
||||
random.addData(series);
|
||||
}
|
||||
var data = series[0]
|
||||
|
||||
var min = Number.MAX_VALUE;
|
||||
var max = Number.MIN_VALUE;
|
||||
for (i = 0; i < series[0].length; i++) {
|
||||
min = Math.min(min, series[0][i].y);
|
||||
max = Math.max(max, series[0][i].y);
|
||||
}
|
||||
|
||||
var logScale = d3.scale.log().domain([min/4, max]);
|
||||
var linearScale = d3.scale.linear().domain([min, max]).range(logScale.range());
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
renderer: 'line',
|
||||
series: [
|
||||
{
|
||||
color: 'blue',
|
||||
data: JSON.parse(JSON.stringify(data)),
|
||||
name: 'Log View',
|
||||
scale: logScale
|
||||
},
|
||||
{
|
||||
color: 'red',
|
||||
data: JSON.parse(JSON.stringify(data)),
|
||||
name: 'Linear View',
|
||||
scale: linearScale
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
new Rickshaw.Graph.Axis.Y.Scaled( {
|
||||
graph: graph,
|
||||
orientation: 'left',
|
||||
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
|
||||
element: document.getElementById('y_axis'),
|
||||
scale: logScale
|
||||
} );
|
||||
|
||||
new Rickshaw.Graph.Axis.Y.Scaled( {
|
||||
graph: graph,
|
||||
orientation: 'right',
|
||||
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
|
||||
element: document.getElementById('y_axis_2'),
|
||||
scale: linearScale,
|
||||
grid: false
|
||||
} );
|
||||
|
||||
new Rickshaw.Graph.HoverDetail(
|
||||
{
|
||||
graph: graph
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!doctype>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="../rickshaw.css">
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
<script src="../rickshaw.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="chart_container">
|
||||
<div id="chart"></div>
|
||||
<div id="legend_container">
|
||||
<div id="smoother" title="Smoothing"></div>
|
||||
<div id="legend"></div>
|
||||
</div>
|
||||
<div id="slider"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// set up our data series with 50 random data points
|
||||
|
||||
var seriesData = [ [], [], [] ];
|
||||
var random = new Rickshaw.Fixtures.RandomData(0.01);
|
||||
|
||||
for (var i = 0; i < 150; i++) {
|
||||
random.addData(seriesData);
|
||||
}
|
||||
|
||||
// instantiate our graph!
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
width: 960,
|
||||
height: 500,
|
||||
renderer: 'line',
|
||||
series: [
|
||||
{
|
||||
color: "#c05020",
|
||||
data: seriesData[0],
|
||||
name: 'New York'
|
||||
}, {
|
||||
color: "#30c020",
|
||||
data: seriesData[1],
|
||||
name: 'London'
|
||||
}, {
|
||||
color: "#6060c0",
|
||||
data: seriesData[2],
|
||||
name: 'Tokyo'
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
|
||||
graph: graph
|
||||
} );
|
||||
|
||||
var axes = new Rickshaw.Graph.Axis.Time( {
|
||||
graph: graph,
|
||||
timeFixture: new Rickshaw.Fixtures.Time.Local()
|
||||
} );
|
||||
|
||||
axes.render();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
102
public/assets/plugins/charts-rickshaw/examples/multi.html
Normal file
102
public/assets/plugins/charts-rickshaw/examples/multi.html
Normal file
@@ -0,0 +1,102 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="../rickshaw.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
<style>
|
||||
.column { display: inline-block }
|
||||
#legend { background: white }
|
||||
#legend .line { color: #333 }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="column">
|
||||
<div id="chart"></div>
|
||||
<div id="slider"></div>
|
||||
</div>
|
||||
<div class="column" id="legend"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var seriesData = [ [], [], [], [], [] ];
|
||||
var random = new Rickshaw.Fixtures.RandomData(50);
|
||||
|
||||
for (var i = 0; i < 75; i++) {
|
||||
random.addData(seriesData);
|
||||
}
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
renderer: 'multi',
|
||||
width: 900,
|
||||
height: 500,
|
||||
dotSize: 2,
|
||||
series: [
|
||||
{
|
||||
name: 'temperature',
|
||||
data: seriesData.shift(),
|
||||
color: 'rgba(255, 0, 0, 0.4)',
|
||||
renderer: 'stack'
|
||||
}, {
|
||||
name: 'heat index',
|
||||
data: seriesData.shift(),
|
||||
color: 'rgba(255, 127, 0, 0.4)',
|
||||
renderer: 'stack'
|
||||
}, {
|
||||
name: 'dewpoint',
|
||||
data: seriesData.shift(),
|
||||
color: 'rgba(127, 0, 0, 0.3)',
|
||||
renderer: 'scatterplot'
|
||||
}, {
|
||||
name: 'pop',
|
||||
data: seriesData.shift().map(function(d) { return { x: d.x, y: d.y / 4 } }),
|
||||
color: 'rgba(0, 0, 127, 0.4)',
|
||||
renderer: 'bar'
|
||||
}, {
|
||||
name: 'humidity',
|
||||
data: seriesData.shift().map(function(d) { return { x: d.x, y: d.y * 1.5 } }),
|
||||
renderer: 'line',
|
||||
color: 'rgba(0, 0, 127, 0.25)'
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
var slider = new Rickshaw.Graph.RangeSlider({
|
||||
graph: graph,
|
||||
element: $('#slider')
|
||||
});
|
||||
|
||||
graph.render();
|
||||
|
||||
var detail = new Rickshaw.Graph.HoverDetail({
|
||||
graph: graph
|
||||
});
|
||||
|
||||
var legend = new Rickshaw.Graph.Legend({
|
||||
graph: graph,
|
||||
element: document.querySelector('#legend')
|
||||
});
|
||||
|
||||
var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
|
||||
graph: graph,
|
||||
legend: legend,
|
||||
disabledColor: function() { return 'rgba(0, 0, 0, 0.2)' }
|
||||
});
|
||||
|
||||
var highlighter = new Rickshaw.Graph.Behavior.Series.Toggle({
|
||||
graph: graph,
|
||||
legend: legend
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
32
public/assets/plugins/charts-rickshaw/examples/negative.html
Normal file
32
public/assets/plugins/charts-rickshaw/examples/negative.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!doctype>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
|
||||
<div id="chart"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var graph = new Rickshaw.Graph({
|
||||
unstack: true,
|
||||
element: document.querySelector("#chart"),
|
||||
width: 580,
|
||||
height: 250,
|
||||
min: 'auto',
|
||||
renderer: 'bar',
|
||||
series: [ {
|
||||
color: 'steelblue',
|
||||
data: [ { x: 0, y: 20 }, { x: 1, y: 3 }, { x: 2, y: 15 }, { x: 3, y: 42 } ]
|
||||
}, {
|
||||
color: 'tomato',
|
||||
data: [ { x: 0, y: 12 }, { x: 1, y: -20 }, { x: 2, y: 18 }, { x: 3, y: 8 } ]
|
||||
} ]
|
||||
});
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
50
public/assets/plugins/charts-rickshaw/examples/refresh.html
Normal file
50
public/assets/plugins/charts-rickshaw/examples/refresh.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../rickshaw.css">
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
<script src="../rickshaw.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="chart_container">
|
||||
<div id="chart"></div>
|
||||
<button id="refresh">refresh</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
var dataURLs = ['data/data.json', 'data/data2.json'];
|
||||
|
||||
var ajaxGraph = new Rickshaw.Graph.Ajax( {
|
||||
|
||||
element: document.getElementById("chart"),
|
||||
width: 400,
|
||||
height: 200,
|
||||
renderer: 'line',
|
||||
dataURL: 'data/data.json',
|
||||
series: [
|
||||
{
|
||||
name: 'New York',
|
||||
color: '#c05020',
|
||||
}, {
|
||||
name: 'London',
|
||||
color: '#30c020',
|
||||
}, {
|
||||
name: 'Tokyo',
|
||||
color: '#6060c0'
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
document.querySelector('#refresh').addEventListener('click', function() {
|
||||
ajaxGraph.dataURL = ajaxGraph.dataURL === dataURLs[0] ? dataURLs[1] : dataURLs[0];
|
||||
ajaxGraph.request();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
38
public/assets/plugins/charts-rickshaw/examples/resize.html
Normal file
38
public/assets/plugins/charts-rickshaw/examples/resize.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
<script src="../rickshaw.min.js"></script>
|
||||
|
||||
<div id="chart"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
renderer: 'area',
|
||||
series: [
|
||||
{
|
||||
data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
|
||||
color: 'steelblue'
|
||||
}, {
|
||||
data: [ { x: 0, y: 19 }, { x: 1, y: 22 }, { x: 2, y: 32 }, { x: 3, y: 20 }, { x: 4, y: 21 } ],
|
||||
color: 'lightblue'
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
var resize = function() {
|
||||
var padding = 40;
|
||||
graph.configure({
|
||||
width: window.innerWidth - padding,
|
||||
height: window.innerHeight - padding
|
||||
});
|
||||
graph.render();
|
||||
}
|
||||
|
||||
window.addEventListener('resize', resize);
|
||||
resize();
|
||||
|
||||
</script>
|
||||
109
public/assets/plugins/charts-rickshaw/examples/scaled.html
Normal file
109
public/assets/plugins/charts-rickshaw/examples/scaled.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<!doctype html>
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
<script src="../rickshaw.js"></script>
|
||||
<style type="text/css">
|
||||
#axis0 {
|
||||
position: absolute;
|
||||
height: 800px;
|
||||
width: 40px;
|
||||
}
|
||||
#axis1 {
|
||||
position: absolute;
|
||||
left: 1050px;
|
||||
height: 800px;
|
||||
width: 40px;
|
||||
}
|
||||
#chart {
|
||||
left: 50px;
|
||||
width: 1000px;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div id="axis0"></div>
|
||||
<div id="chart"></div>
|
||||
<div id="axis1"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var data, graph, i, max, min, point, random, scales, series, _i, _j, _k, _l, _len, _len1, _len2, _ref;
|
||||
|
||||
data = [[], []];
|
||||
|
||||
random = new Rickshaw.Fixtures.RandomData(12 * 60 * 60);
|
||||
|
||||
for (i = _i = 0; _i < 100; i = ++_i) {
|
||||
random.addData(data);
|
||||
}
|
||||
|
||||
scales = [];
|
||||
|
||||
_ref = data[1];
|
||||
for (_j = 0, _len = _ref.length; _j < _len; _j++) {
|
||||
point = _ref[_j];
|
||||
point.y *= point.y;
|
||||
}
|
||||
|
||||
for (_k = 0, _len1 = data.length; _k < _len1; _k++) {
|
||||
series = data[_k];
|
||||
min = Number.MAX_VALUE;
|
||||
max = Number.MIN_VALUE;
|
||||
for (_l = 0, _len2 = series.length; _l < _len2; _l++) {
|
||||
point = series[_l];
|
||||
min = Math.min(min, point.y);
|
||||
max = Math.max(max, point.y);
|
||||
}
|
||||
if (_k === 0) {
|
||||
scales.push(d3.scale.linear().domain([min, max]).nice());
|
||||
} else {
|
||||
scales.push(d3.scale.pow().domain([min, max]).nice());
|
||||
}
|
||||
}
|
||||
|
||||
graph = new Rickshaw.Graph({
|
||||
element: document.getElementById("chart"),
|
||||
renderer: 'line',
|
||||
series: [
|
||||
{
|
||||
color: 'steelblue',
|
||||
data: data[0],
|
||||
name: 'Series A',
|
||||
scale: scales[0]
|
||||
}, {
|
||||
color: 'lightblue',
|
||||
data: data[1],
|
||||
name: 'Series B',
|
||||
scale: scales[1]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
new Rickshaw.Graph.Axis.Y.Scaled({
|
||||
element: document.getElementById('axis0'),
|
||||
graph: graph,
|
||||
orientation: 'left',
|
||||
scale: scales[0],
|
||||
tickFormat: Rickshaw.Fixtures.Number.formatKMBT
|
||||
});
|
||||
|
||||
new Rickshaw.Graph.Axis.Y.Scaled({
|
||||
element: document.getElementById('axis1'),
|
||||
graph: graph,
|
||||
grid: false,
|
||||
orientation: 'right',
|
||||
scale: scales[1],
|
||||
tickFormat: Rickshaw.Fixtures.Number.formatKMBT
|
||||
});
|
||||
|
||||
new Rickshaw.Graph.Axis.Time({
|
||||
graph: graph
|
||||
});
|
||||
|
||||
new Rickshaw.Graph.HoverDetail({
|
||||
graph: graph
|
||||
});
|
||||
|
||||
graph.render();
|
||||
</script>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!doctype html>
|
||||
<link type="text/css" rel="stylesheet" href="../rickshaw.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
|
||||
<div id="chart"></div>
|
||||
|
||||
<script>
|
||||
|
||||
// set up our data series with 50 random data points
|
||||
|
||||
var seriesData = [ [], [], [] ];
|
||||
var random = new Rickshaw.Fixtures.RandomData(150);
|
||||
|
||||
for (var i = 0; i < 500; i++) {
|
||||
random.addData(seriesData);
|
||||
}
|
||||
|
||||
// instantiate our graph!
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
width: 960,
|
||||
height: 500,
|
||||
renderer: 'scatterplot',
|
||||
series: [
|
||||
{
|
||||
color: "#ff9030",
|
||||
data: seriesData[0],
|
||||
}, {
|
||||
color: "#ff4040",
|
||||
data: seriesData[1],
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
graph.renderer.dotSize = 6;
|
||||
|
||||
new Rickshaw.Graph.HoverDetail({ graph: graph });
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
166
public/assets/plugins/charts-rickshaw/examples/series.html
Normal file
166
public/assets/plugins/charts-rickshaw/examples/series.html
Normal file
@@ -0,0 +1,166 @@
|
||||
<!doctype>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/extensions.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
|
||||
|
||||
<script src="../src/js/Rickshaw.js"></script>
|
||||
<script src="../src/js/Rickshaw.Class.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Renderer.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Renderer.Stack.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Renderer.Line.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.RangeSlider.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.HoverDetail.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Annotate.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Legend.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Axis.Time.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Behavior.Series.Toggle.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Behavior.Series.Order.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Behavior.Series.Highlight.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Smoother.js"></script>
|
||||
<script src="../src/js/Rickshaw.Graph.Unstacker.js"></script>
|
||||
<script src="../src/js/Rickshaw.Fixtures.Time.js"></script>
|
||||
<script src="../src/js/Rickshaw.Fixtures.RandomData.js"></script>
|
||||
<script src="../src/js/Rickshaw.Fixtures.Color.js"></script>
|
||||
<script src="../src/js/Rickshaw.Color.Palette.js"></script>
|
||||
<script src="../src/js/Rickshaw.Series.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="content">
|
||||
|
||||
<div id="side_panel">
|
||||
<h1>Random Data in the Future</h1>
|
||||
<section><div id="legend"></div></section>
|
||||
<section>
|
||||
<form id="offset_form">
|
||||
<input type="radio" name="offset" id="stack" value="zero" checked>
|
||||
<label for="stack">stack</label>
|
||||
<input type="radio" name="offset" id="percent" value="expand">
|
||||
<label for="percent">percent</label>
|
||||
<input type="radio" name="offset" id="stream" value="silhouette">
|
||||
<label for="stream">stream</label>
|
||||
<input type="radio" name="offset" id="lines" value="lines">
|
||||
<label for="lines">lines</label>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<h6>Smoothing</h6>
|
||||
<div id="smoother"></div>
|
||||
</section>
|
||||
<section></section>
|
||||
</div>
|
||||
|
||||
<div id="chart_container">
|
||||
<div id="chart"></div>
|
||||
<div id="timeline"></div>
|
||||
<div id="slider"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// instantiate our graph!
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
width: 900,
|
||||
height: 500,
|
||||
interpolation: 'step-after',
|
||||
series: new Rickshaw.Series([{ name: 'This' }])
|
||||
} );
|
||||
|
||||
var slider = new Rickshaw.Graph.RangeSlider( {
|
||||
graph: graph,
|
||||
element: $('#slider')
|
||||
} );
|
||||
|
||||
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
|
||||
graph: graph
|
||||
} );
|
||||
|
||||
var annotator = new Rickshaw.Graph.Annotate( {
|
||||
graph: graph,
|
||||
element: document.getElementById('timeline')
|
||||
} );
|
||||
|
||||
var legend = new Rickshaw.Graph.Legend( {
|
||||
graph: graph,
|
||||
element: document.getElementById('legend')
|
||||
} );
|
||||
|
||||
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
|
||||
graph: graph,
|
||||
legend: legend
|
||||
} );
|
||||
|
||||
// a little monkey punching
|
||||
legend.shelving = shelving;
|
||||
graph.series.legend = legend;
|
||||
|
||||
var order = new Rickshaw.Graph.Behavior.Series.Order( {
|
||||
graph: graph,
|
||||
legend: legend
|
||||
} );
|
||||
|
||||
var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {
|
||||
graph: graph,
|
||||
legend: legend
|
||||
} );
|
||||
|
||||
var axes = new Rickshaw.Graph.Axis.Time( {
|
||||
graph: graph
|
||||
} );
|
||||
axes.render();
|
||||
|
||||
var smoother = new Rickshaw.Graph.Smoother( {
|
||||
graph: graph,
|
||||
element: $('#smoother')
|
||||
} );
|
||||
|
||||
var offset_form = document.getElementById('offset_form');
|
||||
|
||||
offset_form.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 );
|
||||
|
||||
// add some data every so often
|
||||
var tv = 1000;
|
||||
graph.series.setTimeInterval(tv);
|
||||
|
||||
setInterval( function() {
|
||||
var data = { This: 3 };
|
||||
var randInt = Math.floor(Math.random()*100);
|
||||
if (randInt > 10) {
|
||||
data.That = randInt;
|
||||
}
|
||||
if (randInt > 15) {
|
||||
data.TheOtherThing = randInt;
|
||||
}
|
||||
|
||||
graph.series.addData(data);
|
||||
graph.update();
|
||||
}, tv );
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
29
public/assets/plugins/charts-rickshaw/examples/simple.html
Normal file
29
public/assets/plugins/charts-rickshaw/examples/simple.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<!doctype>
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="../rickshaw.min.js"></script>
|
||||
|
||||
<div id="chart"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
renderer: 'line',
|
||||
series: [
|
||||
{
|
||||
data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
|
||||
color: 'steelblue'
|
||||
}, {
|
||||
data: [ { x: 0, y: 19 }, { x: 1, y: 22 }, { x: 2, y: 32 }, { x: 3, y: 20 }, { x: 4, y: 21 } ],
|
||||
color: 'lightblue'
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,13 @@
|
||||
# Rickshaw + Socket.io
|
||||
|
||||
Just a simple example for Websockets support using Rickshaw + Socket.io
|
||||
|
||||
# Usage
|
||||
|
||||
```
|
||||
cd examples/socket.io
|
||||
npm install
|
||||
node app.js
|
||||
```
|
||||
|
||||
Then visit `http://localhost:8000` to see your graphs updated every second.
|
||||
@@ -0,0 +1,41 @@
|
||||
express = require('express');
|
||||
app = express();
|
||||
server = require('http').createServer(app)
|
||||
io = require('socket.io').listen(server);
|
||||
path = require('path');
|
||||
|
||||
server.listen(8000, function() {
|
||||
console.log("Started a server on port 8000");
|
||||
});
|
||||
|
||||
app.use(express.static(path.join(__dirname, '../../')));
|
||||
app.get('/', function (req, res) {
|
||||
res.sendfile(__dirname + '/socket.io.html');
|
||||
});
|
||||
|
||||
io.sockets.on('connection', function (socket) {
|
||||
incr = 0;
|
||||
var sendData = function() {
|
||||
data = [
|
||||
{
|
||||
"color": "blue",
|
||||
"name": "New York",
|
||||
"data": [ { "x": 0, "y": incr }, { "x": 1, "y": 49 }, { "x": 2, "y": 38 }, { "x": 3, "y": 30 }, { "x": 4, "y": 32 } ]
|
||||
}, {
|
||||
"color": "red",
|
||||
"name": "London",
|
||||
"data": [ { "x": 0, "y": 19 }, { "x": 1, "y": incr }, { "x": 2, "y": 29 }, { "x": 3, "y": 20 }, { "x": 4, "y": 14 } ]
|
||||
}, {
|
||||
"color": "black",
|
||||
"name": "Tokyo",
|
||||
"data": [ { "x": 0, "y": 8 }, { "x": 1, "y": 12 }, { "x": 2, "y": incr }, { "x": 3, "y": 11 }, { "x": 4, "y": 10 } ]
|
||||
}
|
||||
]
|
||||
socket.emit('rickshaw', data);
|
||||
incr++;
|
||||
}
|
||||
var run = setInterval(sendData, 1000);
|
||||
socket.on('disconnect', function() {
|
||||
clearInterval(run);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "rickshaw-socket.io",
|
||||
"version": "0.0.1",
|
||||
"description": "Rickshaw socket.io support",
|
||||
"main": "app.js",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "node app.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "3.3.5",
|
||||
"socket.io": "~0.9.16"
|
||||
},
|
||||
"author": "Alex Williams, Unscramble <license@unscramble.jp>",
|
||||
"license": "MIT"
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="../examples/css/lines.css">
|
||||
|
||||
<script src="../vendor/d3.v2.js"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="chart_container">
|
||||
<div id="chart"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
Rickshaw.Graph.Socketio.Static = Rickshaw.Class.create( Rickshaw.Graph.Socketio, {
|
||||
request: function() {
|
||||
var socket = io.connect(this.dataURL);
|
||||
thisData = this;
|
||||
socket.on('rickshaw', function (data) {
|
||||
console.log("Got some fancy Websocket data: ");
|
||||
console.log(data);
|
||||
thisData.success(data);
|
||||
});
|
||||
}
|
||||
} );
|
||||
|
||||
var socketioGraph = new Rickshaw.Graph.Socketio.Static( {
|
||||
element: document.getElementById("chart"),
|
||||
width: 400,
|
||||
height: 200,
|
||||
renderer: 'line',
|
||||
dataURL: "http://localhost",
|
||||
onData: function(d) { Rickshaw.Series.zeroFill(d); return d }
|
||||
} );
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
58
public/assets/plugins/charts-rickshaw/examples/sparse.html
Normal file
58
public/assets/plugins/charts-rickshaw/examples/sparse.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!doctype>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="chart_container">
|
||||
<div id="chart"></div>
|
||||
<div id="legend_container">
|
||||
<div id="smoother" title="Smoothing"></div>
|
||||
<div id="legend"></div>
|
||||
</div>
|
||||
<div id="slider"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// set up our data series with 50 random data points
|
||||
|
||||
var seriesData = [ [], [], [] ];
|
||||
var random = new Rickshaw.Fixtures.RandomData(150);
|
||||
|
||||
for (var i = 0; i < 150; i++) {
|
||||
random.addData(seriesData);
|
||||
}
|
||||
|
||||
// instantiate our graph!
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
width: 960,
|
||||
height: 500,
|
||||
renderer: 'line',
|
||||
series: [
|
||||
{
|
||||
color: "steelblue",
|
||||
name: 'New York',
|
||||
data: [ { x: 0, y: 15 }, { x: 100, y: 20 }, { x: 200, y: 22 }, { x: 300, y: 25 }, { x: 380, y: 24 }, { x: 400, y: 22 }, { x: 420, y: 25 } ],
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
|
||||
graph: graph
|
||||
} );
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
26
public/assets/plugins/charts-rickshaw/examples/start.html
Normal file
26
public/assets/plugins/charts-rickshaw/examples/start.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!doctype html>
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
<script src="../rickshaw.min.js"></script>
|
||||
|
||||
<div id="chart"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.querySelector("#chart"),
|
||||
width: 500,
|
||||
height: 200,
|
||||
series: [{
|
||||
color: 'steelblue',
|
||||
data: [
|
||||
{ x: 0, y: 40 },
|
||||
{ x: 1, y: 49 },
|
||||
{ x: 2, y: 38 },
|
||||
{ x: 3, y: 30 },
|
||||
{ x: 4, y: 32 } ]
|
||||
}]
|
||||
});
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
58
public/assets/plugins/charts-rickshaw/examples/status.html
Normal file
58
public/assets/plugins/charts-rickshaw/examples/status.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!doctype>
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/extensions.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
<script src="../rickshaw.min.js"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
|
||||
|
||||
<div id="chart"></div>
|
||||
<div id="legend"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var palette = new Rickshaw.Color.Palette( { scheme: 'httpStatus' } );
|
||||
|
||||
var wrapper = new Rickshaw.Graph.Ajax( {
|
||||
element: document.getElementById("chart"),
|
||||
dataURL: 'data/status.json',
|
||||
width: 960,
|
||||
height: 500,
|
||||
renderer: 'bar',
|
||||
onData: function(d) { return transformData(d) },
|
||||
onComplete: function(w) {
|
||||
var legend = new Rickshaw.Graph.Legend( {
|
||||
element: document.querySelector('#legend'),
|
||||
graph: w.graph
|
||||
} );
|
||||
}
|
||||
} );
|
||||
|
||||
function transformData(d) {
|
||||
var data = [];
|
||||
var statusCounts = {};
|
||||
|
||||
Rickshaw.keys(d).sort().forEach( function(t) {
|
||||
Rickshaw.keys(d[t]).forEach( function(status) {
|
||||
statusCounts[status] = statusCounts[status] || [];
|
||||
statusCounts[status].push( { x: parseFloat(t), y: d[t][status] } );
|
||||
} );
|
||||
} );
|
||||
|
||||
Rickshaw.keys(statusCounts).sort().forEach( function(status) {
|
||||
data.push( {
|
||||
name: status,
|
||||
data: statusCounts[status],
|
||||
color: palette.color(status)
|
||||
} );
|
||||
} );
|
||||
|
||||
Rickshaw.Series.zeroFill(data);
|
||||
return data;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
90
public/assets/plugins/charts-rickshaw/examples/stops.html
Normal file
90
public/assets/plugins/charts-rickshaw/examples/stops.html
Normal file
@@ -0,0 +1,90 @@
|
||||
<!doctype>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif
|
||||
}
|
||||
#chart_container {
|
||||
width: 960px;
|
||||
}
|
||||
.swatch {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
.label {
|
||||
display: inline-block;
|
||||
}
|
||||
.line {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 30px;
|
||||
}
|
||||
#legend {
|
||||
text-align: center;
|
||||
}
|
||||
.rickshaw_graph .detail {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="chart_container">
|
||||
<div id="chart"></div><br>
|
||||
<div id="legend"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// set up our data series with 50 random data points
|
||||
|
||||
var seriesData = [];
|
||||
|
||||
for (i = 0; i < 50; i++) {
|
||||
seriesData.push([]);
|
||||
}
|
||||
|
||||
var random = new Rickshaw.Fixtures.RandomData(150);
|
||||
|
||||
for (var i = 0; i < 150; i++) {
|
||||
random.addData(seriesData);
|
||||
}
|
||||
|
||||
// instantiate our graph!
|
||||
|
||||
var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum2001', interpolatedStopCount: 4 } );
|
||||
|
||||
var series = seriesData.map(function(s) {
|
||||
return {
|
||||
data: s,
|
||||
color: palette.color()
|
||||
}
|
||||
});
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
width: 960,
|
||||
height: 500,
|
||||
stroke: true,
|
||||
renderer: 'area',
|
||||
series: series
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
var legend = document.querySelector('#legend');
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
@@ -0,0 +1,56 @@
|
||||
<!doctype html>
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="../rickshaw.min.js"></script>
|
||||
|
||||
<div id="chart"></div>
|
||||
<div id="slider"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var seriesData = [ [], [] ];
|
||||
var random = new Rickshaw.Fixtures.RandomData(1500000);
|
||||
|
||||
for (var i = 0; i < 900; i++) {
|
||||
random.addData(seriesData);
|
||||
}
|
||||
|
||||
var graph = new Rickshaw.Graph({
|
||||
element: document.getElementById("chart"),
|
||||
width: 960,
|
||||
height: 500,
|
||||
stroke: true,
|
||||
strokeWidth: 0.5,
|
||||
renderer: 'area',
|
||||
xScale: d3.time.scale(),
|
||||
yScale: d3.scale.sqrt(),
|
||||
series:[
|
||||
{ color: 'steelblue', data: seriesData[0] },
|
||||
{ color: '#99d4ee', data: seriesData[1] }
|
||||
]
|
||||
});
|
||||
|
||||
graph.render();
|
||||
|
||||
var xAxis = new Rickshaw.Graph.Axis.X({
|
||||
graph: graph,
|
||||
tickFormat: graph.x.tickFormat()
|
||||
});
|
||||
|
||||
xAxis.render();
|
||||
|
||||
var yAxis = new Rickshaw.Graph.Axis.Y({
|
||||
graph: graph
|
||||
});
|
||||
|
||||
yAxis.render();
|
||||
|
||||
var slider = new Rickshaw.Graph.RangeSlider.Preview({
|
||||
graph: graph,
|
||||
element: document.getElementById('slider')
|
||||
});
|
||||
|
||||
</script>
|
||||
80
public/assets/plugins/charts-rickshaw/examples/x_axis.html
Normal file
80
public/assets/plugins/charts-rickshaw/examples/x_axis.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<!doctype html>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
<script src="../rickshaw.js"></script>
|
||||
|
||||
<style>
|
||||
#chart {
|
||||
position: relative;
|
||||
left: 40px;
|
||||
display: block;
|
||||
}
|
||||
#y_axis {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
}
|
||||
#x_axis {
|
||||
position: relative;
|
||||
left: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="chart_container">
|
||||
<div id="y_axis"></div>
|
||||
<div id="chart"></div>
|
||||
<div id="x_axis"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// instantiate our graph!
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
renderer: 'line',
|
||||
height: 300,
|
||||
width: 800,
|
||||
series: [
|
||||
{
|
||||
data: [ { x: 0, y: 120 }, { x: 1, y: 890 }, { x: 2, y: 38 }, { x: 3, y: 70 }, { x: 4, y: 32 } ],
|
||||
color: "#c05020"
|
||||
}, {
|
||||
data: [ { x: 0, y: 80 }, { x: 1, y: 200 }, { x: 2, y: 100 }, { x: 3, y: 520 }, { x: 4, y: 133 } ],
|
||||
color: "#30c020"
|
||||
}, {
|
||||
data: [ { x: 0, y: 200 }, { x: 1, y: 390 }, { x: 2, y: 1000 }, { x: 3, y: 200 }, { x: 4, y: 230 } ],
|
||||
color: "#6060c0"
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
var format = function(n) {
|
||||
|
||||
var map = {
|
||||
0: 'zero',
|
||||
1: 'first',
|
||||
2: 'second',
|
||||
3: 'third',
|
||||
4: 'fourth'
|
||||
};
|
||||
|
||||
return map[n];
|
||||
}
|
||||
|
||||
var x_ticks = new Rickshaw.Graph.Axis.X( {
|
||||
graph: graph,
|
||||
orientation: 'bottom',
|
||||
element: document.getElementById('x_axis'),
|
||||
pixelsPerTick: 200,
|
||||
tickFormat: format
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
60
public/assets/plugins/charts-rickshaw/examples/y_axis.html
Normal file
60
public/assets/plugins/charts-rickshaw/examples/y_axis.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!doctype>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/lines.css">
|
||||
|
||||
<script src="../vendor/d3.v3.js"></script>
|
||||
|
||||
<script src="../rickshaw.js"></script>
|
||||
|
||||
<style>
|
||||
#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>
|
||||
|
||||
// instantiate our graph!
|
||||
|
||||
var graph = new Rickshaw.Graph( {
|
||||
element: document.getElementById("chart"),
|
||||
renderer: 'line',
|
||||
height: 300,
|
||||
width: 800,
|
||||
series: [
|
||||
{
|
||||
data: [ { x: 0, y: 120 }, { x: 1, y: 890 }, { x: 2, y: 38 }, { x: 3, y: 70 }, { x: 4, y: 32 } ],
|
||||
color: "#c05020"
|
||||
}, {
|
||||
data: [ { x: 0, y: 80 }, { x: 1, y: 200 }, { x: 2, y: 100 }, { x: 3, y: 520 }, { x: 4, y: 133 } ],
|
||||
color: "#30c020"
|
||||
}, {
|
||||
data: [ { x: 0, y: 200 }, { x: 1, y: 390 }, { x: 2, y: 1000 }, { x: 3, y: 200 }, { x: 4, y: 230 } ],
|
||||
color: "#6060c0"
|
||||
}
|
||||
]
|
||||
} );
|
||||
|
||||
var y_ticks = new Rickshaw.Graph.Axis.Y( {
|
||||
graph: graph,
|
||||
orientation: 'left',
|
||||
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
|
||||
element: document.getElementById('y_axis'),
|
||||
} );
|
||||
|
||||
graph.render();
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user