Skip to content

Commit 6a256ef

Browse files
j-whitej-white
committed
Initial support for legends.
1 parent 7a55a9f commit 6a256ef

15 files changed

+479
-13
lines changed

‎.jshintrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@
77
"undef": true,
88
"browser": true,
99
"node": true,
10-
"predef": ["Backshift", "Rickshaw", "d3", "jQuery", "console", "io", "describe", "it", "expect", "spyOn", "beforeEach", "afterEach"]
10+
"predef": ["Backshift", "Rickshaw", "d3", "jQuery", "console", "io", "describe", "it", "expect", "spyOn", "beforeEach", "afterEach", "Mark"]
1111
}

‎Gruntfile.js

+3
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ module.exports = function(grunt) {
66
'src/Backshift.Class.js',
77
'src/Backshift.Class.Configurable.js',
88
'src/Backshift.Math.js',
9+
'src/Backshift.Stats.js',
910
'src/Backshift.Utilities.Url.js',
1011
'src/Backshift.Graph.js',
1112
'src/Backshift.Data.js',
@@ -14,6 +15,8 @@ module.exports = function(grunt) {
1415
'src/Backshift.Data.Mock.Trig.js',
1516
'src/Backshift.Data.Newts.js',
1617
'src/Backshift.Data.Factory.js',
18+
'src/Backshift.Legend.js',
19+
'src/Backshift.Legend.Rickshaw.js',
1720
'src/Backshift.Graph.js',
1821
'src/Backshift.Graph.Matrix.js',
1922
'src/Backshift.Graph.Rickshaw.js'

‎NOTES

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
-The multi-renderer in Rickshaw does not support different strokeWidths for different series

‎examples/newtsGraphs.html

+8-3
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,22 @@
1414
<script src="../vendor/jquery.datetimepicker.js"></script>
1515
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
1616
<script src="../vendor/rickshaw.js"></script>
17+
<script src="../vendor/markup.min.js"></script>
1718
<script src="../src/Compat.js"></script>
1819
<script src="../src/Backshift.js"></script>
1920
<script src="../src/Backshift.Class.js"></script>
2021
<script src="../src/Backshift.Class.Configurable.js"></script>
2122
<script src="../src/Backshift.Math.js"></script>
23+
<script src="../src/Backshift.Stats.js"></script>
2224
<script src="../src/Backshift.Utilities.Url.js"></script>
2325
<script src="../src/Backshift.Data.js"></script>
2426
<script src="../src/Backshift.Data.Newts.js"></script>
2527
<script src="../src/Backshift.Data.Mock.js"></script>
2628
<script src="../src/Backshift.Data.Mock.TrigFnFactory.js"></script>
2729
<script src="../src/Backshift.Data.Mock.Trig.js"></script>
2830
<script src="../src/Backshift.Data.Factory.js"></script>
31+
<script src="../src/Backshift.Legend.js"></script>
32+
<script src="../src/Backshift.Legend.Rickshaw.js"></script>
2933
<script src="../src/Backshift.Graph.js"></script>
3034
<script src="../src/Backshift.Graph.Matrix.js"></script>
3135
<script src="../src/Backshift.Graph.Rickshaw.js"></script>
@@ -40,10 +44,10 @@
4044
</div>
4145
<div class="row" style="padding-top: 25px"></div>
4246
<div class="row">
43-
<div class="col-xs-4">
47+
<div class="col-sm-6">
4448
<div id="graph1"></div>
4549
</div>
46-
<div class="col-xs-8">
50+
<div class="col-sm-6">
4751
<div id="graph2"></div>
4852
</div>
4953
</div>
@@ -113,6 +117,7 @@
113117
type: "line"
114118
}
115119
],
120+
legend: "{{series}}{{swatch}}{{name}} Avg: {{avg|fix>2}} Min: {{min|fix>2}} Max: {{max|fix>2}}<br/>{{/series}}",
116121
preview: false
117122
};
118123

