You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1047 lines
55 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Apex Radar Charts | Hyper - Responsive Bootstrap 4 Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
<meta content="Coderthemes" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- App css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="light-style" />
<link href="assets/css/app-dark.min.css" rel="stylesheet" type="text/css" id="dark-style" />
</head>
<body class="loading" data-layout-config='{"leftSideBarTheme":"dark","layoutBoxed":false, "leftSidebarCondensed":false, "leftSidebarScrollable":false,"darkMode":false, "showRightSidebarOnStart": true}'>
<!-- Begin page -->
<div class="wrapper">
<!-- ========== Left Sidebar Start ========== -->
<div class="left-side-menu">
<!-- LOGO -->
<a href="index.html" class="logo text-center logo-light">
<span class="logo-lg">
<img src="assets/images/logo.png" alt="" height="16">
</span>
<span class="logo-sm">
<img src="assets/images/logo_sm.png" alt="" height="16">
</span>
</a>
<!-- LOGO -->
<a href="index.html" class="logo text-center logo-dark">
<span class="logo-lg">
<img src="assets/images/logo-dark.png" alt="" height="16">
</span>
<span class="logo-sm">
<img src="assets/images/logo_sm_dark.png" alt="" height="16">
</span>
</a>
<div class="h-100" id="left-side-menu-container" data-simplebar>
<!--- Sidemenu -->
<ul class="metismenu side-nav">
<li class="side-nav-title side-nav-item">Navigation</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-home-alt"></i>
<span class="badge badge-success float-right">4</span>
<span> Dashboards </span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="dashboard-analytics.html">Analytics</a>
</li>
<li>
<a href="dashboard-crm.html">CRM</a>
</li>
<li>
<a href="index.html">Ecommerce</a>
</li>
<li>
<a href="dashboard-projects.html">Projects</a>
</li>
</ul>
</li>
<li class="side-nav-title side-nav-item">Apps</li>
<li class="side-nav-item">
<a href="apps-calendar.html" class="side-nav-link">
<i class="uil-calender"></i>
<span> Calendar </span>
</a>
</li>
<li class="side-nav-item">
<a href="apps-chat.html" class="side-nav-link">
<i class="uil-comments-alt"></i>
<span> Chat </span>
</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-store"></i>
<span> Ecommerce </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="apps-ecommerce-products.html">Products</a>
</li>
<li>
<a href="apps-ecommerce-products-details.html">Products Details</a>
</li>
<li>
<a href="apps-ecommerce-orders.html">Orders</a>
</li>
<li>
<a href="apps-ecommerce-orders-details.html">Order Details</a>
</li>
<li>
<a href="apps-ecommerce-customers.html">Customers</a>
</li>
<li>
<a href="apps-ecommerce-shopping-cart.html">Shopping Cart</a>
</li>
<li>
<a href="apps-ecommerce-checkout.html">Checkout</a>
</li>
<li>
<a href="apps-ecommerce-sellers.html">Sellers</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-envelope"></i>
<span> Email </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="apps-email-inbox.html">Inbox</a>
</li>
<li>
<a href="apps-email-read.html">Read Email</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-briefcase"></i>
<span> Projects </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="apps-projects-list.html">List</a>
</li>
<li>
<a href="apps-projects-details.html">Details</a>
</li>
<li>
<a href="apps-projects-gantt.html">Gantt <span class="badge badge-pill badge-light-lighten font-10 float-right">New</span></a>
</li>
<li>
<a href="apps-projects-add.html">Create Project <span class="badge badge-pill badge-success-lighten font-10 float-right">New</span></a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="apps-social-feed.html" class="side-nav-link">
<i class="uil-rss"></i>
<span> Social Feed </span>
</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-clipboard-alt"></i>
<span> Tasks </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="apps-tasks.html">List</a>
</li>
<li>
<a href="apps-tasks-details.html">Details</a>
</li>
<li>
<a href="apps-kanban.html">Kanban Board</a>
</li>
</ul>
</li>
<li class="side-nav-title side-nav-item">Custom</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-copy-alt"></i>
<span> Pages </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="pages-profile.html">Profile</a>
</li>
<li>
<a href="pages-profile-2.html">Profile 2</a>
</li>
<li>
<a href="pages-invoice.html">Invoice</a>
</li>
<li>
<a href="pages-faq.html">FAQ</a>
</li>
<li>
<a href="pages-pricing.html">Pricing</a>
</li>
<li>
<a href="pages-maintenance.html">Maintenance</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Authentication
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-third-level" aria-expanded="false">
<li>
<a href="pages-login.html">Login</a>
</li>
<li>
<a href="pages-login-2.html">Login 2</a>
</li>
<li>
<a href="pages-register.html">Register</a>
</li>
<li>
<a href="pages-register-2.html">Register 2</a>
</li>
<li>
<a href="pages-logout.html">Logout</a>
</li>
<li>
<a href="pages-logout-2.html">Logout 2</a>
</li>
<li>
<a href="pages-recoverpw.html">Recover Password</a>
</li>
<li>
<a href="pages-recoverpw-2.html">Recover Password 2</a>
</li>
<li>
<a href="pages-lock-screen.html">Lock Screen</a>
</li>
<li>
<a href="pages-lock-screen-2.html">Lock Screen 2</a>
</li>
<li>
<a href="pages-confirm-mail.html">Confirm Mail</a>
</li>
<li>
<a href="pages-confirm-mail-2.html">Confirm Mail 2</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Error
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-third-level" aria-expanded="false">
<li>
<a href="pages-404.html">Error 404</a>
</li>
<li>
<a href="pages-404-alt.html">Error 404-alt</a>
</li>
<li>
<a href="pages-500.html">Error 500</a>
</li>
</ul>
</li>
<li>
<a href="pages-starter.html">Starter Page</a>
</li>
<li>
<a href="pages-preloader.html">With Preloader</a>
</li>
<li>
<a href="pages-timeline.html">Timeline</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="landing.html" target="_blank" class="side-nav-link">
<i class="uil-globe"></i>
<span class="badge badge-light float-right">New</span>
<span> Landing </span>
</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-window"></i>
<span> Layouts </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="layouts-horizontal.html">Horizontal</a>
</li>
<li>
<a href="layouts-detached.html">Detached</a>
</li>
</ul>
</li>
<li class="side-nav-title side-nav-item mt-1">Components</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-box"></i>
<span> Base UI </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="ui-accordions.html">Accordions</a>
</li>
<li>
<a href="ui-alerts.html">Alerts</a>
</li>
<li>
<a href="ui-avatars.html">Avatars</a>
</li>
<li>
<a href="ui-badges.html">Badges</a>
</li>
<li>
<a href="ui-breadcrumb.html">Breadcrumb</a>
</li>
<li>
<a href="ui-buttons.html">Buttons</a>
</li>
<li>
<a href="ui-cards.html">Cards</a>
</li>
<li>
<a href="ui-carousel.html">Carousel</a>
</li>
<li>
<a href="ui-dropdowns.html">Dropdowns</a>
</li>
<li>
<a href="ui-embed-video.html">Embed Video</a>
</li>
<li>
<a href="ui-grid.html">Grid</a>
</li>
<li>
<a href="ui-list-group.html">List Group</a>
</li>
<li>
<a href="ui-media-object.html">Media Object</a>
</li>
<li>
<a href="ui-modals.html">Modals</a>
</li>
<li>
<a href="ui-notifications.html">Notifications</a>
</li>
<li>
<a href="ui-pagination.html">Pagination</a>
</li>
<li>
<a href="ui-popovers.html">Popovers</a>
</li>
<li>
<a href="ui-progress.html">Progress</a>
</li>
<li>
<a href="ui-ribbons.html">Ribbons</a>
</li>
<li>
<a href="ui-spinners.html">Spinners</a>
</li>
<li>
<a href="ui-tabs.html">Tabs</a>
</li>
<li>
<a href="ui-tooltips.html">Tooltips</a>
</li>
<li>
<a href="ui-typography.html">Typography</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-package"></i>
<span> Extended UI </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="extended-dragula.html">Dragula</a>
</li>
<li>
<a href="extended-range-slider.html">Range Slider</a>
</li>
<li>
<a href="extended-ratings.html">Ratings</a>
</li>
<li>
<a href="extended-scrollbar.html">Scrollbar</a>
</li>
<li>
<a href="extended-scrollspy.html">Scrollspy</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="widgets.html" class="side-nav-link">
<i class="uil-layer-group"></i>
<span> Widgets </span>
</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-streering"></i>
<span> Icons </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="icons-dripicons.html">Dripicons</a>
</li>
<li>
<a href="icons-mdi.html">Material Design</a>
</li>
<li>
<a href="icons-unicons.html">Unicons</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-document-layout-center"></i>
<span> Forms </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="form-elements.html">Basic Elements</a>
</li>
<li>
<a href="form-advanced.html">Form Advanced</a>
</li>
<li>
<a href="form-validation.html">Validation</a>
</li>
<li>
<a href="form-wizard.html">Wizard</a>
</li>
<li>
<a href="form-fileuploads.html">File Uploads</a>
</li>
<li>
<a href="form-editors.html">Editors</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-chart"></i>
<span> Charts </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Apex Charts
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-third-level" aria-expanded="false">
<li>
<a href="charts-apex-area.html">Area</a>
</li>
<li>
<a href="charts-apex-bar.html">Bar</a>
</li>
<li>
<a href="charts-apex-bubble.html">Bubble</a>
</li>
<li>
<a href="charts-apex-candlestick.html">Candlestick</a>
</li>
<li>
<a href="charts-apex-column.html">Column</a>
</li>
<li>
<a href="charts-apex-heatmap.html">Heatmap</a>
</li>
<li>
<a href="charts-apex-line.html">Line</a>
</li>
<li>
<a href="charts-apex-mixed.html">Mixed</a>
</li>
<li>
<a href="charts-apex-pie.html">Pie</a>
</li>
<li>
<a href="charts-apex-radar.html">Radar</a>
</li>
<li>
<a href="charts-apex-radialbar.html">RadialBar</a>
</li>
<li>
<a href="charts-apex-scatter.html">Scatter</a>
</li>
<li>
<a href="charts-apex-sparklines.html">Sparklines</a>
</li>
</ul>
</li>
<li>
<a href="charts-brite.html">Britecharts</a>
</li>
<li>
<a href="charts-chartjs.html">Chartjs</a>
</li>
<li>
<a href="charts-sparkline.html">Sparklines</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-table"></i>
<span> Tables </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="tables-basic.html">Basic Tables</a>
</li>
<li>
<a href="tables-datatable.html">Data Tables</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-location-point"></i>
<span> Maps </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="maps-google.html">Google Maps</a>
</li>
<li>
<a href="maps-vector.html">Vector Maps</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-folder-plus"></i>
<span> Multi Level </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Second Level
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-third-level" aria-expanded="false">
<li>
<a href="javascript: void(0);">Item 1</a>
</li>
<li>
<a href="javascript: void(0);">Item 2</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Third Level
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-third-level" aria-expanded="false">
<li>
<a href="javascript: void(0);">Item 1</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Item 2
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-forth-level" aria-expanded="false">
<li>
<a href="javascript: void(0);">Item 2.1</a>
</li>
<li>
<a href="javascript: void(0);">Item 2.2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- Help Box -->
<div class="help-box text-white text-center">
<a href="javascript: void(0);" class="float-right close-btn text-white">
<i class="mdi mdi-close"></i>
</a>
<img src="assets/images/help-icon.svg" height="90" alt="Helper Icon Image" />
<h5 class="mt-3">Unlimited Access</h5>
<p class="mb-3">Upgrade to plan to get access to unlimited reports</p>
<a href="javascript: void(0);" class="btn btn-outline-light btn-sm">Upgrade</a>
</div>
<!-- end Help Box -->
<!-- End Sidebar -->
<div class="clearfix"></div>
</div>
<!-- Sidebar -left -->
</div>
<!-- Left Sidebar End -->
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div class="content-page">
<div class="content">
<!-- Topbar Start -->
<div class="navbar-custom">
<ul class="list-unstyled topbar-right-menu float-right mb-0">
<li class="notification-list">
<a class="nav-link right-bar-toggle" href="javascript: void(0);">
<i class="dripicons-gear noti-icon"></i>
</a>
</li>
<li class="dropdown notification-list topbar-dropdown">
<a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<img src="assets/images/flags/us.jpg" alt="user-image" class="mr-0 mr-sm-1" height="12">
<span class="align-middle d-none d-sm-inline-block">English</span> <i class="mdi mdi-chevron-down d-none d-sm-inline-block"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/germany.jpg" alt="user-image" class="mr-1" height="12"> <span class="align-middle">German</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/italy.jpg" alt="user-image" class="mr-1" height="12"> <span class="align-middle">Italian</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/spain.jpg" alt="user-image" class="mr-1" height="12"> <span class="align-middle">Spanish</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/russia.jpg" alt="user-image" class="mr-1" height="12"> <span class="align-middle">Russian</span>
</a>
</div>
</li>
<li class="dropdown notification-list">
<a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="dripicons-bell noti-icon"></i>
<span class="noti-icon-badge"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-lg">
<!-- item-->
<div class="dropdown-item noti-title">
<h5 class="m-0">
<span class="float-right">
<a href="javascript: void(0);" class="text-dark">
<small>Clear All</small>
</a>
</span>Notification
</h5>
</div>
<div style="max-height: 230px;" data-simplebar>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-primary">
<i class="mdi mdi-comment-account-outline"></i>
</div>
<p class="notify-details">Caleb Flakelar commented on Admin
<small class="text-muted">1 min ago</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-info">
<i class="mdi mdi-account-plus"></i>
</div>
<p class="notify-details">New user registered.
<small class="text-muted">5 hours ago</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon">
<img src="assets/images/users/avatar-2.jpg" class="img-fluid rounded-circle" alt="" /> </div>
<p class="notify-details">Cristina Pride</p>
<p class="text-muted mb-0 user-msg">
<small>Hi, How are you? What about our next meeting</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-primary">
<i class="mdi mdi-comment-account-outline"></i>
</div>
<p class="notify-details">Caleb Flakelar commented on Admin
<small class="text-muted">4 days ago</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon">
<img src="assets/images/users/avatar-4.jpg" class="img-fluid rounded-circle" alt="" /> </div>
<p class="notify-details">Karen Robinson</p>
<p class="text-muted mb-0 user-msg">
<small>Wow ! this admin looks good and awesome design</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-info">
<i class="mdi mdi-heart"></i>
</div>
<p class="notify-details">Carlos Crouch liked
<b>Admin</b>
<small class="text-muted">13 days ago</small>
</p>
</a>
</div>
<!-- All-->
<a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all">
View All
</a>
</div>
</li>
<li class="dropdown notification-list">
<a class="nav-link dropdown-toggle nav-user arrow-none mr-0" data-toggle="dropdown" href="#" role="button" aria-haspopup="false"
aria-expanded="false">
<span class="account-user-avatar">
<img src="assets/images/users/avatar-1.jpg" alt="user-image" class="rounded-circle">
</span>
<span>
<span class="account-user-name">Dominic Keller</span>
<span class="account-position">Founder</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu profile-dropdown">
<!-- item-->
<div class=" dropdown-header noti-title">
<h6 class="text-overflow m-0">Welcome !</h6>
</div>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="mdi mdi-account-circle mr-1"></i>
<span>My Account</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="mdi mdi-account-edit mr-1"></i>
<span>Settings</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="mdi mdi-lifebuoy mr-1"></i>
<span>Support</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="mdi mdi-lock-outline mr-1"></i>
<span>Lock Screen</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="mdi mdi-logout mr-1"></i>
<span>Logout</span>
</a>
</div>
</li>
</ul>
<button class="button-menu-mobile open-left disable-btn">
<i class="mdi mdi-menu"></i>
</button>
<div class="app-search">
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...">
<span class="mdi mdi-magnify"></span>
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</div>
</form>
</div>
</div>
<!-- end Topbar -->
<!-- Start Content-->
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box">
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">Hyper</a></li>
<li class="breadcrumb-item"><a href="javascript: void(0);">Apex</a></li>
<li class="breadcrumb-item active">Radar Charts</li>
</ol>
</div>
<h4 class="page-title">Radar Charts</h4>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-xl-6">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-3">Basic Radar Chart</h4>
<div id="basic-radar" class="apex-charts" data-colors="#727cf5"></div>
</div>
<!-- end card body-->
</div>
<!-- end card -->
</div>
<!-- end col-->
<div class="col-xl-6">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-3">Radar with Polygon-fill</h4>
<div id="radar-polygon" class="apex-charts" data-colors="#FF4560"></div>
</div>
<!-- end card body-->
</div>
<!-- end card -->
</div>
<!-- end col-->
</div>
<!-- end row-->
<div class="row">
<div class="col-xl-6">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-3">Radar Multiple Series</h4>
<div id="radar-multiple-series" class="apex-charts" data-colors="#727cf5,#02a8b5,#fd7e14"></div>
<div class="text-center mt-2">
<button onclick="update()" class="btn btn-sm btn-primary">Update</button>
</div>
</div>
<!-- end card body-->
</div>
<!-- end card -->
</div>
<!-- end col-->
</div>
<!-- end row-->
</div> <!-- container -->
</div> <!-- content -->
<!-- Footer Start -->
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
2018 - 2020 © Hyper - Coderthemes.com
</div>
<div class="col-md-6">
<div class="text-md-right footer-links d-none d-md-block">
<a href="javascript: void(0);">About</a>
<a href="javascript: void(0);">Support</a>
<a href="javascript: void(0);">Contact Us</a>
</div>
</div>
</div>
</div>
</footer>
<!-- end Footer -->
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>
<!-- END wrapper -->
<!-- Right Sidebar -->
<div class="right-bar">
<div class="rightbar-title">
<a href="javascript:void(0);" class="right-bar-toggle float-right">
<i class="dripicons-cross noti-icon"></i>
</a>
<h5 class="m-0">Settings</h5>
</div>
<div class="rightbar-content h-100" data-simplebar>
<div class="p-3">
<div class="alert alert-warning" role="alert">
<strong>Customize </strong> the overall color scheme, sidebar menu, etc.
</div>
<!-- Settings -->
<h5 class="mt-3">Color Scheme</h5>
<hr class="mt-1" />
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="color-scheme-mode" value="light"
id="light-mode-check" checked />
<label class="custom-control-label" for="light-mode-check">Light Mode</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="color-scheme-mode" value="dark"
id="dark-mode-check" />
<label class="custom-control-label" for="dark-mode-check">Dark Mode</label>
</div>
<!-- Width -->
<h5 class="mt-4">Width</h5>
<hr class="mt-1" />
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="width" value="fluid" id="fluid-check" checked />
<label class="custom-control-label" for="fluid-check">Fluid</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="width" value="boxed" id="boxed-check" />
<label class="custom-control-label" for="boxed-check">Boxed</label>
</div>
<!-- Left Sidebar-->
<h5 class="mt-4">Left Sidebar</h5>
<hr class="mt-1" />
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="theme" value="default" id="default-check"
checked />
<label class="custom-control-label" for="default-check">Default</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="theme" value="light" id="light-check" />
<label class="custom-control-label" for="light-check">Light</label>
</div>
<div class="custom-control custom-switch mb-3">
<input type="radio" class="custom-control-input" name="theme" value="dark" id="dark-check" />
<label class="custom-control-label" for="dark-check">Dark</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="compact" value="fixed" id="fixed-check"
checked />
<label class="custom-control-label" for="fixed-check">Fixed</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="compact" value="condensed"
id="condensed-check" />
<label class="custom-control-label" for="condensed-check">Condensed</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="compact" value="scrollable"
id="scrollable-check" />
<label class="custom-control-label" for="scrollable-check">Scrollable</label>
</div>
<button class="btn btn-primary btn-block mt-4" id="resetBtn">Reset to Default</button>
<a href="https://themes.getbootstrap.com/product/hyper-responsive-admin-dashboard-template/"
class="btn btn-danger btn-block mt-3" target="_blank"><i class="mdi mdi-basket mr-1"></i> Purchase Now</a>
</div> <!-- end padding-->
</div>
</div>
<div class="rightbar-overlay"></div>
<!-- /Right-bar -->
<!-- bundle -->
<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/app.min.js"></script>
<!-- third party:js -->
<script src="assets/js/vendor/apexcharts.min.js"></script>
<!-- third party end -->
<!-- demo:js -->
<script src="assets/js/pages/demo.apex-radar.js"></script>
<!-- demo end -->
</body>
</html>