lavkach3

1
document.addEventListener("DOMContentLoaded", function () {
2
  // Basic Line Chart -------> LINE CHART
3
  var options_line = {
4
    series: [
5
      {
6
        name: "Desktops",
7
        data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
8
      },
9
    ],
10
    chart: {
11
      height: 350,
12
      type: "line",
13
      fontFamily: "inherit",
14
      zoom: {
15
        enabled: false,
16
      },
17
      offsetX: -10,
18
      toolbar: {
19
        show: false,
20
      },
21
    },
22
    dataLabels: {
23
      enabled: false,
24
    },
25
    colors: ["var(--bs-primary)"],
26
    stroke: {
27
      curve: "straight",
28
    },
29
    grid: {
30
      row: {
31
        colors: ["transparent"], // takes an array which will be repeated on columns
32
        opacity: 0.5,
33
      },
34
      padding: {
35
        top: 0,
36
        right: 0,
37
        bottom: 0,
38
        left: 0,
39
      },
40
      borderColor: "transparent",
41
    },
42
    xaxis: {
43
      categories: [
44
        "Jan",
45
        "Feb",
46
        "Mar",
47
        "Apr",
48
        "May",
49
        "Jun",
50
        "Jul",
51
        "Aug",
52
        "Sep",
53
      ],
54
      labels: {
55
        style: {
56
          colors: "#a1aab2",
57
        },
58
      },
59
    },
60
    yaxis: {
61
      labels: {
62
        style: {
63
          colors: "#a1aab2",
64
        },
65
      },
66
    },
67
    tooltip: {
68
      theme: "dark",
69
    },
70
  };
71

72
  var chart_line_basic = new ApexCharts(
73
    document.querySelector("#chart-line-basic"),
74
    options_line
75
  );
76
  chart_line_basic.render();
77

78
  // Data Label Line Chart   -------> LINE CHART
79
  var options = {
80
    series: [
81
      {
82
        name: "High - 2013",
83
        data: [28, 29, 33, 36, 32, 32, 33],
84
      },
85
      {
86
        name: "Low - 2013",
87
        data: [12, 11, 14, 18, 17, 13, 13],
88
      },
89
    ],
90
    chart: {
91
      fontFamily: "inherit",
92
      height: 350,
93
      type: "line",
94
      dropShadow: {
95
        enabled: true,
96
        color: "#000",
97
        top: 18,
98
        left: 7,
99
        blur: 10,
100
        opacity: 0.2,
101
      },
102
      toolbar: {
103
        show: false,
104
      },
105
    },
106
    colors: ["var(--bs-primary)", "var(--bs-secondary)"],
107
    dataLabels: {
108
      enabled: true,
109
    },
110
    stroke: {
111
      curve: "smooth",
112
    },
113
    grid: {
114
      borderColor: "transparent",
115
      row: {
116
        colors: ["transparent"], // takes an array which will be repeated on columns
117
        opacity: 0.5,
118
      },
119
    },
120
    markers: {
121
      size: 1,
122
    },
123
    xaxis: {
124
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
125
      labels: {
126
        style: {
127
          colors:"#a1aab2",
128
        },
129
      },
130
    },
131
    yaxis: {
132
      min: 5,
133
      max: 40,
134
      labels: {
135
        style: {
136
          colors:"#a1aab2",
137
        },
138
      },
139
    },
140
    tooltip: {
141
      theme: "dark",
142
    },
143
    legend: {
144
      position: "top",
145
      horizontalAlign: "right",
146
      floating: true,
147
      offsetY: -25,
148
      offsetX: -5,
149
    },
150
  };
151

152
  var chart_line_data = new ApexCharts(
153
    document.querySelector("#chart-line-with-data-label"),
154
    options
155
  );
156
  chart_line_data.render();
157

158
  // Zoomable Line Chart -------> LINE CHART
159
  var options_zoomable = {
160
    series: [
161
      {
162
        name: "XYZ MOTORS",
163
        data: [
164
          {
165
            x: "02-10-2017 GMT",
166
            y: 34,
167
          },
168
          {
169
            x: "02-11-2017 GMT",
170
            y: 43,
171
          },
172
          {
173
            x: "02-12-2017 GMT",
174
            y: 31,
175
          },
176
          {
177
            x: "02-13-2017 GMT",
178
            y: 43,
179
          },
180
          {
181
            x: "02-14-2017 GMT",
182
            y: 33,
183
          },
184
          {
185
            x: "02-15-2017 GMT",
186
            y: 52,
187
          },
188
        ],
189
      },
190
    ],
191
    chart: {
192
      fontFamily: "inherit",
193
      type: "area",
194
      stacked: false,
195
      height: 350,
196
      zoom: {
197
        type: "x",
198
        enabled: true,
199
        autoScaleYaxis: true,
200
      },
201
      toolbar: {
202
        autoSelected: "zoom",
203
        show: false,
204
      },
205
    },
206
    dataLabels: {
207
      enabled: false,
208
    },
209
    grid: {
210
      borderColor: "transparent",
211
      padding: {
212
        top: 0,
213
        right: 0,
214
        bottom: 0,
215
        left: 0,
216
      },
217
    },
218
    colors: ["var(--bs-primary)"],
219
    markers: {
220
      size: 0,
221
    },
222
    fill: {
223
      type: "gradient",
224
      gradient: {
225
        shadeIntensity: 1,
226
        inverseColors: false,
227
        opacityFrom: 0.12,
228
        opacityTo: 0,
229
        stops: [0, 90, 100],
230
      },
231
    },
232
    yaxis: {
233
      labels: {
234
        formatter: function (val) {
235
          return (val / 1000000).toFixed(0);
236
        },
237
        style: {
238
          colors:"#a1aab2",
239
        },
240
      },
241
    },
242
    xaxis: {
243
      type: "datetime",
244
      labels: {
245
        style: {
246
          colors:"#a1aab2",
247
        },
248
      },
249
    },
250
    tooltip: {
251
      shared: false,
252
      y: {
253
        formatter: function (val) {
254
          return (val / 1000000).toFixed(0);
255
        },
256
      },
257
      theme: "dark",
258
    },
259
  };
260

261
  var chart_line_zoomable = new ApexCharts(
262
    document.querySelector("#chart-line-zoomable"),
263
    options_zoomable
264
  );
265
  chart_line_zoomable.render();
266

267
  // Gradient Line Chart -------> LINE CHART
268
  var options_gradient = {
269
    series: [
270
      {
271
        name: "Likes",
272
        data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5],
273
      },
274
    ],
275
    chart: {
276
      fontFamily: "inherit",
277
      height: 350,
278
      type: "line",
279
      toolbar: {
280
        show: false,
281
      },
282
    },
283
    stroke: {
284
      width: 7,
285
      curve: "smooth",
286
    },
287
    xaxis: {
288
      type: "datetime",
289
      categories: [
290
        "1/11/2000",
291
        "2/11/2000",
292
        "3/11/2000",
293
        "4/11/2000",
294
        "5/11/2000",
295
        "6/11/2000",
296
        "7/11/2000",
297
        "8/11/2000",
298
        "9/11/2000",
299
        "10/11/2000",
300
        "11/11/2000",
301
        "12/11/2000",
302
        "1/11/2001",
303
        "2/11/2001",
304
        "3/11/2001",
305
        "4/11/2001",
306
        "5/11/2001",
307
        "6/11/2001",
308
      ],
309
      labels: {
310
        style: {
311
          colors:"#a1aab2",
312
        },
313
      },
314
    },
315
    grid: {
316
      borderColor: "transparent",
317
      padding: {
318
        top: 0,
319
        right: 0,
320
        bottom: 0,
321
        left: 0,
322
      },
323
    },
324
    colors: ["#39b69a"],
325
    fill: {
326
      type: "gradient",
327
      gradient: {
328
        shade: "dark",
329
        gradientToColors: ["var(--bs-primary)"],
330
        shadeIntensity: 1,
331
        type: "horizontal",
332
        opacityFrom: 1,
333
        opacityTo: 1,
334
        stops: [0, 100, 100, 100],
335
      },
336
    },
337
    markers: {
338
      size: 4,
339
      colors: ["var(--bs-primary)"],
340
      strokeColors: "#fff",
341
      strokeWidth: 2,
342
      hover: {
343
        size: 7,
344
      },
345
    },
346
    yaxis: {
347
      min: -10,
348
      max: 40,
349
      labels: {
350
        style: {
351
          colors:"#a1aab2",
352
        },
353
      },
354
    },
355
    tooltip: {
356
      theme: "dark",
357
    },
358
  };
359

360
  var chart_line_gradient = new ApexCharts(
361
    document.querySelector("#chart-line-gradient"),
362
    options_gradient
363
  );
364
  chart_line_gradient.render();
365

366
  var lastDate = 0;
367
  var data = [];
368
  var TICKINTERVAL = 86400000;
369
  let XAXISRANGE = 777600000;
370

371
  function getDayWiseTimeSeries(baseval, count, yrange) {
372
    var i = 0;
373
    while (i < count) {
374
      var x = baseval;
375
      var y =
376
        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
377

378
      data.push({
379
        x,
380
        y,
381
      });
382
      lastDate = baseval;
383
      baseval += TICKINTERVAL;
384
      i++;
385
    }
386
  }
387

388
  getDayWiseTimeSeries(new Date("11 Feb 2017 GMT").getTime(), 10, {
389
    min: 10,
390
    max: 90,
391
  });
392

393
  function getNewSeries(baseval, yrange) {
394
    var newDate = baseval + TICKINTERVAL;
395
    lastDate = newDate;
396

397
    for (var i = 0; i < data.length - 10; i++) {
398
      // IMPORTANT
399
      // we reset the x and y of the data which is out of drawing area
400
      // to prevent memory leaks
401
      data[i].x = newDate - XAXISRANGE - TICKINTERVAL;
402
      data[i].y = 0;
403
    }
404

405
    data.push({
406
      x: newDate,
407
      y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min,
408
    });
409
  }
410

411
  function resetData() {
412
    // Alternatively, you can also reset the data at certain intervals to prevent creating a huge series
413
    data = data.slice(data.length - 10, data.length);
414
  }
415

416
  // Realtime Line Chart -------> LINE CHART
417
  var options_realtime = {
418
    series: [
419
      {
420
        data: data.slice(),
421
      },
422
    ],
423
    chart: {
424
      fontFamily: "inherit",
425
      id: "realtime",
426
      height: 350,
427
      type: "line",
428
      animations: {
429
        enabled: true,
430
        easing: "linear",
431
        dynamicAnimation: {
432
          speed: 1000,
433
        },
434
      },
435
      toolbar: {
436
        show: false,
437
      },
438

439
      zoom: {
440
        enabled: false,
441
      },
442
    },
443
    grid: {
444
      borderColor: "transparent",
445
      padding: {
446
        top: 0,
447
        right: 0,
448
        bottom: 0,
449
        left: 0,
450
      },
451
    },
452
    colors: ["var(--bs-primary)"],
453
    dataLabels: {
454
      enabled: false,
455
    },
456
    stroke: {
457
      curve: "smooth",
458
    },
459
    markers: {
460
      size: 0,
461
    },
462
    xaxis: {
463
      type: "datetime",
464
      range: XAXISRANGE,
465
      labels: {
466
        style: {
467
          colors:"#a1aab2",
468
        },
469
      },
470
    },
471
    yaxis: {
472
      max: 100,
473
      labels: {
474
        style: {
475
          colors:"#a1aab2",
476
        },
477
      },
478
    },
479
    tooltip: {
480
      theme: "dark",
481
    },
482
    legend: {
483
      show: false,
484
    },
485
  };
486

487
  var chart_line_realtime = new ApexCharts(
488
    document.querySelector("#chart-line-real-time"),
489
    options_realtime
490
  );
491
  chart_line_realtime.render();
492

493
  window.setInterval(function () {
494
    getNewSeries(lastDate, {
495
      min: 10,
496
      max: 90,
497
    });
498

499
    chart_line_realtime.updateSeries([
500
      {
501
        data: data,
502
      },
503
    ]);
504
  }, 1000);
505
});
506