chartx 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +17 -0
- data/.gitmodules +3 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +145 -0
- data/Rakefile +1 -0
- data/chartx.gemspec +40 -0
- data/lib/chartx/engine.rb +11 -0
- data/lib/chartx/helper.rb +184 -0
- data/lib/chartx/version.rb +3 -0
- data/lib/chartx.rb +3 -0
- data/screenshots/barchart.png +0 -0
- data/screenshots/bulletchart.png +0 -0
- data/screenshots/horizontalbarchart.png +0 -0
- data/screenshots/linechart.png +0 -0
- data/screenshots/linewithfocuschart.png +0 -0
- data/screenshots/multibarchart2.png +0 -0
- data/screenshots/piechart.png +0 -0
- data/screenshots/scatterchart.png +0 -0
- data/screenshots/stackedareachart.png +0 -0
- data/screenshots/stackedareachart3.png +0 -0
- data/vendor/assets/javascripts/chartx-core.js +9 -0
- data/vendor/assets/javascripts/chartx-models.js +2 -0
- data/vendor/assets/javascripts/nvd3/.gitignore +27 -0
- data/vendor/assets/javascripts/nvd3/.jshintrc +3 -0
- data/vendor/assets/javascripts/nvd3/LICENSE.md +49 -0
- data/vendor/assets/javascripts/nvd3/README.md +1 -0
- data/vendor/assets/javascripts/nvd3/lib/cie.js +155 -0
- data/vendor/assets/javascripts/nvd3/lib/crossfilter.js +1180 -0
- data/vendor/assets/javascripts/nvd3/lib/crossfilter.min.js +1 -0
- data/vendor/assets/javascripts/nvd3/lib/d3.js +8798 -0
- data/vendor/assets/javascripts/nvd3/lib/d3.min.js +5 -0
- data/vendor/assets/javascripts/nvd3/lib/fisheye.js +86 -0
- data/vendor/assets/javascripts/nvd3/lib/hive.js +80 -0
- data/vendor/assets/javascripts/nvd3/lib/horizon.js +192 -0
- data/vendor/assets/javascripts/nvd3/lib/sankey.js +292 -0
- data/vendor/assets/javascripts/nvd3/nv.d3.js +13048 -0
- data/vendor/assets/javascripts/nvd3/nv.d3.min.js +6 -0
- data/vendor/assets/javascripts/nvd3/src/core.js +118 -0
- data/vendor/assets/javascripts/nvd3/src/intro.js +1 -0
- data/vendor/assets/javascripts/nvd3/src/models/axis.js +398 -0
- data/vendor/assets/javascripts/nvd3/src/models/boilerplate.js +102 -0
- data/vendor/assets/javascripts/nvd3/src/models/bullet.js +377 -0
- data/vendor/assets/javascripts/nvd3/src/models/bulletChart.js +341 -0
- data/vendor/assets/javascripts/nvd3/src/models/cumulativeLineChart.js +685 -0
- data/vendor/assets/javascripts/nvd3/src/models/discreteBar.js +327 -0
- data/vendor/assets/javascripts/nvd3/src/models/discreteBarChart.js +290 -0
- data/vendor/assets/javascripts/nvd3/src/models/distribution.js +146 -0
- data/vendor/assets/javascripts/nvd3/src/models/historicalBar.js +289 -0
- data/vendor/assets/javascripts/nvd3/src/models/historicalBarChart.js +421 -0
- data/vendor/assets/javascripts/nvd3/src/models/indentedTree.js +317 -0
- data/vendor/assets/javascripts/nvd3/src/models/legend.js +207 -0
- data/vendor/assets/javascripts/nvd3/src/models/line.js +284 -0
- data/vendor/assets/javascripts/nvd3/src/models/lineChart.js +421 -0
- data/vendor/assets/javascripts/nvd3/src/models/linePlusBarChart.js +455 -0
- data/vendor/assets/javascripts/nvd3/src/models/linePlusBarWithFocusChart.js +665 -0
- data/vendor/assets/javascripts/nvd3/src/models/lineWithFisheye.js +197 -0
- data/vendor/assets/javascripts/nvd3/src/models/lineWithFisheyeChart.js +319 -0
- data/vendor/assets/javascripts/nvd3/src/models/lineWithFocusChart.js +560 -0
- data/vendor/assets/javascripts/nvd3/src/models/multiBar.js +442 -0
- data/vendor/assets/javascripts/nvd3/src/models/multiBarChart.js +506 -0
- data/vendor/assets/javascripts/nvd3/src/models/multiBarHorizontal.js +420 -0
- data/vendor/assets/javascripts/nvd3/src/models/multiBarHorizontalChart.js +448 -0
- data/vendor/assets/javascripts/nvd3/src/models/multiBarTimeSeries.js +371 -0
- data/vendor/assets/javascripts/nvd3/src/models/multiBarTimeSeriesChart.js +403 -0
- data/vendor/assets/javascripts/nvd3/src/models/multiChart.js +444 -0
- data/vendor/assets/javascripts/nvd3/src/models/ohlcBar.js +365 -0
- data/vendor/assets/javascripts/nvd3/src/models/parallelCoordinates.js +238 -0
- data/vendor/assets/javascripts/nvd3/src/models/pie.js +386 -0
- data/vendor/assets/javascripts/nvd3/src/models/pieChart.js +302 -0
- data/vendor/assets/javascripts/nvd3/src/models/scatter.js +660 -0
- data/vendor/assets/javascripts/nvd3/src/models/scatterChart.js +614 -0
- data/vendor/assets/javascripts/nvd3/src/models/scatterPlusLineChart.js +610 -0
- data/vendor/assets/javascripts/nvd3/src/models/sparkline.js +179 -0
- data/vendor/assets/javascripts/nvd3/src/models/sparklinePlus.js +293 -0
- data/vendor/assets/javascripts/nvd3/src/models/stackedArea.js +336 -0
- data/vendor/assets/javascripts/nvd3/src/models/stackedAreaChart.js +490 -0
- data/vendor/assets/javascripts/nvd3/src/nv.d3.css +704 -0
- data/vendor/assets/javascripts/nvd3/src/outro.js +1 -0
- data/vendor/assets/javascripts/nvd3/src/tooltip.js +133 -0
- data/vendor/assets/javascripts/nvd3/src/utils.js +118 -0
- data/vendor/assets/javascripts/set-env.js.erb +1 -0
- data/vendor/assets/stylesheets/chartx.css +3 -0
- metadata +189 -0
@@ -0,0 +1,341 @@
|
|
1
|
+
|
2
|
+
// Chart design based on the recommendations of Stephen Few. Implementation
|
3
|
+
// based on the work of Clint Ivy, Jamie Love, and Jason Davies.
|
4
|
+
// http://projects.instantcognition.com/protovis/bulletchart/
|
5
|
+
nv.models.bulletChart = function() {
|
6
|
+
|
7
|
+
//============================================================
|
8
|
+
// Public Variables with Default Settings
|
9
|
+
//------------------------------------------------------------
|
10
|
+
|
11
|
+
var bullet = nv.models.bullet()
|
12
|
+
;
|
13
|
+
|
14
|
+
var orient = 'left' // TODO top & bottom
|
15
|
+
, reverse = false
|
16
|
+
, margin = {top: 5, right: 40, bottom: 20, left: 120}
|
17
|
+
, ranges = function(d) { return d.ranges }
|
18
|
+
, markers = function(d) { return d.markers }
|
19
|
+
, measures = function(d) { return d.measures }
|
20
|
+
, width = null
|
21
|
+
, height = 55
|
22
|
+
, tickFormat = null
|
23
|
+
, tooltips = true
|
24
|
+
, tooltip = function(key, x, y, e, graph) {
|
25
|
+
return '<h3>' + x + '</h3>' +
|
26
|
+
'<p>' + y + '</p>'
|
27
|
+
}
|
28
|
+
, noData = 'No Data Available.'
|
29
|
+
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
|
30
|
+
;
|
31
|
+
|
32
|
+
//============================================================
|
33
|
+
|
34
|
+
|
35
|
+
//============================================================
|
36
|
+
// Private Variables
|
37
|
+
//------------------------------------------------------------
|
38
|
+
|
39
|
+
var showTooltip = function(e, offsetElement) {
|
40
|
+
var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ) + margin.left,
|
41
|
+
top = e.pos[1] + ( offsetElement.offsetTop || 0) + margin.top,
|
42
|
+
content = tooltip(e.key, e.label, e.value, e, chart);
|
43
|
+
|
44
|
+
nv.tooltip.show([left, top], content, e.value < 0 ? 'e' : 'w', null, offsetElement);
|
45
|
+
};
|
46
|
+
|
47
|
+
//============================================================
|
48
|
+
|
49
|
+
|
50
|
+
function chart(selection) {
|
51
|
+
selection.each(function(d, i) {
|
52
|
+
var container = d3.select(this);
|
53
|
+
|
54
|
+
var availableWidth = (width || parseInt(container.style('width')) || 960)
|
55
|
+
- margin.left - margin.right,
|
56
|
+
availableHeight = height - margin.top - margin.bottom,
|
57
|
+
that = this;
|
58
|
+
|
59
|
+
|
60
|
+
chart.update = function() { chart(selection) };
|
61
|
+
chart.container = this;
|
62
|
+
|
63
|
+
//------------------------------------------------------------
|
64
|
+
// Display No Data message if there's nothing to show.
|
65
|
+
|
66
|
+
if (!d || !ranges.call(this, d, i)) {
|
67
|
+
var noDataText = container.selectAll('.nv-noData').data([noData]);
|
68
|
+
|
69
|
+
noDataText.enter().append('text')
|
70
|
+
.attr('class', 'nvd3 nv-noData')
|
71
|
+
.attr('dy', '-.7em')
|
72
|
+
.style('text-anchor', 'middle');
|
73
|
+
|
74
|
+
noDataText
|
75
|
+
.attr('x', margin.left + availableWidth / 2)
|
76
|
+
.attr('y', 18 + margin.top + availableHeight / 2)
|
77
|
+
.text(function(d) { return d });
|
78
|
+
|
79
|
+
return chart;
|
80
|
+
} else {
|
81
|
+
container.selectAll('.nv-noData').remove();
|
82
|
+
}
|
83
|
+
|
84
|
+
//------------------------------------------------------------
|
85
|
+
|
86
|
+
|
87
|
+
|
88
|
+
var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
|
89
|
+
markerz = markers.call(this, d, i).slice().sort(d3.descending),
|
90
|
+
measurez = measures.call(this, d, i).slice().sort(d3.descending);
|
91
|
+
|
92
|
+
|
93
|
+
//------------------------------------------------------------
|
94
|
+
// Setup containers and skeleton of chart
|
95
|
+
|
96
|
+
var wrap = container.selectAll('g.nv-wrap.nv-bulletChart').data([d]);
|
97
|
+
var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-bulletChart');
|
98
|
+
var gEnter = wrapEnter.append('g');
|
99
|
+
var g = wrap.select('g');
|
100
|
+
|
101
|
+
gEnter.append('g').attr('class', 'nv-bulletWrap');
|
102
|
+
gEnter.append('g').attr('class', 'nv-titles');
|
103
|
+
|
104
|
+
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
105
|
+
|
106
|
+
//------------------------------------------------------------
|
107
|
+
|
108
|
+
|
109
|
+
// Compute the new x-scale.
|
110
|
+
var x1 = d3.scale.linear()
|
111
|
+
.domain([0, Math.max(rangez[0], markerz[0], measurez[0])]) // TODO: need to allow forceX and forceY, and xDomain, yDomain
|
112
|
+
.range(reverse ? [availableWidth, 0] : [0, availableWidth]);
|
113
|
+
|
114
|
+
// Retrieve the old x-scale, if this is an update.
|
115
|
+
var x0 = this.__chart__ || d3.scale.linear()
|
116
|
+
.domain([0, Infinity])
|
117
|
+
.range(x1.range());
|
118
|
+
|
119
|
+
// Stash the new scale.
|
120
|
+
this.__chart__ = x1;
|
121
|
+
|
122
|
+
/*
|
123
|
+
// Derive width-scales from the x-scales.
|
124
|
+
var w0 = bulletWidth(x0),
|
125
|
+
w1 = bulletWidth(x1);
|
126
|
+
|
127
|
+
function bulletWidth(x) {
|
128
|
+
var x0 = x(0);
|
129
|
+
return function(d) {
|
130
|
+
return Math.abs(x(d) - x(0));
|
131
|
+
};
|
132
|
+
}
|
133
|
+
|
134
|
+
function bulletTranslate(x) {
|
135
|
+
return function(d) {
|
136
|
+
return 'translate(' + x(d) + ',0)';
|
137
|
+
};
|
138
|
+
}
|
139
|
+
*/
|
140
|
+
|
141
|
+
var w0 = function(d) { return Math.abs(x0(d) - x0(0)) }, // TODO: could optimize by precalculating x0(0) and x1(0)
|
142
|
+
w1 = function(d) { return Math.abs(x1(d) - x1(0)) };
|
143
|
+
|
144
|
+
|
145
|
+
var title = gEnter.select('.nv-titles').append('g')
|
146
|
+
.attr('text-anchor', 'end')
|
147
|
+
.attr('transform', 'translate(-6,' + (height - margin.top - margin.bottom) / 2 + ')');
|
148
|
+
title.append('text')
|
149
|
+
.attr('class', 'nv-title')
|
150
|
+
.text(function(d) { return d.title; });
|
151
|
+
|
152
|
+
title.append('text')
|
153
|
+
.attr('class', 'nv-subtitle')
|
154
|
+
.attr('dy', '1em')
|
155
|
+
.text(function(d) { return d.subtitle; });
|
156
|
+
|
157
|
+
|
158
|
+
|
159
|
+
bullet
|
160
|
+
.width(availableWidth)
|
161
|
+
.height(availableHeight)
|
162
|
+
|
163
|
+
var bulletWrap = g.select('.nv-bulletWrap');
|
164
|
+
|
165
|
+
d3.transition(bulletWrap).call(bullet);
|
166
|
+
|
167
|
+
|
168
|
+
|
169
|
+
// Compute the tick format.
|
170
|
+
var format = tickFormat || x1.tickFormat( availableWidth / 100 );
|
171
|
+
|
172
|
+
// Update the tick groups.
|
173
|
+
var tick = g.selectAll('g.nv-tick')
|
174
|
+
.data(x1.ticks( availableWidth / 50 ), function(d) {
|
175
|
+
return this.textContent || format(d);
|
176
|
+
});
|
177
|
+
|
178
|
+
// Initialize the ticks with the old scale, x0.
|
179
|
+
var tickEnter = tick.enter().append('g')
|
180
|
+
.attr('class', 'nv-tick')
|
181
|
+
.attr('transform', function(d) { return 'translate(' + x0(d) + ',0)' })
|
182
|
+
.style('opacity', 1e-6);
|
183
|
+
|
184
|
+
tickEnter.append('line')
|
185
|
+
.attr('y1', availableHeight)
|
186
|
+
.attr('y2', availableHeight * 7 / 6);
|
187
|
+
|
188
|
+
tickEnter.append('text')
|
189
|
+
.attr('text-anchor', 'middle')
|
190
|
+
.attr('dy', '1em')
|
191
|
+
.attr('y', availableHeight * 7 / 6)
|
192
|
+
.text(format);
|
193
|
+
|
194
|
+
|
195
|
+
// Transition the updating ticks to the new scale, x1.
|
196
|
+
var tickUpdate = d3.transition(tick)
|
197
|
+
.attr('transform', function(d) { return 'translate(' + x1(d) + ',0)' })
|
198
|
+
.style('opacity', 1);
|
199
|
+
|
200
|
+
tickUpdate.select('line')
|
201
|
+
.attr('y1', availableHeight)
|
202
|
+
.attr('y2', availableHeight * 7 / 6);
|
203
|
+
|
204
|
+
tickUpdate.select('text')
|
205
|
+
.attr('y', availableHeight * 7 / 6);
|
206
|
+
|
207
|
+
// Transition the exiting ticks to the new scale, x1.
|
208
|
+
d3.transition(tick.exit())
|
209
|
+
.attr('transform', function(d) { return 'translate(' + x1(d) + ',0)' })
|
210
|
+
.style('opacity', 1e-6)
|
211
|
+
.remove();
|
212
|
+
|
213
|
+
|
214
|
+
//============================================================
|
215
|
+
// Event Handling/Dispatching (in chart's scope)
|
216
|
+
//------------------------------------------------------------
|
217
|
+
|
218
|
+
dispatch.on('tooltipShow', function(e) {
|
219
|
+
e.key = d.title;
|
220
|
+
if (tooltips) showTooltip(e, that.parentNode);
|
221
|
+
});
|
222
|
+
|
223
|
+
//============================================================
|
224
|
+
|
225
|
+
});
|
226
|
+
|
227
|
+
d3.timer.flush();
|
228
|
+
|
229
|
+
return chart;
|
230
|
+
}
|
231
|
+
|
232
|
+
|
233
|
+
//============================================================
|
234
|
+
// Event Handling/Dispatching (out of chart's scope)
|
235
|
+
//------------------------------------------------------------
|
236
|
+
|
237
|
+
bullet.dispatch.on('elementMouseover.tooltip', function(e) {
|
238
|
+
dispatch.tooltipShow(e);
|
239
|
+
});
|
240
|
+
|
241
|
+
bullet.dispatch.on('elementMouseout.tooltip', function(e) {
|
242
|
+
dispatch.tooltipHide(e);
|
243
|
+
});
|
244
|
+
|
245
|
+
dispatch.on('tooltipHide', function() {
|
246
|
+
if (tooltips) nv.tooltip.cleanup();
|
247
|
+
});
|
248
|
+
|
249
|
+
//============================================================
|
250
|
+
|
251
|
+
|
252
|
+
//============================================================
|
253
|
+
// Expose Public Variables
|
254
|
+
//------------------------------------------------------------
|
255
|
+
|
256
|
+
chart.dispatch = dispatch;
|
257
|
+
chart.bullet = bullet;
|
258
|
+
|
259
|
+
d3.rebind(chart, bullet, 'color');
|
260
|
+
|
261
|
+
// left, right, top, bottom
|
262
|
+
chart.orient = function(x) {
|
263
|
+
if (!arguments.length) return orient;
|
264
|
+
orient = x;
|
265
|
+
reverse = orient == 'right' || orient == 'bottom';
|
266
|
+
return chart;
|
267
|
+
};
|
268
|
+
|
269
|
+
// ranges (bad, satisfactory, good)
|
270
|
+
chart.ranges = function(x) {
|
271
|
+
if (!arguments.length) return ranges;
|
272
|
+
ranges = x;
|
273
|
+
return chart;
|
274
|
+
};
|
275
|
+
|
276
|
+
// markers (previous, goal)
|
277
|
+
chart.markers = function(x) {
|
278
|
+
if (!arguments.length) return markers;
|
279
|
+
markers = x;
|
280
|
+
return chart;
|
281
|
+
};
|
282
|
+
|
283
|
+
// measures (actual, forecast)
|
284
|
+
chart.measures = function(x) {
|
285
|
+
if (!arguments.length) return measures;
|
286
|
+
measures = x;
|
287
|
+
return chart;
|
288
|
+
};
|
289
|
+
|
290
|
+
chart.width = function(x) {
|
291
|
+
if (!arguments.length) return width;
|
292
|
+
width = x;
|
293
|
+
return chart;
|
294
|
+
};
|
295
|
+
|
296
|
+
chart.height = function(x) {
|
297
|
+
if (!arguments.length) return height;
|
298
|
+
height = x;
|
299
|
+
return chart;
|
300
|
+
};
|
301
|
+
|
302
|
+
chart.margin = function(_) {
|
303
|
+
if (!arguments.length) return margin;
|
304
|
+
margin.top = typeof _.top != 'undefined' ? _.top : margin.top;
|
305
|
+
margin.right = typeof _.right != 'undefined' ? _.right : margin.right;
|
306
|
+
margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
|
307
|
+
margin.left = typeof _.left != 'undefined' ? _.left : margin.left;
|
308
|
+
return chart;
|
309
|
+
};
|
310
|
+
|
311
|
+
chart.tickFormat = function(x) {
|
312
|
+
if (!arguments.length) return tickFormat;
|
313
|
+
tickFormat = x;
|
314
|
+
return chart;
|
315
|
+
};
|
316
|
+
|
317
|
+
chart.tooltips = function(_) {
|
318
|
+
if (!arguments.length) return tooltips;
|
319
|
+
tooltips = _;
|
320
|
+
return chart;
|
321
|
+
};
|
322
|
+
|
323
|
+
chart.tooltipContent = function(_) {
|
324
|
+
if (!arguments.length) return tooltip;
|
325
|
+
tooltip = _;
|
326
|
+
return chart;
|
327
|
+
};
|
328
|
+
|
329
|
+
chart.noData = function(_) {
|
330
|
+
if (!arguments.length) return noData;
|
331
|
+
noData = _;
|
332
|
+
return chart;
|
333
|
+
};
|
334
|
+
|
335
|
+
//============================================================
|
336
|
+
|
337
|
+
|
338
|
+
return chart;
|
339
|
+
};
|
340
|
+
|
341
|
+
|