@@ -122,7 +127,7 @@
122127
var graph1 = new Backshift.Graph.Rickshaw({
123128
model: model1,
124129
element: document.querySelector("#graph1"),
125-
width: 250,
130+
width: 350,
126131
height: 200,
127132
start: start,
128133
end: end,

‎examples/rickshawGraph.html

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
2+
<!DOCTYPE html>
3+
<meta charset="utf-8">
4+
5+
<head>
6+
<link rel="stylesheet" type="text/css" href="../vendor/rickshaw.min.css">
7+
<link rel="stylesheet" type="text/css" href="../vendor/jquery.datetimepicker.css">
8+
<link rel="stylesheet" type="text/css" href="../vendor/bootstrap/css/bootstrap.min.css">
9+
<link rel="stylesheet" type="text/css" href="../vendor/bootstrap/css/bootstrap-theme.min.css">
10+
11+
<script src="../vendor/d3.min.js"></script>
12+
<script src="../vendor/jquery.min.js"></script>
13+
<script src="../vendor/jquery-ui.min.js"></script>
14+
<script src="../vendor/jquery.datetimepicker.js"></script>
15+
<script src="../vendor/markup.min.js"></script>
16+
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
17+
<script src="../vendor/rickshaw.js"></script>
18+
<script src="../src/Compat.js"></script>
19+
<script src="../src/Backshift.js"></script>
20+
<script src="../src/Backshift.Class.js"></script>
21+
<script src="../src/Backshift.Class.Configurable.js"></script>
22+
<script src="../src/Backshift.Math.js"></script>
23+
<script src="../src/Backshift.Stats.js"></script>
24+
<script src="../src/Backshift.Utilities.Url.js"></script>
25+
<script src="../src/Backshift.Data.js"></script>
26+
<script src="../src/Backshift.Data.Newts.js"></script>
27+
<script src="../src/Backshift.Data.Mock.js"></script>
28+
<script src="../src/Backshift.Data.Mock.TrigFnFactory.js"></script>
29+
<script src="../src/Backshift.Data.Mock.Trig.js"></script>
30+
<script src="../src/Backshift.Data.Factory.js"></script>
31+
<script src="../src/Backshift.Legend.js"></script>
32+
<script src="../src/Backshift.Legend.Rickshaw.js"></script>
33+
<script src="../src/Backshift.Graph.js"></script>
34+
<script src="../src/Backshift.Graph.Matrix.js"></script>
35+
<script src="../src/Backshift.Graph.Rickshaw.js"></script>
36+
</head>
37+
38+
<body>
39+
40+
<div id="chart" style="padding-left: 40px"></div>
41+
42+
<script type="text/javascript">
43+
var model1 = {
44+
dataProcessor: {
45+
type: "trig"
46+
},
47+
sources: [
48+
{
49+
name: "wave1",
50+
type: "sin",
51+
amplitude: 5,
52+
hshift: 5,
53+
period: 32 * Math.PI
54+
},
55+
{
56+
name: "wave2",
57+
type: "sin",
58+
amplitude: 2,
59+
vshift: 4,
60+
period: 16 * Math.PI
61+
},
62+
{
63+
name: "wave3",
64+
type: "sin",
65+
amplitude: 2,
66+
hshift: 100,
67+
period: 18 * Math.PI
68+
}
69+
],
70+
series: [
71+
{
72+
name: "Wave 2",
73+
source: "wave1",
74+
type: "stack"
75+
//color: "#FFA340"
76+
},
77+
{
78+
name: "Wave 1",
79+
source: "wave2",
80+
type: "stack"
81+
//color: "#FFBC73"
82+
},
83+
{
84+
name: "Wave 3",
85+
source: "wave1",
86+
type: "stack"
87+
//color: "#4A60D7"
88+
},
89+
{
90+
name: "Wave 4",
91+
source: "wave3",
92+
type: "stack"
93+
//color: "#00B945"
94+
}
95+
],
96+
legend: [
97+
"{{series}}{{swatch}}{{name}} Avg: {{avg|fix>2}} Min: {{min|fix>2}} Max: {{max|fix>2}}<br/>{{/series}}",
98+
],
99+
preview: false
100+
};
101+
102+
var graph1 = new Backshift.Graph.Rickshaw({
103+
model: model1,
104+
element: document.querySelector("#chart"),
105+
width: 640,
106+
height: 480,
107+
last: 15*60,
108+
refreshRate: 1000
109+
});
110+
111+
graph1.render();
112+
</script>
113+
114+
</body>

‎examples/trigGraphs.html

+4
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,22 @@
1414
<script src="../vendor/jquery.datetimepicker.js"></script>
1515
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
1616
<script src="../vendor/rickshaw.js"></script>
17+
<script src="../vendor/markup.min.js"></script>
1718
<script src="../src/Compat.js"></script>
1819
<script src="../src/Backshift.js"></script>
1920
<script src="../src/Backshift.Class.js"></script>
2021
<script src="../src/Backshift.Class.Configurable.js"></script>
2122
<script src="../src/Backshift.Math.js"></script>
23+
<script src="../src/Backshift.Stats.js"></script>
2224
<script src="../src/Backshift.Utilities.Url.js"></script>
2325
<script src="../src/Backshift.Data.js"></script>
2426
<script src="../src/Backshift.Data.Newts.js"></script>
2527
<script src="../src/Backshift.Data.Mock.js"></script>
2628
<script src="../src/Backshift.Data.Mock.TrigFnFactory.js"></script>
2729
<script src="../src/Backshift.Data.Mock.Trig.js"></script>
2830
<script src="../src/Backshift.Data.Factory.js"></script>
31+
<script src="../src/Backshift.Legend.js"></script>
32+
<script src="../src/Backshift.Legend.Rickshaw.js"></script>
2933
<script src="../src/Backshift.Graph.js"></script>
3034
<script src="../src/Backshift.Graph.Matrix.js"></script>
3135
<script src="../src/Backshift.Graph.Rickshaw.js"></script>

‎karma.conf.js

+4
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,13 @@ module.exports = function(config) {
1818
'vendor/jquery.min.js',
1919
'vendor/jquery-ui.min.js',
2020
'vendor/rickshaw.js',
21+
'vendor/markup.min.js',
2122
'src/Compat.js',
2223
'src/Backshift.js',
2324
'src/Backshift.Class.js',
2425
'src/Backshift.Class.Configurable.js',
2526
'src/Backshift.Math.js',
27+
'src/Backshift.Stats.js',
2628
'src/Backshift.Utilities.Url.js',
2729
'src/Backshift.Graph.js',
2830
'src/Backshift.Data.js',
@@ -31,6 +33,8 @@ module.exports = function(config) {
3133
'src/Backshift.Data.Mock.Trig.js',
3234
'src/Backshift.Data.Newts.js',
3335
'src/Backshift.Data.Factory.js',
36+
'src/Backshift.Legend.js',
37+
'src/Backshift.Legend.Rickshaw.js',
3438
'src/Backshift.Graph.js',
3539
'src/Backshift.Graph.Matrix.js',
3640
'src/Backshift.Graph.Rickshaw.js',

‎src/Backshift.Graph.Rickshaw.js

+32-9
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ Backshift.Graph.Rickshaw = Backshift.Class.create( Backshift.Graph, {
2020
}
2121

2222
this.previewDiv = null;
23+
this.legendDiv = null;
2324
},
2425

2526
updateSeriesData: function (dp) {
@@ -59,10 +60,20 @@ Backshift.Graph.Rickshaw = Backshift.Class.create( Backshift.Graph, {
5960
}
6061
},
6162

63+
getSeriesColor: function(series, fallback) {
64+
if (series.color !== undefined) {
65+
return series.color;
66+
} else {
67+
return fallback;
68+
}
69+
},
70+
6271
onRender: function() {
6372
var container = d3.select(this.element);
6473

65-
var chartDiv = container.append("div");
74+
this.chartDiv = container.append("div");
75+
this.previewDiv = container.append("div");
76+
this.legendDiv = container.append("div");
6677

6778
var palette = new Rickshaw.Color.Palette( { scheme: 'classic9' } );
6879

@@ -73,18 +84,19 @@ Backshift.Graph.Rickshaw = Backshift.Class.create( Backshift.Graph, {
7384
rickshawSeries.push({
7485
name: series.name,
7586
data: this.seriesData[series.name],
76-
color: palette.color(),
87+
color: this.getSeriesColor(series, palette.color()),
7788
renderer: series.type
7889
});
7990
}
8091

8192
this.graph = new Rickshaw.Graph( {
82-
element: chartDiv.node(),
93+
element: this.chartDiv.node(),
8394
renderer: 'multi',
8495
width: this.width,
8596
height: this.height,
8697
min: 'auto',
87-
series: rickshawSeries
98+
series: rickshawSeries,
99+
padding: {top: 0.02, left: 0.02, right: 0.02, bottom: 0.02}
88100
} );
89101

90102
this.graph.render();
@@ -103,12 +115,22 @@ Backshift.Graph.Rickshaw = Backshift.Class.create( Backshift.Graph, {
103115

104116
yAxis.render();
105117

106-
new Rickshaw.Graph.HoverDetail( {
118+
this.legendDiv.node().style.paddingTop = '10px';
119+
this.legend = new Backshift.Legend.Rickshaw( {
120+
model: this.model,
121+
graph: this.graph,
122+
element: this.legendDiv.node(),
123+
dataProcessor: this.dp
124+
} );
125+
126+
this.legend.render();
127+
128+
/* var hoverDetail = */ new Rickshaw.Graph.HoverDetail( {
107129
graph: this.graph,
108130
xFormatter: function(x) {
109131
return new Date(x * 1000).toString();
110132
}
111-
} );
133+
} );
112134
},
113135

114136
onFetchSuccess: function(dp) {
@@ -118,16 +140,17 @@ Backshift.Graph.Rickshaw = Backshift.Class.create( Backshift.Graph, {
118140
// it fails to load intermittently otherwise
119141
var container = d3.select(this.element);
120142

121-
if (this.model.preview && this.previewDiv === null) {
122-
this.previewDiv = container.append("div");
123-
143+
if (this.model.preview) {
124144
var preview = new Rickshaw.Graph.RangeSlider.Preview( {
125145
graph: this.graph,
126146
element: this.previewDiv.node()
127147
} );
128148

129149
preview.render();
130150
}
151+
152+
// Update the legend with the latest values
153+
this.legend.render(this.dp);
131154
}
132155

133156
});

‎src/Backshift.Legend.Rickshaw.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* Created by jwhite on 6/3/14.
3+
*/
4+
Backshift.namespace('Backshift.Legend.Rickshaw');
5+
6+
Backshift.Legend.Rickshaw = Backshift.Class.create( Backshift.Legend, {
7+
initialize: function($super, args) {
8+
this.graph = args.graph;
9+
args.width = this.graph.width;
10+
11+
this.graphSeries = {};
12+
this.graph.series.forEach( function(s) {
13+
this.graphSeries[s.name] = s;
14+
}, this );
15+
16+
$super(args);
17+
},
18+
getSeriesContext: function($super, series) {
19+
var context = $super(series);
20+
context.swatch = "<div style='display: inline-block; width: 10px; height: 10px; margin: 0 8px 0 0; background-color: " +
21+
this.graphSeries[series.name].color + "'></div>";
22+
return context;
23+
}
24+
});

0 commit comments

Comments
 (0)