chart 0.1.4.2 → 0.1.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/app/helpers/chart2_helper.rb +272 -0
- data/app/helpers/chart_helper.rb +0 -304
- data/app/helpers/google_helper.rb +307 -0
- data/app/helpers/highcharts_helper.rb +275 -0
- data/app/helpers/nvd3_helper.rb +460 -0
- data/lib/chart/version.rb +1 -1
- data/vendor/assets/javascripts/chart2.js +9773 -0
- data/vendor/assets/javascripts/google.js +147 -45
- data/vendor/assets/javascripts/nvd3.js +1174 -611
- metadata +7 -2
@@ -0,0 +1,460 @@
|
|
1
|
+
module Nvd3Helper
|
2
|
+
#NVD3
|
3
|
+
|
4
|
+
def nvd3_line
|
5
|
+
html = "".html_safe
|
6
|
+
script = javascript_tag do
|
7
|
+
<<-END.html_safe
|
8
|
+
var margin = {top: 20, right: 20, bottom: 30, left: 50},
|
9
|
+
width = 960 - margin.left - margin.right,
|
10
|
+
height = 500 - margin.top - margin.bottom;
|
11
|
+
|
12
|
+
var formatDate = d3.time.format("%d-%b-%y");
|
13
|
+
|
14
|
+
var x = d3.time.scale()
|
15
|
+
.range([0, width]);
|
16
|
+
|
17
|
+
var y = d3.scale.linear()
|
18
|
+
.range([height, 0]);
|
19
|
+
|
20
|
+
var xAxis = d3.svg.axis()
|
21
|
+
.scale(x)
|
22
|
+
.orient("bottom");
|
23
|
+
|
24
|
+
var yAxis = d3.svg.axis()
|
25
|
+
.scale(y)
|
26
|
+
.orient("left");
|
27
|
+
|
28
|
+
var line = d3.svg.line()
|
29
|
+
.x(function(d) { return x(d.date); })
|
30
|
+
.y(function(d) { return y(d.close); });
|
31
|
+
|
32
|
+
var svg = d3.select("body").append("svg")
|
33
|
+
.attr("width", width + margin.left + margin.right)
|
34
|
+
.attr("height", height + margin.top + margin.bottom)
|
35
|
+
.append("g")
|
36
|
+
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
37
|
+
|
38
|
+
d3.tsv("data1.tsv", type, function(error, data) {
|
39
|
+
if (error) throw error;
|
40
|
+
|
41
|
+
x.domain(d3.extent(data, function(d) { return d.date; }));
|
42
|
+
y.domain(d3.extent(data, function(d) { return d.close; }));
|
43
|
+
|
44
|
+
svg.append("g")
|
45
|
+
.attr("class", "x axis")
|
46
|
+
.attr("transform", "translate(0," + height + ")")
|
47
|
+
.call(xAxis);
|
48
|
+
|
49
|
+
svg.append("g")
|
50
|
+
.attr("class", "y axis")
|
51
|
+
.call(yAxis)
|
52
|
+
.append("text")
|
53
|
+
.attr("transform", "rotate(-90)")
|
54
|
+
.attr("y", 6)
|
55
|
+
.attr("dy", ".71em")
|
56
|
+
.style("text-anchor", "end")
|
57
|
+
.text("Price ($)");
|
58
|
+
|
59
|
+
svg.append("path")
|
60
|
+
.datum(data)
|
61
|
+
.attr("class", "line")
|
62
|
+
.attr("d", line);
|
63
|
+
});
|
64
|
+
|
65
|
+
function type(d) {
|
66
|
+
d.date = formatDate.parse(d.date);
|
67
|
+
d.close = +d.close;
|
68
|
+
return d;
|
69
|
+
}
|
70
|
+
|
71
|
+
END
|
72
|
+
end
|
73
|
+
return html + script
|
74
|
+
end
|
75
|
+
|
76
|
+
|
77
|
+
def nvd3_bar
|
78
|
+
html = "".html_safe
|
79
|
+
# html = "<div id=\"chart\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"><svg></svg></div>".html_safe
|
80
|
+
script = javascript_tag do
|
81
|
+
<<-END.html_safe
|
82
|
+
var n = 4,
|
83
|
+
m = 58,
|
84
|
+
stack = d3.layout.stack(),
|
85
|
+
layers = stack(d3.range(n).map(function() { return bumpLayer(m, .1); })),
|
86
|
+
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
|
87
|
+
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
|
88
|
+
|
89
|
+
var margin = {top: 40, right: 10, bottom: 20, left: 10},
|
90
|
+
width = 960 - margin.left - margin.right,
|
91
|
+
height = 500 - margin.top - margin.bottom;
|
92
|
+
|
93
|
+
var x = d3.scale.ordinal()
|
94
|
+
.domain(d3.range(m))
|
95
|
+
.rangeRoundBands([0, width], .08);
|
96
|
+
|
97
|
+
var y = d3.scale.linear()
|
98
|
+
.domain([0, yStackMax])
|
99
|
+
.range([height, 0]);
|
100
|
+
|
101
|
+
var color = d3.scale.linear()
|
102
|
+
.domain([0, n - 1])
|
103
|
+
.range(["#aad", "#556"]);
|
104
|
+
|
105
|
+
var xAxis = d3.svg.axis()
|
106
|
+
.scale(x)
|
107
|
+
.tickSize(0)
|
108
|
+
.tickPadding(6)
|
109
|
+
.orient("bottom");
|
110
|
+
|
111
|
+
var svg = d3.select("body").append("svg")
|
112
|
+
.attr("width", width + margin.left + margin.right)
|
113
|
+
.attr("height", height + margin.top + margin.bottom)
|
114
|
+
.append("g")
|
115
|
+
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
116
|
+
|
117
|
+
var layer = svg.selectAll(".layer")
|
118
|
+
.data(layers)
|
119
|
+
.enter().append("g")
|
120
|
+
.attr("class", "layer")
|
121
|
+
.style("fill", function(d, i) { return color(i); });
|
122
|
+
|
123
|
+
var rect = layer.selectAll("rect")
|
124
|
+
.data(function(d) { return d; })
|
125
|
+
.enter().append("rect")
|
126
|
+
.attr("x", function(d) { return x(d.x); })
|
127
|
+
.attr("y", height)
|
128
|
+
.attr("width", x.rangeBand())
|
129
|
+
.attr("height", 0);
|
130
|
+
|
131
|
+
rect.transition()
|
132
|
+
.delay(function(d, i) { return i * 10; })
|
133
|
+
.attr("y", function(d) { return y(d.y0 + d.y); })
|
134
|
+
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });
|
135
|
+
|
136
|
+
svg.append("g")
|
137
|
+
.attr("class", "x axis")
|
138
|
+
.attr("transform", "translate(0," + height + ")")
|
139
|
+
.call(xAxis);
|
140
|
+
|
141
|
+
d3.selectAll("input").on("change", change);
|
142
|
+
|
143
|
+
var timeout = setTimeout(function() {
|
144
|
+
d3.select("input[value=\\"grouped\\"]").property("checked", true).each(change);
|
145
|
+
}, 2000);
|
146
|
+
|
147
|
+
function change() {
|
148
|
+
clearTimeout(timeout);
|
149
|
+
if (this.value === "grouped") transitionGrouped();
|
150
|
+
else transitionStacked();
|
151
|
+
}
|
152
|
+
|
153
|
+
function transitionGrouped() {
|
154
|
+
y.domain([0, yGroupMax]);
|
155
|
+
|
156
|
+
rect.transition()
|
157
|
+
.duration(500)
|
158
|
+
.delay(function(d, i) { return i * 10; })
|
159
|
+
.attr("x", function(d, i, j) { return x(d.x) + x.rangeBand() / n * j; })
|
160
|
+
.attr("width", x.rangeBand() / n)
|
161
|
+
.transition()
|
162
|
+
.attr("y", function(d) { return y(d.y); })
|
163
|
+
.attr("height", function(d) { return height - y(d.y); });
|
164
|
+
}
|
165
|
+
|
166
|
+
function transitionStacked() {
|
167
|
+
y.domain([0, yStackMax]);
|
168
|
+
|
169
|
+
rect.transition()
|
170
|
+
.duration(500)
|
171
|
+
.delay(function(d, i) { return i * 10; })
|
172
|
+
.attr("y", function(d) { return y(d.y0 + d.y); })
|
173
|
+
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
|
174
|
+
.transition()
|
175
|
+
.attr("x", function(d) { return x(d.x); })
|
176
|
+
.attr("width", x.rangeBand());
|
177
|
+
}
|
178
|
+
|
179
|
+
function bumpLayer(n, o) {
|
180
|
+
|
181
|
+
function bump(a) {
|
182
|
+
var x = 1 / (.1 + Math.random()),
|
183
|
+
y = 2 * Math.random() - .5,
|
184
|
+
z = 10 / (.1 + Math.random());
|
185
|
+
for (var i = 0; i < n; i++) {
|
186
|
+
var w = (i / n - y) * z;
|
187
|
+
a[i] += x * Math.exp(-w * w);
|
188
|
+
}
|
189
|
+
}
|
190
|
+
|
191
|
+
var a = [], i;
|
192
|
+
for (i = 0; i < n; ++i) a[i] = o + o * Math.random();
|
193
|
+
for (i = 0; i < 5; ++i) bump(a);
|
194
|
+
return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
|
195
|
+
}
|
196
|
+
|
197
|
+
END
|
198
|
+
end
|
199
|
+
return html + script
|
200
|
+
|
201
|
+
end
|
202
|
+
|
203
|
+
def nvd3_pie
|
204
|
+
html = "<div id=\"chart\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"><svg></svg></div>".html_safe
|
205
|
+
script = javascript_tag do
|
206
|
+
<<-END.html_safe
|
207
|
+
nv.addGraph(function() {
|
208
|
+
var chart = nv.models.pieChart()
|
209
|
+
.x(function(d) { return d.label })
|
210
|
+
.y(function(d) { return d.value })
|
211
|
+
.showLabels(true);
|
212
|
+
|
213
|
+
d3.select("#chart svg")
|
214
|
+
.datum(exampleData())
|
215
|
+
.transition().duration(350)
|
216
|
+
.call(chart);
|
217
|
+
|
218
|
+
return chart;
|
219
|
+
});
|
220
|
+
|
221
|
+
//Donut chart example
|
222
|
+
nv.addGraph(function() {
|
223
|
+
var chart = nv.models.pieChart()
|
224
|
+
.x(function(d) { return d.label })
|
225
|
+
.y(function(d) { return d.value })
|
226
|
+
.showLabels(true) //Display pie labels
|
227
|
+
.labelThreshold(.05) //Configure the minimum slice size for labels to show up
|
228
|
+
.labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
|
229
|
+
.donut(true) //Turn on Donut mode. Makes pie chart look tasty!
|
230
|
+
.donutRatio(0.35) //Configure how big you want the donut hole size to be.
|
231
|
+
;
|
232
|
+
|
233
|
+
d3.select("#chart2 svg")
|
234
|
+
.datum(exampleData())
|
235
|
+
.transition().duration(350)
|
236
|
+
.call(chart);
|
237
|
+
|
238
|
+
return chart;
|
239
|
+
});
|
240
|
+
|
241
|
+
//Pie chart example data. Note how there is only a single array of key-value pairs.
|
242
|
+
function exampleData() {
|
243
|
+
return [
|
244
|
+
{
|
245
|
+
"label": "One",
|
246
|
+
"value" : 29.765957771107
|
247
|
+
} ,
|
248
|
+
{
|
249
|
+
"label": "Two",
|
250
|
+
"value" : 0
|
251
|
+
} ,
|
252
|
+
{
|
253
|
+
"label": "Three",
|
254
|
+
"value" : 32.807804682612
|
255
|
+
} ,
|
256
|
+
{
|
257
|
+
"label": "Four",
|
258
|
+
"value" : 196.45946739256
|
259
|
+
} ,
|
260
|
+
{
|
261
|
+
"label": "Five",
|
262
|
+
"value" : 0.19434030906893
|
263
|
+
} ,
|
264
|
+
{
|
265
|
+
"label": "Six",
|
266
|
+
"value" : 98.079782601442
|
267
|
+
} ,
|
268
|
+
{
|
269
|
+
"label": "Seven",
|
270
|
+
"value" : 13.925743130903
|
271
|
+
} ,
|
272
|
+
{
|
273
|
+
"label": "Eight",
|
274
|
+
"value" : 5.1387322875705
|
275
|
+
}
|
276
|
+
];
|
277
|
+
}
|
278
|
+
|
279
|
+
END
|
280
|
+
end
|
281
|
+
return html + script
|
282
|
+
|
283
|
+
end
|
284
|
+
|
285
|
+
def nvd3_area
|
286
|
+
html = "<div id=\"chart\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"><svg></svg></div>".html_safe
|
287
|
+
script = javascript_tag do
|
288
|
+
<<-END.html_safe
|
289
|
+
var margin = {top: 20, right: 20, bottom: 30, left: 50},
|
290
|
+
width = 960 - margin.left - margin.right,
|
291
|
+
height = 500 - margin.top - margin.bottom;
|
292
|
+
|
293
|
+
var parseDate = d3.time.format("%y-%b-%d").parse,
|
294
|
+
formatPercent = d3.format(".0%");
|
295
|
+
|
296
|
+
var x = d3.time.scale()
|
297
|
+
.range([0, width]);
|
298
|
+
|
299
|
+
var y = d3.scale.linear()
|
300
|
+
.range([height, 0]);
|
301
|
+
|
302
|
+
var color = d3.scale.category20();
|
303
|
+
|
304
|
+
var xAxis = d3.svg.axis()
|
305
|
+
.scale(x)
|
306
|
+
.orient("bottom");
|
307
|
+
|
308
|
+
var yAxis = d3.svg.axis()
|
309
|
+
.scale(y)
|
310
|
+
.orient("left")
|
311
|
+
.tickFormat(formatPercent);
|
312
|
+
|
313
|
+
var area = d3.svg.area()
|
314
|
+
.x(function(d) { return x(d.date); })
|
315
|
+
.y0(function(d) { return y(d.y0); })
|
316
|
+
.y1(function(d) { return y(d.y0 + d.y); });
|
317
|
+
|
318
|
+
var stack = d3.layout.stack()
|
319
|
+
.values(function(d) { return d.values; });
|
320
|
+
|
321
|
+
var svg = d3.select("body").append("svg")
|
322
|
+
.attr("width", width + margin.left + margin.right)
|
323
|
+
.attr("height", height + margin.top + margin.bottom)
|
324
|
+
.append("g")
|
325
|
+
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
326
|
+
|
327
|
+
d3.tsv("data.tsv", function(error, data) {
|
328
|
+
if (error) throw error;
|
329
|
+
|
330
|
+
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
|
331
|
+
|
332
|
+
data.forEach(function(d) {
|
333
|
+
d.date = parseDate(d.date);
|
334
|
+
});
|
335
|
+
|
336
|
+
var browsers = stack(color.domain().map(function(name) {
|
337
|
+
return {
|
338
|
+
name: name,
|
339
|
+
values: data.map(function(d) {
|
340
|
+
return {date: d.date, y: d[name] / 100};
|
341
|
+
})
|
342
|
+
};
|
343
|
+
}));
|
344
|
+
|
345
|
+
x.domain(d3.extent(data, function(d) { return d.date; }));
|
346
|
+
|
347
|
+
var browser = svg.selectAll(".browser")
|
348
|
+
.data(browsers)
|
349
|
+
.enter().append("g")
|
350
|
+
.attr("class", "browser");
|
351
|
+
|
352
|
+
browser.append("path")
|
353
|
+
.attr("class", "area")
|
354
|
+
.attr("d", function(d) { return area(d.values); })
|
355
|
+
.style("fill", function(d) { return color(d.name); });
|
356
|
+
|
357
|
+
browser.append("text")
|
358
|
+
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
|
359
|
+
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.y0 + d.value.y / 2) + ")"; })
|
360
|
+
.attr("x", -6)
|
361
|
+
.attr("dy", ".35em")
|
362
|
+
.text(function(d) { return d.name; });
|
363
|
+
|
364
|
+
svg.append("g")
|
365
|
+
.attr("class", "x axis")
|
366
|
+
.attr("transform", "translate(0," + height + ")")
|
367
|
+
.call(xAxis);
|
368
|
+
|
369
|
+
svg.append("g")
|
370
|
+
.attr("class", "y axis")
|
371
|
+
.call(yAxis);
|
372
|
+
});
|
373
|
+
|
374
|
+
END
|
375
|
+
end
|
376
|
+
return html + script
|
377
|
+
|
378
|
+
end
|
379
|
+
|
380
|
+
# def nvd3_pie
|
381
|
+
# html = "<div id=\"chart\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"><svg></svg></div>".html_safe
|
382
|
+
# script = javascript_tag do
|
383
|
+
# <<-END.html_safe
|
384
|
+
# nv.addGraph(function() {
|
385
|
+
# var chart = nv.models.pieChart()
|
386
|
+
# .x(function(d) { return d.label })
|
387
|
+
# .y(function(d) { return d.value })
|
388
|
+
# .showLabels(true);
|
389
|
+
#
|
390
|
+
# d3.select("#chart svg")
|
391
|
+
# .datum(exampleData())
|
392
|
+
# .transition().duration(350)
|
393
|
+
# .call(chart);
|
394
|
+
#
|
395
|
+
# return chart;
|
396
|
+
# });
|
397
|
+
#
|
398
|
+
# //Donut chart example
|
399
|
+
# nv.addGraph(function() {
|
400
|
+
# var chart = nv.models.pieChart()
|
401
|
+
# .x(function(d) { return d.label })
|
402
|
+
# .y(function(d) { return d.value })
|
403
|
+
# .showLabels(true) //Display pie labels
|
404
|
+
# .labelThreshold(.05) //Configure the minimum slice size for labels to show up
|
405
|
+
# .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
|
406
|
+
# .donut(true) //Turn on Donut mode. Makes pie chart look tasty!
|
407
|
+
# .donutRatio(0.35) //Configure how big you want the donut hole size to be.
|
408
|
+
# ;
|
409
|
+
#
|
410
|
+
# d3.select("#chart2 svg")
|
411
|
+
# .datum(exampleData())
|
412
|
+
# .transition().duration(350)
|
413
|
+
# .call(chart);
|
414
|
+
#
|
415
|
+
# return chart;
|
416
|
+
# });
|
417
|
+
#
|
418
|
+
# //Pie chart example data. Note how there is only a single array of key-value pairs.
|
419
|
+
# function exampleData() {
|
420
|
+
# return [
|
421
|
+
# {
|
422
|
+
# "label": "One",
|
423
|
+
# "value" : 29.765957771107
|
424
|
+
# } ,
|
425
|
+
# {
|
426
|
+
# "label": "Two",
|
427
|
+
# "value" : 0
|
428
|
+
# } ,
|
429
|
+
# {
|
430
|
+
# "label": "Three",
|
431
|
+
# "value" : 32.807804682612
|
432
|
+
# } ,
|
433
|
+
# {
|
434
|
+
# "label": "Four",
|
435
|
+
# "value" : 196.45946739256
|
436
|
+
# } ,
|
437
|
+
# {
|
438
|
+
# "label": "Five",
|
439
|
+
# "value" : 0.19434030906893
|
440
|
+
# } ,
|
441
|
+
# {
|
442
|
+
# "label": "Six",
|
443
|
+
# "value" : 98.079782601442
|
444
|
+
# } ,
|
445
|
+
# {
|
446
|
+
# "label": "Seven",
|
447
|
+
# "value" : 13.925743130903
|
448
|
+
# } ,
|
449
|
+
# {
|
450
|
+
# "label": "Eight",
|
451
|
+
# "value" : 5.1387322875705
|
452
|
+
# }
|
453
|
+
# ];
|
454
|
+
# }
|
455
|
+
#
|
456
|
+
# END
|
457
|
+
# end
|
458
|
+
# return html + script
|
459
|
+
# end
|
460
|
+
end
|