Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 

564 rindas
14 KiB

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