text: <!DOCTYPE html>
  <html class="no-js css-menubar" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="description" content="bootstrap material admin template">
    <meta name="author" content="">
  
    <title>Chartist | Remark Material Admin Template</title>
  
    <link rel="apple-touch-icon" href="../assets/images/apple-touch-icon.png">
    <link rel="shortcut icon" href="../assets/images/favicon.ico">
  
    <!-- Stylesheets -->
    <link rel="stylesheet" href="../../global/css/bootstrap.min.css?v2.1.0">
    <link rel="stylesheet" href="../../global/css/bootstrap-extend.min.css?v2.1.0">
    <link rel="stylesheet" href="../assets/css/site.min.css?v2.1.0">
  
    <!-- Skin tools (demo site only) -->
    <link rel="stylesheet" href="../../global/css/skintools.min.css?v2.1.0">
    <script src="../assets/js/sections/skintools.min.js"></script>
  
    <!-- Plugins -->
    <link rel="stylesheet" href="../../global/vendor/animsition/animsition.min.css?v2.1.0">
    <link rel="stylesheet" href="../../global/vendor/asscrollable/asScrollable.min.css?v2.1.0">
    <link rel="stylesheet" href="../../global/vendor/switchery/switchery.min.css?v2.1.0">
    <link rel="stylesheet" href="../../global/vendor/intro-js/introjs.min.css?v2.1.0">
    <link rel="stylesheet" href="../../global/vendor/slidepanel/slidePanel.min.css?v2.1.0">
    <link rel="stylesheet" href="../../global/vendor/flag-icon-css/flag-icon.min.css?v2.1.0">
    <link rel="stylesheet" href="../../global/vendor/waves/waves.min.css?v2.1.0">
  
    <!-- Plugins For This Page -->
    <link rel="stylesheet" href="../../global/vendor/chartist-js/chartist.min.css?v2.1.0">
    <link rel="stylesheet" href="../../global/vendor/chartist-plugin-tooltip/chartist-plugin-tooltip.min.css?v2.1.0">
  
    <!-- Page -->
    <link rel="stylesheet" href="../assets/examples/css/charts/chartist.min.css?v2.1.0">
  
    <!-- Fonts -->
    <link rel="stylesheet" href="../../global/fonts/material-design/material-design.min.css?v2.1.0">
    <link rel="stylesheet" href="../../global/fonts/brand-icons/brand-icons.min.css?v2.1.0">
  
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700'>
  
  
    <!--[if lt IE 9]>
      <script src="../../global/vendor/html5shiv/html5shiv.min.js"></script>
      <![endif]-->
  
    <!--[if lt IE 10]>
      <script src="../../global/vendor/media-match/media.match.min.js"></script>
      <script src="../../global/vendor/respond/respond.min.js"></script>
      <![endif]-->
  
    <!-- Scripts -->
    <script src="../../global/vendor/modernizr/modernizr.min.js"></script>
    <script src="../../global/vendor/breakpoints/breakpoints.min.js"></script>
    <script>
      Breakpoints();
    </script>
  </head>
  <body>
    <!--[if lt IE 8]>
          <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
      <![endif]-->
  
    <nav class="site-navbar navbar navbar-inverse navbar-fixed-top navbar-mega" role="navigation">
      <div class="navbar-container container-fluid">
        <!-- Navbar Collapse -->
        <div class="navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
          <!-- Navbar Toolbar -->
          <ul class="nav navbar-toolbar">
            <li id="toggleMenubar">
              <a data-toggle="menubar" href="#" role="button">
                <i class="icon hamburger hamburger-arrow-left">
                    <span class="sr-only">Toggle menubar</span>
                    <span class="hamburger-bar"></span>
                  </i>
              </a>
            </li>
            <li>
              <a class="icon md-search" data-toggle="collapse" href="#site-navbar-search" role="button">
                <span class="sr-only">Toggle Search</span>
              </a>
            </li>
          </ul>
          <!-- End Navbar Toolbar -->
  
          <!-- Navbar Toolbar Right -->
          <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
            <li class="dropdown">
              <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false"
              data-animation="scale-up" role="button">
                <i class="icon md-notifications" aria-hidden="true"></i>
                <span class="badge badge-danger up">5</span>
              </a>
              <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                <li class="dropdown-menu-header" role="presentation">
                  <h5>NOTIFICATIONS</h5>
                  <span class="label label-round label-danger">New 5</span>
                </li>
  
                <li class="list-group" role="presentation">
                  <div data-role="container">
                    <div data-role="content">
                      <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                        <div class="media">
                          <div class="media-left padding-right-10">
                            <i class="icon md-receipt bg-red-600 white icon-circle" aria-hidden="true"></i>
                          </div>
                          <div class="media-body">
                            <h6 class="media-heading">A new order has been placed</h6>
                            <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">5 hours ago</time>
                          </div>
                        </div>
                      </a>
                      <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                        <div class="media">
                          <div class="media-left padding-right-10">
                            <i class="icon md-account bg-green-600 white icon-circle" aria-hidden="true"></i>
                          </div>
                          <div class="media-body">
                            <h6 class="media-heading">Completed the task</h6>
                            <time class="media-meta" datetime="2015-06-11T18:29:20+08:00">2 days ago</time>
                          </div>
                        </div>
                      </a>
                      <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                        <div class="media">
                          <div class="media-left padding-right-10">
                            <i class="icon md-settings bg-red-600 white icon-circle" aria-hidden="true"></i>
                          </div>
                          <div class="media-body">
                            <h6 class="media-heading">Settings updated</h6>
                            <time class="media-meta" datetime="2015-06-11T14:05:00+08:00">2 days ago</time>
                          </div>
                        </div>
                      </a>
                      <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                        <div class="media">
                          <div class="media-left padding-right-10">
                            <i class="icon md-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>
                          </div>
                          <div class="media-body">
                            <h6 class="media-heading">Event started</h6>
                            <time class="media-meta" datetime="2015-06-10T13:50:18+08:00">3 days ago</time>
                          </div>
                        </div>
                      </a>
                      <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                        <div class="media">
                          <div class="media-left padding-right-10">
                            <i class="icon md-comment bg-orange-600 white icon-circle" aria-hidden="true"></i>
                          </div>
                          <div class="media-body">
                            <h6 class="media-heading">Message received</h6>
                            <time class="media-meta" datetime="2015-06-10T12:34:48+08:00">3 days ago</time>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                </li>
                <li class="dropdown-menu-footer" role="presentation">
                  <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                    <i class="icon md-settings" aria-hidden="true"></i>
                  </a>
                  <a href="javascript:void(0)" role="menuitem">
                      All notifications
                    </a>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a data-toggle="dropdown" href="javascript:void(0)" title="Messages" aria-expanded="false"
              data-animation="scale-up" role="button">
                <i class="icon md-email" aria-hidden="true"></i>
                <span class="badge badge-info up">3</span>
              </a>
              <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                <li class="dropdown-menu-header" role="presentation">
                  <h5>MESSAGES</h5>
                  <span class="label label-round label-info">New 3</span>
                </li>
  
                <li class="list-group" role="presentation">
                  <div data-role="container">
                    <div data-role="content">
                      <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                        <div class="media">
                          <div class="media-left padding-right-10">
                            <span class="avatar avatar-sm avatar-online">
                              <img src="../../global/portraits/2.jpg" alt="..." />
                              <i></i>
                            </span>
                          </div>
                          <div class="media-body">
                            <h6 class="media-heading">Mary Adams</h6>
                            <div class="media-meta">
                              <time datetime="2015-06-17T20:22:05+08:00">30 minutes ago</time>
                            </div>
                            <div class="media-detail">Anyways, i would like just do it</div>
                          </div>
                        </div>
                      </a>
                      <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                        <div class="media">
                          <div class="media-left padding-right-10">
                            <span class="avatar avatar-sm avatar-off">
                              <img src="../../global/portraits/3.jpg" alt="..." />
                              <i></i>
                            </span>
                          </div>
                          <div class="media-body">
                            <h6 class="media-heading">Caleb Richards</h6>
                            <div class="media-meta">
                              <time datetime="2015-06-17T12:30:30+08:00">12 hours ago</time>
                            </div>
                            <div class="media-detail">I checheck the document. But there seems</div>
                          </div>
                        </div>
                      </a>
                      <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                        <div class="media">
                          <div class="media-left padding-right-10">
                            <span class="avatar avatar-sm avatar-busy">
                              <img src="../../global/portraits/4.jpg" alt="..." />
                              <i></i>
                            </span>
                          </div>
                          <div class="media-body">
                            <h6 class="media-heading">June Lane</h6>
                            <div class="media-meta">
                              <time datetime="2015-06-16T18:38:40+08:00">2 days ago</time>
                            </div>
                            <div class="media-detail">Lorem ipsum Id consectetur et minim</div>
                          </div>
                        </div>
                      </a>
                      <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                        <div class="media">
                          <div class="media-left padding-right-10">
                            <span class="avatar avatar-sm avatar-away">
                              <img src="../../global/portraits/5.jpg" alt="..." />
                              <i></i>
                            </span>
                          </div>
                          <div class="media-body">
                            <h6 class="media-heading">Edward Fletcher</h6>
                            <div class="media-meta">
                              <time datetime="2015-06-15T20:34:48+08:00">3 days ago</time>
                            </div>
                            <div class="media-detail">Dolor et irure cupidatat commodo nostrud nostrud.</div>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                </li>
                <li class="dropdown-menu-footer" role="presentation">
                  <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                    <i class="icon md-settings" aria-hidden="true"></i>
                  </a>
                  <a href="javascript:void(0)" role="menuitem">
                      See all messages
                    </a>
                </li>
              </ul>
            </li>
            <li id="toggleChat">
              <a data-toggle="site-sidebar" href="javascript:void(0)" title="Chat" data-url="../site-sidebar.tpl">
                <i class="icon md-comment" aria-hidden="true"></i>
              </a>
            </li>
          </ul>
          <!-- End Navbar Toolbar Right -->
  
          <div class="navbar-brand navbar-brand-center">
            <a href="../index.html">
              <img class="navbar-brand-logo" src="../assets/images/logo.png" title="Remark">
            </a>
          </div>
        </div>
        <!-- End Navbar Collapse -->
  
        <!-- Site Navbar Seach -->
        <div class="collapse navbar-search-overlap" id="site-navbar-search">
          <form role="search">
            <div class="form-group">
              <div class="input-search">
                <i class="input-search-icon md-search" aria-hidden="true"></i>
                <input type="text" class="form-control" name="site-search" placeholder="Search...">
                <button type="button" class="input-search-close icon md-close" data-target="#site-navbar-search"
                data-toggle="collapse" aria-label="Close"></button>
              </div>
            </div>
          </form>
        </div>
        <!-- End Site Navbar Seach -->
      </div>
    </nav>
    <div class="site-menubar">
      <div class="site-menubar-header">
        <div class="cover overlay">
          <img class="cover-image" src="../assets/examples/images/dashboard-header.jpg" alt="...">
          <div class="overlay-panel vertical-align overlay-background">
            <div class="vertical-align-middle">
              <a class="avatar avatar-lg" href="javascript:void(0)">
                <img src="../../global/portraits/1.jpg" alt="">
              </a>
              <div class="site-menubar-info">
                <h5 class="site-menubar-user">Machi</h5>
                <p class="site-menubar-email">machidesign@gmail.com</p>
              </div>
            </div>
          </div>
        </div>
      </div>
  
      <div class="site-menubar-body">
        <div>
          <div>
            <ul class="site-menu">
              <li class="site-menu-item">
                <a class="animsition-link" href="../index.html">
                  <i class="site-menu-icon md-view-dashboard" aria-hidden="true"></i>
                  <span class="site-menu-title">Dashboard</span>
                </a>
              </li>
              <li class="site-menu-item has-sub">
                <a href="javascript:void(0)">
                  <i class="site-menu-icon md-view-compact" aria-hidden="true"></i>
                  <span class="site-menu-title">Layouts</span>
                  <span class="site-menu-arrow"></span>
                </a>
                <ul class="site-menu-sub">
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../layouts/menubar-fold.html">
                      <span class="site-menu-title">Menubar Fold</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../layouts/menubar-disable-hover.html">
                      <span class="site-menu-title">Menubar Disable Hover</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../layouts/menubar-open.html">
                      <span class="site-menu-title">Menubar Open</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../layouts/menubar-push.html">
                      <span class="site-menu-title">Menubar Push</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../layouts/grids.html">
                      <span class="site-menu-title">Grid Scaffolding</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../layouts/layout-grid.html">
                      <span class="site-menu-title">Layout Grid</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../layouts/headers.html">
                      <span class="site-menu-title">Different Headers</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../layouts/panel-transition.html">
                      <span class="site-menu-title">Panel Transition</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../layouts/boxed.html">
                      <span class="site-menu-title">Boxed Layout</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../layouts/two-columns.html">
                      <span class="site-menu-title">Two Columns</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="site-menu-item has-sub">
                <a href="javascript:void(0)">
                  <i class="site-menu-icon md-google-pages" aria-hidden="true"></i>
                  <span class="site-menu-title">Pages</span>
                  <span class="site-menu-arrow"></span>
                </a>
                <ul class="site-menu-sub">
                  <li class="site-menu-item has-sub">
                    <a href="javascript:void(0)">
                      <span class="site-menu-title">Errors</span>
                      <span class="site-menu-arrow"></span>
                    </a>
                    <ul class="site-menu-sub">
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../pages/error-400.html">
                          <span class="site-menu-title">400</span>
                        </a>
                      </li>
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../pages/error-403.html">
                          <span class="site-menu-title">403</span>
                        </a>
                      </li>
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../pages/error-404.html">
                          <span class="site-menu-title">404</span>
                        </a>
                      </li>
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../pages/error-500.html">
                          <span class="site-menu-title">500</span>
                        </a>
                      </li>
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../pages/error-503.html">
                          <span class="site-menu-title">503</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/faq.html">
                      <span class="site-menu-title">FAQ</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/gallery.html">
                      <span class="site-menu-title">Gallery</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/gallery-grid.html">
                      <span class="site-menu-title">Gallery Grid</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/search-result.html">
                      <span class="site-menu-title">Search Result</span>
                    </a>
                  </li>
                  <li class="site-menu-item has-sub">
                    <a href="javascript:void(0)">
                      <span class="site-menu-title">Maps</span>
                      <span class="site-menu-arrow"></span>
                    </a>
                    <ul class="site-menu-sub">
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../pages/map-google.html">
                          <span class="site-menu-title">Google Maps</span>
                        </a>
                      </li>
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../pages/map-vector.html">
                          <span class="site-menu-title">Vector Maps</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/maintenance.html">
                      <span class="site-menu-title">Maintenance</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/forgot-password.html">
                      <span class="site-menu-title">Forgot Password</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/lockscreen.html">
                      <span class="site-menu-title">Lockscreen</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/login.html">
                      <span class="site-menu-title">Login</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/register.html">
                      <span class="site-menu-title">Register</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/login-v2.html">
                      <span class="site-menu-title">Login V2</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/register-v2.html">
                      <span class="site-menu-title">Register V2</span>
                      <div class="site-menu-label">
                        <span class="label label-info label-round">new</span>
                      </div>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/login-v3.html">
                      <span class="site-menu-title">Login V3</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/register-v3.html">
                      <span class="site-menu-title">Register V3</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/user.html">
                      <span class="site-menu-title">User List</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/invoice.html">
                      <span class="site-menu-title">Invoice</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/blank.html">
                      <span class="site-menu-title">Blank Page</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/email.html">
                      <span class="site-menu-title">Email</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/code-editor.html">
                      <span class="site-menu-title">Code Editor</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/profile.html">
                      <span class="site-menu-title">Profile</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../pages/site-map.html">
                      <span class="site-menu-title">Sitemap</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="site-menu-item has-sub">
                <a href="javascript:void(0)">
                  <i class="site-menu-icon md-palette" aria-hidden="true"></i>
                  <span class="site-menu-title">Basic UI</span>
                  <span class="site-menu-arrow"></span>
                </a>
                <ul class="site-menu-sub">
                  <li class="site-menu-item has-sub">
                    <a href="javascript:void(0)">
                      <span class="site-menu-title">Panel</span>
                      <span class="site-menu-arrow"></span>
                    </a>
                    <ul class="site-menu-sub">
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../uikit/panel-structure.html">
                          <span class="site-menu-title">Panel Structure</span>
                        </a>
                      </li>
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../uikit/panel-actions.html">
                          <span class="site-menu-title">Panel Actions</span>
                        </a>
                      </li>
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../uikit/panel-portlets.html">
                          <span class="site-menu-title">Panel Portlets</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../uikit/buttons.html">
                      <span class="site-menu-title">Buttons</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../uikit/dropdowns.html">
                      <span class="site-menu-title">Dropdowns</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../uikit/icons.html">
                      <span class="site-menu-title">Icons</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../uikit/list.html">
                      <span class="site-menu-title">List</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../uikit/tooltip-popover.html">
                      <span class="site-menu-title">Tooltip &amp; Popover</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../uikit/modals.html">
                      <span class="site-menu-title">Modals</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../uikit/tabs-accordions.html">
                      <span class="site-menu-title">Tabs &amp; Accordions</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../uikit/images.html">
                      <span class="site-menu-title">Images</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../uikit/badges-labels.html">
                      <span class="site-menu-title">Badges &amp; Labels</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../uikit/progress-bars.html">
                      <span class="site-menu-title">Progress Bars</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../uikit/carousel.html">
                      <span class="site-menu-title">Carousel</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../uikit/typography.html">
                      <span class="site-menu-title">Typography</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../uikit/colors.html">
                      <span class="site-menu-title">Colors</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../uikit/utilities.html">
                      <span class="site-menu-title">Utilties</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="site-menu-item has-sub">
                <a href="javascript:void(0)">
                  <i class="site-menu-icon md-format-color-fill" aria-hidden="true"></i>
                  <span class="site-menu-title">Advanced UI</span>
                  <span class="site-menu-arrow"></span>
                </a>
                <ul class="site-menu-sub">
                  <li class="site-menu-item hidden-xs site-tour-trigger">
                    <a href="javascript:void(0)">
                      <span class="site-menu-title">Tour</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../advanced/animation.html">
                      <span class="site-menu-title">Animation</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../advanced/highlight.html">
                      <span class="site-menu-title">Highlight</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../advanced/lightbox.html">
                      <span class="site-menu-title">Lightbox</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../advanced/scrollable.html">
                      <span class="site-menu-title">Scrollable</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../advanced/rating.html">
                      <span class="site-menu-title">Rating</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../advanced/context-menu.html">
                      <span class="site-menu-title">Context Menu</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../advanced/alertify.html">
                      <span class="site-menu-title">Alertify</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../advanced/masonry.html">
                      <span class="site-menu-title">Masonry</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../advanced/treeview.html">
                      <span class="site-menu-title">Treeview</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../advanced/toastr.html">
                      <span class="site-menu-title">Toastr</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../advanced/maps-vector.html">
                      <span class="site-menu-title">Vector Maps</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../advanced/maps-google.html">
                      <span class="site-menu-title">Google Maps</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../advanced/sortable-nestable.html">
                      <span class="site-menu-title">Sortable &amp; Nestable</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../advanced/bootbox-sweetalert.html">
                      <span class="site-menu-title">Bootbox &amp; Sweetalert</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="site-menu-item has-sub">
                <a href="javascript:void(0)">
                  <i class="site-menu-icon md-puzzle-piece" aria-hidden="true"></i>
                  <span class="site-menu-title">Structure</span>
                  <span class="site-menu-arrow"></span>
                </a>
                <ul class="site-menu-sub">
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/alerts.html">
                      <span class="site-menu-title">Alerts</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/ribbon.html">
                      <span class="site-menu-title">Ribbon</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/pricing-tables.html">
                      <span class="site-menu-title">Pricing Tables</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/overlay.html">
                      <span class="site-menu-title">Overlay</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/cover.html">
                      <span class="site-menu-title">Cover</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/timeline-simple.html">
                      <span class="site-menu-title">Simple Timeline</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/timeline.html">
                      <span class="site-menu-title">Timeline</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/step.html">
                      <span class="site-menu-title">Step</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/comments.html">
                      <span class="site-menu-title">Comments</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/media.html">
                      <span class="site-menu-title">Media</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/chat.html">
                      <span class="site-menu-title">Chat</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/testimonials.html">
                      <span class="site-menu-title">Testimonials</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/nav.html">
                      <span class="site-menu-title">Nav</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/navbars.html">
                      <span class="site-menu-title">Navbars</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/blockquotes.html">
                      <span class="site-menu-title">Blockquotes</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/pagination.html">
                      <span class="site-menu-title">Pagination</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../structure/breadcrumbs.html">
                      <span class="site-menu-title">Breadcrumbs</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="site-menu-item has-sub">
                <a href="javascript:void(0)">
                  <i class="site-menu-icon md-widgets" aria-hidden="true"></i>
                  <span class="site-menu-title">Widgets</span>
                  <span class="site-menu-arrow"></span>
                </a>
                <ul class="site-menu-sub">
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../widgets/statistics.html">
                      <span class="site-menu-title">Statistics Widgets</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../widgets/data.html">
                      <span class="site-menu-title">Data Widgets</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../widgets/blog.html">
                      <span class="site-menu-title">Blog Widgets</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../widgets/chart.html">
                      <span class="site-menu-title">Chart Widgets</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../widgets/social.html">
                      <span class="site-menu-title">Social Widgets</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../widgets/weather.html">
                      <span class="site-menu-title">Weather Widgets</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="site-menu-item has-sub">
                <a href="javascript:void(0)">
                  <i class="site-menu-icon md-comment-alt-text" aria-hidden="true"></i>
                  <span class="site-menu-title">Forms</span>
                  <span class="site-menu-arrow"></span>
                </a>
                <ul class="site-menu-sub">
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../forms/general.html">
                      <span class="site-menu-title">General Elements</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../forms/material.html">
                      <span class="site-menu-title">Material Elements</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../forms/advanced.html">
                      <span class="site-menu-title">Advanced Elements</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../forms/layouts.html">
                      <span class="site-menu-title">Form Layouts</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../forms/wizard.html">
                      <span class="site-menu-title">Form Wizard</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../forms/validation.html">
                      <span class="site-menu-title">Form Validation</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../forms/masks.html">
                      <span class="site-menu-title">Form Masks</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../forms/editable.html">
                      <span class="site-menu-title">Form Editable</span>
                    </a>
                  </li>
                  <li class="site-menu-item has-sub">
                    <a href="javascript:void(0)">
                      <span class="site-menu-title">Editors</span>
                      <span class="site-menu-arrow"></span>
                    </a>
                    <ul class="site-menu-sub">
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../forms/editor-summernote.html">
                          <span class="site-menu-title">Summernote</span>
                        </a>
                      </li>
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../forms/editor-markdown.html">
                          <span class="site-menu-title">Markdown</span>
                        </a>
                      </li>
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../forms/editor-ace.html">
                          <span class="site-menu-title">Ace Editor</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../forms/image-cropping.html">
                      <span class="site-menu-title">Image Cropping</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../forms/file-uploads.html">
                      <span class="site-menu-title">File Uploads</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="site-menu-item has-sub">
                <a href="javascript:void(0)">
                  <i class="site-menu-icon md-border-all" aria-hidden="true"></i>
                  <span class="site-menu-title">Tables</span>
                  <span class="site-menu-arrow"></span>
                </a>
                <ul class="site-menu-sub">
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../tables/basic.html">
                      <span class="site-menu-title">Basic Tables</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../tables/bootstrap.html">
                      <span class="site-menu-title">Bootstrap Tables</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../tables/floatthead.html">
                      <span class="site-menu-title">floatThead</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../tables/responsive.html">
                      <span class="site-menu-title">Responsive Tables</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../tables/editable.html">
                      <span class="site-menu-title">Editable Tables</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../tables/jsgrid.html">
                      <span class="site-menu-title">jsGrid</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../tables/footable.html">
                      <span class="site-menu-title">FooTable</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../tables/datatable.html">
                      <span class="site-menu-title">DataTables</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="site-menu-item has-sub active">
                <a href="javascript:void(0)">
                  <i class="site-menu-icon md-chart" aria-hidden="true"></i>
                  <span class="site-menu-title">Chart</span>
                  <span class="site-menu-arrow"></span>
                </a>
                <ul class="site-menu-sub">
                  <li class="site-menu-item">
                    <a class="animsition-link" href="chartjs.html">
                      <span class="site-menu-title">Chart.js</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="gauges.html">
                      <span class="site-menu-title">Gauges</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="flot.html">
                      <span class="site-menu-title">Flot</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="peity.html">
                      <span class="site-menu-title">Peity</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="sparkline.html">
                      <span class="site-menu-title">Sparkline</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="morris.html">
                      <span class="site-menu-title">Morris</span>
                    </a>
                  </li>
                  <li class="site-menu-item active">
                    <a class="animsition-link" href="chartist.html">
                      <span class="site-menu-title">Chartist.js</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="rickshaw.html">
                      <span class="site-menu-title">Rickshaw</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="pie-progress.html">
                      <span class="site-menu-title">Pie Progress</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="c3.html">
                      <span class="site-menu-title">C3</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="site-menu-item has-sub">
                <a href="javascript:void(0)">
                  <i class="site-menu-icon md-apps" aria-hidden="true"></i>
                  <span class="site-menu-title">Apps</span>
                  <span class="site-menu-arrow"></span>
                </a>
                <ul class="site-menu-sub">
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../apps/contacts/contacts.html">
                      <span class="site-menu-title">Contacts</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../apps/calendar/calendar.html">
                      <span class="site-menu-title">Calendar</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../apps/notebook/notebook.html">
                      <span class="site-menu-title">Notebook</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../apps/taskboard/taskboard.html">
                      <span class="site-menu-title">Taskboard</span>
                    </a>
                  </li>
                  <li class="site-menu-item has-sub">
                    <a href="javascript:void(0)">
                      <span class="site-menu-title">Documents</span>
                      <span class="site-menu-arrow"></span>
                    </a>
                    <ul class="site-menu-sub">
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../apps/documents/articles.html">
                          <span class="site-menu-title">Articles</span>
                        </a>
                      </li>
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../apps/documents/categories.html">
                          <span class="site-menu-title">Categories</span>
                        </a>
                      </li>
                      <li class="site-menu-item">
                        <a class="animsition-link" href="../apps/documents/article.html">
                          <span class="site-menu-title">Article</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../apps/forum/forum.html">
                      <span class="site-menu-title">Forum</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../apps/message/message.html">
                      <span class="site-menu-title">Message</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../apps/projects/projects.html">
                      <span class="site-menu-title">Projects</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../apps/mailbox/mailbox.html">
                      <span class="site-menu-title">Mailbox</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../apps/media/overview.html">
                      <span class="site-menu-title">Media</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../apps/work/work.html">
                      <span class="site-menu-title">Work</span>
                    </a>
                  </li>
                  <li class="site-menu-item">
                    <a class="animsition-link" href="../apps/location/location.html">
                      <span class="site-menu-title">Location</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="site-menu-item">
                <a class="animsition-link" href="../angular/index.html">
                  <i class="site-menu-icon bd-angular" aria-hidden="true"></i>
                  <span class="site-menu-title">Angular UI</span>
                  <div class="site-menu-label">
                    <span class="label label-danger label-round">new</span>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  
  
    <!-- Page -->
    <div class="page animsition">
      <div class="page-header">
        <h1 class="page-title">Chartist</h1>
        <ol class="breadcrumb">
          <li><a href="../index.html">Home</a></li>
          <li><a href="javascript:void(0)">Charts</a></li>
          <li class="active">Chartist</li>
        </ol>
        <div class="page-header-actions">
          <a class="btn btn-sm btn-primary btn-round" href="https://gionkunz.github.io/chartist-js/"
          target="_blank">
            <i class="icon md-link" aria-hidden="true"></i>
            <span class="hidden-xs">Official Website</span>
          </a>
        </div>
      </div>
      <div class="page-content container-fluid">
        <!-- Panel line css animation Chart -->
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">CSS ANIMATION</h3>
          </div>
          <div class="panel-body">
            <!-- Example css animation Chart -->
            <div class="example-wrap">
              <div class="row row-lg">
                <div class="col-lg-9">
                  <div class="example">
                    <div class="ct-chart ct-golden-section" id="exampleLineAnimation"></div>
                  </div>
                </div>
                <div class="col-lg-3">
                  <p class="margin-top-20">Specifying the style of your chart in CSS is not only cleaner but
                    also enables you to use awesome CSS animations and transitions
                    to be applied to your SVG elements!</p>
                </div>
              </div>
            </div>
            <!-- End Example css animation Chart -->
          </div>
        </div>
        <!-- End Panel Pie -->
        <!-- Panel Line -->
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Line</h3>
          </div>
          <div class="panel-body">
            <div class="row row-lg">
              <div class="col-md-6">
                <!-- Example Simple Line Chart -->
                <div class="example-wrap">
                  <h4 class="example-title">Simple Line Chart</h4>
                  <p>An example of a simple line chart with three series.</p>
                  <div class="example">
                    <div class="ct-chart" id="exampleSimpleLine"></div>
                  </div>
                </div>
                <!-- End Example Simple Line Chart -->
              </div>
  
              <div class="col-md-6">
                <!-- Example Line Scatter Diagram -->
                <div class="example-wrap">
                  <h4 class="example-title">Line Scatter Diagram</h4>
                  <p>This advanced example uses a line chart to draw a scatter diagram.
                    The data object is created with a functional style random mechanism.
                    There is a mobile first responsive configuration using the responsive
                    options to show less labels on small screens.</p>
                  <div class="example">
                    <div class="ct-chart" id="exampleLineScatter"></div>
                  </div>
                </div>
                <!-- End Example Line Scatter Diagram -->
              </div>
  
              <div class="col-md-6">
                <!-- Example Line Chart With Tooltips -->
                <div class="example-wrap">
                  <h4 class="example-title">Line Chart With Tooltips</h4>
                  <p> This is just one of many benefits of using inline-SVG and provides
                    you with the freedom you need in order to create exactly the
                    experience you're looking for.</p>
                  <div class="example">
                    <div class="ct-chart" id="exampleTooltipsLine"></div>
                  </div>
                </div>
                <!-- End Example Line Chart With Tooltips -->
              </div>
  
              <div class="col-md-6">
                <!-- Example Line Chart With Area -->
                <div class="example-wrap">
                  <h4 class="example-title">Line Chart With Area</h4>
                  <p>This chart uses the showArea option to draw line, dots but also
                    an area shape. Use the low option to specify a fixed lower bound
                    that will make the area expand. You can also use the areaBase
                    property to specify a data value that will be used to determine
                    the area shape base position (this is 0 by default).</p>
                  <div class="example">
                    <div class="ct-chart" id="exampleAreaLine"></div>
                  </div>
                </div>
                <!-- Example Line Chart With Area -->
              </div>
  
              <div class="col-md-6">
                <!-- Example Bi-Polar Line -->
                <div class="example-wrap">
                  <h4 class="example-title">Bi-Polar Line Chart With Area Only</h4>
                  <p>You can also only draw the area shapes of the line chart. Area
                    shapes will always be constructed around their areaBase (that
                    can be configured in the options) which also allows you to draw
                    nice bi-polar areas.</p>
                  <div class="example">
                    <div class="ct-chart" id="exampleOnlyArea"></div>
                  </div>
                </div>
                <!-- End Example Bi Polar Line -->
              </div>
  
              <div class="col-md-6">
                <!-- Example Advanced Smil Animations -->
                <div class="example-wrap">
                  <h4 class="example-title">Advanced Smil Animations</h4>
                  <p>Chartist provides a simple API to animate the elements on the Chart
                    using SMIL. Usually you can achieve most animation with CSS3
                    animations but in some cases you'd like to animate SVG properties
                    that are not available in CSS.</p>
                  <div class="example">
                    <div class="ct-chart" id="exampleLineAnimations"></div>
                  </div>
                </div>
                <!-- End Example Advanced Smil Animations -->
              </div>
  
              <div class="col-md-6">
                <!-- Example Svg Path Animation -->
                <div class="example-wrap margin-md-0">
                  <h4 class="example-title">Svg Path Animation</h4>
                  <p>Path animation is made easy with the SVG Path API. The API allows
                    you to modify complex SVG paths and transform them for different
                    animation morphing states.</p>
                  <div class="example">
                    <div class="ct-chart" id="examplePathAnimation"></div>
                  </div>
                </div>
                <!-- Example Svg Path Animation -->
              </div>
  
              <div class="col-md-6">
                <!-- Example Line Interpolation -->
                <div class="example-wrap">
                  <h4 class="example-title">Line Interpolation / Smoothing</h4>
                  <p>By default Chartist uses a cardinal spline algorithm to smooth
                    the lines. However, like all other things in Chartist, this can
                    be customized easily! </p>
                  <div class="example">
                    <div class="ct-chart" id="exampleSmoothingLine"></div>
                  </div>
                </div>
                <!-- End Example Line Interpolation -->
              </div>
            </div>
          </div>
        </div>
        <!-- End Panel Line -->
  
        <!-- Panel Bar -->
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Bar</h3>
          </div>
          <div class="panel-body">
            <div class="row row-lg">
              <div class="col-md-6">
                <!-- Example Bi-Polar Bar -->
                <div class="example-wrap">
                  <h4 class="example-title">Bi-Polar Bar Chart</h4>
                  <p>A bi-plar bar chart with a range limit set with low and high. There
                    is also an interpolation function used to skip every odd grid
                    line / label.</p>
                  <div class="example">
                    <div class="ct-chart" id="exampleBiPolarBar"></div>
                  </div>
                </div>
                <!-- End Example Bi Polar Bar -->
              </div>
  
              <div class="col-md-6">
                <!-- Example Overlapping Bars -->
                <div class="example-wrap">
                  <h4 class="example-title">Overlapping Bars On Mobile</h4>
                  <p>This example makes use of label interpolation and the seriesBarDistance
                    property that allows you to make bars overlap over each other.
                    This then can be used to use the available space on mobile better.
                    </p>
                  <div class="example">
                    <div class="ct-chart" id="exampleOverlappingBar"></div>
                  </div>
                </div>
                <!-- End Example Overlapping Bars -->
              </div>
  
              <div class="col-md-6">
                <!-- Example Add Peak Circles -->
                <div class="example-wrap">
                  <h4 class="example-title">Add Peak Circles Using The Draw Events</h4>
                  <p>With the help of draw events we are able to add a custom SVG shape
                    to the peak of our bars.</p>
                  <div class="example">
                    <div class="ct-chart" id="examplePeakCirclesBar"></div>
                  </div>
                </div>
                <!-- End Example Add Peak Circles -->
              </div>
  
              <div class="col-md-6">
                <!-- Example Multi-Line Labels -->
                <div class="example-wrap">
                  <h4 class="example-title">Multi-Line Labels</h4>
                  <p>Chartist will figure out if your browser supports foreignObject
                    and it will use them to create labels that re based on regular
                    HTML text elements. Multi-line and regular CSS styles are just
                    two of many benefits while using foreignObjects!</p>
                  <div class="example">
                    <div class="ct-chart" id="exampleMultiLabelsBar"></div>
                  </div>
                </div>
                <!-- End Example Multi Line Labels -->
              </div>
  
              <div class="col-md-6">
                <!-- Example Stacked Bar Chart -->
                <div class="example-wrap">
                  <h4 class="example-title">Stacked Bar Chart</h4>
                  <p>You can also set your bar chart to stack the series bars on top
                    of each other easily by using the stackBars property in your
                    configuration.</p>
                  <div class="example">
                    <div class="ct-chart" id="exampleStackedBar"></div>
                  </div>
                </div>
                <!-- End Example Stacked Bar Chart -->
              </div>
  
              <div class="col-md-6">
                <!-- Example Horizontal Bar -->
                <div class="example-wrap margin-md-0">
                  <h4 class="example-title">Horizontal Bar Chart</h4>
                  <p>Guess what! Creating horizontal bar charts is as simple as it can
                    get. There's no new chart type you need to learn, just passing
                    an additional option is enough.</p>
                  <div class="example">
                    <div class="ct-chart" id="exampleHorizontalBar"></div>
                  </div>
                </div>
                <!-- End Example Horizontal Bar -->
              </div>
  
              <div class="clearfix visible-md-block visible-lg-block"></div>
  
              <div class="col-md-6">
                <!-- Example Extreme Responsive -->
                <div class="example-wrap">
                  <h4 class="example-title">Extreme Responsive Configuration</h4>
                  <p>As all settings of a chart can be customized with the responsive
                    configuration override mechanism of Chartist, you can create
                    a chart that adopts to every media condition!</p>
                  <div class="example">
                    <div class="ct-chart" id="exampleResponsiveBar"></div>
                  </div>
                </div>
                <!-- End Example Extreme Responsive -->
              </div>
            </div>
          </div>
        </div>
        <!-- End Panel Bar -->
  
        <!-- Panel Pie -->
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Pie</h3>
          </div>
          <div class="panel-body">
            <div class="row row-lg">
              <div class="col-md-6">
                <!-- Example Simple Pie Chart -->
                <div class="example-wrap">
                  <h4 class="example-title">Simple Pie Chart</h4>
                  <p>A very simple pie chart with label interpolation to show percentage
                    instead of the actual data series value.</p>
                  <div class="example">
                    <div class="ct-chart" id="exampleSimplePie"></div>
                  </div>
                </div>
                <!-- End Example Simple Pie Chart -->
              </div>
  
              <div class="col-md-6">
                <!-- Example Simple Pie Chart Labels -->
                <div class="example-wrap margin-md-0">
                  <h4 class="example-title">Pie Chart With Custom Labels</h4>
                  <p>This pie chart is configured with custom labels specified in the
                    data object. On desktop we use the labelOffset property to offset
                    the labels from the center. Also labelDirection can be used to
                    control the direction in which the labels are expanding.</p>
                  <div class="example">
                    <div class="ct-chart" id="exampleLabelsPie"></div>
                  </div>
                </div>
                <!-- End Example Simple Pie Chart Labels -->
              </div>
  
              <div class="clearfix visible-md-block visible-lg-block"></div>
  
              <div class="col-md-6">
                <!-- Example Gauge Chart -->
                <div class="example-wrap">
                  <h4 class="example-title">Gauge Chart</h4>
                  <p>This pie chart uses donut, startAngle and total to draw a gauge
                    chart.</p>
                  <div class="example">
                    <div class="ct-chart" id="exampleGaugePie"></div>
                  </div>
                </div>
                <!-- End Example Gauge Chart -->
              </div>
            </div>
          </div>
        </div>
        <!-- End Panel Pie -->
      </div>
    </div>
    <!-- End Page -->
  
  
    <!-- Footer -->
    <footer class="site-footer">
      <div class="site-footer-legal">© 2015 <a href="http://themeforest.net/item/remark-responsive-bootstrap-admin-template/11989202">Remark</a></div>
      <div class="site-footer-right">
        Crafted with <i class="red-600 icon md-favorite"></i> by <a href="http://themeforest.net/user/amazingSurge">amazingSurge</a>
      </div>
    </footer>
    <!-- Core  -->
    <script src="../../global/vendor/jquery/jquery.min.js"></script>
    <script src="../../global/vendor/bootstrap/bootstrap.min.js"></script>
    <script src="../../global/vendor/animsition/animsition.min.js"></script>
    <script src="../../global/vendor/asscroll/jquery-asScroll.min.js"></script>
    <script src="../../global/vendor/mousewheel/jquery.mousewheel.min.js"></script>
    <script src="../../global/vendor/asscrollable/jquery.asScrollable.all.min.js"></script>
    <script src="../../global/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>
    <script src="../../global/vendor/waves/waves.min.js"></script>
  
    <!-- Plugins -->
    <script src="../../global/vendor/switchery/switchery.min.js"></script>
    <script src="../../global/vendor/intro-js/intro.min.js"></script>
    <script src="../../global/vendor/screenfull/screenfull.min.js"></script>
    <script src="../../global/vendor/slidepanel/jquery-slidePanel.min.js"></script>
  
    <!-- Plugins For This Page -->
    <script src="../../global/vendor/chartist-js/chartist.min.js"></script>
    <script src="../../global/vendor/chartist-plugin-tooltip/chartist-plugin-tooltip.min.js"></script>
  
    <!-- Scripts -->
    <script src="../../global/js/core.min.js"></script>
    <script src="../assets/js/site.min.js"></script>
  
    <script src="../assets/js/sections/menu.min.js"></script>
    <script src="../assets/js/sections/menubar.min.js"></script>
    <script src="../assets/js/sections/sidebar.min.js"></script>
  
    <script src="../../global/js/configs/config-colors.min.js"></script>
    <script src="../assets/js/configs/config-tour.min.js"></script>
  
    <script src="../../global/js/components/asscrollable.min.js"></script>
    <script src="../../global/js/components/animsition.min.js"></script>
    <script src="../../global/js/components/slidepanel.min.js"></script>
    <script src="../../global/js/components/switchery.min.js"></script>
    <script src="../../global/js/components/tabs.min.js"></script>
  
  
    <script src="../assets/examples/js/charts/chartist.min.js"></script>
  
  
    <!-- Google Analytics -->
    <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-65522665-1', 'auto');
      ga('send', 'pageview');
    </script>
  </body>
  
  </html>