D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
proc
/
self
/
root
/
proc
/
thread-self
/
root
/
home
/
vitalityhealth
/
www
/
superadmin
/
Filename :
ui-elements-charts.html
back
Copy
<!doctype html><html class="fixed"> <head> <!-- Basic --> <meta charset="UTF-8"> <title>Charts | Porto Admin - Responsive HTML5 Template</title> <meta name="keywords" content="HTML5 Admin Template"> <meta name="description" content="Porto Admin - Responsive HTML5 Template"> <meta name="author" content="okler.net"> <!-- Mobile Metas --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- Web Fonts --> <link href="../../../css?family=Poppins:300,400,500,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css"> <!-- Vendor CSS --> <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="vendor/animate/animate.compat.css"> <link rel="stylesheet" href="vendor/font-awesome/css/all.min.css"> <link rel="stylesheet" href="vendor/boxicons/css/boxicons.min.css"> <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css"> <link rel="stylesheet" href="vendor/bootstrap-datepicker/css/bootstrap-datepicker3.css"> <!-- Specific Page Vendor CSS --> <link rel="stylesheet" href="vendor/morris/morris.css"> <link rel="stylesheet" href="vendor/chartist/chartist.min.css"> <!-- Theme CSS --> <link rel="stylesheet" href="css/theme.css"> <!-- Theme Custom CSS --> <link rel="stylesheet" href="css/custom.css"> <!-- Head Libs --> <script src="vendor/modernizr/modernizr.js"></script> <script src="master/style-switcher/style.switcher.localstorage.js"></script> </head> <body> <section class="body"> <!-- start: header --> <header class="header"> <div class="logo-container"> <a href="index.htm" class="logo"> <img src="img/logo.png" width="75" height="35" alt="Porto Admin"> </a> <div class="d-md-none toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened"> <i class="fas fa-bars" aria-label="Toggle sidebar"></i> </div> </div> <!-- start: search & user box --> <div class="header-right"> <form action="pages-search-results.html" class="search nav-form"> <div class="input-group"> <input type="text" class="form-control" name="q" id="q" placeholder="Search..."> <button class="btn btn-default" type="submit"><i class="bx bx-search"></i></button> </div> </form> <span class="separator"></span> <ul class="notifications"> <li> <a href="#" class="dropdown-toggle notification-icon" data-bs-toggle="dropdown"> <i class="bx bx-list-ol"></i> <span class="badge">3</span> </a> <div class="dropdown-menu notification-menu large"> <div class="notification-title"> <span class="float-end badge badge-default">3</span> Tasks </div> <div class="content"> <ul> <li> <p class="clearfix mb-1"> <span class="message float-start">Generating Sales Report</span> <span class="message float-end text-dark">60%</span> </p> <div class="progress progress-xs light"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> </div> </li> <li> <p class="clearfix mb-1"> <span class="message float-start">Importing Contacts</span> <span class="message float-end text-dark">98%</span> </p> <div class="progress progress-xs light"> <div class="progress-bar" role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100" style="width: 98%;"></div> </div> </li> <li> <p class="clearfix mb-1"> <span class="message float-start">Uploading something big</span> <span class="message float-end text-dark">33%</span> </p> <div class="progress progress-xs light mb-1"> <div class="progress-bar" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width: 33%;"></div> </div> </li> </ul> </div> </div> </li> <li> <a href="#" class="dropdown-toggle notification-icon" data-bs-toggle="dropdown"> <i class="bx bx-envelope"></i> <span class="badge">4</span> </a> <div class="dropdown-menu notification-menu"> <div class="notification-title"> <span class="float-end badge badge-default">230</span> Messages </div> <div class="content"> <ul> <li> <a href="#" class="clearfix"> <figure class="image"> <img src="img/!sample-user.jpg" alt="Joseph Doe Junior" class="rounded-circle"> </figure> <span class="title">Joseph Doe</span> <span class="message">Lorem ipsum dolor sit.</span> </a> </li> <li> <a href="#" class="clearfix"> <figure class="image"> <img src="img/!sample-user.jpg" alt="Joseph Junior" class="rounded-circle"> </figure> <span class="title">Joseph Junior</span> <span class="message truncate">Truncated message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lacinia orci. Proin vestibulum eget risus non luctus. Nunc cursus lacinia lacinia. Nulla molestie malesuada est ac tincidunt. Quisque eget convallis diam, nec venenatis risus. Vestibulum blandit faucibus est et malesuada. Sed interdum cursus dui nec venenatis. Pellentesque non nisi lobortis, rutrum eros ut, convallis nisi. Sed tellus turpis, dignissim sit amet tristique quis, pretium id est. Sed aliquam diam diam, sit amet faucibus tellus ultricies eu. Aliquam lacinia nibh a metus bibendum, eu commodo eros commodo. Sed commodo molestie elit, a molestie lacus porttitor id. Donec facilisis varius sapien, ac fringilla velit porttitor et. Nam tincidunt gravida dui, sed pharetra odio pharetra nec. Duis consectetur venenatis pharetra. Vestibulum egestas nisi quis elementum elementum.</span> </a> </li> <li> <a href="#" class="clearfix"> <figure class="image"> <img src="img/!sample-user.jpg" alt="Joe Junior" class="rounded-circle"> </figure> <span class="title">Joe Junior</span> <span class="message">Lorem ipsum dolor sit.</span> </a> </li> <li> <a href="#" class="clearfix"> <figure class="image"> <img src="img/!sample-user.jpg" alt="Joseph Junior" class="rounded-circle"> </figure> <span class="title">Joseph Junior</span> <span class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lacinia orci. Proin vestibulum eget risus non luctus. Nunc cursus lacinia lacinia. Nulla molestie malesuada est ac tincidunt. Quisque eget convallis diam.</span> </a> </li> </ul> <hr> <div class="text-end"> <a href="#" class="view-more">View All</a> </div> </div> </div> </li> <li> <a href="#" class="dropdown-toggle notification-icon" data-bs-toggle="dropdown"> <i class="bx bx-bell"></i> <span class="badge">3</span> </a> <div class="dropdown-menu notification-menu"> <div class="notification-title"> <span class="float-end badge badge-default">3</span> Alerts </div> <div class="content"> <ul> <li> <a href="#" class="clearfix"> <div class="image"> <i class="fas fa-thumbs-down bg-danger text-light"></i> </div> <span class="title">Server is Down!</span> <span class="message">Just now</span> </a> </li> <li> <a href="#" class="clearfix"> <div class="image"> <i class="bx bx-lock bg-warning text-light"></i> </div> <span class="title">User Locked</span> <span class="message">15 minutes ago</span> </a> </li> <li> <a href="#" class="clearfix"> <div class="image"> <i class="fas fa-signal bg-success text-light"></i> </div> <span class="title">Connection Restaured</span> <span class="message">10/10/2021</span> </a> </li> </ul> <hr> <div class="text-end"> <a href="#" class="view-more">View All</a> </div> </div> </div> </li> </ul> <span class="separator"></span> <div id="userbox" class="userbox"> <a href="#" data-bs-toggle="dropdown"> <figure class="profile-picture"> <img src="img/!logged-user.jpg" alt="Joseph Doe" class="rounded-circle" data-lock-picture="img/!logged-user.jpg"> </figure> <div class="profile-info" data-lock-name="John Doe" data-lock-email="johndoe@okler.com"> <span class="name">John Doe Junior</span> <span class="role">Administrator</span> </div> <i class="fa custom-caret"></i> </a> <div class="dropdown-menu"> <ul class="list-unstyled mb-2"> <li class="divider"></li> <li> <a role="menuitem" tabindex="-1" href="pages-user-profile.html"><i class="bx bx-user-circle"></i> My Profile</a> </li> <li> <a role="menuitem" tabindex="-1" href="#" data-lock-screen="true"><i class="bx bx-lock"></i> Lock Screen</a> </li> <li> <a role="menuitem" tabindex="-1" href="pages-signin.html"><i class="bx bx-power-off"></i> Logout</a> </li> </ul> </div> </div> </div> <!-- end: search & user box --> </header> <!-- end: header --> <div class="inner-wrapper"> <!-- start: sidebar --> <aside id="sidebar-left" class="sidebar-left"> <div class="sidebar-header"> <div class="sidebar-title"> Navigation </div> <div class="sidebar-toggle d-none d-md-block" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle"> <i class="fas fa-bars" aria-label="Toggle sidebar"></i> </div> </div> <div class="nano"> <div class="nano-content"> <nav id="menu" class="nav-main" role="navigation"> <ul class="nav nav-main"> <li> <a class="nav-link" href="layouts-default.html"> <i class="bx bx-home-alt" aria-hidden="true"></i> <span>Dashboard</span> </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-cart-alt" aria-hidden="true"></i> <span>eCommerce</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="ecommerce-dashboard.html"> Dashboard </a> </li> <li> <a class="nav-link" href="ecommerce-products-list.html"> Products List </a> </li> <li> <a class="nav-link" href="ecommerce-products-form.html"> Products Form </a> </li> <li> <a class="nav-link" href="ecommerce-category-list.html"> Categories List </a> </li> <li> <a class="nav-link" href="ecommerce-category-form.html"> Category Form </a> </li> <li> <a class="nav-link" href="ecommerce-coupons-list.html"> Coupons List </a> </li> <li> <a class="nav-link" href="ecommerce-coupons-form.html"> Coupons Form </a> </li> <li> <a class="nav-link" href="ecommerce-orders-list.html"> Orders List </a> </li> <li> <a class="nav-link" href="ecommerce-orders-detail.html"> Orders Detail </a> </li> <li> <a class="nav-link" href="ecommerce-customers-list.html"> Customers List </a> </li> <li> <a class="nav-link" href="ecommerce-customers-form.html"> Customers Form </a> </li> </ul> </li> <li> <a class="nav-link" href="mailbox-folder.html"> <span class="float-end badge badge-primary">182</span> <i class="bx bx-envelope" aria-hidden="true"></i> <span>Mailbox</span> </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-layout" aria-hidden="true"></i> <span>Layouts</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="index.html"> Landing Page </a> </li> <li> <a class="nav-link" href="layouts-default.html"> Default </a> </li> <li> <a class="nav-link" href="layouts-modern.html"> Modern </a> </li> <li class="nav-parent"> <a> Boxed </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-boxed.html"> Static Header </a> </li> <li> <a class="nav-link" href="layouts-boxed-fixed-header.html"> Fixed Header </a> </li> </ul> </li> <li class="nav-parent"> <a> Horizontal Menu Header </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-header-menu.html"> Pills </a> </li> <li> <a class="nav-link" href="layouts-header-menu-stripe.html"> Stripe </a> </li> <li> <a class="nav-link" href="layouts-header-menu-top-line.html"> Top Line </a> </li> </ul> </li> <li> <a class="nav-link" href="layouts-dark.html"> Dark </a> </li> <li> <a class="nav-link" href="layouts-dark-header.html"> Dark Header </a> </li> <li> <a class="nav-link" href="layouts-two-navigations.html"> Two Navigations </a> </li> <li class="nav-parent"> <a> Tab Navigation </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-tab-navigation-dark.html"> Tab Navigation Dark </a> </li> <li> <a class="nav-link" href="layouts-tab-navigation.html"> Tab Navigation Light </a> </li> <li> <a class="nav-link" href="layouts-tab-navigation-boxed.html"> Tab Navigation Boxed </a> </li> </ul> </li> <li> <a class="nav-link" href="layouts-light-sidebar.html"> Light Sidebar </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-collapsed.html"> Left Sidebar Collapsed </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-scroll.html"> Left Sidebar Scroll </a> </li> <li class="nav-parent"> <a> Left Sidebar Big Icons </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-left-sidebar-big-icons.html"> Left Sidebar Big Icons Dark </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-big-icons-light.html"> Left Sidebar Big Icons Light </a> </li> </ul> </li> <li class="nav-parent"> <a> Left Sidebar Panel </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-left-sidebar-panel.html"> Left Sidebar Panel Dark </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-panel-light.html"> Left Sidebar Panel Light </a> </li> </ul> </li> <li class="nav-parent"> <a> Left Sidebar Sizes </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-sidebar-sizes-xs.html"> Left Sidebar XS </a> </li> <li> <a class="nav-link" href="layouts-sidebar-sizes-sm.html"> Left Sidebar SM </a> </li> <li> <a class="nav-link" href="layouts-sidebar-sizes-md.html"> Left Sidebar MD </a> </li> </ul> </li> <li> <a class="nav-link" href="layouts-square-borders.html"> Square Borders </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-file" aria-hidden="true"></i> <span>Pages</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="pages-signup.html"> Sign Up </a> </li> <li> <a class="nav-link" href="pages-signin.html"> Sign In </a> </li> <li> <a class="nav-link" href="pages-recover-password.html"> Recover Password </a> </li> <li> <a class="nav-link" href="pages-lock-screen.html"> Locked Screen </a> </li> <li> <a class="nav-link" href="pages-user-profile.html"> User Profile </a> </li> <li> <a class="nav-link" href="pages-session-timeout.html"> Session Timeout </a> </li> <li> <a class="nav-link" href="pages-calendar.html"> Calendar </a> </li> <li> <a class="nav-link" href="pages-timeline.html"> Timeline </a> </li> <li> <a class="nav-link" href="pages-media-gallery.html"> Media Gallery </a> </li> <li> <a class="nav-link" href="pages-invoice.html"> Invoice </a> </li> <li> <a class="nav-link" href="pages-blank.html"> Blank Page </a> </li> <li> <a class="nav-link" href="pages-404.html"> 404 </a> </li> <li> <a class="nav-link" href="pages-500.html"> 500 </a> </li> <li> <a class="nav-link" href="pages-log-viewer.html"> Log Viewer </a> </li> <li> <a class="nav-link" href="pages-search-results.html"> Search Results </a> </li> </ul> </li> <li class="nav-parent nav-expanded nav-active"> <a class="nav-link" href="#"> <i class="bx bx-cube" aria-hidden="true"></i> <span>UI Elements</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="ui-elements-typography.html"> Typography </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> Icons <span class="mega-sub-nav-toggle toggled float-end" data-toggle="collapse" data-target=".mega-sub-nav-sub-menu-1"></span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="ui-elements-icons-elusive.html"> Elusive </a> </li> <li> <a class="nav-link" href="ui-elements-icons-font-awesome.html"> Font Awesome </a> </li> <li> <a class="nav-link" href="ui-elements-icons-line-icons.html"> Line Icons </a> </li> <li> <a class="nav-link" href="ui-elements-icons-meteocons.html"> Meteocons </a> </li> <li> <a class="nav-link" href="ui-elements-icons-box-icons.html"> Box Icons </a> </li> </ul> </li> <li> <a class="nav-link" href="ui-elements-tabs.html"> Tabs </a> </li> <li> <a class="nav-link" href="ui-elements-cards.html"> Cards </a> </li> <li> <a class="nav-link" href="ui-elements-widgets.html"> Widgets </a> </li> <li> <a class="nav-link" href="ui-elements-portlets.html"> Portlets </a> </li> <li> <a class="nav-link" href="ui-elements-buttons.html"> Buttons </a> </li> <li> <a class="nav-link" href="ui-elements-alerts.html"> Alerts </a> </li> <li> <a class="nav-link" href="ui-elements-notifications.html"> Notifications </a> </li> <li> <a class="nav-link" href="ui-elements-modals.html"> Modals </a> </li> <li> <a class="nav-link" href="ui-elements-lightbox.html"> Lightbox </a> </li> <li> <a class="nav-link" href="ui-elements-progressbars.html"> Progress Bars </a> </li> <li> <a class="nav-link" href="ui-elements-sliders.html"> Sliders </a> </li> <li> <a class="nav-link" href="ui-elements-carousels.html"> Carousels </a> </li> <li> <a class="nav-link" href="ui-elements-accordions.html"> Accordions </a> </li> <li> <a class="nav-link" href="ui-elements-toggles.html"> Toggles </a> </li> <li> <a class="nav-link" href="ui-elements-nestable.html"> Nestable </a> </li> <li> <a class="nav-link" href="ui-elements-tree-view.html"> Tree View </a> </li> <li> <a class="nav-link" href="ui-elements-scrollable.html"> Scrollable </a> </li> <li> <a class="nav-link" href="ui-elements-grid-system.html"> Grid System </a> </li> <li class="nav-active"> <a class="nav-link" href="ui-elements-charts.html"> Charts </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> Animations <span class="mega-sub-nav-toggle toggled float-end" data-toggle="collapse" data-target=".mega-sub-nav-sub-menu-2"></span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="ui-elements-animations-appear.html"> Appear </a> </li> <li> <a class="nav-link" href="ui-elements-animations-hover.html"> Hover </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> Loading <span class="mega-sub-nav-toggle toggled float-end" data-toggle="collapse" data-target=".mega-sub-nav-sub-menu-3"></span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="ui-elements-loading-overlay.html"> Overlay </a> </li> <li> <a class="nav-link" href="ui-elements-loading-progress.html"> Progress </a> </li> </ul> </li> <li> <a class="nav-link" href="ui-elements-extra.html"> Extra </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-map" aria-hidden="true"></i> <span>Maps</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="maps-google-maps.html"> Basic </a> </li> <li> <a class="nav-link" href="maps-google-maps-builder.html"> Map Builder </a> </li> <li> <a class="nav-link" href="maps-vector.html"> Vector </a> </li> </ul> </li> <li> <a class="nav-link" href="extra-ajax-made-easy.html"> <i class="bx bx-loader-circle" aria-hidden="true"></i> <span>Ajax</span> </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-detail" aria-hidden="true"></i> <span>Forms</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="forms-basic.html"> Basic </a> </li> <li> <a class="nav-link" href="forms-advanced.html"> Advanced </a> </li> <li> <a class="nav-link" href="forms-validation.html"> Validation </a> </li> <li> <a class="nav-link" href="forms-layouts.html"> Layouts </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-table" aria-hidden="true"></i> <span>Tables</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="tables-basic.html"> Basic </a> </li> <li> <a class="nav-link" href="tables-advanced.html"> Advanced </a> </li> <li> <a class="nav-link" href="tables-responsive.html"> Responsive </a> </li> <li> <a class="nav-link" href="tables-editable.html"> Editable </a> </li> <li> <a class="nav-link" href="tables-ajax.html"> Ajax </a> </li> <li> <a class="nav-link" href="tables-pricing.html"> Pricing </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-collection" aria-hidden="true"></i> <span>Menu Levels</span> </a> <ul class="nav nav-children"> <li> <a> First Level </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> Second Level </a> <ul class="nav nav-children"> <li> <a> Second Level Link #1 </a> </li> <li> <a> Second Level Link #2 </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> Third Level </a> <ul class="nav nav-children"> <li> <a> Third Level Link #1 </a> </li> <li> <a> Third Level Link #2 </a> </li> </ul> </li> </ul> </li> </ul> </li> <li> <a class="nav-link" href="http://themeforest.net/item/porto-responsive-html5-template/4106987?ref=Okler"> <i class="bx bx-window-alt" aria-hidden="true"></i> <span>Front-End <em class="not-included">(Not Included)</em></span> </a> </li> <li> <a class="nav-link" href="https://www.okler.net/forums/topic/porto-admin-changelog/"> <i class="bx bx-book-alt" aria-hidden="true"></i> <span>Changelog</span> </a> </li> </ul> </nav> <hr class="separator"> <div class="sidebar-widget widget-tasks"> <div class="widget-header"> <h6>Projects</h6> <div class="widget-toggle">+</div> </div> <div class="widget-content"> <ul class="list-unstyled m-0"> <li><a href="#">Porto HTML5 Template</a></li> <li><a href="#">Tucson Template</a></li> <li><a href="#">Porto Admin</a></li> </ul> </div> </div> <hr class="separator"> <div class="sidebar-widget widget-stats"> <div class="widget-header"> <h6>Company Stats</h6> <div class="widget-toggle">+</div> </div> <div class="widget-content"> <ul> <li> <span class="stats-title">Stat 1</span> <span class="stats-complete">85%</span> <div class="progress"> <div class="progress-bar progress-bar-primary progress-without-number" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;"> <span class="sr-only">85% Complete</span> </div> </div> </li> <li> <span class="stats-title">Stat 2</span> <span class="stats-complete">70%</span> <div class="progress"> <div class="progress-bar progress-bar-primary progress-without-number" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"> <span class="sr-only">70% Complete</span> </div> </div> </li> <li> <span class="stats-title">Stat 3</span> <span class="stats-complete">2%</span> <div class="progress"> <div class="progress-bar progress-bar-primary progress-without-number" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;"> <span class="sr-only">2% Complete</span> </div> </div> </li> </ul> </div> </div> </div> <script> // Maintain Scroll Position if (typeof localStorage !== 'undefined') { if (localStorage.getItem('sidebar-left-position') !== null) { var initialPosition = localStorage.getItem('sidebar-left-position'), sidebarLeft = document.querySelector('#sidebar-left .nano-content'); sidebarLeft.scrollTop = initialPosition; } } </script> </div> </aside> <!-- end: sidebar --> <section role="main" class="content-body"> <header class="page-header"> <h2>Charts</h2> <div class="right-wrapper text-end"> <ol class="breadcrumbs"> <li> <a href="index.html"> <i class="bx bx-home-alt"></i> </a> </li> <li><span>UI Elements</span></li> <li><span>Charts</span></li> </ol> <a class="sidebar-right-toggle" data-open="sidebar-right"><i class="fas fa-chevron-left"></i></a> </div> </header> <!-- start: page --> <h4 class="mt-0 mb-0 font-weight-bold text-dark">Flot Charts</h4> <p class="mb-4">Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.</p> <div class="row"> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Basic Chart</h2> <p class="card-subtitle">You don't have to do much to get an attractive plot. Create a placeholder, make sure it has dimensions (so Flot knows at what size to draw the plot), then call the plot function with your data.</p> </header> <div class="card-body"> <!-- Flot: Basic --> <div class="chart chart-md" id="flotBasic"></div> <script type="text/javascript"> var flotBasicData = [{ data: [ [0, 170], [1, 169], [2, 173], [3, 188], [4, 147], [5, 113], [6, 128], [7, 169], [8, 173], [9, 128], [10, 128] ], label: "Series 1", color: "#0088cc" }, { data: [ [0, 115], [1, 124], [2, 114], [3, 121], [4, 115], [5, 83], [6, 102], [7, 148], [8, 147], [9, 103], [10, 113] ], label: "Series 2", color: "#2baab1" }, { data: [ [0, 70], [1, 69], [2, 73], [3, 88], [4, 47], [5, 13], [6, 28], [7, 69], [8, 73], [9, 28], [10, 28] ], label: "Series 3", color: "#734ba9" }]; // See: js/examples/examples.charts.js for more settings. </script> </div> </section> </div> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Real-Time Chart</h2> <p class="card-subtitle">You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.</p> </header> <div class="card-body"> <!-- Flot: Curves --> <div class="chart chart-md" id="flotRealTime"></div> </div> </section> </div> </div> <div class="row"> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Bars Chart</h2> <p class="card-subtitle">With the categories plugin you can plot categories/textual data easily.</p> </header> <div class="card-body"> <!-- Flot: Bars --> <div class="chart chart-md" id="flotBars"></div> <script type="text/javascript"> var flotBarsData = [ ["Jan", 28], ["Feb", 42], ["Mar", 25], ["Apr", 23], ["May", 37], ["Jun", 33], ["Jul", 18], ["Aug", 14], ["Sep", 18], ["Oct", 15], ["Nov", 4], ["Dec", 7] ]; // See: js/examples/examples.charts.js for more settings. </script> </div> </section> </div> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Pie Chart</h2> <p class="card-subtitle">Default Pie Chart</p> </header> <div class="card-body"> <!-- Flot: Pie --> <div class="chart chart-md" id="flotPie"></div> <script type="text/javascript"> var flotPieData = [{ label: "Series 1", data: [ [1, 60] ], color: '#0088cc' }, { label: "Series 2", data: [ [1, 10] ], color: '#2baab1' }, { label: "Series 3", data: [ [1, 15] ], color: '#734ba9' }, { label: "Series 4", data: [ [1, 15] ], color: '#E36159' }]; // See: js/examples/examples.charts.js for more settings. </script> </div> </section> </div> </div> <h4 class="mt-5 mb-0">Morris Charts</h4> <p class="mb-3">Good-looking charts shouldn't be difficult.</p> <div class="row"> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Line Chart</h2> <p class="card-subtitle">A style of chart that is created by connecting a series of data points together with a line.</p> </header> <div class="card-body"> <!-- Morris: Line --> <div class="chart chart-md" id="morrisLine"></div> <script type="text/javascript"> var morrisLineData = [{ y: '2006', a: 100, b: 90 }, { y: '2007', a: 75, b: 65 }, { y: '2008', a: 50, b: 40 }, { y: '2009', a: 75, b: 65 }, { y: '2010', a: 50, b: 40 }, { y: '2011', a: 75, b: 65 }, { y: '2012', a: 100, b: 90 }, { y: '2021', a: 75, b: 65 }, { y: '2021', a: 100, b: 90 }]; // See: js/examples/examples.charts.js for more settings. </script> </div> </section> </div> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Donut Chart</h2> <p class="card-subtitle">Donut Chart are functionally identical to pie charts.</p> </header> <div class="card-body"> <!-- Morris: Donut --> <div class="chart chart-md" id="morrisDonut"></div> <script type="text/javascript"> var morrisDonutData = [{ label: "Porto Template", value: 32 }, { label: "Tucson Template", value: 18 }, { label: "Porto Admin", value: 20 }]; // See: js/examples/examples.charts.js for more settings. </script> </div> </section> </div> </div> <div class="row"> <div class="col-md-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Bar Chart</h2> <p class="card-subtitle">A bar chart is a way of summarizing a set of categorical data.</p> </header> <div class="card-body"> <!-- Morris: Bar --> <div class="chart chart-md" id="morrisBar"></div> <script type="text/javascript"> var morrisBarData = [{ y: '2004', a: 10, b: 30 }, { y: '2005', a: 100, b: 25 }, { y: '2006', a: 60, b: 25 }, { y: '2007', a: 75, b: 35 }, { y: '2008', a: 90, b: 20 }, { y: '2009', a: 75, b: 15 }, { y: '2010', a: 50, b: 10 }, { y: '2011', a: 75, b: 25 }, { y: '2012', a: 30, b: 10 }, { y: '2021', a: 75, b: 5 }, { y: '2021', a: 60, b: 8 }]; // See: js/examples/examples.charts.js for more settings. </script> </div> </section> </div> </div> <div class="row"> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Stacked Chart</h2> <p class="card-subtitle">Stacked Bar Chart.</p> </header> <div class="card-body"> <!-- Morris: Area --> <div class="chart chart-md" id="morrisStacked"></div> <script type="text/javascript"> var morrisStackedData = [{ y: '2004', a: 10, b: 30 }, { y: '2005', a: 100, b: 25 }, { y: '2006', a: 60, b: 25 }, { y: '2007', a: 75, b: 35 }, { y: '2008', a: 90, b: 20 }, { y: '2009', a: 75, b: 15 }, { y: '2010', a: 50, b: 10 }, { y: '2011', a: 75, b: 25 }, { y: '2012', a: 30, b: 10 }, { y: '2021', a: 75, b: 5 }, { y: '2021', a: 60, b: 8 }]; // See: js/examples/examples.charts.js for more settings. </script> </div> </section> </div> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Area Chart</h2> <p class="card-subtitle">An area chart or area graph displays graphically quantitive data.</p> </header> <div class="card-body"> <!-- Morris: Area --> <div class="chart chart-md" id="morrisArea"></div> <script type="text/javascript"> var morrisAreaData = [{ y: '2004', a: 10, b: 30 }, { y: '2005', a: 100, b: 25 }, { y: '2006', a: 60, b: 25 }, { y: '2007', a: 75, b: 35 }, { y: '2008', a: 90, b: 20 }, { y: '2009', a: 75, b: 15 }, { y: '2010', a: 50, b: 10 }, { y: '2011', a: 75, b: 25 }, { y: '2012', a: 30, b: 10 }, { y: '2021', a: 75, b: 5 }, { y: '2021', a: 60, b: 8 }]; // See: js/examples/examples.charts.js for more settings. </script> </div> </section> </div> </div> <div class="row"> <div class="col-lg-6"> <h4 class="mb-0 mt-2 font-weight-bold text-dark">Circular Charts</h4> <p class="mb-3">Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values.</p> <div class="row"> <div class="col-md-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Easy Pie Chart</h2> <p class="card-subtitle">Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element.</p> </header> <div class="card-body"> <div class="row text-center"> <div class="col-lg-6"> <div class="circular-bar"> <div class="circular-bar-chart" data-percent="85" data-plugin-options='{ "barColor": "#0088CC", "delay": 300 }'> <strong>Design</strong> <label><span class="percent">85</span>%</label> </div> </div> </div> <div class="col-lg-6"> <div class="circular-bar"> <div class="circular-bar-chart" data-percent="60" data-plugin-options='{ "barColor": "#2BAAB1", "delay": 600 }'> <strong>HTML</strong> <label><span class="percent">60</span>%</label> </div> </div> </div> </div> </div> </section> </div> </div> </div> <div class="col-lg-6"> <h4 class="mb-0 mt-2 font-weight-bold text-dark">Gauge Charts</h4> <p class="mb-3">Animated Gauge Charts</p> <div class="row"> <div class="col-md-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Gauge</h2> <p class="card-subtitle">100% native and cool looking animated JavaScript/CoffeScript gauge.</p> </header> <div class="card-body"> <div class="row text-center"> <div class="col-lg-6"> <div class="gauge-chart"> <canvas id="gaugeBasic" width="180" height="110" data-plugin-options='{ "value": 2150, "maxValue": 3000 }'></canvas> <strong>Design</strong> <label id="gaugeBasicTextfield"></label> </div> </div> <div class="col-lg-6"> <div class="gauge-chart"> <canvas id="gaugeAlternative" width="180" height="110" data-plugin-options='{ "value": 1350, "maxValue": 3000 }'></canvas> <strong>HTML</strong> <label id="gaugeAlternativeTextfield"></label> </div> </div> </div> </div> </section> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <h4 class="mb-0 mt-4 font-weight-bold text-dark">Liquid Charts</h4> <p class="mb-3">Adds animated liquid charts.</p> <div class="row"> <div class="col-md-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Liquid Meter</h2> <p class="card-subtitle">Exclusive Plug-in by Okler Themes</p> </header> <div class="card-body"> <div class="row"> <div class="col-lg-6"> <meter min="0" max="100" value="35" id="meter"></meter> </div> <div class="col-lg-6"> <meter min="0" max="100" value="85" id="meterDark"></meter> </div> </div> </div> </section> </div> </div> </div> <div class="col-lg-6"> <h4 class="mb-0 mt-4 font-weight-bold text-dark">Small Inline Charts</h4> <p class="mb-3">Adds tiny charts called sparklines.</p> <div class="row"> <div class="col-md-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Sparklines</h2> <p class="card-subtitle">This jQuery plugin generates sparklines (small inline charts).</p> </header> <div class="card-body"> <div class="row"> <div class="col-xs-6 col-lg-4"> <div class="small-chart-wrapper"> <div class="small-chart" id="sparklineLine"></div> <div class="small-chart-info"> <label>Average</label> <strong>1567.89</strong> </div> <script type="text/javascript"> var sparklineLineData = [15, 16, 17, 19, 10, 15, 13, 12, 12, 14, 16, 17]; </script> </div> </div> <div class="col-xs-6 col-lg-4"> <div class="small-chart-wrapper"> <div class="small-chart" id="sparklineBar"></div> <div class="small-chart-info"> <label>Average</label> <strong>5000</strong> </div> <script type="text/javascript"> var sparklineBarData = [5, 6, 7, 2, 0, 4 , 2, 4, 2, 0, 4 , 2, 4, 2, 0, 4]; </script> </div> </div> <div class="col-xs-6 col-lg-4"> <div class="small-chart-wrapper"> <div class="small-chart" id="sparklineTristate"></div> <div class="small-chart-info"> <label>Average</label> <strong>1567.89</strong> </div> <script type="text/javascript"> var sparklineTristateData = [1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1]; </script> </div> </div> <div class="col-xs-6 col-lg-4"> <div class="small-chart-wrapper"> <div class="small-chart" id="sparklineDiscrete"></div> <div class="small-chart-info"> <label>Average</label> <strong>1567.89</strong> </div> <script type="text/javascript"> var sparklineDiscreteData = [5, 6, 7, 9, 10, 5, 3, 2, 2, 4, 6, 7]; </script> </div> </div> <div class="col-xs-6 col-lg-4"> <div class="small-chart-wrapper"> <div class="small-chart" id="sparklineBullet"></div> <div class="small-chart-info"> <label>Average</label> <strong>1567.89</strong> </div> <script type="text/javascript"> var sparklineBulletData = [10, 12, 12, 9, 7]; </script> </div> </div> <div class="col-xs-6 col-lg-4"> <div class="small-chart-wrapper"> <div class="small-chart text-center" id="sparklinePie"></div> <div class="small-chart-info"> <label>Average</label> <strong>1567.89</strong> </div> <script type="text/javascript"> var sparklinePieData = [1, 1, 2]; </script> </div> </div> </div> </div> </section> </div> </div> </div> </div> <h4 class="mb-0 mt-5 pt-4">Chartist - Simple Responsive Charts</h4> <p class="mb-3">You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included.</p> <div class="row"> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Line Chart: Simple Chart</h2> </header> <div class="card-body"> <div id="ChartistSimpleLineChart" class="ct-chart ct-perfect-fourth ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Line Chart: Scatter Diagram With Responsive Settings</h2> </header> <div class="card-body"> <div id="ChartistLineScatterDiagramWithResponsiveSettings" class="ct-chart ct-perfect-fourth ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> </div> <div class="row"> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Line Chart: With Tooltips</h2> </header> <div class="card-body"> <div id="ChartistLineChartWithTooltips" class="ct-chart ct-perfect-fourth ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Line Chart: With Area</h2> </header> <div class="card-body"> <div id="ChartistLineChartWithArea" class="ct-chart ct-perfect-fourth ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> </div> <div class="row"> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Line Chart: Bi-Polar Chart With Area Only</h2> </header> <div class="card-body"> <div id="ChartistBiPolarLineChartWithAreaOnly" class="ct-chart ct-perfect-fourth ct-golden-section"></div> </div> </section> </div> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Line Chart: Using Events to Replace Graphics</h2> </header> <div class="card-body"> <div id="ChartistEventsToReplaceGraphics" class="ct-chart ct-perfect-fourth ct-golden-section"></div> </div> </section> </div> </div> <div class="row"> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Line Chart: Interpolation / Smoothing</h2> </header> <div class="card-body"> <div id="ChartistLineInterpolationSmoothing" class="ct-chart ct-perfect-fourth ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Bar Chart: Bi-Polar Chart</h2> </header> <div class="card-body"> <div id="ChartistBiPolarBarChart" class="ct-chart ct-perfect-fourth ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> </div> <div class="row"> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Bar Chart: Overlapping On Mobile</h2> </header> <div class="card-body"> <div id="ChartistOverlappingBarsOnMobile" class="ct-chart ct-perfect-fourth ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Bar Chart: Add Peak Circles Using Draw Events</h2> </header> <div class="card-body"> <div id="ChartistAddPeakCirclesUsingDrawEvents" class="ct-chart ct-perfect-fourth ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> </div> <div class="row"> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Bar Chart: Multi-Line Labels</h2> </header> <div class="card-body"> <div id="ChartistMultiLineLabels" class="ct-chart ct-perfect-fourth ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Bar Chart: Stacked Chart</h2> </header> <div class="card-body"> <div id="ChartistStackedChart" class="ct-chart ct-perfect-fourth ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> </div> <div class="row"> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Bar Chart: Horizontal Chart</h2> </header> <div class="card-body"> <div id="ChartistHorizontalChart" class="ct-chart ct-perfect-fourth ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Bar Chart: Extreme Responsive Configuration</h2> </header> <div class="card-body"> <div id="ChartistExtremeResponsiveConfiguration" class="ct-chart ct-perfect-fourth ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> </div> <div class="row"> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Pie Chart: Simple Chart</h2> </header> <div class="card-body"> <div id="ChartistSimplePieChart" class="ct-chart ct-perfect-fourth ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Pie Chart: With Custom Labels</h2> </header> <div class="card-body"> <div id="ChartistPieChartWithCustomLabels" class="ct-chart ct-perfect-fourth ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> </div> <div class="row"> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Gauge Chart</h2> </header> <div class="card-body"> <div id="ChartistGaugeChart" class="ct-chart ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> <div class="col-lg-6"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">CSS Animation</h2> </header> <div class="card-body"> <div id="ChartistCSSAnimation" class="ct-chart ct-perfect-fourth ct-golden-section"></div> <!-- See: js/examples/examples.charts.js for the example code. --> </div> </section> </div> </div> <!-- end: page --> </section> </div> <aside id="sidebar-right" class="sidebar-right"> <div class="nano"> <div class="nano-content"> <a href="#" class="mobile-close d-md-none"> Collapse <i class="fas fa-chevron-right"></i> </a> <div class="sidebar-right-wrapper"> <div class="sidebar-widget widget-calendar"> <h6>Upcoming Tasks</h6> <div data-plugin-datepicker="" data-plugin-skin="dark"></div> <ul> <li> <time datetime="2021-04-19T00:00+00:00">04/19/2021</time> <span>Company Meeting</span> </li> </ul> </div> <div class="sidebar-widget widget-friends"> <h6>Friends</h6> <ul> <li class="status-online"> <figure class="profile-picture"> <img src="img/!sample-user.jpg" alt="Joseph Doe" class="rounded-circle"> </figure> <div class="profile-info"> <span class="name">Joseph Doe Junior</span> <span class="title">Hey, how are you?</span> </div> </li> <li class="status-online"> <figure class="profile-picture"> <img src="img/!sample-user.jpg" alt="Joseph Doe" class="rounded-circle"> </figure> <div class="profile-info"> <span class="name">Joseph Doe Junior</span> <span class="title">Hey, how are you?</span> </div> </li> <li class="status-offline"> <figure class="profile-picture"> <img src="img/!sample-user.jpg" alt="Joseph Doe" class="rounded-circle"> </figure> <div class="profile-info"> <span class="name">Joseph Doe Junior</span> <span class="title">Hey, how are you?</span> </div> </li> <li class="status-offline"> <figure class="profile-picture"> <img src="img/!sample-user.jpg" alt="Joseph Doe" class="rounded-circle"> </figure> <div class="profile-info"> <span class="name">Joseph Doe Junior</span> <span class="title">Hey, how are you?</span> </div> </li> </ul> </div> </div> </div> </div> </aside> </section> <!-- Vendor --> <script src="vendor/jquery/jquery.js"></script> <script src="vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script> <script src="vendor/jquery-cookie/jquery.cookie.js"></script> <script src="master/style-switcher/style.switcher.js"></script> <script src="vendor/popper/umd/popper.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> <script src="vendor/common/common.js"></script> <script src="vendor/nanoscroller/nanoscroller.js"></script> <script src="vendor/magnific-popup/jquery.magnific-popup.js"></script> <script src="vendor/jquery-placeholder/jquery.placeholder.js"></script> <!-- Specific Page Vendor --> <script src="vendor/jquery-appear/jquery.appear.js"></script> <script src="vendor/jquery.easy-pie-chart/jquery.easypiechart.js"></script> <script src="vendor/flot/jquery.flot.js"></script> <script src="vendor/flot.tooltip/jquery.flot.tooltip.js"></script> <script src="vendor/flot/jquery.flot.pie.js"></script> <script src="vendor/flot/jquery.flot.categories.js"></script> <script src="vendor/flot/jquery.flot.resize.js"></script> <script src="vendor/jquery-sparkline/jquery.sparkline.js"></script> <script src="vendor/raphael/raphael.js"></script> <script src="vendor/morris/morris.js"></script> <script src="vendor/gauge/gauge.js"></script> <script src="vendor/snap.svg/snap.svg.js"></script> <script src="vendor/liquid-meter/liquid.meter.js"></script> <script src="vendor/chartist/chartist.js"></script> <!-- Theme Base, Components and Settings --> <script src="js/theme.js"></script> <!-- Theme Custom --> <script src="js/custom.js"></script> <!-- Theme Initialization Files --> <script src="js/theme.init.js"></script> <!-- Analytics to Track Preview Website --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-42715764-8', 'auto'); ga('send', 'pageview'); </script> <!-- Examples --> <style> #ChartistCSSAnimation .ct-series.ct-series-a .ct-line { fill: none; stroke-width: 4px; stroke-dasharray: 5px; -webkit-animation: dashoffset 1s linear infinite; -moz-animation: dashoffset 1s linear infinite; animation: dashoffset 1s linear infinite; } #ChartistCSSAnimation .ct-series.ct-series-b .ct-point { -webkit-animation: bouncing-stroke 0.5s ease infinite; -moz-animation: bouncing-stroke 0.5s ease infinite; animation: bouncing-stroke 0.5s ease infinite; } #ChartistCSSAnimation .ct-series.ct-series-b .ct-line { fill: none; stroke-width: 3px; } #ChartistCSSAnimation .ct-series.ct-series-c .ct-point { -webkit-animation: exploding-stroke 1s ease-out infinite; -moz-animation: exploding-stroke 1s ease-out infinite; animation: exploding-stroke 1s ease-out infinite; } #ChartistCSSAnimation .ct-series.ct-series-c .ct-line { fill: none; stroke-width: 2px; stroke-dasharray: 40px 3px; } @-webkit-keyframes dashoffset { 0% { stroke-dashoffset: 0px; } 100% { stroke-dashoffset: -20px; }; } @-moz-keyframes dashoffset { 0% { stroke-dashoffset: 0px; } 100% { stroke-dashoffset: -20px; }; } @keyframes dashoffset { 0% { stroke-dashoffset: 0px; } 100% { stroke-dashoffset: -20px; }; } @-webkit-keyframes bouncing-stroke { 0% { stroke-width: 5px; } 50% { stroke-width: 10px; } 100% { stroke-width: 5px; }; } @-moz-keyframes bouncing-stroke { 0% { stroke-width: 5px; } 50% { stroke-width: 10px; } 100% { stroke-width: 5px; }; } @keyframes bouncing-stroke { 0% { stroke-width: 5px; } 50% { stroke-width: 10px; } 100% { stroke-width: 5px; }; } @-webkit-keyframes exploding-stroke { 0% { stroke-width: 2px; opacity: 1; } 100% { stroke-width: 20px; opacity: 0; }; } @-moz-keyframes exploding-stroke { 0% { stroke-width: 2px; opacity: 1; } 100% { stroke-width: 20px; opacity: 0; }; } @keyframes exploding-stroke { 0% { stroke-width: 2px; opacity: 1; } 100% { stroke-width: 20px; opacity: 0; }; } </style> <script src="js/examples/examples.charts.js"></script> </body> </html>