https://forsell.co.kr/static/vendors/apex_chart/apexchart_lists.js

1$(document).ready(function(){
2     
3    var options = {
4        series: [{
5        name: 'Likes',
6        data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5]
7      }],
8        chart: {
9        height: 350,
10        type: 'line',
11      },
12      stroke: {
13        width: 7,
14        curve: 'smooth'
15      },
16      xaxis: {
17        type: 'datetime',
18        categories: ['1/11/2000', '2/11/2000', '3/11/2000', '4/11/2000', '5/11/2000', '6/11/2000', '7/11/2000', '8/11/2000', '9/11/2000', '10/11/2000', '11/11/2000', '12/11/2000', '1/11/2001', '2/11/2001', '3/11/2001','4/11/2001' ,'5/11/2001' ,'6/11/2001'],
19      },
20      title: {
21        text: 'Social Media',
22        align: 'left',
23        style: {
24          fontSize: "16px",
25          color: '#666'
26        }
27      },
28      fill: {
29        type: 'gradient',
30        gradient: {
31          shade: 'dark',
32          gradientToColors: [ '#FDD835'],
33          shadeIntensity: 1,
34          type: 'horizontal',
35          opacityFrom: 1,
36          opacityTo: 1,
37          stops: [0, 100, 100, 100]
38        },
39      },
40      markers: {
41        size: 4,
42        colors: ["#FFA41B"],
43        strokeColors: "#fff",
44        strokeWidth: 2,
45        hover: {
46          size: 7,
47        }
48      },
49      yaxis: {
50        min: -10,
51        max: 40,
52        title: {
53          text: 'Engagement',
54        },
55      }
56      };
57
58      var chart = new ApexCharts(document.querySelector("#apex_1"), options);
59      chart.render();
60});
61$(document).ready(function(){
62      
63  var options = {
64    series: [{
65    name: 'Net Profit',
66    data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
67  }, {
68    name: 'Revenue',
69    data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
70  }, {
71    name: 'Free Cash Flow',
72    data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
73  }],
74    chart: {
75    type: 'bar',
76    height: 350
77  },
78  plotOptions: {
79    bar: {
80      horizontal: false,
81      columnWidth: '55%',
82      endingShape: 'rounded'
83    },
84  },
85  dataLabels: {
86    enabled: false
87  },
88  stroke: {
89    show: true,
90    width: 2,
91    colors: ['transparent']
92  },
93  xaxis: {
94    categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
95  },
96  yaxis: {
97    title: {
98      text: '$ (thousands)'
99    }
100  },
101  fill: {
102    opacity: 1
103  },
104  tooltip: {
105    y: {
106      formatter: function (val) {
107        return "$ " + val + " thousands"
108      }
109    }
110  }
111  };
112
113  var chart = new ApexCharts(document.querySelector("#apex_2"), options);
114  chart.render();
115});
116
117// apex_3 
118$(document).ready(function(){
119var options = {
120  series: [{
121  name: 'series1',
122  data: [31, 40, 28, 51, 42, 109, 100]
123}, {
124  name: 'series2',
125  data: [11, 32, 45, 32, 34, 52, 41]
126}],
127  chart: {
128  height: 350,
129  type: 'area'
130},
131dataLabels: {
132  enabled: false
133},
134stroke: {
135  curve: 'smooth'
136},
137xaxis: {
138  type: 'datetime',
139  categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
140},
141tooltip: {
142  x: {
143    format: 'dd/MM/yy HH:mm'
144  },
145},
146};
147
148var chart = new ApexCharts(document.querySelector("#apex_3"), options);
149chart.render();
150});
151
152// apex_4 
153$(document).ready(function(){
154
155var options = {
156  series: [{
157  name: 'Network',
158  data: [{
159      x: 'Dec 23 2017',
160      y: null
161    },
162    {
163      x: 'Dec 24 2017',
164      y: 44
165    },
166    {
167      x: 'Dec 25 2017',
168      y: 31
169    },
170    {
171      x: 'Dec 26 2017',
172      y: 38
173    },
174    {
175      x: 'Dec 27 2017',
176      y: null
177    },
178    {
179      x: 'Dec 28 2017',
180      y: 32
181    },
182    {
183      x: 'Dec 29 2017',
184      y: 55
185    },
186    {
187      x: 'Dec 30 2017',
188      y: 51
189    },
190    {
191      x: 'Dec 31 2017',
192      y: 67
193    },
194    {
195      x: 'Jan 01 2018',
196      y: 22
197    },
198    {
199      x: 'Jan 02 2018',
200      y: 34
201    },
202    {
203      x: 'Jan 03 2018',
204      y: null
205    },
206    {
207      x: 'Jan 04 2018',
208      y: null
209    },
210    {
211      x: 'Jan 05 2018',
212      y: 11
213    },
214    {
215      x: 'Jan 06 2018',
216      y: 4
217    },
218    {
219      x: 'Jan 07 2018',
220      y: 15,
221    },
222    {
223      x: 'Jan 08 2018',
224      y: null
225    },
226    {
227      x: 'Jan 09 2018',
228      y: 9
229    },
230    {
231      x: 'Jan 10 2018',
232      y: 34
233    },
234    {
235      x: 'Jan 11 2018',
236      y: null
237    },
238    {
239      x: 'Jan 12 2018',
240      y: null
241    },
242    {
243      x: 'Jan 13 2018',
244      y: 13
245    },
246    {
247      x: 'Jan 14 2018',
248      y: null
249    }
250  ],
251}],
252  chart: {
253  type: 'area',
254  height: 350,
255  animations: {
256    enabled: false
257  },
258  zoom: {
259    enabled: false
260  },
261},
262dataLabels: {
263  enabled: false
264},
265stroke: {
266  curve: 'straight'
267},
268fill: {
269  opacity: 0.8,

270  type: 'pattern',
271  pattern: {
272    style: ['verticalLines', 'horizontalLines'],
273    width: 5,
274    height: 6
275  },
276},
277markers: {
278  size: 5,
279  hover: {
280    size: 9
281  }
282},
283title: {
284  text: 'Network Monitoring',
285},
286tooltip: {
287  intersect: true,
288  shared: false
289},
290theme: {
291  palette: 'palette1'
292},
293xaxis: {
294  type: 'datetime',
295},
296yaxis: {
297  title: {
298    text: 'Bytes Received'
299  }
300}
301};
302
303var chart = new ApexCharts(document.querySelector("#apex_4"), options);
304chart.render();
305});
306
307
308$(document).ready(function(){
309  var options = {
310    series: [{
311    name: 'Series 1',
312    data: [80, 50, 30, 40, 100, 20],
313  }, {
314    name: 'Series 2',
315    data: [20, 30, 40, 80, 20, 80],
316  }, {
317    name: 'Series 3',
318    data: [44, 76, 78, 13, 43, 10],
319  }],
320    chart: {
321    height: 350,
322    type: 'radar',
323    dropShadow: {
324      enabled: true,
325      blur: 1,
326      left: 1,
327      top: 1
328    }
329  },
330  title: {
331    text: 'Radar Chart - Multi Series'
332  },
333  stroke: {
334    width: 2
335  },
336  fill: {
337    opacity: 0.1
338  },
339  markers: {
340    size: 0
341  },
342  xaxis: {
343    categories: ['2011', '2012', '2013', '2014', '2015', '2016']
344  }
345  };
346
347  var chart = new ApexCharts(document.querySelector("#chart344"), options);
348  chart.render();
349});
350
351$(document).ready(function(){
352  var options = {
353    series: [{
354    data: [44, 55, 41, 64, 22, 43, 21]
355  }, {
356    data: [53, 32, 33, 52, 13, 44, 32]
357  }],
358    chart: {
359    type: 'bar',
360    height: 350
361  },
362  plotOptions: {
363    bar: {
364      horizontal: true,
365      dataLabels: {
366        position: 'top',
367      },
368    }
369  },
370  dataLabels: {
371    enabled: true,
372    offsetX: -6,
373    style: {
374      fontSize: '12px',
375      colors: ['#fff']
376    }
377  },
378  stroke: {
379    show: true,
380    width: 1,
381    colors: ['#fff']
382  },
383  xaxis: {
384    categories: [2001, 2002, 2003, 2004, 2005, 2006, 2007],
385  },
386  };
387
388  var chart = new ApexCharts(document.querySelector("#chart4556"), options);
389  chart.render();
390
391
392
393});
394$(document).ready(function(){
395var options = {
396  series: [{
397  data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
398}],
399  chart: {
400  type: 'line',
401  height: 350
402},
403stroke: {
404  curve: 'stepline',
405},
406dataLabels: {
407  enabled: false
408},
409title: {
410  text: 'Stepline Chart',
411  align: 'left'
412},
413markers: {
414  hover: {
415    sizeOffset: 4
416  }
417}
418};
419
420var chart = new ApexCharts(document.querySelector("#apex_9"), options);
421chart.render();
422});
423
424      
425var options = {
426  series: [{
427  name: 'TEAM A',
428  type: 'column',
429  data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
430}, {
431  name: 'TEAM B',
432  type: 'area',
433  data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
434}, {
435  name: 'TEAM C',
436  type: 'line',
437  data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
438}],
439  chart: {
440  height: 350,
441  type: 'line',
442  stacked: false,
443},
444stroke: {
445  width: [0, 2, 5],
446  curve: 'smooth'
447},
448plotOptions: {
449  bar: {
450    columnWidth: '50%'
451  }
452},
453
454fill: {
455  opacity: [0.85, 0.25, 1],
456  gradient: {
457    inverseColors: false,
458    shade: 'light',
459    type: "vertical",
460    opacityFrom: 0.85,
461    opacityTo: 0.55,
462    stops: [0, 100, 100, 100]
463  }
464},
465labels: ['01/01/2003', '02/01/2003', '03/01/2003', '04/01/2003', '05/01/2003', '06/01/2003', '07/01/2003',
466  '08/01/2003', '09/01/2003', '10/01/2003', '11/01/2003'
467],
468markers: {
469  size: 0
470},
471xaxis: {
472  type: 'datetime'
473},
474yaxis: {
475  title: {
476    text: 'Points',
477  },
478  min: 0
479},
480tooltip: {
481  shared: true,
482  intersect: false,
483  y: {
484    formatter: function (y) {
485      if (typeof y !== "undefined") {
486        return y.toFixed(0) + " points";
487      }
488      return y;
489
490    }
491  }
492}
493};
494
495var chart = new ApexCharts(document.querySelector("#apex_10"), options);
496chart.render();