chartkick 2.2.0 → 2.2.1

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 9e1f932c952cad32abefb5bdfe6d3920ede7a2a2
4
- data.tar.gz: 89b2fe66eb366657306bb063f9937e30d4d6c380
3
+ metadata.gz: bea917f4b3d61b2de8ba5af5798e34f1237e981b
4
+ data.tar.gz: 749aa947e87dece001f7df69aa86c7b6b4c2f8c1
5
5
  SHA512:
6
- metadata.gz: 2e3f98e5f9c0066f3d478b8097d7a8562ee0ca5ad0c9138561a8a4ac598019c66721b955f80742ffd66aa02dd6303cf80a04da426617348abe7913798adabb1d
7
- data.tar.gz: cca4ae3d594a9e71f1a16d4d20b10d103a7c8455704bbe575bb7bfb2884dddf0b9ca591c092cf1b2768b03e7f2749337f2a7a2a5f8f90468f832b616745715e3
6
+ metadata.gz: 819ce02a5a9a3582757725f6ade62cd002df49bfa607a567e3e807a8c515cacc0a165a29d2f9a3066cf1daa11184c02358df3b17302b1545b673ce52672ebbf6
7
+ data.tar.gz: 2984ed7e244ae92da1a3faa61c77c90f0a921a123cd718a48df6417a444285039d39563a08c979cf076a8a3ca827f31ca026a13b499a7f43c16dea8a75b8546a
@@ -1,3 +1,7 @@
1
+ ## 2.2.1 [unreleased]
2
+
3
+ - Updated Chartkick.js to 2.2.1
4
+
1
5
  ## 2.2.0
2
6
 
3
7
  - Updated Chartkick.js to 2.2.0
data/README.md CHANGED
@@ -146,6 +146,24 @@ Axis titles
146
146
  <%= line_chart data, xtitle: "Time", ytitle: "Population" %>
147
147
  ```
148
148
 
149
+ Straight lines between points instead of a curve
150
+
151
+ ```erb
152
+ <%= line_chart data, curve: false %>
153
+ ```
154
+
155
+ Show or hide legend
156
+
157
+ ```erb
158
+ <%= line_chart data, legend: false %>
159
+ ```
160
+
161
+ Specify legend position
162
+
163
+ ```erb
164
+ <%= line_chart data, legend: "bottom" %>
165
+ ```
166
+
149
167
  Donut chart
150
168
 
151
169
  ```erb
