Home Explore Help
Register Sign In
choozmo
/
ark_backstage
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
ark_backstage
/
charts-apexcharts.html

charts-apexcharts.html 46 KB
Permalink History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. 

  4. <head>
    5. 

  5.   <meta charset="utf-8">
    6. 

  6.   <meta content="width=device-width, initial-scale=1.0" name="viewport">
    7. 

  7. 

  8.   <title>Charts / ApexCharts - NiceAdmin Bootstrap Template</title>
    9. 

  9.   <meta content="" name="description">
    10. 

  10.   <meta content="" name="keywords">
    11. 

  11. 

  12.   <!-- Favicons -->
    13. 

  13.   <link href="assets/img/favicon.png" rel="icon">
    14. 

  14.   <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
    15. 

  15. 

  16.   <!-- Google Fonts -->
    17. 

  17.   <link href="https://fonts.gstatic.com" rel="preconnect">
    18. 

  18.   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
    19. 

  19. 

  20.   <!-- Vendor CSS Files -->
    21. 

  21.   <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    22. 

  22.   <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    23. 

  23.   <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
    24. 

  24.   <link href="assets/vendor/quill/quill.snow.css" rel="stylesheet">
    25. 

  25.   <link href="assets/vendor/quill/quill.bubble.css" rel="stylesheet">
    26. 

  26.   <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
    27. 

  27.   <link href="assets/vendor/simple-datatables/style.css" rel="stylesheet">
    28. 

  28. 

  29.   <!-- Template Main CSS File -->
    30. 

  30.   <link href="assets/css/style.css" rel="stylesheet">
    31. 

  31. 

  32.   <!-- =======================================================
    33. 

  33.   * Template Name: NiceAdmin - v2.2.0
    34. 

  34.   * Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
    35. 

  35.   * Author: BootstrapMade.com
    36. 

  36.   * License: https://bootstrapmade.com/license/
    37. 

  37.   ======================================================== -->
    38. 

  38. </head>
    39. 

  39. 

  40. <body>
    41. 

  41. 

  42.   <!-- ======= Header ======= -->
    43. 

  43.   <header id="header" class="header fixed-top d-flex align-items-center">
    44. 

  44. 

  45.     <div class="d-flex align-items-center justify-content-between">
    46. 

  46.       <a href="index.html" class="logo d-flex align-items-center">
    47. 

  47.         <img src="assets/img/logo.png" alt="">
    48. 

  48.         <span class="d-none d-lg-block">NiceAdmin</span>
    49. 

  49.       </a>
    50. 

  50.       <i class="bi bi-list toggle-sidebar-btn"></i>
    51. 

  51.     </div><!-- End Logo -->
    52. 

  52. 

  53.     <div class="search-bar">
    54. 

  54.       <form class="search-form d-flex align-items-center" method="POST" action="#">
    55. 

  55.         <input type="text" name="query" placeholder="Search" title="Enter search keyword">
    56. 

  56.         <button type="submit" title="Search"><i class="bi bi-search"></i></button>
    57. 

  57.       </form>
    58. 

  58.     </div><!-- End Search Bar -->
    59. 

  59. 

  60.     <nav class="header-nav ms-auto">
    61. 

  61.       <ul class="d-flex align-items-center">
    62. 

  62. 

  63.         <li class="nav-item d-block d-lg-none">
    64. 

  64.           <a class="nav-link nav-icon search-bar-toggle " href="#">
    65. 

  65.             <i class="bi bi-search"></i>
    66. 

  66.           </a>
    67. 

  67.         </li><!-- End Search Icon-->
    68. 

  68. 

  69.         <li class="nav-item dropdown">
    70. 

  70. 

  71.           <a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">
    72. 

  72.             <i class="bi bi-bell"></i>
    73. 

  73.             <span class="badge bg-primary badge-number">4</span>
    74. 

  74.           </a><!-- End Notification Icon -->
    75. 

  75. 

  76.           <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow notifications">
    77. 

  77.             <li class="dropdown-header">
    78. 

  78.               You have 4 new notifications
    79. 

  79.               <a href="#"><span class="badge rounded-pill bg-primary p-2 ms-2">View all</span></a>
    80. 

  80.             </li>
    81. 

  81.             <li>
    82. 

  82.               <hr class="dropdown-divider">
    83. 

  83.             </li>
    84. 

  84. 

  85.             <li class="notification-item">
    86. 

  86.               <i class="bi bi-exclamation-circle text-warning"></i>
    87. 

  87.               <div>
    88. 

  88.                 <h4>Lorem Ipsum</h4>
    89. 

  89.                 <p>Quae dolorem earum veritatis oditseno</p>
    90. 

  90.                 <p>30 min. ago</p>
    91. 

  91.               </div>
    92. 

  92.             </li>
    93. 

  93. 

  94.             <li>
    95. 

  95.               <hr class="dropdown-divider">
    96. 

  96.             </li>
    97. 

  97. 

  98.             <li class="notification-item">
    99. 

  99.               <i class="bi bi-x-circle text-danger"></i>
    100. 

  100.               <div>
    101. 

  101.                 <h4>Atque rerum nesciunt</h4>
    102. 

  102.                 <p>Quae dolorem earum veritatis oditseno</p>
    103. 

  103.                 <p>1 hr. ago</p>
    104. 

  104.               </div>
    105. 

  105.             </li>
    106. 

  106. 

  107.             <li>
    108. 

  108.               <hr class="dropdown-divider">
    109. 

  109.             </li>
    110. 

  110. 

  111.             <li class="notification-item">
    112. 

  112.               <i class="bi bi-check-circle text-success"></i>
    113. 

  113.               <div>
    114. 

  114.                 <h4>Sit rerum fuga</h4>
    115. 

  115.                 <p>Quae dolorem earum veritatis oditseno</p>
    116. 

  116.                 <p>2 hrs. ago</p>
    117. 

  117.               </div>
    118. 

  118.             </li>
    119. 

  119. 

  120.             <li>
    121. 

  121.               <hr class="dropdown-divider">
    122. 

  122.             </li>
    123. 

  123. 

  124.             <li class="notification-item">
    125. 

  125.               <i class="bi bi-info-circle text-primary"></i>
    126. 

  126.               <div>
    127. 

  127.                 <h4>Dicta reprehenderit</h4>
    128. 

  128.                 <p>Quae dolorem earum veritatis oditseno</p>
    129. 

  129.                 <p>4 hrs. ago</p>
    130. 

  130.               </div>
    131. 

  131.             </li>
    132. 

  132. 

  133.             <li>
    134. 

  134.               <hr class="dropdown-divider">
    135. 

  135.             </li>
    136. 

  136.             <li class="dropdown-footer">
    137. 

  137.               <a href="#">Show all notifications</a>
    138. 

  138.             </li>
    139. 

  139. 

  140.           </ul><!-- End Notification Dropdown Items -->
    141. 

  141. 

  142.         </li><!-- End Notification Nav -->
    143. 

  143. 

  144.         <li class="nav-item dropdown">
    145. 

  145. 

  146.           <a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">
    147. 

  147.             <i class="bi bi-chat-left-text"></i>
    148. 

  148.             <span class="badge bg-success badge-number">3</span>
    149. 

  149.           </a><!-- End Messages Icon -->
    150. 

  150. 

  151.           <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow messages">
    152. 

  152.             <li class="dropdown-header">
    153. 

  153.               You have 3 new messages
    154. 

  154.               <a href="#"><span class="badge rounded-pill bg-primary p-2 ms-2">View all</span></a>
    155. 

  155.             </li>
    156. 

  156.             <li>
    157. 

  157.               <hr class="dropdown-divider">
    158. 

  158.             </li>
    159. 

  159. 

  160.             <li class="message-item">
    161. 

  161.               <a href="#">
    162. 

  162.                 <img src="assets/img/messages-1.jpg" alt="" class="rounded-circle">
    163. 

  163.                 <div>
    164. 

  164.                   <h4>Maria Hudson</h4>
    165. 

  165.                   <p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
    166. 

  166.                   <p>4 hrs. ago</p>
    167. 

  167.                 </div>
    168. 

  168.               </a>
    169. 

  169.             </li>
    170. 

  170.             <li>
    171. 

  171.               <hr class="dropdown-divider">
    172. 

  172.             </li>
    173. 

  173. 

  174.             <li class="message-item">
    175. 

  175.               <a href="#">
    176. 

  176.                 <img src="assets/img/messages-2.jpg" alt="" class="rounded-circle">
    177. 

  177.                 <div>
    178. 

  178.                   <h4>Anna Nelson</h4>
    179. 

  179.                   <p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
    180. 

  180.                   <p>6 hrs. ago</p>
    181. 

  181.                 </div>
    182. 

  182.               </a>
    183. 

  183.             </li>
    184. 

  184.             <li>
    185. 

  185.               <hr class="dropdown-divider">
    186. 

  186.             </li>
    187. 

  187. 

  188.             <li class="message-item">
    189. 

  189.               <a href="#">
    190. 

  190.                 <img src="assets/img/messages-3.jpg" alt="" class="rounded-circle">
    191. 

  191.                 <div>
    192. 

  192.                   <h4>David Muldon</h4>
    193. 

  193.                   <p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
    194. 

  194.                   <p>8 hrs. ago</p>
    195. 

  195.                 </div>
    196. 

  196.               </a>
    197. 

  197.             </li>
    198. 

  198.             <li>
    199. 

  199.               <hr class="dropdown-divider">
    200. 

  200.             </li>
    201. 

  201. 

  202.             <li class="dropdown-footer">
    203. 

  203.               <a href="#">Show all messages</a>
    204. 

  204.             </li>
    205. 

  205. 

  206.           </ul><!-- End Messages Dropdown Items -->
    207. 

  207. 

  208.         </li><!-- End Messages Nav -->
    209. 

  209. 

  210.         <li class="nav-item dropdown pe-3">
    211. 

  211. 

  212.           <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
    213. 

  213.             <img src="assets/img/profile-img.jpg" alt="Profile" class="rounded-circle">
    214. 

  214.             <span class="d-none d-md-block dropdown-toggle ps-2">K. Anderson</span>
    215. 

  215.           </a><!-- End Profile Iamge Icon -->
    216. 

  216. 

  217.           <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
    218. 

  218.             <li class="dropdown-header">
    219. 

  219.               <h6>Kevin Anderson</h6>
    220. 

  220.               <span>Web Designer</span>
    221. 

  221.             </li>
    222. 

  222.             <li>
    223. 

  223.               <hr class="dropdown-divider">
    224. 

  224.             </li>
    225. 

  225. 

  226.             <li>
    227. 

  227.               <a class="dropdown-item d-flex align-items-center" href="users-profile.html">
    228. 

  228.                 <i class="bi bi-person"></i>
    229. 

  229.                 <span>My Profile</span>
    230. 

  230.               </a>
    231. 

  231.             </li>
    232. 

  232.             <li>
    233. 

  233.               <hr class="dropdown-divider">
    234. 

  234.             </li>
    235. 

  235. 

  236.             <li>
    237. 

  237.               <a class="dropdown-item d-flex align-items-center" href="users-profile.html">
    238. 

  238.                 <i class="bi bi-gear"></i>
    239. 

  239.                 <span>Account Settings</span>
    240. 

  240.               </a>
    241. 

  241.             </li>
    242. 

  242.             <li>
    243. 

  243.               <hr class="dropdown-divider">
    244. 

  244.             </li>
    245. 

  245. 

  246.             <li>
    247. 

  247.               <a class="dropdown-item d-flex align-items-center" href="pages-faq.html">
    248. 

  248.                 <i class="bi bi-question-circle"></i>
    249. 

  249.                 <span>Need Help?</span>
    250. 

  250.               </a>
    251. 

  251.             </li>
    252. 

  252.             <li>
    253. 

  253.               <hr class="dropdown-divider">
    254. 

  254.             </li>
    255. 

  255. 

  256.             <li>
    257. 

  257.               <a class="dropdown-item d-flex align-items-center" href="#">
    258. 

  258.                 <i class="bi bi-box-arrow-right"></i>
    259. 

  259.                 <span>Sign Out</span>
    260. 

  260.               </a>
    261. 

  261.             </li>
    262. 

  262. 

  263.           </ul><!-- End Profile Dropdown Items -->
    264. 

  264.         </li><!-- End Profile Nav -->
    265. 

  265. 

  266.       </ul>
    267. 

  267.     </nav><!-- End Icons Navigation -->
    268. 

  268. 

  269.   </header><!-- End Header -->
    270. 

  270. 

  271.   <!-- ======= Sidebar ======= -->
    272. 

  272.   <aside id="sidebar" class="sidebar">
    273. 

  273. 

  274.     <ul class="sidebar-nav" id="sidebar-nav">
    275. 

  275. 

  276.       <li class="nav-item">
    277. 

  277.         <a class="nav-link collapsed" href="index.html">
    278. 

  278.           <i class="bi bi-grid"></i>
    279. 

  279.           <span>Dashboard</span>
    280. 

  280.         </a>
    281. 

  281.       </li><!-- End Dashboard Nav -->
    282. 

  282. 

  283.       <li class="nav-item">
    284. 

  284.         <a class="nav-link collapsed" data-bs-target="#components-nav" data-bs-toggle="collapse" href="#">
    285. 

  285.           <i class="bi bi-menu-button-wide"></i><span>Components</span><i class="bi bi-chevron-down ms-auto"></i>
    286. 

  286.         </a>
    287. 

  287.         <ul id="components-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
    288. 

  288.           <li>
    289. 

  289.             <a href="components-alerts.html">
    290. 

  290.               <i class="bi bi-circle"></i><span>Alerts</span>
    291. 

  291.             </a>
    292. 

  292.           </li>
    293. 

  293.           <li>
    294. 

  294.             <a href="components-accordion.html">
    295. 

  295.               <i class="bi bi-circle"></i><span>Accordion</span>
    296. 

  296.             </a>
    297. 

  297.           </li>
    298. 

  298.           <li>
    299. 

  299.             <a href="components-badges.html">
    300. 

  300.               <i class="bi bi-circle"></i><span>Badges</span>
    301. 

  301.             </a>
    302. 

  302.           </li>
    303. 

  303.           <li>
    304. 

  304.             <a href="components-breadcrumbs.html">
    305. 

  305.               <i class="bi bi-circle"></i><span>Breadcrumbs</span>
    306. 

  306.             </a>
    307. 

  307.           </li>
    308. 

  308.           <li>
    309. 

  309.             <a href="components-buttons.html">
    310. 

  310.               <i class="bi bi-circle"></i><span>Buttons</span>
    311. 

  311.             </a>
    312. 

  312.           </li>
    313. 

  313.           <li>
    314. 

  314.             <a href="components-cards.html">
    315. 

  315.               <i class="bi bi-circle"></i><span>Cards</span>
    316. 

  316.             </a>
    317. 

  317.           </li>
    318. 

  318.           <li>
    319. 

  319.             <a href="components-carousel.html">
    320. 

  320.               <i class="bi bi-circle"></i><span>Carousel</span>
    321. 

  321.             </a>
    322. 

  322.           </li>
    323. 

  323.           <li>
    324. 

  324.             <a href="components-list-group.html">
    325. 

  325.               <i class="bi bi-circle"></i><span>List group</span>
    326. 

  326.             </a>
    327. 

  327.           </li>
    328. 

  328.           <li>
    329. 

  329.             <a href="components-modal.html">
    330. 

  330.               <i class="bi bi-circle"></i><span>Modal</span>
    331. 

  331.             </a>
    332. 

  332.           </li>
    333. 

  333.           <li>
    334. 

  334.             <a href="components-tabs.html">
    335. 

  335.               <i class="bi bi-circle"></i><span>Tabs</span>
    336. 

  336.             </a>
    337. 

  337.           </li>
    338. 

  338.           <li>
    339. 

  339.             <a href="components-pagination.html">
    340. 

  340.               <i class="bi bi-circle"></i><span>Pagination</span>
    341. 

  341.             </a>
    342. 

  342.           </li>
    343. 

  343.           <li>
    344. 

  344.             <a href="components-progress.html">
    345. 

  345.               <i class="bi bi-circle"></i><span>Progress</span>
    346. 

  346.             </a>
    347. 

  347.           </li>
    348. 

  348.           <li>
    349. 

  349.             <a href="components-spinners.html">
    350. 

  350.               <i class="bi bi-circle"></i><span>Spinners</span>
    351. 

  351.             </a>
    352. 

  352.           </li>
    353. 

  353.           <li>
    354. 

  354.             <a href="components-tooltips.html">
    355. 

  355.               <i class="bi bi-circle"></i><span>Tooltips</span>
    356. 

  356.             </a>
    357. 

  357.           </li>
    358. 

  358.         </ul>
    359. 

  359.       </li><!-- End Components Nav -->
    360. 

  360. 

  361.       <li class="nav-item">
    362. 

  362.         <a class="nav-link collapsed" data-bs-target="#forms-nav" data-bs-toggle="collapse" href="#">
    363. 

  363.           <i class="bi bi-journal-text"></i><span>Forms</span><i class="bi bi-chevron-down ms-auto"></i>
    364. 

  364.         </a>
    365. 

  365.         <ul id="forms-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
    366. 

  366.           <li>
    367. 

  367.             <a href="nft_add.html">
    368. 

  368.               <i class="bi bi-circle"></i><span>Form Elements</span>
    369. 

  369.             </a>
    370. 

  370.           </li>
    371. 

  371.           <li>
    372. 

  372.             <a href="forms-layouts.html">
    373. 

  373.               <i class="bi bi-circle"></i><span>Form Layouts</span>
    374. 

  374.             </a>
    375. 

  375.           </li>
    376. 

  376.           <li>
    377. 

  377.             <a href="forms-editors.html">
    378. 

  378.               <i class="bi bi-circle"></i><span>Form Editors</span>
    379. 

  379.             </a>
    380. 

  380.           </li>
    381. 

  381.           <li>
    382. 

  382.             <a href="forms-validation.html">
    383. 

  383.               <i class="bi bi-circle"></i><span>Form Validation</span>
    384. 

  384.             </a>
    385. 

  385.           </li>
    386. 

  386.         </ul>
    387. 

  387.       </li><!-- End Forms Nav -->
    388. 

  388. 

  389.       <li class="nav-item">
    390. 

  390.         <a class="nav-link collapsed" data-bs-target="#tables-nav" data-bs-toggle="collapse" href="#">
    391. 

  391.           <i class="bi bi-layout-text-window-reverse"></i><span>Tables</span><i class="bi bi-chevron-down ms-auto"></i>
    392. 

  392.         </a>
    393. 

  393.         <ul id="tables-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
    394. 

  394.           <li>
    395. 

  395.             <a href="tables-general.html">
    396. 

  396.               <i class="bi bi-circle"></i><span>General Tables</span>
    397. 

  397.             </a>
    398. 

  398.           </li>
    399. 

  399.           <li>
    400. 

  400.             <a href="user.html">
    401. 

  401.               <i class="bi bi-circle"></i><span>Data Tables</span>
    402. 

  402.             </a>
    403. 

  403.           </li>
    404. 

  404.         </ul>
    405. 

  405.       </li><!-- End Tables Nav -->
    406. 

  406. 

  407.       <li class="nav-item">
    408. 

  408.         <a class="nav-link " data-bs-target="#charts-nav" data-bs-toggle="collapse" href="#">
    409. 

  409.           <i class="bi bi-bar-chart"></i><span>Charts</span><i class="bi bi-chevron-down ms-auto"></i>
    410. 

  410.         </a>
    411. 

  411.         <ul id="charts-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
    412. 

  412.           <li>
    413. 

  413.             <a href="charts-chartjs.html">
    414. 

  414.               <i class="bi bi-circle"></i><span>Chart.js</span>
    415. 

  415.             </a>
    416. 

  416.           </li>
    417. 

  417.           <li>
    418. 

  418.             <a href="charts-apexcharts.html" class="active">
    419. 

  419.               <i class="bi bi-circle"></i><span>ApexCharts</span>
    420. 

  420.             </a>
    421. 

  421.           </li>
    422. 

  422.           <li>
    423. 

  423.             <a href="charts-echarts.html">
    424. 

  424.               <i class="bi bi-circle"></i><span>ECharts</span>
    425. 

  425.             </a>
    426. 

  426.           </li>
    427. 

  427.         </ul>
    428. 

  428.       </li><!-- End Charts Nav -->
    429. 

  429. 

  430.       <li class="nav-item">
    431. 

  431.         <a class="nav-link collapsed" data-bs-target="#icons-nav" data-bs-toggle="collapse" href="#">
    432. 

  432.           <i class="bi bi-gem"></i><span>Icons</span><i class="bi bi-chevron-down ms-auto"></i>
    433. 

  433.         </a>
    434. 

  434.         <ul id="icons-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
    435. 

  435.           <li>
    436. 

  436.             <a href="icons-bootstrap.html">
    437. 

  437.               <i class="bi bi-circle"></i><span>Bootstrap Icons</span>
    438. 

  438.             </a>
    439. 

  439.           </li>
    440. 

  440.           <li>
    441. 

  441.             <a href="icons-remix.html">
    442. 

  442.               <i class="bi bi-circle"></i><span>Remix Icons</span>
    443. 

  443.             </a>
    444. 

  444.           </li>
    445. 

  445.           <li>
    446. 

  446.             <a href="icons-boxicons.html">
    447. 

  447.               <i class="bi bi-circle"></i><span>Boxicons</span>
    448. 

  448.             </a>
    449. 

  449.           </li>
    450. 

  450.         </ul>
    451. 

  451.       </li><!-- End Icons Nav -->
    452. 

  452. 

  453.       <li class="nav-heading">Pages</li>
    454. 

  454. 

  455.       <li class="nav-item">
    456. 

  456.         <a class="nav-link collapsed" href="users-profile.html">
    457. 

  457.           <i class="bi bi-person"></i>
    458. 

  458.           <span>Profile</span>
    459. 

  459.         </a>
    460. 

  460.       </li><!-- End Profile Page Nav -->
    461. 

  461. 

  462.       <li class="nav-item">
    463. 

  463.         <a class="nav-link collapsed" href="pages-faq.html">
    464. 

  464.           <i class="bi bi-question-circle"></i>
    465. 

  465.           <span>F.A.Q</span>
    466. 

  466.         </a>
    467. 

  467.       </li><!-- End F.A.Q Page Nav -->
    468. 

  468. 

  469.       <li class="nav-item">
    470. 

  470.         <a class="nav-link collapsed" href="pages-contact.html">
    471. 

  471.           <i class="bi bi-envelope"></i>
    472. 

  472.           <span>Contact</span>
    473. 

  473.         </a>
    474. 

  474.       </li><!-- End Contact Page Nav -->
    475. 

  475. 

  476.       <li class="nav-item">
    477. 

  477.         <a class="nav-link collapsed" href="pages-register.html">
    478. 

  478.           <i class="bi bi-card-list"></i>
    479. 

  479.           <span>Register</span>
    480. 

  480.         </a>
    481. 

  481.       </li><!-- End Register Page Nav -->
    482. 

  482. 

  483.       <li class="nav-item">
    484. 

  484.         <a class="nav-link collapsed" href="login.html">
    485. 

  485.           <i class="bi bi-box-arrow-in-right"></i>
    486. 

  486.           <span>Login</span>
    487. 

  487.         </a>
    488. 

  488.       </li><!-- End Login Page Nav -->
    489. 

  489. 

  490.       <li class="nav-item">
    491. 

  491.         <a class="nav-link collapsed" href="pages-error-404.html">
    492. 

  492.           <i class="bi bi-dash-circle"></i>
    493. 

  493.           <span>Error 404</span>
    494. 

  494.         </a>
    495. 

  495.       </li><!-- End Error 404 Page Nav -->
    496. 

  496. 

  497.       <li class="nav-item">
    498. 

  498.         <a class="nav-link collapsed" href="pages-blank.html">
    499. 

  499.           <i class="bi bi-file-earmark"></i>
    500. 

  500.           <span>Blank</span>
    501. 

  501.         </a>
    502. 

  502.       </li><!-- End Blank Page Nav -->
    503. 

  503. 

  504.     </ul>
    505. 

  505. 

  506.   </aside><!-- End Sidebar-->
    507. 

  507. 

  508.   <main id="main" class="main">
    509. 

  509. 

  510.     <div class="pagetitle">
    511. 

  511.       <h1>ApexCharts</h1>
    512. 

  512.       <nav>
    513. 

  513.         <ol class="breadcrumb">
    514. 

  514.           <li class="breadcrumb-item"><a href="index.html">Home</a></li>
    515. 

  515.           <li class="breadcrumb-item">Charts</li>
    516. 

  516.           <li class="breadcrumb-item active">ApexCharts</li>
    517. 

  517.         </ol>
    518. 

  518.       </nav>
    519. 

  519.     </div><!-- End Page Title -->
    520. 

  520. 

  521.     <p>ApexCharts Examples. You can check the <a href="https://apexcharts.com/javascript-chart-demos/" target="_blank">official website</a> for more examples.</p>
    522. 

  522. 

  523.     <section class="section">
    524. 

  524.       <div class="row">
    525. 

  525. 

  526.         <div class="col-lg-6">
    527. 

  527.           <div class="card">
    528. 

  528.             <div class="card-body">
    529. 

  529.               <h5 class="card-title">Line Chart</h5>
    530. 

  530. 

  531.               <!-- Line Chart -->
    532. 

  532.               <div id="lineChart"></div>
    533. 

  533. 

  534.               <script>
    535. 

  535.                 document.addEventListener("DOMContentLoaded", () => {
    536. 

  536.                   new ApexCharts(document.querySelector("#lineChart"), {
    537. 

  537.                     series: [{
    538. 

  538.                       name: "Desktops",
    539. 

  539.                       data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
    540. 

  540.                     }],
    541. 

  541.                     chart: {
    542. 

  542.                       height: 350,
    543. 

  543.                       type: 'line',
    544. 

  544.                       zoom: {
    545. 

  545.                         enabled: false
    546. 

  546.                       }
    547. 

  547.                     },
    548. 

  548.                     dataLabels: {
    549. 

  549.                       enabled: false
    550. 

  550.                     },
    551. 

  551.                     stroke: {
    552. 

  552.                       curve: 'straight'
    553. 

  553.                     },
    554. 

  554.                     grid: {
    555. 

  555.                       row: {
    556. 

  556.                         colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
    557. 

  557.                         opacity: 0.5
    558. 

  558.                       },
    559. 

  559.                     },
    560. 

  560.                     xaxis: {
    561. 

  561.                       categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
    562. 

  562.                     }
    563. 

  563.                   }).render();
    564. 

  564.                 });
    565. 

  565.               </script>
    566. 

  566.               <!-- End Line Chart -->
    567. 

  567. 

  568.             </div>
    569. 

  569.           </div>
    570. 

  570.         </div>
    571. 

  571. 

  572.         <div class="col-lg-6">
    573. 

  573.           <div class="card">
    574. 

  574.             <div class="card-body">
    575. 

  575.               <h5 class="card-title">Area Chart</h5>
    576. 

  576. 

  577.               <!-- Area Chart -->
    578. 

  578.               <div id="areaChart"></div>
    579. 

  579. 

  580.               <script>
    581. 

  581.                 document.addEventListener("DOMContentLoaded", () => {
    582. 

  582.                   const series = {
    583. 

  583.                     "monthDataSeries1": {
    584. 

  584.                       "prices": [
    585. 

  585.                         8107.85,
    586. 

  586.                         8128.0,
    587. 

  587.                         8122.9,
    588. 

  588.                         8165.5,
    589. 

  589.                         8340.7,
    590. 

  590.                         8423.7,
    591. 

  591.                         8423.5,
    592. 

  592.                         8514.3,
    593. 

  593.                         8481.85,
    594. 

  594.                         8487.7,
    595. 

  595.                         8506.9,
    596. 

  596.                         8626.2,
    597. 

  597.                         8668.95,
    598. 

  598.                         8602.3,
    599. 

  599.                         8607.55,
    600. 

  600.                         8512.9,
    601. 

  601.                         8496.25,
    602. 

  602.                         8600.65,
    603. 

  603.                         8881.1,
    604. 

  604.                         9340.85
    605. 

  605.                       ],
    606. 

  606.                       "dates": [
    607. 

  607.                         "13 Nov 2017",
    608. 

  608.                         "14 Nov 2017",
    609. 

  609.                         "15 Nov 2017",
    610. 

  610.                         "16 Nov 2017",
    611. 

  611.                         "17 Nov 2017",
    612. 

  612.                         "20 Nov 2017",
    613. 

  613.                         "21 Nov 2017",
    614. 

  614.                         "22 Nov 2017",
    615. 

  615.                         "23 Nov 2017",
    616. 

  616.                         "24 Nov 2017",
    617. 

  617.                         "27 Nov 2017",
    618. 

  618.                         "28 Nov 2017",
    619. 

  619.                         "29 Nov 2017",
    620. 

  620.                         "30 Nov 2017",
    621. 

  621.                         "01 Dec 2017",
    622. 

  622.                         "04 Dec 2017",
    623. 

  623.                         "05 Dec 2017",
    624. 

  624.                         "06 Dec 2017",
    625. 

  625.                         "07 Dec 2017",
    626. 

  626.                         "08 Dec 2017"
    627. 

  627.                       ]
    628. 

  628.                     },
    629. 

  629.                     "monthDataSeries2": {
    630. 

  630.                       "prices": [
    631. 

  631.                         8423.7,
    632. 

  632.                         8423.5,
    633. 

  633.                         8514.3,
    634. 

  634.                         8481.85,
    635. 

  635.                         8487.7,
    636. 

  636.                         8506.9,
    637. 

  637.                         8626.2,
    638. 

  638.                         8668.95,
    639. 

  639.                         8602.3,
    640. 

  640.                         8607.55,
    641. 

  641.                         8512.9,
    642. 

  642.                         8496.25,
    643. 

  643.                         8600.65,
    644. 

  644.                         8881.1,
    645. 

  645.                         9040.85,
    646. 

  646.                         8340.7,
    647. 

  647.                         8165.5,
    648. 

  648.                         8122.9,
    649. 

  649.                         8107.85,
    650. 

  650.                         8128.0
    651. 

  651.                       ],
    652. 

  652.                       "dates": [
    653. 

  653.                         "13 Nov 2017",
    654. 

  654.                         "14 Nov 2017",
    655. 

  655.                         "15 Nov 2017",
    656. 

  656.                         "16 Nov 2017",
    657. 

  657.                         "17 Nov 2017",
    658. 

  658.                         "20 Nov 2017",
    659. 

  659.                         "21 Nov 2017",
    660. 

  660.                         "22 Nov 2017",
    661. 

  661.                         "23 Nov 2017",
    662. 

  662.                         "24 Nov 2017",
    663. 

  663.                         "27 Nov 2017",
    664. 

  664.                         "28 Nov 2017",
    665. 

  665.                         "29 Nov 2017",
    666. 

  666.                         "30 Nov 2017",
    667. 

  667.                         "01 Dec 2017",
    668. 

  668.                         "04 Dec 2017",
    669. 

  669.                         "05 Dec 2017",
    670. 

  670.                         "06 Dec 2017",
    671. 

  671.                         "07 Dec 2017",
    672. 

  672.                         "08 Dec 2017"
    673. 

  673.                       ]
    674. 

  674.                     },
    675. 

  675.                     "monthDataSeries3": {
    676. 

  676.                       "prices": [
    677. 

  677.                         7114.25,
    678. 

  678.                         7126.6,
    679. 

  679.                         7116.95,
    680. 

  680.                         7203.7,
    681. 

  681.                         7233.75,
    682. 

  682.                         7451.0,
    683. 

  683.                         7381.15,
    684. 

  684.                         7348.95,
    685. 

  685.                         7347.75,
    686. 

  686.                         7311.25,
    687. 

  687.                         7266.4,
    688. 

  688.                         7253.25,
    689. 

  689.                         7215.45,
    690. 

  690.                         7266.35,
    691. 

  691.                         7315.25,
    692. 

  692.                         7237.2,
    693. 

  693.                         7191.4,
    694. 

  694.                         7238.95,
    695. 

  695.                         7222.6,
    696. 

  696.                         7217.9,
    697. 

  697.                         7359.3,
    698. 

  698.                         7371.55,
    699. 

  699.                         7371.15,
    700. 

  700.                         7469.2,
    701. 

  701.                         7429.25,
    702. 

  702.                         7434.65,
    703. 

  703.                         7451.1,
    704. 

  704.                         7475.25,
    705. 

  705.                         7566.25,
    706. 

  706.                         7556.8,
    707. 

  707.                         7525.55,
    708. 

  708.                         7555.45,
    709. 

  709.                         7560.9,
    710. 

  710.                         7490.7,
    711. 

  711.                         7527.6,
    712. 

  712.                         7551.9,
    713. 

  713.                         7514.85,
    714. 

  714.                         7577.95,
    715. 

  715.                         7592.3,
    716. 

  716.                         7621.95,
    717. 

  717.                         7707.95,
    718. 

  718.                         7859.1,
    719. 

  719.                         7815.7,
    720. 

  720.                         7739.0,
    721. 

  721.                         7778.7,
    722. 

  722.                         7839.45,
    723. 

  723.                         7756.45,
    724. 

  724.                         7669.2,
    725. 

  725.                         7580.45,
    726. 

  726.                         7452.85,
    727. 

  727.                         7617.25,
    728. 

  728.                         7701.6,
    729. 

  729.                         7606.8,
    730. 

  730.                         7620.05,
    731. 

  731.                         7513.85,
    732. 

  732.                         7498.45,
    733. 

  733.                         7575.45,
    734. 

  734.                         7601.95,
    735. 

  735.                         7589.1,
    736. 

  736.                         7525.85,
    737. 

  737.                         7569.5,
    738. 

  738.                         7702.5,
    739. 

  739.                         7812.7,
    740. 

  740.                         7803.75,
    741. 

  741.                         7816.3,
    742. 

  742.                         7851.15,
    743. 

  743.                         7912.2,
    744. 

  744.                         7972.8,
    745. 

  745.                         8145.0,
    746. 

  746.                         8161.1,
    747. 

  747.                         8121.05,
    748. 

  748.                         8071.25,
    749. 

  749.                         8088.2,
    750. 

  750.                         8154.45,
    751. 

  751.                         8148.3,
    752. 

  752.                         8122.05,
    753. 

  753.                         8132.65,
    754. 

  754.                         8074.55,
    755. 

  755.                         7952.8,
    756. 

  756.                         7885.55,
    757. 

  757.                         7733.9,
    758. 

  758.                         7897.15,
    759. 

  759.                         7973.15,
    760. 

  760.                         7888.5,
    761. 

  761.                         7842.8,
    762. 

  762.                         7838.4,
    763. 

  763.                         7909.85,
    764. 

  764.                         7892.75,
    765. 

  765.                         7897.75,
    766. 

  766.                         7820.05,
    767. 

  767.                         7904.4,
    768. 

  768.                         7872.2,
    769. 

  769.                         7847.5,
    770. 

  770.                         7849.55,
    771. 

  771.                         7789.6,
    772. 

  772.                         7736.35,
    773. 

  773.                         7819.4,
    774. 

  774.                         7875.35,
    775. 

  775.                         7871.8,
    776. 

  776.                         8076.5,
    777. 

  777.                         8114.8,
    778. 

  778.                         8193.55,
    779. 

  779.                         8217.1,
    780. 

  780.                         8235.05,
    781. 

  781.                         8215.3,
    782. 

  782.                         8216.4,
    783. 

  783.                         8301.55,
    784. 

  784.                         8235.25,
    785. 

  785.                         8229.75,
    786. 

  786.                         8201.95,
    787. 

  787.                         8164.95,
    788. 

  788.                         8107.85,
    789. 

  789.                         8128.0,
    790. 

  790.                         8122.9,
    791. 

  791.                         8165.5,
    792. 

  792.                         8340.7,
    793. 

  793.                         8423.7,
    794. 

  794.                         8423.5,
    795. 

  795.                         8514.3,
    796. 

  796.                         8481.85,
    797. 

  797.                         8487.7,
    798. 

  798.                         8506.9,
    799. 

  799.                         8626.2
    800. 

  800.                       ],
    801. 

  801.                       "dates": [
    802. 

  802.                         "02 Jun 2017",
    803. 

  803.                         "05 Jun 2017",
    804. 

  804.                         "06 Jun 2017",
    805. 

  805.                         "07 Jun 2017",
    806. 

  806.                         "08 Jun 2017",
    807. 

  807.                         "09 Jun 2017",
    808. 

  808.                         "12 Jun 2017",
    809. 

  809.                         "13 Jun 2017",
    810. 

  810.                         "14 Jun 2017",
    811. 

  811.                         "15 Jun 2017",
    812. 

  812.                         "16 Jun 2017",
    813. 

  813.                         "19 Jun 2017",
    814. 

  814.                         "20 Jun 2017",
    815. 

  815.                         "21 Jun 2017",
    816. 

  816.                         "22 Jun 2017",
    817. 

  817.                         "23 Jun 2017",
    818. 

  818.                         "27 Jun 2017",
    819. 

  819.                         "28 Jun 2017",
    820. 

  820.                         "29 Jun 2017",
    821. 

  821.                         "30 Jun 2017",
    822. 

  822.                         "03 Jul 2017",
    823. 

  823.                         "04 Jul 2017",
    824. 

  824.                         "05 Jul 2017",
    825. 

  825.                         "06 Jul 2017",
    826. 

  826.                         "07 Jul 2017",
    827. 

  827.                         "10 Jul 2017",
    828. 

  828.                         "11 Jul 2017",
    829. 

  829.                         "12 Jul 2017",
    830. 

  830.                         "13 Jul 2017",
    831. 

  831.                         "14 Jul 2017",
    832. 

  832.                         "17 Jul 2017",
    833. 

  833.                         "18 Jul 2017",
    834. 

  834.                         "19 Jul 2017",
    835. 

  835.                         "20 Jul 2017",
    836. 

  836.                         "21 Jul 2017",
    837. 

  837.                         "24 Jul 2017",
    838. 

  838.                         "25 Jul 2017",
    839. 

  839.                         "26 Jul 2017",
    840. 

  840.                         "27 Jul 2017",
    841. 

  841.                         "28 Jul 2017",
    842. 

  842.                         "31 Jul 2017",
    843. 

  843.                         "01 Aug 2017",
    844. 

  844.                         "02 Aug 2017",
    845. 

  845.                         "03 Aug 2017",
    846. 

  846.                         "04 Aug 2017",
    847. 

  847.                         "07 Aug 2017",
    848. 

  848.                         "08 Aug 2017",
    849. 

  849.                         "09 Aug 2017",
    850. 

  850.                         "10 Aug 2017",
    851. 

  851.                         "11 Aug 2017",
    852. 

  852.                         "14 Aug 2017",
    853. 

  853.                         "16 Aug 2017",
    854. 

  854.                         "17 Aug 2017",
    855. 

  855.                         "18 Aug 2017",
    856. 

  856.                         "21 Aug 2017",
    857. 

  857.                         "22 Aug 2017",
    858. 

  858.                         "23 Aug 2017",
    859. 

  859.                         "24 Aug 2017",
    860. 

  860.                         "28 Aug 2017",
    861. 

  861.                         "29 Aug 2017",
    862. 

  862.                         "30 Aug 2017",
    863. 

  863.                         "31 Aug 2017",
    864. 

  864.                         "01 Sep 2017",
    865. 

  865.                         "04 Sep 2017",
    866. 

  866.                         "05 Sep 2017",
    867. 

  867.                         "06 Sep 2017",
    868. 

  868.                         "07 Sep 2017",
    869. 

  869.                         "08 Sep 2017",
    870. 

  870.                         "11 Sep 2017",
    871. 

  871.                         "12 Sep 2017",
    872. 

  872.                         "13 Sep 2017",
    873. 

  873.                         "14 Sep 2017",
    874. 

  874.                         "15 Sep 2017",
    875. 

  875.                         "18 Sep 2017",
    876. 

  876.                         "19 Sep 2017",
    877. 

  877.                         "20 Sep 2017",
    878. 

  878.                         "21 Sep 2017",
    879. 

  879.                         "22 Sep 2017",
    880. 

  880.                         "25 Sep 2017",
    881. 

  881.                         "26 Sep 2017",
    882. 

  882.                         "27 Sep 2017",
    883. 

  883.                         "28 Sep 2017",
    884. 

  884.                         "29 Sep 2017",
    885. 

  885.                         "03 Oct 2017",
    886. 

  886.                         "04 Oct 2017",
    887. 

  887.                         "05 Oct 2017",
    888. 

  888.                         "06 Oct 2017",
    889. 

  889.                         "09 Oct 2017",
    890. 

  890.                         "10 Oct 2017",
    891. 

  891.                         "11 Oct 2017",
    892. 

  892.                         "12 Oct 2017",
    893. 

  893.                         "13 Oct 2017",
    894. 

  894.                         "16 Oct 2017",
    895. 

  895.                         "17 Oct 2017",
    896. 

  896.                         "18 Oct 2017",
    897. 

  897.                         "19 Oct 2017",
    898. 

  898.                         "23 Oct 2017",
    899. 

  899.                         "24 Oct 2017",
    900. 

  900.                         "25 Oct 2017",
    901. 

  901.                         "26 Oct 2017",
    902. 

  902.                         "27 Oct 2017",
    903. 

  903.                         "30 Oct 2017",
    904. 

  904.                         "31 Oct 2017",
    905. 

  905.                         "01 Nov 2017",
    906. 

  906.                         "02 Nov 2017",
    907. 

  907.                         "03 Nov 2017",
    908. 

  908.                         "06 Nov 2017",
    909. 

  909.                         "07 Nov 2017",
    910. 

  910.                         "08 Nov 2017",
    911. 

  911.                         "09 Nov 2017",
    912. 

  912.                         "10 Nov 2017",
    913. 

  913.                         "13 Nov 2017",
    914. 

  914.                         "14 Nov 2017",
    915. 

  915.                         "15 Nov 2017",
    916. 

  916.                         "16 Nov 2017",
    917. 

  917.                         "17 Nov 2017",
    918. 

  918.                         "20 Nov 2017",
    919. 

  919.                         "21 Nov 2017",
    920. 

  920.                         "22 Nov 2017",
    921. 

  921.                         "23 Nov 2017",
    922. 

  922.                         "24 Nov 2017",
    923. 

  923.                         "27 Nov 2017",
    924. 

  924.                         "28 Nov 2017"
    925. 

  925.                       ]
    926. 

  926.                     }
    927. 

  927.                   }
    928. 

  928.                   new ApexCharts(document.querySelector("#areaChart"), {
    929. 

  929.                     series: [{
    930. 

  930.                       name: "STOCK ABC",
    931. 

  931.                       data: series.monthDataSeries1.prices
    932. 

  932.                     }],
    933. 

  933.                     chart: {
    934. 

  934.                       type: 'area',
    935. 

  935.                       height: 350,
    936. 

  936.                       zoom: {
    937. 

  937.                         enabled: false
    938. 

  938.                       }
    939. 

  939.                     },
    940. 

  940.                     dataLabels: {
    941. 

  941.                       enabled: false
    942. 

  942.                     },
    943. 

  943.                     stroke: {
    944. 

  944.                       curve: 'straight'
    945. 

  945.                     },
    946. 

  946.                     subtitle: {
    947. 

  947.                       text: 'Price Movements',
    948. 

  948.                       align: 'left'
    949. 

  949.                     },
    950. 

  950.                     labels: series.monthDataSeries1.dates,
    951. 

  951.                     xaxis: {
    952. 

  952.                       type: 'datetime',
    953. 

  953.                     },
    954. 

  954.                     yaxis: {
    955. 

  955.                       opposite: true
    956. 

  956.                     },
    957. 

  957.                     legend: {
    958. 

  958.                       horizontalAlign: 'left'
    959. 

  959.                     }
    960. 

  960.                   }).render();
    961. 

  961.                 });
    962. 

  962.               </script>
    963. 

  963.               <!-- End Area Chart -->
    964. 

  964. 

  965.             </div>
    966. 

  966.           </div>
    967. 

  967.         </div>
    968. 

  968. 

  969.         <div class="col-lg-6">
    970. 

  970.           <div class="card">
    971. 

  971.             <div class="card-body">
    972. 

  972.               <h5 class="card-title">Column Chart</h5>
    973. 

  973. 

  974.               <!-- Column Chart -->
    975. 

  975.               <div id="columnChart"></div>
    976. 

  976. 

  977.               <script>
    978. 

  978.                 document.addEventListener("DOMContentLoaded", () => {
    979. 

  979.                   new ApexCharts(document.querySelector("#columnChart"), {
    980. 

  980.                     series: [{
    981. 

  981.                       name: 'Net Profit',
    982. 

  982.                       data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
    983. 

  983.                     }, {
    984. 

  984.                       name: 'Revenue',
    985. 

  985.                       data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
    986. 

  986.                     }, {
    987. 

  987.                       name: 'Free Cash Flow',
    988. 

  988.                       data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
    989. 

  989.                     }],
    990. 

  990.                     chart: {
    991. 

  991.                       type: 'bar',
    992. 

  992.                       height: 350
    993. 

  993.                     },
    994. 

  994.                     plotOptions: {
    995. 

  995.                       bar: {
    996. 

  996.                         horizontal: false,
    997. 

  997.                         columnWidth: '55%',
    998. 

  998.                         endingShape: 'rounded'
    999. 

  999.                       },
    1000. 

  1000.                     },
    1001. 

  1001.                     dataLabels: {
    1002. 

  1002.                       enabled: false
    1003. 

  1003.                     },
    1004. 

  1004.                     stroke: {
    1005. 

  1005.                       show: true,
    1006. 

  1006.                       width: 2,
    1007. 

  1007.                       colors: ['transparent']
    1008. 

  1008.                     },
    1009. 

  1009.                     xaxis: {
    1010. 

  1010.                       categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
    1011. 

  1011.                     },
    1012. 

  1012.                     yaxis: {
    1013. 

  1013.                       title: {
    1014. 

  1014.                         text: '$ (thousands)'
    1015. 

  1015.                       }
    1016. 

  1016.                     },
    1017. 

  1017.                     fill: {
    1018. 

  1018.                       opacity: 1
    1019. 

  1019.                     },
    1020. 

  1020.                     tooltip: {
    1021. 

  1021.                       y: {
    1022. 

  1022.                         formatter: function(val) {
    1023. 

  1023.                           return "$ " + val + " thousands"
    1024. 

  1024.                         }
    1025. 

  1025.                       }
    1026. 

  1026.                     }
    1027. 

  1027.                   }).render();
    1028. 

  1028.                 });
    1029. 

  1029.               </script>
    1030. 

  1030.               <!-- End Column Chart -->
    1031. 

  1031. 

  1032.             </div>
    1033. 

  1033.           </div>
    1034. 

  1034.         </div>
    1035. 

  1035. 

  1036.         <div class="col-lg-6">
    1037. 

  1037.           <div class="card">
    1038. 

  1038.             <div class="card-body">
    1039. 

  1039.               <h5 class="card-title">Bar Chart</h5>
    1040. 

  1040. 

  1041.               <!-- Bar Chart -->
    1042. 

  1042.               <div id="barChart"></div>
    1043. 

  1043. 

  1044.               <script>
    1045. 

  1045.                 document.addEventListener("DOMContentLoaded", () => {
    1046. 

  1046.                   new ApexCharts(document.querySelector("#barChart"), {
    1047. 

  1047.                     series: [{
    1048. 

  1048.                       data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
    1049. 

  1049.                     }],
    1050. 

  1050.                     chart: {
    1051. 

  1051.                       type: 'bar',
    1052. 

  1052.                       height: 350
    1053. 

  1053.                     },
    1054. 

  1054.                     plotOptions: {
    1055. 

  1055.                       bar: {
    1056. 

  1056.                         borderRadius: 4,
    1057. 

  1057.                         horizontal: true,
    1058. 

  1058.                       }
    1059. 

  1059.                     },
    1060. 

  1060.                     dataLabels: {
    1061. 

  1061.                       enabled: false
    1062. 

  1062.                     },
    1063. 

  1063.                     xaxis: {
    1064. 

  1064.                       categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
    1065. 

  1065.                         'United States', 'China', 'Germany'
    1066. 

  1066.                       ],
    1067. 

  1067.                     }
    1068. 

  1068.                   }).render();
    1069. 

  1069.                 });
    1070. 

  1070.               </script>
    1071. 

  1071.               <!-- End Bar Chart -->
    1072. 

  1072. 

  1073.             </div>
    1074. 

  1074.           </div>
    1075. 

  1075.         </div>
    1076. 

  1076. 

  1077.         <div class="col-lg-6">
    1078. 

  1078.           <div class="card">
    1079. 

  1079.             <div class="card-body">
    1080. 

  1080.               <h5 class="card-title">Pie Chart</h5>
    1081. 

  1081. 

  1082.               <!-- Pie Chart -->
    1083. 

  1083.               <div id="pieChart"></div>
    1084. 

  1084. 

  1085.               <script>
    1086. 

  1086.                 document.addEventListener("DOMContentLoaded", () => {
    1087. 

  1087.                   new ApexCharts(document.querySelector("#pieChart"), {
    1088. 

  1088.                     series: [44, 55, 13, 43, 22],
    1089. 

  1089.                     chart: {
    1090. 

  1090.                       height: 350,
    1091. 

  1091.                       type: 'pie',
    1092. 

  1092.                       toolbar: {
    1093. 

  1093.                         show: true
    1094. 

  1094.                       }
    1095. 

  1095.                     },
    1096. 

  1096.                     labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E']
    1097. 

  1097.                   }).render();
    1098. 

  1098.                 });
    1099. 

  1099.               </script>
    1100. 

  1100.               <!-- End Pie Chart -->
    1101. 

  1101. 

  1102.             </div>
    1103. 

  1103.           </div>
    1104. 

  1104.         </div>
    1105. 

  1105. 

  1106.         <div class="col-lg-6">
    1107. 

  1107.           <div class="card">
    1108. 

  1108.             <div class="card-body">
    1109. 

  1109.               <h5 class="card-title">Donut Chart</h5>
    1110. 

  1110. 

  1111.               <!-- Donut Chart -->
    1112. 

  1112.               <div id="donutChart"></div>
    1113. 

  1113. 

  1114.               <script>
    1115. 

  1115.                 document.addEventListener("DOMContentLoaded", () => {
    1116. 

  1116.                   new ApexCharts(document.querySelector("#donutChart"), {
    1117. 

  1117.                     series: [44, 55, 13, 43, 22],
    1118. 

  1118.                     chart: {
    1119. 

  1119.                       height: 350,
    1120. 

  1120.                       type: 'donut',
    1121. 

  1121.                       toolbar: {
    1122. 

  1122.                         show: true
    1123. 

  1123.                       }
    1124. 

  1124.                     },
    1125. 

  1125.                     labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
    1126. 

  1126.                   }).render();
    1127. 

  1127.                 });
    1128. 

  1128.               </script>
    1129. 

  1129.               <!-- End Donut Chart -->
    1130. 

  1130. 

  1131.             </div>
    1132. 

  1132.           </div>
    1133. 

  1133.         </div>
    1134. 

  1134. 

  1135.         <div class="col-lg-6">
    1136. 

  1136.           <div class="card">
    1137. 

  1137.             <div class="card-body">
    1138. 

  1138.               <h5 class="card-title">Radar Chart</h5>
    1139. 

  1139. 

  1140.               <!-- Radar Chart -->
    1141. 

  1141.               <div id="radarChart"></div>
    1142. 

  1142. 

  1143.               <script>
    1144. 

  1144.                 document.addEventListener("DOMContentLoaded", () => {
    1145. 

  1145.                   new ApexCharts(document.querySelector("#radarChart"), {
    1146. 

  1146.                     series: [{
    1147. 

  1147.                       name: 'Series 1',
    1148. 

  1148.                       data: [80, 50, 30, 40, 100, 20],
    1149. 

  1149.                     }],
    1150. 

  1150.                     chart: {
    1151. 

  1151.                       height: 350,
    1152. 

  1152.                       type: 'radar',
    1153. 

  1153.                     },
    1154. 

  1154.                     xaxis: {
    1155. 

  1155.                       categories: ['January', 'February', 'March', 'April', 'May', 'June']
    1156. 

  1156.                     }
    1157. 

  1157.                   }).render();
    1158. 

  1158.                 });
    1159. 

  1159.               </script>
    1160. 

  1160.               <!-- End Radar Chart -->
    1161. 

  1161. 

  1162.             </div>
    1163. 

  1163.           </div>
    1164. 

  1164.         </div>
    1165. 

  1165. 

  1166.         <div class="col-lg-6">
    1167. 

  1167.           <div class="card">
    1168. 

  1168.             <div class="card-body">
    1169. 

  1169.               <h5 class="card-title">Polar Area Chart</h5>
    1170. 

  1170. 

  1171.               <!-- Polar Area Chart -->
    1172. 

  1172.               <div id="polarAreaChart"></div>
    1173. 

  1173. 

  1174.               <script>
    1175. 

  1175.                 document.addEventListener("DOMContentLoaded", () => {
    1176. 

  1176.                   new ApexCharts(document.querySelector("#polarAreaChart"), {
    1177. 

  1177.                     series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
    1178. 

  1178.                     chart: {
    1179. 

  1179.                       type: 'polarArea',
    1180. 

  1180.                       height: 350,
    1181. 

  1181.                       toolbar: {
    1182. 

  1182.                         show: true
    1183. 

  1183.                       }
    1184. 

  1184.                     },
    1185. 

  1185.                     stroke: {
    1186. 

  1186.                       colors: ['#fff']
    1187. 

  1187.                     },
    1188. 

  1188.                     fill: {
    1189. 

  1189.                       opacity: 0.8
    1190. 

  1190.                     }
    1191. 

  1191.                   }).render();
    1192. 

  1192.                 });
    1193. 

  1193.               </script>
    1194. 

  1194.               <!-- End Polar Area Chart -->
    1195. 

  1195. 

  1196.             </div>
    1197. 

  1197.           </div>
    1198. 

  1198.         </div>
    1199. 

  1199. 

  1200.         <div class="col-lg-6">
    1201. 

  1201.           <div class="card">
    1202. 

  1202.             <div class="card-body">
    1203. 

  1203.               <h5 class="card-title">Radial Bar Chart</h5>
    1204. 

  1204. 

  1205.               <!-- Radial Bar Chart -->
    1206. 

  1206.               <div id="radialBarChart"></div>
    1207. 

  1207. 

  1208.               <script>
    1209. 

  1209.                 document.addEventListener("DOMContentLoaded", () => {
    1210. 

  1210.                   new ApexCharts(document.querySelector("#radialBarChart"), {
    1211. 

  1211.                     series: [44, 55, 67, 83],
    1212. 

  1212.                     chart: {
    1213. 

  1213.                       height: 350,
    1214. 

  1214.                       type: 'radialBar',
    1215. 

  1215.                       toolbar: {
    1216. 

  1216.                         show: true
    1217. 

  1217.                       }
    1218. 

  1218.                     },
    1219. 

  1219.                     plotOptions: {
    1220. 

  1220.                       radialBar: {
    1221. 

  1221.                         dataLabels: {
    1222. 

  1222.                           name: {
    1223. 

  1223.                             fontSize: '22px',
    1224. 

  1224.                           },
    1225. 

  1225.                           value: {
    1226. 

  1226.                             fontSize: '16px',
    1227. 

  1227.                           },
    1228. 

  1228.                           total: {
    1229. 

  1229.                             show: true,
    1230. 

  1230.                             label: 'Total',
    1231. 

  1231.                             formatter: function(w) {
    1232. 

  1232.                               // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
    1233. 

  1233.                               return 249
    1234. 

  1234.                             }
    1235. 

  1235.                           }
    1236. 

  1236.                         }
    1237. 

  1237.                       }
    1238. 

  1238.                     },
    1239. 

  1239.                     labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
    1240. 

  1240.                   }).render();
    1241. 

  1241.                 });
    1242. 

  1242.               </script>
    1243. 

  1243.               <!-- End Radial Bar Chart -->
    1244. 

  1244. 

  1245.             </div>
    1246. 

  1246.           </div>
    1247. 

  1247.         </div>
    1248. 

  1248. 

  1249.         <div class="col-lg-6">
    1250. 

  1250.           <div class="card">
    1251. 

  1251.             <div class="card-body">
    1252. 

  1252.               <h5 class="card-title">Bubble Chart</h5>
    1253. 

  1253. 

  1254.               <!-- Bubble Chart -->
    1255. 

  1255.               <div id="bubbleChart"></div>
    1256. 

  1256. 

  1257.               <script>
    1258. 

  1258.                 document.addEventListener("DOMContentLoaded", () => {
    1259. 

  1259.                   function generateData(baseval, count, yrange) {
    1260. 

  1260.                     var i = 0;
    1261. 

  1261.                     var series = [];
    1262. 

  1262.                     while (i < count) {
    1263. 

  1263.                       var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;;
    1264. 

  1264.                       var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
    1265. 

  1265.                       var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
    1266. 

  1266.                       series.push([x, y, z]);
    1267. 

  1267.                       baseval += 86400000;
    1268. 

  1268.                       i++;
    1269. 

  1269.                     }
    1270. 

  1270.                     return series;
    1271. 

  1271.                   }
    1272. 

  1272.                   new ApexCharts(document.querySelector("#bubbleChart"), {
    1273. 

  1273.                     series: [{
    1274. 

  1274.                         name: 'Bubble1',
    1275. 

  1275.                         data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
    1276. 

  1276.                           min: 10,
    1277. 

  1277.                           max: 60
    1278. 

  1278.                         })
    1279. 

  1279.                       },
    1280. 

  1280.                       {
    1281. 

  1281.                         name: 'Bubble2',
    1282. 

  1282.                         data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
    1283. 

  1283.                           min: 10,
    1284. 

  1284.                           max: 60
    1285. 

  1285.                         })
    1286. 

  1286.                       },
    1287. 

  1287.                       {
    1288. 

  1288.                         name: 'Bubble3',
    1289. 

  1289.                         data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
    1290. 

  1290.                           min: 10,
    1291. 

  1291.                           max: 60
    1292. 

  1292.                         })
    1293. 

  1293.                       },
    1294. 

  1294.                       {
    1295. 

  1295.                         name: 'Bubble4',
    1296. 

  1296.                         data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
    1297. 

  1297.                           min: 10,
    1298. 

  1298.                           max: 60
    1299. 

  1299.                         })
    1300. 

  1300.                       }
    1301. 

  1301.                     ],
    1302. 

  1302.                     chart: {
    1303. 

  1303.                       height: 333,
    1304. 

  1304.                       type: 'bubble',
    1305. 

  1305.                     },
    1306. 

  1306.                     dataLabels: {
    1307. 

  1307.                       enabled: false
    1308. 

  1308.                     },
    1309. 

  1309.                     fill: {
    1310. 

  1310.                       opacity: 0.8
    1311. 

  1311.                     },
    1312. 

  1312.                     xaxis: {
    1313. 

  1313.                       tickAmount: 12,
    1314. 

  1314.                       type: 'category',
    1315. 

  1315.                     },
    1316. 

  1316.                     yaxis: {
    1317. 

  1317.                       max: 70
    1318. 

  1318.                     }
    1319. 

  1319.                   }).render();
    1320. 

  1320.                 });
    1321. 

  1321.               </script>
    1322. 

  1322.               <!-- End Bubble Chart -->
    1323. 

  1323. 

  1324.             </div>
    1325. 

  1325.           </div>
    1326. 

  1326.         </div>
    1327. 

  1327. 

  1328.       </div>
    1329. 

  1329.     </section>
    1330. 

  1330. 

  1331.   </main><!-- End #main -->
    1332. 

  1332. 

  1333.   <!-- ======= Footer ======= -->
    1334. 

  1334.   <footer id="footer" class="footer">
    1335. 

  1335.     <div class="copyright">
    1336. 

  1336.       &copy; Copyright <strong><span>Ark Cards</span></strong>. All Rights Reserved
    1337. 

  1337.     </div>
    1338. 

  1338.     <div class="credits">
    1339. 

  1339.       <!-- All the links in the footer should remain intact. -->
    1340. 

  1340.       <!-- You can delete the links only if you purchased the pro version. -->
    1341. 

  1341.       <!-- Licensing information: https://bootstrapmade.com/license/ -->
    1342. 

  1342.       <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ -->
    1343. 

  1343.       Designed by <a href="https://ai.choozmo.com/">Choozmo</a>
    1344. 

  1344.     </div>
    1345. 

  1345.   </footer><!-- End Footer -->
    1346. 

  1346. 

  1347.   <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
    1348. 

  1348. 

  1349.   <!-- Vendor JS Files -->
    1350. 

  1350.   <script src="assets/vendor/apexcharts/apexcharts.min.js"></script>
    1351. 

  1351.   <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    1352. 

  1352.   <script src="assets/vendor/chart.js/chart.min.js"></script>
    1353. 

  1353.   <script src="assets/vendor/echarts/echarts.min.js"></script>
    1354. 

  1354.   <script src="assets/vendor/quill/quill.min.js"></script>
    1355. 

  1355.   <script src="assets/vendor/simple-datatables/simple-datatables.js"></script>
    1356. 

  1356.   <script src="assets/vendor/tinymce/tinymce.min.js"></script>
    1357. 

  1357.   <script src="assets/vendor/php-email-form/validate.js"></script>
    1358. 

  1358. 

  1359.   <!-- Template Main JS File -->
    1360. 

  1360.   <script src="assets/js/main.js"></script>
    1361. 

  1361. 

  1362. </body>
    1363. 

  1363. 

  1364. </html>
    1365.