source: public/assets/js/examples/charts/apex.js@ ac3f217

develop
Last change on this file since ac3f217 was 194a359, checked in by beratkjufliju <kufliju@…>, 3 years ago

added departments, edited users and added user settings
  • Property mode set to 100644
File size: 15.9 KB
RevLine 
[194a359]1'use strict';
2$(document).ready(function () {
3
4 apex_chart_one();
5
6 apex_chart_two();
7
8 apex_chart_three();
9
10 apex_chart_four();
11
12 apex_chart_five();
13
14 apex_chart_six();
15
16 apex_chart_seven();
17
18 apex_chart_eight();
19
20 apex_chart_nine();
21
22 function apex_chart_one() {
23 var lastDate = 0;
24 var data = []
25 var TICKINTERVAL = 86400000
26 let XAXISRANGE = 777600000
27
28 function getDayWiseTimeSeries(baseval, count, yrange) {
29 var i = 0;
30 while (i < count) {
31 var x = baseval;
32 var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
33
34 data.push({
35 x, y
36 });
37 lastDate = baseval
38 baseval += TICKINTERVAL;
39 i++;
40 }
41 }
42
43 getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
44 min: 10,
45 max: 90
46 });
47
48 function getNewSeries(baseval, yrange) {
49 var newDate = baseval + TICKINTERVAL;
50 lastDate = newDate;
51
52 for (var i = 0; i < data.length - 10; i++) {
53 // IMPORTANT
54 // we reset the x and y of the data which is out of drawing area
55 // to prevent memory leaks
56 data[i].x = newDate - XAXISRANGE - TICKINTERVAL
57 data[i].y = 0
58 }
59
60 data.push({
61 x: newDate,
62 y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
63 })
64
65 }
66
67 var options = {
68 chart: {
69 height: 350,
70 type: 'line',
71 animations: {
72 enabled: true,
73 easing: 'linear',
74 dynamicAnimation: {
75 speed: 1000
76 }
77 },
78 toolbar: {
79 show: false
80 },
81 zoom: {
82 enabled: false
83 }
84 },
85 dataLabels: {
86 enabled: false
87 },
88 stroke: {
89 curve: 'smooth'
90 },
91 series: [{
92 data: data
93 }],
94 title: {
95 text: 'Dynamic Updating Chart',
96 align: 'left'
97 },
98 markers: {
99 size: 0
100 },
101 xaxis: {
102 type: 'datetime',
103 range: XAXISRANGE,
104 },
105 yaxis: {
106 max: 100
107 },
108 legend: {
109 show: false
110 },
111 };
112
113 var chart = new ApexCharts(
114 document.querySelector("#apex_chart_one"),
115 options
116 );
117
118 chart.render();
119
120 window.setInterval(function () {
121 getNewSeries(lastDate, {
122 min: 10,
123 max: 90
124 })
125 chart.updateSeries([{
126 data: data
127 }])
128 }, 1000)
129 }
130
131 function apex_chart_two() {
132 var ts2 = 1484418600000;
133 var dates = [];
134 var spikes = [5, -5, 3, -3, 8, -8]
135 for (var i = 0; i < 120; i++) {
136 ts2 = ts2 + 86400000;
137 var innerArr = [ts2, dataSeries[1][i].value];
138 dates.push(innerArr)
139 }
140
141 var options = {
142 chart: {
143 type: 'area',
144 stacked: false,
145 height: 350,
146 zoom: {
147 type: 'x',
148 enabled: true
149 },
150 toolbar: {
151 autoSelected: 'zoom'
152 }
153 },
154 dataLabels: {
155 enabled: false
156 },
157 series: [{
158 name: 'XYZ MOTORS',
159 data: dates
160 }],
161 markers: {
162 size: 0,
163 },
164 title: {
165 text: 'Stock Price Movement',
166 align: 'left'
167 },
168 fill: {
169 type: 'gradient',
170 gradient: {
171 shadeIntensity: 1,
172 inverseColors: false,
173 opacityFrom: 0.5,
174 opacityTo: 0,
175 stops: [0, 90, 100]
176 },
177 },
178 yaxis: {
179 min: 20000000,
180 max: 250000000,
181 labels: {
182 formatter: function (val) {
183 return (val / 1000000).toFixed(0);
184 },
185 },
186 title: {
187 text: 'Price'
188 },
189 },
190 xaxis: {
191 type: 'datetime',
192 },
193
194 tooltip: {
195 shared: false,
196 y: {
197 formatter: function (val) {
198 return (val / 1000000).toFixed(0)
199 }
200 }
201 }
202 }
203
204 var chart = new ApexCharts(
205 document.querySelector("#apex_chart_two"),
206 options
207 );
208
209 chart.render();
210 }
211
212 function apex_chart_three() {
213 var options = {
214 chart: {
215 height: 350,
216 type: 'area',
217 },
218 dataLabels: {
219 enabled: false
220 },
221 stroke: {
222 curve: 'smooth'
223 },
224 series: [{
225 name: 'series1',
226 data: [31, 40, 28, 51, 42, 109, 100]
227 }, {
228 name: 'series2',
229 data: [11, 32, 45, 32, 34, 52, 41]
230 }],
231
232 xaxis: {
233 type: 'datetime',
234 categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00", "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00", "2018-09-19T06:30:00"],
235 },
236 tooltip: {
237 x: {
238 format: 'dd/MM/yy HH:mm'
239 },
240 }
241 }
242
243 var chart = new ApexCharts(
244 document.querySelector("#apex_chart_three"),
245 options
246 );
247
248 chart.render();
249 }
250
251 function apex_chart_four() {
252 var options = {
253 chart: {
254 height: 350,
255 type: 'bar',
256 },
257 plotOptions: {
258 bar: {
259 horizontal: false,
260 columnWidth: '55%',
261 endingShape: 'rounded'
262 },
263 },
264 dataLabels: {
265 enabled: false
266 },
267 stroke: {
268 show: true,
269 width: 2,
270 colors: ['transparent']
271 },
272 series: [{
273 name: 'Net Profit',
274 data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
275 }, {
276 name: 'Revenue',
277 data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
278 }, {
279 name: 'Free Cash Flow',
280 data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
281 }],
282 xaxis: {
283 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
284 },
285 yaxis: {
286 title: {
287 text: '$ (thousands)'
288 }
289 },
290 fill: {
291 opacity: 1
292
293 },
294 tooltip: {
295 y: {
296 formatter: function (val) {
297 return "$ " + val + " thousands"
298 }
299 }
300 }
301 }
302
303 var chart = new ApexCharts(
304 document.querySelector("#apex_chart_four"),
305 options
306 );
307
308 chart.render();
309 }
310
311 function apex_chart_five() {
312 var options = {
313 chart: {
314 height: 350,
315 type: 'bar',
316 stacked: true,
317 stackType: '100%'
318 },
319 responsive: [{
320 breakpoint: 480,
321 options: {
322 legend: {
323 position: 'bottom',
324 offsetX: -10,
325 offsetY: 0
326 }
327 }
328 }],
329 series: [{
330 name: 'PRODUCT A',
331 data: [44, 55, 41, 67, 22, 43, 21, 49]
332 },{
333 name: 'PRODUCT B',
334 data: [13, 23, 20, 8, 13, 27, 33, 12]
335 },{
336 name: 'PRODUCT C',
337 data: [11, 17, 15, 15, 21, 14, 15, 13]
338 }],
339 xaxis: {
340 categories: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4'],
341 },
342 fill: {
343 opacity: 1
344 },
345
346 legend: {
347 position: 'right',
348 offsetX: 0,
349 offsetY: 50
350 },
351 }
352
353 var chart = new ApexCharts(
354 document.querySelector("#apex_chart_five"),
355 options
356 );
357
358 chart.render();
359 }
360
361 function apex_chart_six() {
362 var options = {
363 chart: {
364 height: 380,
365 type: 'bar'
366 },
367 plotOptions: {
368 bar: {
369 barHeight: '100%',
370 distributed: true,
371 horizontal: true,
372 dataLabels: {
373 position: 'bottom'
374 },
375 }
376 },
377 colors: ['#33b2df', '#546E7A', '#d4526e', '#13d8aa', '#A5978B', '#2b908f', '#f9a3a4', '#90ee7e', '#f48024', '#69d2e7'],
378 dataLabels: {
379 enabled: true,
380 textAnchor: 'start',
381 style: {
382 colors: ['#fff']
383 },
384 formatter: function(val, opt) {
385 return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
386 },
387 offsetX: 0,
388 dropShadow: {
389 enabled: true
390 }
391 },
392 series: [{
393 data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
394 }],
395 stroke: {
396 width: 1,
397 colors: ['#fff']
398 },
399 xaxis: {
400 categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'India'],
401 },
402 yaxis: {
403 labels: {
404 show: false
405 }
406 },
407 title: {
408 text: 'Custom DataLabels',
409 align: 'center',
410 floating: true
411 },
412 subtitle: {
413 text: 'Category Names as DataLabels inside bars',
414 align: 'center',
415 },
416 tooltip: {
417 theme: 'dark',
418 x: {
419 show: false
420 },
421 y: {
422 title: {
423 formatter: function() {
424 return ''
425 }
426 }
427 }
428 }
429 }
430
431 var chart = new ApexCharts(
432 document.querySelector("#apex_chart_six"),
433 options
434 );
435
436 chart.render();
437 }
438
439 function apex_chart_seven() {
440 var options = {
441 chart: {
442 width: 380,
443 type: 'pie',
444 },
445 labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
446 series: [44, 55, 13, 43, 22],
447 responsive: [{
448 breakpoint: 480,
449 options: {
450 chart: {
451 width: 200
452 },
453 legend: {
454 position: 'bottom'
455 }
456 }
457 }]
458 }
459
460 var chart = new ApexCharts(
461 document.querySelector("#apex_chart_seven"),
462 options
463 );
464
465 chart.render();
466 }
467
468 function apex_chart_eight() {
469 function generateData(baseval, count, yrange) {
470 var i = 0;
471 var series = [];
472 while (i < count) {
473 var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;;
474 var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
475 var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
476
477 series.push([x, y, z]);
478 baseval += 86400000;
479 i++;
480 }
481 return series;
482 }
483
484
485 var options = {
486 chart: {
487 height: 350,
488 type: 'bubble',
489 },
490 dataLabels: {
491 enabled: false
492 },
493 series: [{
494 name: 'Bubble1',
495 data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
496 min: 10,
497 max: 60
498 })
499 },
500 {
501 name: 'Bubble2',
502 data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
503 min: 10,
504 max: 60
505 })
506 },
507 {
508 name: 'Bubble3',
509 data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
510 min: 10,
511 max: 60
512 })
513 },
514 {
515 name: 'Bubble4',
516 data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
517 min: 10,
518 max: 60
519 })
520 }
521 ],
522 fill: {
523 opacity: 0.8
524 },
525 title: {
526 text: 'Simple Bubble Chart'
527 },
528 xaxis: {
529 tickAmount: 12,
530 type: 'category',
531 },
532 yaxis: {
533 max: 70
534 }
535 }
536
537 var chart = new ApexCharts(
538 document.querySelector("#apex_chart_eight"),
539 options
540 );
541
542 chart.render();
543 }
544
545 function apex_chart_nine() {
546 var options = {
547 chart: {
548 height: 350,
549 type: 'radar',
550 dropShadow: {
551 enabled: true,
552 blur: 1,
553 left: 1,
554 top: 1
555 }
556 },
557 series: [{
558 name: 'Series 1',
559 data: [80, 50, 30, 40, 100, 20],
560 }, {
561 name: 'Series 2',
562 data: [20, 30, 40, 80, 20, 80],
563 }, {
564 name: 'Series 3',
565 data: [44, 76, 78, 13, 43, 10],
566 }],
567 title: {
568 text: 'Radar Chart - Multi Series'
569 },
570 stroke: {
571 width: 0
572 },
573 fill: {
574 opacity: 0.4
575 },
576 markers: {
577 size: 0
578 },
579 labels: ['2011', '2012', '2013', '2014', '2015', '2016']
580 }
581
582 var chart = new ApexCharts(
583 document.querySelector("#apex_chart_nine"),
584 options
585 );
586
587 chart.render();
588
589 function update() {
590
591 function randomSeries() {
592 var arr = []
593 for(var i = 0; i < 6; i++) {
594 arr.push(Math.floor(Math.random() * 100))
595 }
596
597 return arr
598 }
599
600
601 chart.updateSeries([{
602 name: 'Series 1',
603 data: randomSeries(),
604 }, {
605 name: 'Series 2',
606 data: randomSeries(),
607 }, {
608 name: 'Series 3',
609 data: randomSeries(),
610 }])
611 }
612 }
613
614});
Note: See TracBrowser for help on using the repository browser.