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.
@@ -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