c3.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. (function (global, factory) {
  2. if (typeof define === "function" && define.amd) {
  3. define("/charts/c3", ["jquery", "Site"], factory);
  4. } else if (typeof exports !== "undefined") {
  5. factory(require("jquery"), require("Site"));
  6. } else {
  7. var mod = {
  8. exports: {}
  9. };
  10. factory(global.jQuery, global.Site);
  11. global.chartsC3 = mod.exports;
  12. }
  13. })(this, function (_jquery, _Site) {
  14. "use strict";
  15. _jquery = babelHelpers.interopRequireDefault(_jquery);
  16. (0, _jquery.default)(document).ready(function ($$$1) {
  17. (0, _Site.run)();
  18. }); // Example C3 Simple Line
  19. // ----------------------
  20. (function () {
  21. var simple_line_chart = c3.generate({
  22. bindto: '#exampleC3SimpleLine',
  23. data: {
  24. columns: [['data1', 100, 165, 140, 270, 200, 140, 220], ['data2', 110, 80, 100, 85, 125, 90, 100]]
  25. },
  26. color: {
  27. pattern: [Config.colors("primary", 600), Config.colors("green", 600)]
  28. },
  29. axis: {
  30. x: {
  31. tick: {
  32. outer: false
  33. }
  34. },
  35. y: {
  36. max: 300,
  37. min: 0,
  38. tick: {
  39. outer: false,
  40. count: 7,
  41. values: [0, 50, 100, 150, 200, 250, 300]
  42. }
  43. }
  44. },
  45. grid: {
  46. x: {
  47. show: false
  48. },
  49. y: {
  50. show: true
  51. }
  52. }
  53. });
  54. })(); // Example C3 Line Regions
  55. // -----------------------
  56. (function () {
  57. var line_regions_chart = c3.generate({
  58. bindto: '#exampleC3LineRegions',
  59. data: {
  60. columns: [['data1', 100, 165, 140, 270, 200, 140, 220], ['data2', 110, 80, 100, 85, 125, 90, 100]],
  61. regions: {
  62. 'data1': [{
  63. 'start': 1,
  64. 'end': 2,
  65. 'style': 'dashed'
  66. }, {
  67. 'start': 3
  68. }],
  69. // currently 'dashed' style only
  70. 'data2': [{
  71. 'end': 3
  72. }]
  73. }
  74. },
  75. color: {
  76. pattern: [Config.colors("primary", 600), Config.colors("green", 600)]
  77. },
  78. axis: {
  79. x: {
  80. tick: {
  81. outer: false
  82. }
  83. },
  84. y: {
  85. max: 300,
  86. min: 0,
  87. tick: {
  88. outer: false,
  89. count: 7,
  90. values: [0, 50, 100, 150, 200, 250, 300]
  91. }
  92. }
  93. },
  94. grid: {
  95. x: {
  96. show: false
  97. },
  98. y: {
  99. show: true
  100. }
  101. }
  102. });
  103. })(); // Example C3 Timeseries
  104. // ---------------------
  105. (function () {
  106. var time_series_chart = c3.generate({
  107. bindto: '#exampleC3TimeSeries',
  108. data: {
  109. x: 'x',
  110. columns: [['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'], ['data1', 80, 125, 100, 220, 80, 160], ['data2', 40, 85, 45, 155, 50, 65]]
  111. },
  112. color: {
  113. pattern: [Config.colors("primary", 600), Config.colors("green", 600), Config.colors("red", 500)]
  114. },
  115. padding: {
  116. right: 40
  117. },
  118. axis: {
  119. x: {
  120. type: 'timeseries',
  121. tick: {
  122. outer: false,
  123. format: '%Y-%m-%d'
  124. }
  125. },
  126. y: {
  127. max: 300,
  128. min: 0,
  129. tick: {
  130. outer: false,
  131. count: 7,
  132. values: [0, 50, 100, 150, 200, 250, 300]
  133. }
  134. }
  135. },
  136. grid: {
  137. x: {
  138. show: false
  139. },
  140. y: {
  141. show: true
  142. }
  143. }
  144. });
  145. setTimeout(function () {
  146. time_series_chart.load({
  147. columns: [['data3', 210, 180, 260, 290, 250, 240]]
  148. });
  149. }, 1000);
  150. })(); // Example C3 Spline
  151. // -----------------
  152. (function () {
  153. var spline_chart = c3.generate({
  154. bindto: '#exampleC3Spline',
  155. data: {
  156. columns: [['data1', 100, 165, 140, 270, 200, 140, 220], ['data2', 110, 80, 100, 85, 125, 90, 100]],
  157. type: 'spline'
  158. },
  159. color: {
  160. pattern: [Config.colors("primary", 600), Config.colors("green", 600)]
  161. },
  162. axis: {
  163. x: {
  164. tick: {
  165. outer: false
  166. }
  167. },
  168. y: {
  169. max: 300,
  170. min: 0,
  171. tick: {
  172. outer: false,
  173. count: 7,
  174. values: [0, 50, 100, 150, 200, 250, 300]
  175. }
  176. }
  177. },
  178. grid: {
  179. x: {
  180. show: false
  181. },
  182. y: {
  183. show: true
  184. }
  185. }
  186. });
  187. })(); // Example C3 Scatter
  188. // ------------------
  189. (function () {
  190. var scatter_chart = c3.generate({
  191. bindto: '#exampleC3Scatter',
  192. data: {
  193. xs: {
  194. setosa: 'setosa_x',
  195. versicolor: 'versicolor_x'
  196. },
  197. columns: [["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.2, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3], ["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8], ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2], ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.6, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.2, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3]],
  198. type: 'scatter'
  199. },
  200. color: {
  201. pattern: [Config.colors("green", 600), Config.colors("red", 500)]
  202. },
  203. axis: {
  204. x: {
  205. label: 'Sepal.Width',
  206. tick: {
  207. outer: false,
  208. fit: false
  209. }
  210. },
  211. size: {
  212. height: 400
  213. },
  214. padding: {
  215. right: 40
  216. },
  217. y: {
  218. label: 'Petal.Width',
  219. tick: {
  220. outer: false,
  221. count: 5,
  222. values: [0, 0.4, 0.8, 1.2, 1.6]
  223. }
  224. }
  225. },
  226. grid: {
  227. x: {
  228. show: false
  229. },
  230. y: {
  231. show: true
  232. }
  233. }
  234. });
  235. })(); // Example C3 Bar
  236. // --------------
  237. (function () {
  238. var bar_chart = c3.generate({
  239. bindto: '#exampleC3Bar',
  240. data: {
  241. columns: [['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 100, 140, 200, 150, 50]],
  242. type: 'bar'
  243. },
  244. bar: {
  245. // width: {
  246. // ratio: 0.55 // this makes bar width 55% of length between ticks
  247. // }
  248. width: {
  249. max: 20
  250. }
  251. },
  252. color: {
  253. pattern: [Config.colors("red", 400), Config.colors("blue-grey", 400), Config.colors("blue-grey", 200)]
  254. },
  255. grid: {
  256. y: {
  257. show: true
  258. },
  259. x: {
  260. show: false
  261. }
  262. }
  263. });
  264. setTimeout(function () {
  265. bar_chart.load({
  266. columns: [['data3', 130, -150, 200, 300, -200, 100]]
  267. });
  268. }, 1000);
  269. })(); // Example C3 Stacked Bar
  270. // ----------------------
  271. (function () {
  272. var stacked_bar_chart = c3.generate({
  273. bindto: '#exampleC3StackedBar',
  274. data: {
  275. columns: [['data1', -30, 200, 300, 400, -150, 250], ['data2', 130, 100, -400, 100, -150, 50], ['data3', -230, 200, 200, -300, 250, 250]],
  276. type: 'bar',
  277. groups: [['data1', 'data2']]
  278. },
  279. color: {
  280. pattern: [Config.colors("primary", 500), Config.colors("blue-grey", 300), Config.colors("purple", 500), Config.colors("light-green", 500)]
  281. },
  282. bar: {
  283. width: {
  284. max: 45
  285. }
  286. },
  287. grid: {
  288. y: {
  289. show: true,
  290. lines: [{
  291. value: 0
  292. }]
  293. }
  294. }
  295. });
  296. setTimeout(function () {
  297. stacked_bar_chart.groups([['data1', 'data2', 'data3']]);
  298. }, 1000);
  299. setTimeout(function () {
  300. stacked_bar_chart.load({
  301. columns: [['data4', 100, -250, 150, 200, -300, -100]]
  302. });
  303. }, 1500);
  304. setTimeout(function () {
  305. stacked_bar_chart.groups([['data1', 'data2', 'data3', 'data4']]);
  306. }, 2000);
  307. })(); // Example C3 Combination
  308. // ----------------------
  309. (function () {
  310. var combination_chart = c3.generate({
  311. bindto: '#exampleC3Combination',
  312. data: {
  313. columns: [['data1', 30, 20, 50, 40, 60, 50], ['data2', 200, 130, 90, 240, 130, 220], ['data3', 300, 200, 160, 400, 250, 250], ['data4', 200, 130, 90, 240, 130, 220], ['data5', 130, 120, 150, 140, 160, 150], ['data6', 90, 70, 20, 50, 60, 120]],
  314. type: 'bar',
  315. types: {
  316. data3: 'spline',
  317. data4: 'line',
  318. data6: 'area'
  319. },
  320. groups: [['data1', 'data2']]
  321. },
  322. color: {
  323. pattern: [Config.colors("blue-grey", 400), Config.colors("blue-grey", 200), Config.colors("yellow", 600), Config.colors("primary", 600), Config.colors("red", 400), Config.colors("green", 600)]
  324. },
  325. grid: {
  326. x: {
  327. show: false
  328. },
  329. y: {
  330. show: true
  331. }
  332. }
  333. });
  334. })(); // Example C3 Pie
  335. // --------------
  336. (function () {
  337. var pie_chart = c3.generate({
  338. bindto: '#exampleC3Pie',
  339. data: {
  340. // iris data from R
  341. columns: [['data1', 100], ['data2', 40]],
  342. type: 'pie'
  343. },
  344. color: {
  345. pattern: [Config.colors("primary", 500), Config.colors("blue-grey", 200)]
  346. },
  347. legend: {
  348. position: 'right'
  349. },
  350. pie: {
  351. label: {
  352. show: false
  353. },
  354. onclick: function onclick(d, i) {},
  355. onmouseover: function onmouseover(d, i) {},
  356. onmouseout: function onmouseout(d, i) {}
  357. }
  358. });
  359. })(); // Example C3 Donut
  360. // ----------------
  361. (function () {
  362. var donut_chart = c3.generate({
  363. bindto: '#exampleC3Donut',
  364. data: {
  365. columns: [['data1', 120], ['data2', 40], ['data3', 80]],
  366. type: 'donut'
  367. },
  368. color: {
  369. pattern: [Config.colors("primary", 500), Config.colors("blue-grey", 200), Config.colors("red", 400)]
  370. },
  371. legend: {
  372. position: 'right'
  373. },
  374. donut: {
  375. label: {
  376. show: false
  377. },
  378. width: 10,
  379. title: "C3 Dount Chart",
  380. onclick: function onclick(d, i) {},
  381. onmouseover: function onmouseover(d, i) {},
  382. onmouseout: function onmouseout(d, i) {}
  383. }
  384. });
  385. })(); // Example Sub Chart
  386. // ----------------
  387. (function () {
  388. var donut_chart = c3.generate({
  389. bindto: '#exampleC3Subchart',
  390. data: {
  391. columns: [['data1', 100, 165, 140, 270, 200, 140, 220, 210, 190, 100, 170, 250], ['data2', 110, 80, 100, 85, 125, 90, 100, 130, 120, 90, 100, 115]],
  392. type: 'spline'
  393. },
  394. color: {
  395. pattern: [Config.colors("primary", 600), Config.colors("green", 600)]
  396. },
  397. subchart: {
  398. show: true
  399. }
  400. });
  401. })(); // Example C3 Zoom
  402. // ----------------
  403. (function () {
  404. var donut_chart = c3.generate({
  405. bindto: '#exampleC3Zoom',
  406. data: {
  407. columns: [['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]],
  408. colors: {
  409. sample: Config.colors("primary", 600)
  410. }
  411. },
  412. zoom: {
  413. enabled: true
  414. }
  415. });
  416. })();
  417. });