lavkach3

1
document.addEventListener("DOMContentLoaded", function () {
2
  // Basic Area Chart -------> AREA CHART
3
  var options_area = {
4
    series: [
5
      {
6
        name: "STOCK ABC",
7
        data: [
8
          [1327359600000, 30.95],
9
          [1327446000000, 31.34],
10
          [1327532400000, 31.18],
11
          [1327618800000, 31.05],
12
          [1327878000000, 31.0],
13
          [1327964400000, 30.95],
14
          [1328050800000, 31.24],
15
          [1328137200000, 31.29],
16
          [1328223600000, 31.85],
17
          [1328482800000, 31.86],
18
          [1328569200000, 32.28],
19
          [1328655600000, 32.1],
20
          [1328742000000, 32.65],
21
          [1328828400000, 32.21],
22
          [1329087600000, 32.35],
23
          [1329174000000, 32.44],
24
          [1329260400000, 32.46],
25
          [1329346800000, 32.86],
26
          [1329433200000, 32.75],
27
          [1329778800000, 32.54],
28
          [1329865200000, 32.33],
29
          [1329951600000, 32.97],
30
          [1330038000000, 33.41],
31
          [1330297200000, 33.27],
32
          [1330383600000, 33.27],
33
          [1330470000000, 32.89],
34
          [1330556400000, 33.1],
35
          [1330642800000, 33.73],
36
          [1330902000000, 33.22],
37
          [1330988400000, 31.99],
38
          [1331074800000, 32.41],
39
          [1331161200000, 33.05],
40
          [1331247600000, 33.64],
41
          [1331506800000, 33.56],
42
          [1331593200000, 34.22],
43
          [1331679600000, 33.77],
44
          [1331766000000, 34.17],
45
          [1331852400000, 33.82],
46
          [1332111600000, 34.51],
47
          [1332198000000, 33.16],
48
          [1332284400000, 33.56],
49
          [1332370800000, 33.71],
50
          [1332457200000, 33.81],
51
          [1332712800000, 34.4],
52
          [1332799200000, 34.63],
53
          [1332885600000, 34.46],
54
          [1332972000000, 34.48],
55
          [1333058400000, 34.31],
56
          [1333317600000, 34.7],
57
          [1333404000000, 34.31],
58
          [1333490400000, 33.46],
59
          [1333576800000, 33.59],
60
          [1333922400000, 33.22],
61
          [1334008800000, 32.61],
62
          [1334095200000, 33.01],
63
          [1334181600000, 33.55],
64
          [1334268000000, 33.18],
65
          [1334527200000, 32.84],
66
          [1334613600000, 33.84],
67
          [1334700000000, 33.39],
68
          [1334786400000, 32.91],
69
          [1334872800000, 33.06],
70
          [1335132000000, 32.62],
71
          [1335218400000, 32.4],
72
          [1335304800000, 33.13],
73
          [1335391200000, 33.26],
74
          [1335477600000, 33.58],
75
          [1335736800000, 33.55],
76
          [1335823200000, 33.77],
77
          [1335909600000, 33.76],
78
          [1335996000000, 33.32],
79
          [1336082400000, 32.61],
80
          [1336341600000, 32.52],
81
          [1336428000000, 32.67],
82
          [1336514400000, 32.52],
83
          [1336600800000, 31.92],
84
          [1336687200000, 32.2],
85
          [1336946400000, 32.23],
86
          [1337032800000, 32.33],
87
          [1337119200000, 32.36],
88
          [1337205600000, 32.01],
89
          [1337292000000, 31.31],
90
          [1337551200000, 32.01],
91
          [1337637600000, 32.01],
92
          [1337724000000, 32.18],
93
          [1337810400000, 31.54],
94
          [1337896800000, 31.6],
95
          [1338242400000, 32.05],
96
          [1338328800000, 31.29],
97
          [1338415200000, 31.05],
98
          [1338501600000, 29.82],
99
          [1338760800000, 30.31],
100
          [1338847200000, 30.7],
101
          [1338933600000, 31.69],
102
          [1339020000000, 31.32],
103
          [1339106400000, 31.65],
104
          [1339365600000, 31.13],
105
          [1339452000000, 31.77],
106
          [1339538400000, 31.79],
107
          [1339624800000, 31.67],
108
          [1339711200000, 32.39],
109
          [1339970400000, 32.63],
110
          [1340056800000, 32.89],
111
          [1340143200000, 31.99],
112
          [1340229600000, 31.23],
113
          [1340316000000, 31.57],
114
          [1340575200000, 30.84],
115
          [1340661600000, 31.07],
116
          [1340748000000, 31.41],
117
          [1340834400000, 31.17],
118
          [1340920800000, 32.37],
119
          [1341180000000, 32.19],
120
          [1341266400000, 32.51],
121
          [1341439200000, 32.53],
122
          [1341525600000, 31.37],
123
          [1341784800000, 30.43],
124
          [1341871200000, 30.44],
125
          [1341957600000, 30.2],
126
          [1342044000000, 30.14],
127
          [1342130400000, 30.65],
128
          [1342389600000, 30.4],
129
          [1342476000000, 30.65],
130
          [1342562400000, 31.43],
131
          [1342648800000, 31.89],
132
          [1342735200000, 31.38],
133
          [1342994400000, 30.64],
134
          [1343080800000, 30.02],
135
          [1343167200000, 30.33],
136
          [1343253600000, 30.95],
137
          [1343340000000, 31.89],
138
          [1343599200000, 31.01],
139
          [1343685600000, 30.88],
140
          [1343772000000, 30.69],
141
          [1343858400000, 30.58],
142
          [1343944800000, 32.02],
143
          [1344204000000, 32.14],
144
          [1344290400000, 32.37],
145
          [1344376800000, 32.51],
146
          [1344463200000, 32.65],
147
          [1344549600000, 32.64],
148
          [1344808800000, 32.27],
149
          [1344895200000, 32.1],
150
          [1344981600000, 32.91],
151
          [1345068000000, 33.65],
152
          [1345154400000, 33.8],
153
          [1345413600000, 33.92],
154
          [1345500000000, 33.75],
155
          [1345586400000, 33.84],
156
          [1345672800000, 33.5],
157
          [1345759200000, 32.26],
158
          [1346018400000, 32.32],
159
          [1346104800000, 32.06],
160
        ],
161
      },
162
    ],
163
    chart: {
164
      fontFamily: "inherit",
165
      type: "area",
166
      height: 350,
167
      zoom: {
168
        enabled: false,
169
      },
170
      toolbar: {
171
        show: false,
172
      },
173
    },
174
    grid: {
175
      show: false,
176
    },
177
    colors: ["#615dff"],
178
    dataLabels: {
179
      enabled: false,
180
    },
181
    stroke: {
182
      curve: "straight",
183
    },
184
    xaxis: {
185
      type: "datetime",
186
      labels: {
187
        style: {
188
          colors:"#a1aab2",
189
        },
190
      },
191
    },
192
    yaxis: {
193
      opposite: true,
194
      labels: {
195
        style: {
196
          colors:"#a1aab2",
197
        },
198
      },
199
    },
200
    tooltip: {
201
      theme: "dark",
202
    },
203
    legend: {
204
      horizontalAlign: "left",
205
    },
206
  };
207

208
  var chart_area_basic = new ApexCharts(
209
    document.querySelector("#chart-area-basic"),
210
    options_area
211
  );
212
  chart_area_basic.render();
213

214
  // Spline Area Chart -------> AREA CHART
215
  var options_spline = {
216
    series: [
217
      {
218
        name: "series1",
219
        data: [31, 40, 28, 51, 42, 109, 100],
220
      },
221
      {
222
        name: "series2",
223
        data: [11, 32, 45, 32, 34, 52, 41],
224
      },
225
    ],
226
    chart: {
227
      fontFamily: "inherit",
228
      height: 350,
229
      type: "area",
230
      toolbar: {
231
        show: false,
232
      },
233
    },
234
    grid: {
235
      show: false,
236
    },
237
    colors: ["#615dff", "#3dd9eb"],
238
    dataLabels: {
239
      enabled: false,
240
    },
241
    stroke: {
242
      curve: "smooth",
243
    },
244
    xaxis: {
245
      type: "datetime",
246
      categories: [
247
        "2018-09-19T00:00:00.000Z",
248
        "2018-09-19T01:30:00.000Z",
249
        "2018-09-19T02:30:00.000Z",
250
        "2018-09-19T03:30:00.000Z",
251
        "2018-09-19T04:30:00.000Z",
252
        "2018-09-19T05:30:00.000Z",
253
        "2018-09-19T06:30:00.000Z",
254
      ],
255
      labels: {
256
        style: {
257
          colors:"#a1aab2",
258
        },
259
      },
260
    },
261
    yaxis: {
262
      labels: {
263
        style: {
264
          colors:"#a1aab2",
265
        },
266
      },
267
    },
268
    tooltip: {
269
      x: {
270
        format: "dd/MM/yy HH:mm",
271
      },
272
      theme: "dark",
273
    },
274
    legend: {
275
      labels: {
276
        colors: ["#a1aab2"],
277
      },
278
    },
279
  };
280

281
  var chart_area_spline = new ApexCharts(
282
    document.querySelector("#chart-area-spline"),
283
    options_spline
284
  );
285
  chart_area_spline.render();
286

287
  // Real Time Area Chart -------> AREA CHART
288
  var options = {
289
    series: [
290
      {
291
        data: [
292
          [1327359600000, 30.95],
293
          [1327446000000, 31.34],
294
          [1327532400000, 31.18],
295
          [1327618800000, 31.05],
296
          [1327878000000, 31.0],
297
          [1327964400000, 30.95],
298
          [1328050800000, 31.24],
299
          [1328137200000, 31.29],
300
          [1328223600000, 31.85],
301
          [1328482800000, 31.86],
302
          [1328569200000, 32.28],
303
          [1328655600000, 32.1],
304
          [1328742000000, 32.65],
305
          [1328828400000, 32.21],
306
          [1329087600000, 32.35],
307
          [1329174000000, 32.44],
308
          [1329260400000, 32.46],
309
          [1329346800000, 32.86],
310
          [1329433200000, 32.75],
311
          [1329778800000, 32.54],
312
          [1329865200000, 32.33],
313
          [1329951600000, 32.97],
314
          [1330038000000, 33.41],
315
          [1330297200000, 33.27],
316
          [1330383600000, 33.27],
317
          [1330470000000, 32.89],
318
          [1330556400000, 33.1],
319
          [1330642800000, 33.73],
320
          [1330902000000, 33.22],
321
          [1330988400000, 31.99],
322
          [1331074800000, 32.41],
323
          [1331161200000, 33.05],
324
          [1331247600000, 33.64],
325
          [1331506800000, 33.56],
326
          [1331593200000, 34.22],
327
          [1331679600000, 33.77],
328
          [1331766000000, 34.17],
329
          [1331852400000, 33.82],
330
          [1332111600000, 34.51],
331
          [1332198000000, 33.16],
332
          [1332284400000, 33.56],
333
          [1332370800000, 33.71],
334
          [1332457200000, 33.81],
335
          [1332712800000, 34.4],
336
          [1332799200000, 34.63],
337
          [1332885600000, 34.46],
338
          [1332972000000, 34.48],
339
          [1333058400000, 34.31],
340
          [1333317600000, 34.7],
341
          [1333404000000, 34.31],
342
          [1333490400000, 33.46],
343
          [1333576800000, 33.59],
344
          [1333922400000, 33.22],
345
          [1334008800000, 32.61],
346
          [1334095200000, 33.01],
347
          [1334181600000, 33.55],
348
          [1334268000000, 33.18],
349
          [1334527200000, 32.84],
350
          [1334613600000, 33.84],
351
          [1334700000000, 33.39],
352
          [1334786400000, 32.91],
353
          [1334872800000, 33.06],
354
          [1335132000000, 32.62],
355
          [1335218400000, 32.4],
356
          [1335304800000, 33.13],
357
          [1335391200000, 33.26],
358
          [1335477600000, 33.58],
359
          [1335736800000, 33.55],
360
          [1335823200000, 33.77],
361
          [1335909600000, 33.76],
362
          [1335996000000, 33.32],
363
          [1336082400000, 32.61],
364
          [1336341600000, 32.52],
365
          [1336428000000, 32.67],
366
          [1336514400000, 32.52],
367
          [1336600800000, 31.92],
368
          [1336687200000, 32.2],
369
          [1336946400000, 32.23],
370
          [1337032800000, 32.33],
371
          [1337119200000, 32.36],
372
          [1337205600000, 32.01],
373
          [1337292000000, 31.31],
374
          [1337551200000, 32.01],
375
          [1337637600000, 32.01],
376
          [1337724000000, 32.18],
377
          [1337810400000, 31.54],
378
          [1337896800000, 31.6],
379
          [1338242400000, 32.05],
380
          [1338328800000, 31.29],
381
          [1338415200000, 31.05],
382
          [1338501600000, 29.82],
383
          [1338760800000, 30.31],
384
          [1338847200000, 30.7],
385
          [1338933600000, 31.69],
386
          [1339020000000, 31.32],
387
          [1339106400000, 31.65],
388
          [1339365600000, 31.13],
389
          [1339452000000, 31.77],
390
          [1339538400000, 31.79],
391
          [1339624800000, 31.67],
392
          [1339711200000, 32.39],
393
          [1339970400000, 32.63],
394
          [1340056800000, 32.89],
395
          [1340143200000, 31.99],
396
          [1340229600000, 31.23],
397
          [1340316000000, 31.57],
398
          [1340575200000, 30.84],
399
          [1340661600000, 31.07],
400
          [1340748000000, 31.41],
401
          [1340834400000, 31.17],
402
          [1340920800000, 32.37],
403
          [1341180000000, 32.19],
404
          [1341266400000, 32.51],
405
          [1341439200000, 32.53],
406
          [1341525600000, 31.37],
407
          [1341784800000, 30.43],
408
          [1341871200000, 30.44],
409
          [1341957600000, 30.2],
410
          [1342044000000, 30.14],
411
          [1342130400000, 30.65],
412
          [1342389600000, 30.4],
413
          [1342476000000, 30.65],
414
          [1342562400000, 31.43],
415
          [1342648800000, 31.89],
416
          [1342735200000, 31.38],
417
          [1342994400000, 30.64],
418
          [1343080800000, 30.02],
419
          [1343167200000, 30.33],
420
          [1343253600000, 30.95],
421
          [1343340000000, 31.89],
422
          [1343599200000, 31.01],
423
          [1343685600000, 30.88],
424
          [1343772000000, 30.69],
425
          [1343858400000, 30.58],
426
          [1343944800000, 32.02],
427
          [1344204000000, 32.14],
428
          [1344290400000, 32.37],
429
          [1344376800000, 32.51],
430
          [1344463200000, 32.65],
431
          [1344549600000, 32.64],
432
          [1344808800000, 32.27],
433
          [1344895200000, 32.1],
434
          [1344981600000, 32.91],
435
          [1345068000000, 33.65],
436
          [1345154400000, 33.8],
437
          [1345413600000, 33.92],
438
          [1345500000000, 33.75],
439
          [1345586400000, 33.84],
440
          [1345672800000, 33.5],
441
          [1345759200000, 32.26],
442
          [1346018400000, 32.32],
443
          [1346104800000, 32.06],
444
          [1346191200000, 31.96],
445
          [1346277600000, 31.46],
446
          [1346364000000, 31.27],
447
          [1346709600000, 31.43],
448
          [1346796000000, 32.26],
449
          [1346882400000, 32.79],
450
          [1346968800000, 32.46],
451
          [1347228000000, 32.13],
452
          [1347314400000, 32.43],
453
          [1347400800000, 32.42],
454
          [1347487200000, 32.81],
455
          [1347573600000, 33.34],
456
          [1347832800000, 33.41],
457
          [1347919200000, 32.57],
458
          [1348005600000, 33.12],
459
          [1348092000000, 34.53],
460
          [1348178400000, 33.83],
461
          [1348437600000, 33.41],
462
          [1348524000000, 32.9],
463
          [1348610400000, 32.53],
464
          [1348696800000, 32.8],
465
          [1348783200000, 32.44],
466
          [1349042400000, 32.62],
467
          [1349128800000, 32.57],
468
          [1349215200000, 32.6],
469
          [1349301600000, 32.68],
470
          [1349388000000, 32.47],
471
          [1349647200000, 32.23],
472
          [1349733600000, 31.68],
473
          [1349820000000, 31.51],
474
          [1349906400000, 31.78],
475
          [1349992800000, 31.94],
476
          [1350252000000, 32.33],
477
          [1350338400000, 33.24],
478
          [1350424800000, 33.44],
479
          [1350511200000, 33.48],
480
          [1350597600000, 33.24],
481
          [1350856800000, 33.49],
482
          [1350943200000, 33.31],
483
          [1351029600000, 33.36],
484
          [1351116000000, 33.4],
485
          [1351202400000, 34.01],
486
          [1351638000000, 34.02],
487
          [1351724400000, 34.36],
488
          [1351810800000, 34.39],
489
          [1352070000000, 34.24],
490
          [1352156400000, 34.39],
491
          [1352242800000, 33.47],
492
          [1352329200000, 32.98],
493
          [1352415600000, 32.9],
494
          [1352674800000, 32.7],
495
          [1352761200000, 32.54],
496
          [1352847600000, 32.23],
497
          [1352934000000, 32.64],
498
          [1353020400000, 32.65],
499
          [1353279600000, 32.92],
500
          [1353366000000, 32.64],
501
          [1353452400000, 32.84],
502
          [1353625200000, 33.4],
503
          [1353884400000, 33.3],
504
          [1353970800000, 33.18],
505
          [1354057200000, 33.88],
506
          [1354143600000, 34.09],
507
          [1354230000000, 34.61],
508
          [1354489200000, 34.7],
509
          [1354575600000, 35.3],
510
          [1354662000000, 35.4],
511
          [1354748400000, 35.14],
512
          [1354834800000, 35.48],
513
          [1355094000000, 35.75],
514
          [1355180400000, 35.54],
515
          [1355266800000, 35.96],
516
          [1355353200000, 35.53],
517
          [1355439600000, 37.56],
518
          [1355698800000, 37.42],
519
          [1355785200000, 37.49],
520
          [1355871600000, 38.09],
521
          [1355958000000, 37.87],
522
          [1356044400000, 37.71],
523
          [1356303600000, 37.53],
524
          [1356476400000, 37.55],
525
          [1356562800000, 37.3],
526
          [1356649200000, 36.9],
527
          [1356908400000, 37.68],
528
          [1357081200000, 38.34],
529
          [1357167600000, 37.75],
530
          [1357254000000, 38.13],
531
          [1357513200000, 37.94],
532
          [1357599600000, 38.14],
533
          [1357686000000, 38.66],
534
          [1357772400000, 38.62],
535
          [1357858800000, 38.09],
536
          [1358118000000, 38.16],
537
          [1358204400000, 38.15],
538
          [1358290800000, 37.88],
539
          [1358377200000, 37.73],
540
          [1358463600000, 37.98],
541
          [1358809200000, 37.95],
542
          [1358895600000, 38.25],
543
          [1358982000000, 38.1],
544
          [1359068400000, 38.32],
545
          [1359327600000, 38.24],
546
          [1359414000000, 38.52],
547
          [1359500400000, 37.94],
548
          [1359586800000, 37.83],
549
          [1359673200000, 38.34],
550
          [1359932400000, 38.1],
551
          [1360018800000, 38.51],
552
          [1360105200000, 38.4],
553
          [1360191600000, 38.07],
554
          [1360278000000, 39.12],
555
          [1360537200000, 38.64],
556
          [1360623600000, 38.89],
557
          [1360710000000, 38.81],
558
          [1360796400000, 38.61],
559
          [1360882800000, 38.63],
560
          [1361228400000, 38.99],
561
          [1361314800000, 38.77],
562
          [1361401200000, 38.34],
563
          [1361487600000, 38.55],
564
          [1361746800000, 38.11],
565
          [1361833200000, 38.59],
566
          [1361919600000, 39.6],
567
        ],
568
      },
569
    ],
570
    chart: {
571
      id: "area-datetime",
572
      fontFamily: "inherit",
573
      type: "area",
574
      height: 350,
575
      zoom: {
576
        autoScaleYaxis: true,
577
      },
578
      toolbar: {
579
        show: false,
580
      },
581
    },
582
    grid: {
583
      show: false,
584
    },
585
    colors: ["#615dff"],
586
    annotations: {
587
      yaxis: [
588
        {
589
          y: 30,
590
          borderColor: "#999",
591
          label: {
592
            show: true,
593
            text: "Support",
594
            style: {
595
              color: "#fff",
596
              background: "#39b69a",
597
            },
598
          },
599
        },
600
      ],
601
      xaxis: [
602
        {
603
          x: new Date("14 Nov 2012").getTime(),
604
          borderColor: "#999",
605
          yAxisIndex: 0,
606
          label: {
607
            show: true,
608
            text: "Rally",
609
            style: {
610
              color: "#fff",
611
              background: "#6610f2",
612
            },
613
          },
614
        },
615
      ],
616
    },
617
    dataLabels: {
618
      enabled: false,
619
    },
620
    markers: {
621
      size: 0,
622
      style: "hollow",
623
    },
624
    xaxis: {
625
      type: "datetime",
626
      min: new Date("01 Mar 2012").getTime(),
627
      tickAmount: 6,
628
      labels: {
629
        style: {
630
          colors:"#a1aab2",
631
        },
632
      },
633
    },
634
    yaxis: {
635
      labels: {
636
        style: {
637
          colors:"#a1aab2",
638
        },
639
      },
640
    },
641
    tooltip: {
642
      x: {
643
        format: "dd MMM yyyy",
644
      },
645
      theme: "dark",
646
    },
647
    fill: {
648
      type: "gradient",
649
      gradient: {
650
        shadeIntensity: 1,
651
        opacityFrom: 0.7,
652
        opacityTo: 0.9,
653
        stops: [0, 100],
654
      },
655
    },
656
  };
657

658
  var chart_area_datetime = new ApexCharts(
659
    document.querySelector("#chart-area-datetime"),
660
    options
661
  );
662
  chart_area_datetime.render();
663

664
  var resetCssClasses = function (activeEl) {
665
    var els = document.querySelectorAll("button");
666
    Array.prototype.forEach.call(els, function (el) {
667
      el.classList.remove("active");
668
    });
669

670
    activeEl.target.classList.add("active");
671
  };
672
});
673