chartkick 0.0.4 → 0.0.5
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of chartkick might be problematic. Click here for more details.
- checksums.yaml +4 -4
- data/README.md +2 -17
- data/app/assets/javascripts/chartkick.js +104 -59
- data/lib/chartkick/helper.rb +1 -1
- data/lib/chartkick/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 767dd1cab24f21380089082f3f0af87e9dd51d0e
|
4
|
+
data.tar.gz: 1c143055458826b2bdc11f8b35ba1c3e2df405ac
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d9c9efc901592c5d1fc8c11b08b69dbf0a8103486a73bbd676783ba7affa94ebf4d4a4ff70cc772220d1cea4f2dda64832b862684bafd0d60ca806d48a64f881
|
7
|
+
data.tar.gz: 208e649ebd495a999f06134ce1d634cbca47128048e38719270c14e53e84b57d29c3caac706ad69bba6f2d7f15bc1522b7c819fa1004d799be620dfc74daabe3
|
data/README.md
CHANGED
@@ -70,8 +70,6 @@ min and max values (except pie chart)
|
|
70
70
|
<%= line_chart User.group_by_day(:created_at).count, :min => 1000, :max => 5000 %>
|
71
71
|
```
|
72
72
|
|
73
|
-
**Note:** min defaults to 0 - use `:min => nil` to allow the chart to choose the minimum.
|
74
|
-
|
75
73
|
### Data
|
76
74
|
|
77
75
|
Pass data as a Hash or Array
|
@@ -93,7 +91,7 @@ For multiple series, use the format
|
|
93
91
|
Times can be a time, a timestamp, or a string (strings are parsed)
|
94
92
|
|
95
93
|
```erb
|
96
|
-
|
94
|
+
<%= line_chart({20.day.ago => 5, 1368174456 => 4, "2013-05-07 00:00:00 UTC" => 7}) %>
|
97
95
|
```
|
98
96
|
|
99
97
|
## Installation
|
@@ -122,20 +120,7 @@ If you prefer Highcharts, use:
|
|
122
120
|
|
123
121
|
## No Ruby? No Problem
|
124
122
|
|
125
|
-
|
126
|
-
|
127
|
-
```html
|
128
|
-
<script src="/path/to/chartkick.js"></script>
|
129
|
-
<div id="chart-1" style="height: 300px;"></div>
|
130
|
-
<script>
|
131
|
-
var chart = document.getElementById("chart-1");
|
132
|
-
new Chartkick.PieChart(chart, {"Football": 45, "Soccer": 56, "Basketball": 98});
|
133
|
-
// or remote
|
134
|
-
new Chartkick.LineChart(chart, "/charts/stocks");
|
135
|
-
</script>
|
136
|
-
```
|
137
|
-
|
138
|
-
Download [chartkick.js](https://raw.github.com/ankane/chartkick/master/app/assets/javascripts/chartkick.js)
|
123
|
+
Check out [chartkick.js](https://github.com/ankane/chartkick.js).
|
139
124
|
|
140
125
|
## Credits
|
141
126
|
|
@@ -1,3 +1,11 @@
|
|
1
|
+
/*
|
2
|
+
* Chartkick.js
|
3
|
+
* Create beautiful Javascript charts with minimal code
|
4
|
+
* https://github.com/ankane/chartkick.js
|
5
|
+
* v0.0.5
|
6
|
+
* MIT License
|
7
|
+
*/
|
8
|
+
|
1
9
|
/*jslint browser: true, indent: 2, plusplus: true */
|
2
10
|
/*global google, $*/
|
3
11
|
|
@@ -78,6 +86,46 @@
|
|
78
86
|
}
|
79
87
|
// end iso8601.js
|
80
88
|
|
89
|
+
function negativeValues(series) {
|
90
|
+
var i, j, data;
|
91
|
+
for (i = 0; i < series.length; i++) {
|
92
|
+
data = series[i].data;
|
93
|
+
for (j = 0; j < data.length; j++) {
|
94
|
+
if (data[j][1] < 0) {
|
95
|
+
return true;
|
96
|
+
}
|
97
|
+
}
|
98
|
+
}
|
99
|
+
return false;
|
100
|
+
}
|
101
|
+
|
102
|
+
function jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax) {
|
103
|
+
return function(series, opts) {
|
104
|
+
var options = clone(defaultOptions);
|
105
|
+
|
106
|
+
// hide legend
|
107
|
+
// this is *not* an external option!
|
108
|
+
if (opts.hideLegend) {
|
109
|
+
hideLegend(options);
|
110
|
+
}
|
111
|
+
|
112
|
+
// min
|
113
|
+
if ("min" in opts) {
|
114
|
+
setMin(options, opts.min);
|
115
|
+
}
|
116
|
+
else if (!negativeValues(series)) {
|
117
|
+
setMin(options, 0);
|
118
|
+
}
|
119
|
+
|
120
|
+
// max
|
121
|
+
if ("max" in opts) {
|
122
|
+
setMax(options, opts.max);
|
123
|
+
}
|
124
|
+
|
125
|
+
return options;
|
126
|
+
};
|
127
|
+
}
|
128
|
+
|
81
129
|
// only functions that need defined specific to charting library
|
82
130
|
var renderLineChart, renderPieChart, renderColumnChart;
|
83
131
|
|
@@ -99,8 +147,7 @@
|
|
99
147
|
style: {
|
100
148
|
fontSize: "12px"
|
101
149
|
}
|
102
|
-
}
|
103
|
-
min: 0
|
150
|
+
}
|
104
151
|
},
|
105
152
|
title: {
|
106
153
|
text: null
|
@@ -118,19 +165,22 @@
|
|
118
165
|
}
|
119
166
|
};
|
120
167
|
|
121
|
-
var
|
122
|
-
|
123
|
-
if ("min" in opts) {
|
124
|
-
options.yAxis.min = opts.min;
|
125
|
-
}
|
126
|
-
if ("max" in opts) {
|
127
|
-
options.yAxis.max = opts.max;
|
128
|
-
}
|
129
|
-
return options;
|
168
|
+
var hideLegend = function(options) {
|
169
|
+
options.legend.enabled = false;
|
130
170
|
};
|
131
171
|
|
172
|
+
var setMin = function(options, min) {
|
173
|
+
options.yAxis.min = min;
|
174
|
+
};
|
175
|
+
|
176
|
+
var setMax = function(options, max) {
|
177
|
+
options.yAxis.max = max;
|
178
|
+
};
|
179
|
+
|
180
|
+
var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax);
|
181
|
+
|
132
182
|
renderLineChart = function(element, series, opts) {
|
133
|
-
var options = jsOptions(opts), data, i, j;
|
183
|
+
var options = jsOptions(series, opts), data, i, j;
|
134
184
|
options.xAxis.type = "datetime";
|
135
185
|
options.chart = {type: "spline"};
|
136
186
|
|
@@ -142,15 +192,11 @@
|
|
142
192
|
series[i].marker = {symbol: "circle"};
|
143
193
|
}
|
144
194
|
options.series = series;
|
145
|
-
|
146
|
-
if (series.length === 1) {
|
147
|
-
options.legend = {enabled: false};
|
148
|
-
}
|
149
195
|
$(element).highcharts(options);
|
150
196
|
};
|
151
197
|
|
152
198
|
renderPieChart = function(element, series, opts) {
|
153
|
-
var options =
|
199
|
+
var options = clone(defaultOptions);
|
154
200
|
options.series = [{
|
155
201
|
type: "pie",
|
156
202
|
name: "Value",
|
@@ -160,7 +206,7 @@
|
|
160
206
|
};
|
161
207
|
|
162
208
|
renderColumnChart = function(element, series, opts) {
|
163
|
-
var options = jsOptions(opts), i, j, s, d, rows = [];
|
209
|
+
var options = jsOptions(series, opts), i, j, s, d, rows = [];
|
164
210
|
options.chart = {type: "column"};
|
165
211
|
|
166
212
|
for (i = 0; i < series.length; i++) {
|
@@ -197,9 +243,6 @@
|
|
197
243
|
}
|
198
244
|
options.series = newSeries;
|
199
245
|
|
200
|
-
if (series.length === 1) {
|
201
|
-
options.legend.enabled = false;
|
202
|
-
}
|
203
246
|
$(element).highcharts(options);
|
204
247
|
};
|
205
248
|
} else if ("google" in window) { // Google charts
|
@@ -246,9 +289,7 @@
|
|
246
289
|
fontSize: 12
|
247
290
|
},
|
248
291
|
baselineColor: "#ccc",
|
249
|
-
viewWindow: {
|
250
|
-
min: 0
|
251
|
-
}
|
292
|
+
viewWindow: {}
|
252
293
|
},
|
253
294
|
tooltip: {
|
254
295
|
textStyle: {
|
@@ -258,6 +299,20 @@
|
|
258
299
|
}
|
259
300
|
};
|
260
301
|
|
302
|
+
var hideLegend = function(options) {
|
303
|
+
options.legend.position = "none";
|
304
|
+
};
|
305
|
+
|
306
|
+
var setMin = function(options, min) {
|
307
|
+
options.vAxis.viewWindow.min = min;
|
308
|
+
};
|
309
|
+
|
310
|
+
var setMax = function(options, max) {
|
311
|
+
options.vAxis.viewWindow.max = max;
|
312
|
+
};
|
313
|
+
|
314
|
+
var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax);
|
315
|
+
|
261
316
|
// cant use object as key
|
262
317
|
var createDataTable = function(series, columnType) {
|
263
318
|
var data = new google.visualization.DataTable();
|
@@ -289,26 +344,10 @@
|
|
289
344
|
return data;
|
290
345
|
};
|
291
346
|
|
292
|
-
var jsOptions = function(opts) {
|
293
|
-
var options = clone(defaultOptions);
|
294
|
-
if ("min" in opts) {
|
295
|
-
options.vAxis.viewWindow.min = opts.min;
|
296
|
-
}
|
297
|
-
if ("max" in opts) {
|
298
|
-
options.vAxis.viewWindow.max = opts.max;
|
299
|
-
}
|
300
|
-
return options;
|
301
|
-
};
|
302
|
-
|
303
347
|
renderLineChart = function(element, series, opts) {
|
304
348
|
waitForLoaded(function() {
|
349
|
+
var options = jsOptions(series, opts);
|
305
350
|
var data = createDataTable(series, "datetime");
|
306
|
-
|
307
|
-
var options = jsOptions(opts);
|
308
|
-
if (series.length === 1) {
|
309
|
-
options.legend.position = "none";
|
310
|
-
}
|
311
|
-
|
312
351
|
var chart = new google.visualization.LineChart(element);
|
313
352
|
chart.draw(data, options);
|
314
353
|
});
|
@@ -316,17 +355,17 @@
|
|
316
355
|
|
317
356
|
renderPieChart = function(element, series, opts) {
|
318
357
|
waitForLoaded(function() {
|
319
|
-
var
|
320
|
-
data.addColumn("string", "");
|
321
|
-
data.addColumn("number", "Value");
|
322
|
-
data.addRows(series);
|
323
|
-
|
324
|
-
var options = jsOptions(opts);
|
358
|
+
var options = clone(defaultOptions);
|
325
359
|
options.chartArea = {
|
326
360
|
top: "10%",
|
327
361
|
height: "80%"
|
328
362
|
};
|
329
363
|
|
364
|
+
var data = new google.visualization.DataTable();
|
365
|
+
data.addColumn("string", "");
|
366
|
+
data.addColumn("number", "Value");
|
367
|
+
data.addRows(series);
|
368
|
+
|
330
369
|
var chart = new google.visualization.PieChart(element);
|
331
370
|
chart.draw(data, options);
|
332
371
|
});
|
@@ -334,13 +373,8 @@
|
|
334
373
|
|
335
374
|
renderColumnChart = function(element, series, opts) {
|
336
375
|
waitForLoaded(function() {
|
376
|
+
var options = jsOptions(series, opts);
|
337
377
|
var data = createDataTable(series, "string");
|
338
|
-
|
339
|
-
var options = jsOptions(opts);
|
340
|
-
if (series.length === 1) {
|
341
|
-
options.legend.position = "none";
|
342
|
-
}
|
343
|
-
|
344
378
|
var chart = new google.visualization.ColumnChart(element);
|
345
379
|
chart.draw(data, options);
|
346
380
|
});
|
@@ -444,12 +478,16 @@
|
|
444
478
|
return a[0].getTime() - b[0].getTime();
|
445
479
|
}
|
446
480
|
|
447
|
-
function processSeries(series, time) {
|
481
|
+
function processSeries(series, opts, time) {
|
448
482
|
var i, j, data, r, key;
|
449
483
|
|
450
484
|
// see if one series or multiple
|
451
485
|
if (!isArray(series) || typeof series[0] !== "object" || isArray(series[0])) {
|
452
486
|
series = [{name: "Value", data: series}];
|
487
|
+
opts.hideLegend = true;
|
488
|
+
}
|
489
|
+
else {
|
490
|
+
opts.hideLegend = false;
|
453
491
|
}
|
454
492
|
|
455
493
|
// right format
|
@@ -471,11 +509,11 @@
|
|
471
509
|
}
|
472
510
|
|
473
511
|
function processLineData(element, data, opts) {
|
474
|
-
renderLineChart(element, processSeries(data, true), opts);
|
512
|
+
renderLineChart(element, processSeries(data, opts, true), opts);
|
475
513
|
}
|
476
514
|
|
477
515
|
function processColumnData(element, data, opts) {
|
478
|
-
renderColumnChart(element, processSeries(data, false), opts);
|
516
|
+
renderColumnChart(element, processSeries(data, opts, false), opts);
|
479
517
|
}
|
480
518
|
|
481
519
|
function processPieData(element, data, opts) {
|
@@ -486,17 +524,24 @@
|
|
486
524
|
renderPieChart(element, perfectData, opts);
|
487
525
|
}
|
488
526
|
|
527
|
+
function setElement(element, data, opts, callback) {
|
528
|
+
if (typeof element === "string") {
|
529
|
+
element = document.getElementById(element);
|
530
|
+
}
|
531
|
+
fetchDataSource(element, data, clone(opts || {}), callback);
|
532
|
+
}
|
533
|
+
|
489
534
|
// define classes
|
490
535
|
|
491
536
|
var Chartkick = {
|
492
537
|
LineChart: function(element, dataSource, opts) {
|
493
|
-
|
538
|
+
setElement(element, dataSource, opts, processLineData);
|
494
539
|
},
|
495
540
|
ColumnChart: function(element, dataSource, opts) {
|
496
|
-
|
541
|
+
setElement(element, dataSource, opts, processColumnData);
|
497
542
|
},
|
498
543
|
PieChart: function(element, dataSource, opts) {
|
499
|
-
|
544
|
+
setElement(element, dataSource, opts, processPieData);
|
500
545
|
}
|
501
546
|
};
|
502
547
|
|
data/lib/chartkick/helper.rb
CHANGED
@@ -26,7 +26,7 @@ module Chartkick
|
|
26
26
|
concat "Loading..."
|
27
27
|
end
|
28
28
|
html += javascript_tag do
|
29
|
-
concat "new Chartkick.#{klass}(
|
29
|
+
concat "new Chartkick.#{klass}(#{element_id.to_json}, #{data_source.to_json}, #{options.to_json});".html_safe
|
30
30
|
end
|
31
31
|
end
|
32
32
|
|
data/lib/chartkick/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: chartkick
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.5
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Andrew Kane
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2013-05-
|
11
|
+
date: 2013-05-15 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: railties
|