@@ -301,7 +319,7 @@ You must include `chartkick.js` manually. [Download it here](https://raw.github.
301
319
  To specify a language for Google Charts, add:
302
320
 
303
321
  ```javascript
304
- Chartkick.configure({"language": "de"});
322
+ Chartkick.configure({language: "de"});
305
323
  ```
306
324
 
307
325
  after the JavaScript files and before your charts.
@@ -334,6 +352,7 @@ You can also use:
334
352
  chart.getElement()
335
353
  chart.getData()
336
354
  chart.getOptions()
355
+ chart.getAdapter()
337
356
  ```
338
357
 
339
358
  Update the data with:
@@ -345,6 +364,8 @@ chart.updateData(newData)
345
364
  You can also specify new options:
346
365
 
347
366
  ```javascript
367
+ chart.setOptions(newOptions)
368
+ // or
348
369
  chart.updateData(newData, newOptions)
349
370
  ```
350
371
 
@@ -354,6 +375,12 @@ Refresh the data from a remote source:
354
375
  chart.refreshData()
355
376
  ```
356
377
 
378
+ Redraw the chart with:
379
+
380
+ ```javascript
381
+ chart.redraw()
382
+ ```
383
+
357
384
  Loop over charts with:
358
385
 
359
386
  ```javascript
@@ -2,7 +2,7 @@
2
2
  * Chartkick.js
3
3
  * Create beautiful charts with one line of JavaScript
4
4
  * https://github.com/ankane/chartkick.js
5
- * v2.2.0
5
+ * v2.2.1
6
6
  * MIT License
7
7
  */
8
8
 
@@ -104,14 +104,18 @@
104
104
  return false;
105
105
  }
106
106
 
107
- function jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle) {
107
+ function jsOptionsFunc(defaultOptions, hideLegend, setTitle, setMin, setMax, setStacked, setXtitle, setYtitle) {
108
108
  return function (chart, opts, chartOptions) {
109
109
  var series = chart.data;
110
110
  var options = merge({}, defaultOptions);
111
111
  options = merge(options, chartOptions || {});
112
112
 
113
- if (chart.hideLegend) {
114
- hideLegend(options);
113
+ if (chart.hideLegend || "legend" in opts) {
114
+ hideLegend(options, opts.legend, chart.hideLegend);
115
+ }
116
+
117
+ if (opts.title) {
118
+ setTitle(options, opts.title);
115
119
  }
116
120
 
117
121
  // min
@@ -206,11 +210,11 @@
206
210
  function fetchDataSource(chart, callback, dataSource) {
207
211
  if (typeof dataSource === "string") {
208
212
  getJSON(chart.element, dataSource, function (data, textStatus, jqXHR) {
209
- chart.data = data;
213
+ chart.rawData = data;
210
214
  errorCatcher(chart, callback);
211
215
  });
212
216
  } else {
213
- chart.data = dataSource;
217
+ chart.rawData = dataSource;
214
218
  errorCatcher(chart, callback);
215
219
  }
216
220
  }
@@ -378,8 +382,25 @@
378
382
  }
379
383
  };
380
384
 
381
- var hideLegend = function (options) {
382
- options.legend.enabled = false;
385
+ var hideLegend = function (options, legend, hideLegend) {
386
+ if (legend !== undefined) {
387
+ options.legend.enabled = !!legend;
388
+ if (legend && legend !== true) {
389
+ if (legend === "top" || legend === "bottom") {
390
+ options.legend.verticalAlign = legend;
391
+ } else {
392
+ options.legend.layout = "vertical";
393
+ options.legend.verticalAlign = "middle";
394
+ options.legend.align = legend;
395
+ }
396
+ }
397
+ } else if (hideLegend) {
398
+ options.legend.enabled = false;
399
+ }
400
+ };
401
+
402
+ var setTitle = function (options, title) {
403
+ options.title.text = title;
383
404
  };
384
405
 
385
406
  var setMin = function (options, min) {
@@ -402,7 +423,7 @@
402
423
  options.yAxis.title.text = title;
403
424
  };
404
425
 
405
- var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle);
426
+ var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setTitle, setMin, setMax, setStacked, setXtitle, setYtitle);
406
427
 
407
428
  this.renderLineChart = function (chart, chartType) {
408
429
  chartType = chartType || "spline";
@@ -413,6 +434,9 @@
413
434
  areaspline: {
414
435
  stacking: "normal"
415
436
  },
437
+ area: {
438
+ stacking: "normal"
439
+ },
416
440
  series: {
417
441
  marker: {
418
442
  enabled: false
@@ -421,6 +445,15 @@
421
445
  }
422
446
  };
423
447
  }
448
+
449
+ if (chart.options.curve === false) {
450
+ if (chartType === "areaspline") {
451
+ chartType = "area";
452
+ } else if (chartType === "spline") {
453
+ chartType = "line";
454
+ }
455
+ }
456
+
424
457
  var options = jsOptions(chart, chart.options, chartOptions), data, i, j;
425
458
  options.xAxis.type = chart.discrete ? "category" : "datetime";
426
459
  if (!options.chart.type) {
@@ -452,14 +485,24 @@
452
485
  };
453
486
 
454
487
  this.renderPieChart = function (chart) {
455
- var chartOptions = {};
488
+ var chartOptions = merge(defaultOptions, {});
489
+
456
490
  if (chart.options.colors) {
457
491
  chartOptions.colors = chart.options.colors;
458
492
  }
459
493
  if (chart.options.donut) {
460
494
  chartOptions.plotOptions = {pie: {innerSize: "50%"}};
461
495
  }
462
- var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
496
+
497
+ if ("legend" in chart.options) {
498
+ hideLegend(chartOptions, chart.options.legend);
499
+ }
500
+
501
+ if (chart.options.title) {
502
+ setTitle(chartOptions, chart.options.title);
503
+ }
504
+
505
+ var options = merge(chartOptions, chart.options.library || {});
463
506
  options.chart.renderTo = chart.element.id;
464
507
  options.series = [{
465
508
  type: "pie",
@@ -472,7 +515,7 @@
472
515
  this.renderColumnChart = function (chart, chartType) {
473
516
  chartType = chartType || "column";
474
517
  var series = chart.data;
475
- var options = jsOptions(chart, chart.options), i, j, s, d, rows = [];
518
+ var options = jsOptions(chart, chart.options), i, j, s, d, rows = [], categories = [];
476
519
  options.chart.type = chartType;
477
520
  options.chart.renderTo = chart.element.id;
478
521
 
@@ -483,17 +526,12 @@
483
526
  d = s.data[j];
484
527
  if (!rows[d[0]]) {
485
528
  rows[d[0]] = new Array(series.length);
529
+ categories.push(d[0]);
486
530
  }
487
531
  rows[d[0]][i] = d[1];
488
532
  }
489
533
  }
490
534
 
491
- var categories = [];
492
- for (i in rows) {
493
- if (rows.hasOwnProperty(i)) {
494
- categories.push(i);
495
- }
496
- }
497
535
  options.xAxis.categories = categories;
498
536
 
499
537
  var newSeries = [];
@@ -620,8 +658,25 @@
620
658
  }
621
659
  };
622
660
 
623
- var hideLegend = function (options) {
624
- options.legend.position = "none";
661
+ var hideLegend = function (options, legend, hideLegend) {
662
+ if (legend !== undefined) {
663
+ var position;
664
+ if (!legend) {
665
+ position = "none";
666
+ } else if (legend === true) {
667
+ position = "right";
668
+ } else {
669
+ position = legend;
670
+ }
671
+ options.legend.position = position;
672
+ } else if (hideLegend) {
673
+ options.legend.position = "none";
674
+ }
675
+ };
676
+
677
+ var setTitle = function (options, title) {
678
+ options.title = title;
679
+ options.titleTextStyle = {color: "#333", fontSize: "20px"};
625
680
  };
626
681
 
627
682
  var setMin = function (options, min) {
@@ -654,11 +709,11 @@
654
709
  options.vAxis.titleTextStyle.italic = false;
655
710
  };
656
711
 
657
- var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle);
712
+ var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setTitle, setMin, setMax, setStacked, setXtitle, setYtitle);
658
713
 
659
714
  // cant use object as key
660
715
  var createDataTable = function (series, columnType) {
661
- var i, j, s, d, key, rows = [];
716
+ var i, j, s, d, key, rows = [], sortedLabels = [];
662
717
  for (i = 0; i < series.length; i++) {
663
718
  s = series[i];
664
719
 
@@ -667,6 +722,7 @@
667
722
  key = (columnType === "datetime") ? d[0].getTime() : d[0];
668
723
  if (!rows[key]) {
669
724
  rows[key] = new Array(series.length);
725
+ sortedLabels.push(key);
670
726
  }
671
727
  rows[key][i] = toFloat(d[1]);
672
728
  }
@@ -675,18 +731,17 @@
675
731
  var rows2 = [];
676
732
  var day = true;
677
733
  var value;
678
- for (i in rows) {
679
- if (rows.hasOwnProperty(i)) {
680
- if (columnType === "datetime") {
681
- value = new Date(toFloat(i));
682
- day = day && isDay(value);
683
- } else if (columnType === "number") {
684
- value = toFloat(i);
685
- } else {
686
- value = i;
687
- }
688
- rows2.push([value].concat(rows[i]));
734
+ for (var j = 0; j < sortedLabels.length; j++) {
735
+ var i = sortedLabels[j];
736
+ if (columnType === "datetime") {
737
+ value = new Date(toFloat(i));
738
+ day = day && isDay(value);
739
+ } else if (columnType === "number") {
740
+ value = toFloat(i);
741
+ } else {
742
+ value = i;
689
743
  }
744
+ rows2.push([value].concat(rows[i]));
690
745
  }
691
746
  if (columnType === "datetime") {
692
747
  rows2.sort(sortByTime);
@@ -715,7 +770,13 @@
715
770
 
716
771
  this.renderLineChart = function (chart) {
717
772
  waitForLoaded(function () {
718
- var options = jsOptions(chart, chart.options);
773
+ var chartOptions = {};
774
+
775
+ if (chart.options.curve === false) {
776
+ chartOptions.curveType = "none";
777
+ }
778
+
779
+ var options = jsOptions(chart, chart.options, chartOptions);
719
780
  var data = createDataTable(chart.data, chart.discrete ? "string" : "datetime");
720
781
  chart.chart = new google.visualization.LineChart(chart.element);
721
782
  resize(function () {
@@ -730,7 +791,8 @@
730
791
  chartArea: {
731
792
  top: "10%",
732
793
  height: "80%"
733
- }
794
+ },
795
+ legend: {}
734
796
  };
735
797
  if (chart.options.colors) {
736
798
  chartOptions.colors = chart.options.colors;
@@ -738,6 +800,12 @@
738
800
  if (chart.options.donut) {
739
801
  chartOptions.pieHole = 0.5;
740
802
  }
803
+ if ("legend" in chart.options) {
804
+ hideLegend(chartOptions, chart.options.legend);
805
+ }
806
+ if (chart.options.title) {
807
+ setTitle(chartOptions, chart.options.title);
808
+ }
741
809
  var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
742
810
 
743
811
  var data = new google.visualization.DataTable();
@@ -772,7 +840,7 @@
772
840
  }
773
841
  }
774
842
  };
775
- var options = jsOptionsFunc(defaultOptions, hideLegend, setBarMin, setBarMax, setStacked, setXtitle, setYtitle)(chart, chart.options, chartOptions);
843
+ var options = jsOptionsFunc(defaultOptions, hideLegend, setTitle, setBarMin, setBarMax, setStacked, setXtitle, setYtitle)(chart, chart.options, chartOptions);
776
844
  var data = createDataTable(chart.data, "string");
777
845
  chart.chart = new google.visualization.BarChart(chart.element);
778
846
  resize(function () {
@@ -872,7 +940,9 @@
872
940
  animation: false,
873
941
  tooltips: {
874
942
  displayColors: false
875
- }
943
+ },
944
+ legend: {},
945
+ title: {fontSize: 20, fontColor: "#333"}
876
946
  };
877
947
 
878
948
  var defaultOptions = {
@@ -903,8 +973,7 @@
903
973
  ticks: {}
904
974
  }
905
975
  ]
906
- },
907
- legend: {}
976
+ }
908
977
  };
909
978
 
910
979
  // http://there4.io/2012/05/02/google-chart-color-list/
@@ -914,28 +983,40 @@
914
983
  "#6633CC", "#E67300", "#8B0707", "#329262", "#5574A6", "#3B3EAC"
915
984
  ];
916
985
 
917
- var hideLegend = function (options) {
918
- options.legend.display = false;
986
+ var hideLegend = function (options, legend, hideLegend) {
987
+ if (legend !== undefined) {
988
+ options.legend.display = !!legend;
989
+ if (legend && legend !== true) {
990
+ options.legend.position = legend;
991
+ }
992
+ } else if (hideLegend) {
993
+ options.legend.display = false;
994
+ }
995
+ };
996
+
997
+ var setTitle = function (options, title) {
998
+ options.title.display = true;
999
+ options.title.text = title;
919
1000
  };
920
1001
 
921
1002
  var setMin = function (options, min) {
922
1003
  if (min !== null) {
923
- options.scales.yAxes[0].ticks.min = min;
1004
+ options.scales.yAxes[0].ticks.min = toFloat(min);
924
1005
  }
925
1006
  };
926
1007
 
927
1008
  var setMax = function (options, max) {
928
- options.scales.yAxes[0].ticks.max = max;
1009
+ options.scales.yAxes[0].ticks.max = toFloat(max);
929
1010
  };
930
1011
 
931
1012
  var setBarMin = function (options, min) {
932
1013
  if (min !== null) {
933
- options.scales.xAxes[0].ticks.min = min;
1014
+ options.scales.xAxes[0].ticks.min = toFloat(min);
934
1015
  }
935
1016
  };
936
1017
 
937
1018
  var setBarMax = function (options, max) {
938
- options.scales.xAxes[0].ticks.max = max;
1019
+ options.scales.xAxes[0].ticks.max = toFloat(max);
939
1020
  };
940
1021
 
941
1022
  var setStacked = function (options, stacked) {
@@ -989,7 +1070,7 @@
989
1070
  };
990
1071
  };
991
1072
 
992
- var jsOptions = jsOptionsFunc(merge(baseOptions, defaultOptions), hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle);
1073
+ var jsOptions = jsOptionsFunc(merge(baseOptions, defaultOptions), hideLegend, setTitle, setMin, setMax, setStacked, setXtitle, setYtitle);
993
1074
 
994
1075
  var createDataTable = function (chart, options, chartType) {
995
1076
  var datasets = [];
@@ -1077,6 +1158,10 @@
1077
1158
  borderWidth: 2
1078
1159
  };
1079
1160
 
1161
+ if (chart.options.curve === false) {
1162
+ dataset.lineTension = 0;
1163
+ }
1164
+
1080
1165
  datasets.push(merge(dataset, s.library || {}));
1081
1166
  }
1082
1167
 
@@ -1145,17 +1230,17 @@
1145
1230
  };
1146
1231
 
1147
1232
  this.renderLineChart = function (chart, chartType) {
1148
- var areaOptions = {};
1233
+ var chartOptions = {};
1149
1234
  if (chartType === "area") {
1150
1235
  // TODO fix area stacked
1151
- // areaOptions.stacked = true;
1236
+ // chartOptions.stacked = true;
1152
1237
  }
1153
1238
  // fix for https://github.com/chartjs/Chart.js/issues/2441
1154
1239
  if (!chart.options.max && allZeros(chart.data)) {
1155
- chart.options.max = 1;
1240
+ chartOptions.max = 1;
1156
1241
  }
1157
1242
 
1158
- var options = jsOptions(chart, merge(areaOptions, chart.options));
1243
+ var options = jsOptions(chart, merge(chartOptions, chart.options));
1159
1244
 
1160
1245
  var data = createDataTable(chart, options, chartType || "line");
1161
1246
 
@@ -1169,6 +1254,15 @@
1169
1254
  if (chart.options.donut) {
1170
1255
  options.cutoutPercentage = 50;
1171
1256
  }
1257
+
1258
+ if ("legend" in chart.options) {
1259
+ hideLegend(options, chart.options.legend);
1260
+ }
1261
+
1262
+ if (chart.options.title) {
1263
+ setTitle(options, chart.options.title);
1264
+ }
1265
+
1172
1266
  options = merge(options, chart.options.library || {});
1173
1267
 
1174
1268
  var labels = [];
@@ -1195,7 +1289,7 @@
1195
1289
  this.renderColumnChart = function (chart, chartType) {
1196
1290
  var options;
1197
1291
  if (chartType === "bar") {
1198
- options = jsOptionsFunc(merge(baseOptions, defaultOptions), hideLegend, setBarMin, setBarMax, setStacked, setXtitle, setYtitle)(chart, chart.options);
1292
+ options = jsOptionsFunc(merge(baseOptions, defaultOptions), hideLegend, setTitle, setBarMin, setBarMax, setStacked, setXtitle, setYtitle)(chart, chart.options);
1199
1293
  } else {
1200
1294
  options = jsOptions(chart, chart.options);
1201
1295
  }
@@ -1363,7 +1457,7 @@
1363
1457
  var i;
1364
1458
 
1365
1459
  var opts = chart.options;
1366
- var series = chart.data;
1460
+ var series = chart.rawData;
1367
1461
 
1368
1462
  // see if one series or multiple
1369
1463
  if (!isArray(series) || typeof series[0] !== "object" || isArray(series[0])) {
@@ -1389,17 +1483,17 @@
1389
1483
  return series;
1390
1484
  }
1391
1485
 
1392
- function processSimple(data) {
1393
- var perfectData = toArr(data), i;
1486
+ function processSimple(chart) {
1487
+ var perfectData = toArr(chart.rawData), i;
1394
1488
  for (i = 0; i < perfectData.length; i++) {
1395
1489
  perfectData[i] = [toStr(perfectData[i][0]), toFloat(perfectData[i][1])];
1396
1490
  }
1397
1491
  return perfectData;
1398
1492
  }
1399
1493
 
1400
- function processTime(data)
1494
+ function processTime(chart)
1401
1495
  {
1402
- var i;
1496
+ var i, data = chart.rawData;
1403
1497
  for (i = 0; i < data.length; i++) {
1404
1498
  data[i][1] = toDate(data[i][1]);
1405
1499
  data[i][2] = toDate(data[i][2]);
@@ -1418,7 +1512,7 @@
1418
1512
  }
1419
1513
 
1420
1514
  function processPieData(chart) {
1421
- chart.data = processSimple(chart.data);
1515
+ chart.data = processSimple(chart);
1422
1516
  renderChart("PieChart", chart);
1423
1517
  }
1424
1518
 
@@ -1433,7 +1527,7 @@
1433
1527
  }
1434
1528
 
1435
1529
  function processGeoData(chart) {
1436
- chart.data = processSimple(chart.data);
1530
+ chart.data = processSimple(chart);
1437
1531
  renderChart("GeoChart", chart);
1438
1532
  }
1439
1533
 
@@ -1443,7 +1537,7 @@
1443
1537
  }
1444
1538
 
1445
1539
  function processTimelineData(chart) {
1446
- chart.data = processTime(chart.data);
1540
+ chart.data = processTime(chart);
1447
1541
  renderChart("Timeline", chart);
1448
1542
  }
1449
1543
 
@@ -1478,6 +1572,9 @@
1478
1572
  chart.getChartObject = function () {
1479
1573
  return chart.chart;
1480
1574
  };
1575
+ chart.getAdapter = function () {
1576
+ return chart.adapter;
1577
+ };
1481
1578
 
1482
1579
  // functions
1483
1580
  chart.updateData = function (dataSource, options) {
@@ -1487,6 +1584,13 @@
1487
1584
  }
1488
1585
  fetchDataSource(chart, callback, dataSource);
1489
1586
  };
1587
+ chart.setOptions = function (options) {
1588
+ chart.options = merge(Chartkick.options, options);
1589
+ chart.redraw();
1590
+ };
1591
+ chart.redraw = function() {
1592
+ fetchDataSource(chart, callback, chart.rawData);
1593
+ };
1490
1594
  chart.refreshData = function () {
1491
1595
  if (typeof dataSource === "string") {
1492
1596
  // prevent browser from caching
@@ -1,3 +1,3 @@
1
1
  module Chartkick
2
- VERSION = "2.2.0"
2
+ VERSION = "2.2.1"
3
3
  end
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: 2.2.0
4
+ version: 2.2.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Andrew Kane
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-12-04 00:00:00.000000000 Z
11
+ date: 2016-12-05 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler