You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

560 rivejä
14 KiB

  1. // Composite Chart
  2. // ================================================================================
  3. let report_count_list = [17, 40, 33, 44, 126, 156,
  4. 324, 333, 478, 495, 176];
  5. let bar_composite_data = {
  6. labels: ["2007", "2008", "2009", "2010", "2011", "2012",
  7. "2013", "2014", "2015", "2016", "2017"],
  8. yMarkers: [
  9. {
  10. label: "Marker 1",
  11. value: 420,
  12. },
  13. {
  14. label: "Marker 2",
  15. value: 250,
  16. }
  17. ],
  18. yRegions: [
  19. {
  20. label: "Region Y 1",
  21. start: 100,
  22. end: 300
  23. },
  24. ],
  25. datasets: [{
  26. "name": "Events",
  27. "values": report_count_list,
  28. // "formatted": report_count_list.map(d => d + " reports")
  29. }]
  30. };
  31. let line_composite_data = {
  32. labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  33. datasets: [{
  34. "values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
  35. // "values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 40, 40],
  36. // "values": [-36, -46, -45, -32, -27, -31, -30, -36, -39, -49, -40, -40],
  37. }]
  38. };
  39. let more_line_data = [
  40. [4, 0, 3, 1, 1, 2, 1, 2, 1, 0, 1, 1],
  41. // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  42. [2, 3, 3, 2, 1, 4, 0, 1, 2, 7, 11, 4],
  43. [7, 7, 2, 4, 0, 1, 5, 3, 1, 2, 0, 1],
  44. [0, 2, 6, 2, 2, 1, 2, 3, 6, 3, 7, 10],
  45. [9, 10, 8, 10, 6, 5, 8, 8, 24, 15, 10, 13],
  46. [9, 13, 16, 9, 4, 5, 7, 10, 14, 22, 23, 24],
  47. [20, 22, 28, 19, 28, 19, 14, 19, 51, 37, 29, 38],
  48. [29, 20, 22, 16, 16, 19, 24, 26, 57, 31, 46, 27],
  49. [36, 24, 38, 27, 15, 22, 24, 38, 32, 57, 139, 26],
  50. [37, 36, 32, 33, 12, 34, 52, 45, 58, 57, 64, 35],
  51. [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
  52. // [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 40, 40]
  53. // [-36, -46, -45, -32, -27, -31, -30, -36, -39, -49, -40, -40]
  54. ];
  55. let c1 = document.querySelector("#chart-composite-1");
  56. let c2 = document.querySelector("#chart-composite-2");
  57. let bar_composite_chart = new Chart (c1, {
  58. title: "Fireball/Bolide Events - Yearly (more than 5 reports)",
  59. data: bar_composite_data,
  60. type: 'bar',
  61. height: 180,
  62. colors: ['orange'],
  63. isNavigable: 1,
  64. isSeries: 1,
  65. valuesOverPoints: 1,
  66. yAxisMode: 'tick'
  67. // regionFill: 1
  68. });
  69. let line_composite_chart = new Chart (c2, {
  70. data: line_composite_data,
  71. type: 'line',
  72. lineOptions: {
  73. dotSize: 10
  74. },
  75. height: 180,
  76. colors: ['green'],
  77. isSeries: 1,
  78. valuesOverPoints: 1,
  79. });
  80. bar_composite_chart.parent.addEventListener('data-select', (e) => {
  81. line_composite_chart.updateDataset(more_line_data[e.index]);
  82. });
  83. // Demo Chart (bar, linepts, scatter(blobs), percentage)
  84. // ================================================================================
  85. let type_data = {
  86. labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
  87. "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
  88. yMarkers: [
  89. {
  90. label: "Marker 1",
  91. value: 42,
  92. type: 'dashed'
  93. },
  94. {
  95. label: "Marker 2",
  96. value: 25,
  97. type: 'dashed'
  98. }
  99. ],
  100. yRegions: [
  101. {
  102. label: "Region Y 1",
  103. start: -10,
  104. end: 50
  105. },
  106. ],
  107. // will depend on series code for calculating X values
  108. // xRegions: [
  109. // {
  110. // label: "Region X 2",
  111. // start: ,
  112. // end: ,
  113. // }
  114. // ],
  115. datasets: [
  116. {
  117. name: "Some Data",
  118. values: [18, 40, 30, 35, 8, 52, 17, -4],
  119. axisPosition: 'right',
  120. chartType: 'bar'
  121. },
  122. {
  123. name: "Another Set",
  124. values: [30, 50, -10, 15, 18, 32, 27, 14],
  125. axisPosition: 'right',
  126. chartType: 'bar'
  127. },
  128. {
  129. name: "Yet Another",
  130. values: [15, 20, -3, -15, 58, 12, -17, 37],
  131. chartType: 'line'
  132. }
  133. // temp : Stacked
  134. // {
  135. // name: "Some Data",
  136. // values:[25, 30, 50, 45, 18, 12, 27, 14]
  137. // },
  138. // {
  139. // name: "Another Set",
  140. // values: [18, 20, 30, 35, 8, 7, 17, 4]
  141. // },
  142. // {
  143. // name: "Another Set",
  144. // values: [11, 8, 19, 15, 3, 4, 10, 2]
  145. // },
  146. ]
  147. };
  148. let type_chart = new Chart("#chart-types", {
  149. // title: "My Awesome Chart",
  150. data: type_data,
  151. type: 'bar',
  152. height: 250,
  153. colors: ['purple', 'magenta', 'light-blue'],
  154. isSeries: 1,
  155. xAxisMode: 'tick',
  156. yAxisMode: 'span',
  157. valuesOverPoints: 1,
  158. barOptions: {
  159. stacked: 1
  160. }
  161. // formatTooltipX: d => (d + '').toUpperCase(),
  162. // formatTooltipY: d => d + ' pts'
  163. });
  164. Array.prototype.slice.call(
  165. document.querySelectorAll('.chart-type-buttons button')
  166. ).map(el => {
  167. el.addEventListener('click', (e) => {
  168. let btn = e.target;
  169. let type = btn.getAttribute('data-type');
  170. let newChart = type_chart.getDifferentChart(type);
  171. if(newChart){
  172. type_chart = newChart;
  173. }
  174. Array.prototype.slice.call(
  175. btn.parentNode.querySelectorAll('button')).map(el => {
  176. el.classList.remove('active');
  177. });
  178. btn.classList.add('active');
  179. });
  180. });
  181. // Trends Chart
  182. // ================================================================================
  183. let trends_data = {
  184. labels: [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976,
  185. 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986,
  186. 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996,
  187. 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006,
  188. 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016] ,
  189. datasets: [
  190. {
  191. "values": [132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4,
  192. 39.3, 131.0, 220.1, 218.9, 198.9, 162.4, 91.0, 60.5, 20.6, 14.8,
  193. 33.9, 123.0, 211.1, 191.8, 203.3, 133.0, 76.1, 44.9, 25.1, 11.6,
  194. 28.9, 88.3, 136.3, 173.9, 170.4, 163.6, 99.3, 65.3, 45.8, 24.7,
  195. 12.6, 4.2, 4.8, 24.9, 80.8, 84.5, 94.0, 113.3, 69.8, 39.8]
  196. }
  197. ]
  198. };
  199. let plot_chart_args = {
  200. title: "Mean Total Sunspot Count - Yearly",
  201. data: trends_data,
  202. type: 'line',
  203. height: 250,
  204. colors: ['blue'],
  205. isSeries: 1,
  206. lineOptions: {
  207. hideDots: 1,
  208. heatline: 1,
  209. },
  210. xAxisMode: 'tick',
  211. yAxisMode: 'span'
  212. };
  213. new Chart("#chart-trends", plot_chart_args);
  214. Array.prototype.slice.call(
  215. document.querySelectorAll('.chart-plot-buttons button')
  216. ).map(el => {
  217. el.addEventListener('click', (e) => {
  218. let btn = e.target;
  219. let type = btn.getAttribute('data-type');
  220. let config = [];
  221. if(type === 'line') {
  222. config = [0, 0, 0];
  223. } else if(type === 'region') {
  224. config = [0, 0, 1];
  225. } else {
  226. config = [0, 1, 0];
  227. }
  228. plot_chart_args.hideDots = config[0];
  229. plot_chart_args.heatline = config[1];
  230. plot_chart_args.regionFill = config[2];
  231. plot_chart_args.init = false;
  232. new Chart("#chart-trends", plot_chart_args);
  233. Array.prototype.slice.call(
  234. btn.parentNode.querySelectorAll('button')).map(el => {
  235. el.classList.remove('active');
  236. });
  237. btn.classList.add('active');
  238. });
  239. });
  240. // Update values chart
  241. // ================================================================================
  242. let update_data_all_labels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue",
  243. "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
  244. "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
  245. let update_data_all_values = Array.from({length: 30}, () => Math.floor(Math.random() * 75 - 15));
  246. // We're gonna be shuffling this
  247. let update_data_all_indices = update_data_all_labels.map((d,i) => i);
  248. let get_update_data = (source_array, length=10) => {
  249. let indices = update_data_all_indices.slice(0, length);
  250. return indices.map((index) => source_array[index]);
  251. };
  252. let update_data = {
  253. labels: get_update_data(update_data_all_labels),
  254. datasets: [{
  255. "values": get_update_data(update_data_all_values)
  256. }],
  257. "specific_values": [
  258. {
  259. name: "Altitude",
  260. // name: "A very long text",
  261. line_type: "dashed",
  262. value: 38
  263. },
  264. ]
  265. };
  266. let update_chart = new Chart("#chart-update", {
  267. data: update_data,
  268. type: 'line',
  269. height: 250,
  270. colors: ['red'],
  271. isSeries: 1,
  272. lineOptions: {
  273. regionFill: 1
  274. },
  275. });
  276. let chart_update_buttons = document.querySelector('.chart-update-buttons');
  277. chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", (e) => {
  278. shuffle(update_data_all_indices);
  279. let data = {
  280. labels: update_data_all_labels.slice(0, 10),
  281. datasets: [{values: get_update_data(update_data_all_values)}],
  282. }
  283. update_chart.update(data);
  284. });
  285. chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", (e) => {
  286. let index = update_chart.state.datasetLength; // last index to add
  287. if(index >= update_data_all_indices.length) return;
  288. update_chart.addDataPoint(
  289. update_data_all_labels[index], [update_data_all_values[index]]
  290. );
  291. });
  292. chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", (e) => {
  293. update_chart.removeDataPoint();
  294. });
  295. // Event chart
  296. // ================================================================================
  297. let moon_names = ["Ganymede", "Callisto", "Io", "Europa"];
  298. let masses = [14819000, 10759000, 8931900, 4800000];
  299. let distances = [1070.412, 1882.709, 421.700, 671.034];
  300. let diameters = [5262.4, 4820.6, 3637.4, 3121.6];
  301. let jupiter_moons = {
  302. 'Ganymede': {
  303. mass: '14819000 x 10^16 kg',
  304. 'semi-major-axis': '1070412 km',
  305. 'diameter': '5262.4 km'
  306. },
  307. 'Callisto': {
  308. mass: '10759000 x 10^16 kg',
  309. 'semi-major-axis': '1882709 km',
  310. 'diameter': '4820.6 km'
  311. },
  312. 'Io': {
  313. mass: '8931900 x 10^16 kg',
  314. 'semi-major-axis': '421700 km',
  315. 'diameter': '3637.4 km'
  316. },
  317. 'Europa': {
  318. mass: '4800000 x 10^16 kg',
  319. 'semi-major-axis': '671034 km',
  320. 'diameter': '3121.6 km'
  321. },
  322. };
  323. let events_data = {
  324. labels: ["Ganymede", "Callisto", "Io", "Europa"],
  325. datasets: [
  326. {
  327. "values": distances,
  328. "formatted": distances.map(d => d*1000 + " km")
  329. }
  330. ]
  331. };
  332. let events_chart = new Chart("#chart-events", {
  333. title: "Jupiter's Moons: Semi-major Axis (1000 km)",
  334. data: events_data,
  335. type: 'bar',
  336. height: 250,
  337. colors: ['grey'],
  338. isNavigable: 1,
  339. });
  340. let data_div = document.querySelector('.chart-events-data');
  341. events_chart.parent.addEventListener('data-select', (e) => {
  342. let name = moon_names[e.index];
  343. data_div.querySelector('.moon-name').innerHTML = name;
  344. data_div.querySelector('.semi-major-axis').innerHTML = distances[e.index] * 1000;
  345. data_div.querySelector('.mass').innerHTML = masses[e.index];
  346. data_div.querySelector('.diameter').innerHTML = diameters[e.index];
  347. data_div.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
  348. });
  349. // Aggregation chart
  350. // ================================================================================
  351. let aggr_data = {
  352. labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  353. datasets: [
  354. {
  355. "values": [25, 40, 30, 35, 8, 52, 17]
  356. },
  357. {
  358. "values": [25, 50, 10, 15, 18, 32, 27],
  359. }
  360. ]
  361. };
  362. let aggr_chart = new Chart("#chart-aggr", {
  363. data: aggr_data,
  364. type: 'bar',
  365. height: 250,
  366. colors: ['light-green', 'blue'],
  367. valuesOverPoints: 1,
  368. barOptions: {
  369. // stacked: 1
  370. }
  371. });
  372. document.querySelector('[data-aggregation="sums"]').addEventListener("click", (e) => {
  373. if(e.target.innerHTML === "Show Sums") {
  374. aggr_chart.show_sums();
  375. e.target.innerHTML = "Hide Sums";
  376. } else {
  377. aggr_chart.hide_sums();
  378. e.target.innerHTML = "Show Sums";
  379. }
  380. });
  381. document.querySelector('[data-aggregation="average"]').addEventListener("click", (e) => {
  382. if(e.target.innerHTML === "Show Averages") {
  383. aggr_chart.show_averages();
  384. e.target.innerHTML = "Hide Averages";
  385. } else {
  386. aggr_chart.hide_averages();
  387. e.target.innerHTML = "Show Averages";
  388. }
  389. });
  390. // Heatmap
  391. // ================================================================================
  392. let heatmap_data = {};
  393. let current_date = new Date();
  394. let timestamp = current_date.getTime()/1000;
  395. timestamp = Math.floor(timestamp - (timestamp % 86400)).toFixed(1); // convert to midnight
  396. for (var i = 0; i< 375; i++) {
  397. heatmap_data[parseInt(timestamp)] = Math.floor(Math.random() * 5);
  398. timestamp = Math.floor(timestamp - 86400).toFixed(1);
  399. }
  400. new Chart("#chart-heatmap", {
  401. data: heatmap_data,
  402. type: 'heatmap',
  403. legend_scale: [0, 1, 2, 4, 5],
  404. height: 115,
  405. discrete_domains: 1
  406. });
  407. Array.prototype.slice.call(
  408. document.querySelectorAll('.heatmap-mode-buttons button')
  409. ).map(el => {
  410. el.addEventListener('click', (e) => {
  411. let btn = e.target;
  412. let mode = btn.getAttribute('data-mode');
  413. let discrete_domains = 0;
  414. if(mode === 'discrete') {
  415. discrete_domains = 1;
  416. }
  417. let colors = [];
  418. let colors_mode = document
  419. .querySelector('.heatmap-color-buttons .active')
  420. .getAttribute('data-color');
  421. if(colors_mode === 'halloween') {
  422. colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
  423. }
  424. new Chart("#chart-heatmap", {
  425. data: heatmap_data,
  426. type: 'heatmap',
  427. legend_scale: [0, 1, 2, 4, 5],
  428. height: 115,
  429. discrete_domains: discrete_domains,
  430. legend_colors: colors
  431. });
  432. Array.prototype.slice.call(
  433. btn.parentNode.querySelectorAll('button')).map(el => {
  434. el.classList.remove('active');
  435. });
  436. btn.classList.add('active');
  437. });
  438. });
  439. Array.prototype.slice.call(
  440. document.querySelectorAll('.heatmap-color-buttons button')
  441. ).map(el => {
  442. el.addEventListener('click', (e) => {
  443. let btn = e.target;
  444. let colors_mode = btn.getAttribute('data-color');
  445. let colors = [];
  446. if(colors_mode === 'halloween') {
  447. colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
  448. }
  449. let discrete_domains = 1;
  450. let view_mode = document
  451. .querySelector('.heatmap-mode-buttons .active')
  452. .getAttribute('data-mode');
  453. if(view_mode === 'continuous') {
  454. discrete_domains = 0;
  455. }
  456. new Chart("#chart-heatmap", {
  457. data: heatmap_data,
  458. type: 'heatmap',
  459. legend_scale: [0, 1, 2, 4, 5],
  460. height: 115,
  461. discrete_domains: discrete_domains,
  462. legend_colors: colors
  463. });
  464. Array.prototype.slice.call(
  465. btn.parentNode.querySelectorAll('button')).map(el => {
  466. el.classList.remove('active');
  467. });
  468. btn.classList.add('active');
  469. });
  470. });
  471. // Helpers
  472. // ================================================================================
  473. function shuffle(array) {
  474. // https://stackoverflow.com/a/2450976/6495043
  475. // Awesomeness: https://bost.ocks.org/mike/shuffle/
  476. var currentIndex = array.length, temporaryValue, randomIndex;
  477. // While there remain elements to shuffle...
  478. while (0 !== currentIndex) {
  479. // Pick a remaining element...
  480. randomIndex = Math.floor(Math.random() * currentIndex);
  481. currentIndex -= 1;
  482. // And swap it with the current element.
  483. temporaryValue = array[currentIndex];
  484. array[currentIndex] = array[randomIndex];
  485. array[randomIndex] = temporaryValue;
  486. }
  487. return array;
  488. }