123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880 |
- <!doctype html>
- <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
- <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
- <!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
- <!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>Ela Admin - HTML5 Admin Template</title>
- <meta name="description" content="Ela Admin - HTML5 Admin Template">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="/static/static/css/normalize.min.css">
- <link rel="stylesheet" href="/static/static/css/bootstrap.min.css">
- <link rel="stylesheet" href="/static/static/css/font-awesome.min.css">
- <link rel="stylesheet" href="/static/static/css/themify-icons.css">
- <link rel="stylesheet" href="/static/static/css/pe-icon-7-stroke.min.css">
- <link rel="stylesheet" href="/static/static/css/flag-icon.min.css">
- <link rel="stylesheet" href="/static/static/css/cs-skin-elastic.css">
- <link rel="stylesheet" href="/static/static/css/style.css">
- <link href="/static/static/css/chartist.min.css" rel="stylesheet">
- <link href="/static/static/css/jqvmap.min.css" rel="stylesheet">
- <link href="/static/static/css/weather-icons.css" rel="stylesheet">
- <link href="/static/static/css/fullcalendar.min.css" rel="stylesheet">
- <style>
- #weatherWidget .currentDesc {
- color: #ffffff!important;
- }
- .traffic-chart {
- min-height: 335px;
- }
- #flotPie1 {
- height: 150px;
- }
- #flotPie1 td {
- padding:3px;
- }
- #flotPie1 table {
- top: 20px!important;
- right: -10px!important;
- }
- .chart-container {
- display: table;
- min-width: 270px ;
- text-align: left;
- padding-top: 10px;
- padding-bottom: 10px;
- }
- #flotLine5 {
- height: 105px;
- }
- #flotBarChart {
- height: 150px;
- }
- #cellPaiChart{
- height: 160px;
- }
- </style>
- </head>
- <body>
- <!-- Left Panel -->
- <aside id="left-panel" class="left-panel">
- <nav class="navbar navbar-expand-sm navbar-default">
- <div id="main-menu" class="main-menu collapse navbar-collapse">
- <ul class="nav navbar-nav">
- <li class="active">
- <a href=""><i class="menu-icon fa fa-laptop"></i>首页</a>
- </li>
- <li class="menu-title">服务管理</li><!-- /.menu-title -->
- <li class="menu-item-has-children dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-cogs"></i>Components</a>
- <ul class="sub-menu children dropdown-menu"> <li><i class="fa fa-puzzle-piece"></i><a href="ui-buttons.html">Buttons</a></li>
- <li><i class="fa fa-id-badge"></i><a href="ui-badges.html">Badges</a></li>
- <li><i class="fa fa-bars"></i><a href="ui-tabs.html">Tabs</a></li>
- <li><i class="fa fa-id-card-o"></i><a href="ui-cards.html">Cards</a></li>
- <li><i class="fa fa-exclamation-triangle"></i><a href="ui-alerts.html">Alerts</a></li>
- <li><i class="fa fa-spinner"></i><a href="ui-progressbar.html">Progress Bars</a></li>
- <li><i class="fa fa-fire"></i><a href="ui-modals.html">Modals</a></li>
- <li><i class="fa fa-book"></i><a href="ui-switches.html">Switches</a></li>
- <li><i class="fa fa-th"></i><a href="ui-grids.html">Grids</a></li>
- <li><i class="fa fa-file-word-o"></i><a href="ui-typgraphy.html">Typography</a></li>
- </ul>
- </li>
- </ul>
- </div><!-- /.navbar-collapse -->
- </nav>
- </aside>
- <!-- /#left-panel -->
- <!-- Right Panel -->
- <div id="right-panel" class="right-panel">
- <!-- Header-->
- <header id="header" class="header">
- <div class="top-left">
- <div class="navbar-header">
- <a class="navbar-brand" href=""><img src="static/picture/logo.png" alt="Logo"></a>
- <a class="navbar-brand hidden" href=""><img src="static/picture/logo2.png" alt="Logo"></a>
- <a id="menuToggle" class="menutoggle"><i class="fa fa-bars"></i></a>
- </div>
- </div>
- <div class="top-right">
- <div class="header-menu">
- <div class="header-left">
- <button class="search-trigger"><i class="fa fa-search"></i></button>
- <div class="form-inline">
- <form class="search-form">
- <input class="form-control mr-sm-2" type="text" placeholder="Search ..." aria-label="Search">
- <button class="search-close" type="submit"><i class="fa fa-close"></i></button>
- </form>
- </div>
- <div class="dropdown for-notification">
- <button class="btn btn-secondary dropdown-toggle" type="button" id="notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <i class="fa fa-bell"></i>
- <span class="count bg-danger">3</span>
- </button>
- <div class="dropdown-menu" aria-labelledby="notification">
- <p class="red">You have 3 Notification</p>
- <a class="dropdown-item media" href="#">
- <i class="fa fa-check"></i>
- <p>Server #1 overloaded.</p>
- </a>
- <a class="dropdown-item media" href="#">
- <i class="fa fa-info"></i>
- <p>Server #2 overloaded.</p>
- </a>
- <a class="dropdown-item media" href="#">
- <i class="fa fa-warning"></i>
- <p>Server #3 overloaded.</p>
- </a>
- </div>
- </div>
- <div class="dropdown for-message">
- <button class="btn btn-secondary dropdown-toggle" type="button" id="message" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <i class="fa fa-envelope"></i>
- <span class="count bg-primary">4</span>
- </button>
- <div class="dropdown-menu" aria-labelledby="message">
- <p class="red">You have 4 Mails</p>
- <a class="dropdown-item media" href="#">
- <span class="photo media-left"><img alt="avatar" src="static/picture/1.jpg"></span>
- <div class="message media-body">
- <span class="name float-left">Jonathan Smith</span>
- <span class="time float-right">Just now</span>
- <p>Hello, this is an example msg</p>
- </div>
- </a>
- <a class="dropdown-item media" href="#">
- <span class="photo media-left"><img alt="avatar" src="static/picture/2.jpg"></span>
- <div class="message media-body">
- <span class="name float-left">Jack Sanders</span>
- <span class="time float-right">5 minutes ago</span>
- <p>Lorem ipsum dolor sit amet, consectetur</p>
- </div>
- </a>
- <a class="dropdown-item media" href="#">
- <span class="photo media-left"><img alt="avatar" src="static/picture/3.jpg"></span>
- <div class="message media-body">
- <span class="name float-left">Cheryl Wheeler</span>
- <span class="time float-right">10 minutes ago</span>
- <p>Hello, this is an example msg</p>
- </div>
- </a>
- <a class="dropdown-item media" href="#">
- <span class="photo media-left"><img alt="avatar" src="static/picture/4.jpg"></span>
- <div class="message media-body">
- <span class="name float-left">Rachel Santos</span>
- <span class="time float-right">15 minutes ago</span>
- <p>Lorem ipsum dolor sit amet, consectetur</p>
- </div>
- </a>
- </div>
- </div>
- </div>
- <div class="user-area dropdown float-right">
- <a href="#" class="dropdown-toggle active" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <img class="user-avatar rounded-circle" src="static/picture/admin.jpg" alt="User Avatar">
- </a>
- <div class="user-menu dropdown-menu">
- <a class="nav-link" href="#"><i class="fa fa- user"></i>My Profile</a>
- <a class="nav-link" href="#"><i class="fa fa- user"></i>Notifications <span class="count">13</span></a>
- <a class="nav-link" href="#"><i class="fa fa -cog"></i>Settings</a>
- <a class="nav-link" href="#"><i class="fa fa-power -off"></i>Logout</a>
- </div>
- </div>
- </div>
- </div>
- </header>
- <!-- /#header -->
- <!-- Content -->
- <div class="content">
- <!-- Animated -->
- <div class="animated fadeIn">
- <!-- Widgets -->
- <div class="row">
- <div class="col-lg-3 col-md-6">
- <div class="card">
- <div class="card-body">
- <div class="stat-widget-five">
- <div class="stat-icon dib flat-color-1">
- <i class="pe-7s-cash"></i>
- </div>
- <div class="stat-content">
- <div class="text-left dib">
- <div class="stat-text">$<span class="count">23569</span></div>
- <div class="stat-heading">Revenue</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-3 col-md-6">
- <div class="card">
- <div class="card-body">
- <div class="stat-widget-five">
- <div class="stat-icon dib flat-color-2">
- <i class="pe-7s-cart"></i>
- </div>
- <div class="stat-content">
- <div class="text-left dib">
- <div class="stat-text"><span class="count">3435</span></div>
- <div class="stat-heading">Sales</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-3 col-md-6">
- <div class="card">
- <div class="card-body">
- <div class="stat-widget-five">
- <div class="stat-icon dib flat-color-3">
- <i class="pe-7s-browser"></i>
- </div>
- <div class="stat-content">
- <div class="text-left dib">
- <div class="stat-text"><span class="count">349</span></div>
- <div class="stat-heading">Templates</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-3 col-md-6">
- <div class="card">
- <div class="card-body">
- <div class="stat-widget-five">
- <div class="stat-icon dib flat-color-4">
- <i class="pe-7s-users"></i>
- </div>
- <div class="stat-content">
- <div class="text-left dib">
- <div class="stat-text"><span class="count">2986</span></div>
- <div class="stat-heading">Clients</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- /Widgets -->
- <!-- Traffic -->
- <div class="row">
- <div class="col-lg-12">
- <div class="card">
- <div class="card-body">
- <h4 class="box-title">Traffic </h4>
- </div>
- <div class="row">
- <div class="col-lg-8">
- <div class="card-body">
- <!-- <canvas id="TrafficChart"></canvas> -->
- <div id="traffic-chart" class="traffic-chart"></div>
- </div>
- </div>
- </div> <!-- /.row -->
- <div class="card-body"></div>
- </div>
- </div><!-- /# column -->
- </div>
- <!-- /Traffic -->
- <div class="clearfix"></div>
- <!-- Orders -->
- <div class="orders">
- <div class="row">
- <div class="col-xl-8">
- <div class="card">
- <div class="card-body">
- <h4 class="box-title">Orders </h4>
- </div>
- <div class="card-body--">
- <div class="table-stats order-table ov-h">
- <table class="table ">
- <thead>
- <tr>
- <th class="serial">#</th>
- <th class="avatar">Avatar</th>
- <th>ID</th>
- <th>Name</th>
- <th>Product</th>
- <th>Quantity</th>
- <th>Status</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="serial">1.</td>
- <td class="avatar">
- <div class="round-img">
- <a href="#"><img class="rounded-circle" src="static/picture/1.jpg" alt=""></a>
- </div>
- </td>
- <td> #5469 </td>
- <td> <span class="name">Louis Stanley</span> </td>
- <td> <span class="product">iMax</span> </td>
- <td><span class="count">231</span></td>
- <td>
- <span class="badge badge-complete">Complete</span>
- </td>
- </tr>
- <tr>
- <td class="serial">2.</td>
- <td class="avatar">
- <div class="round-img">
- <a href="#"><img class="rounded-circle" src="static/picture/2.jpg" alt=""></a>
- </div>
- </td>
- <td> #5468 </td>
- <td> <span class="name">Gregory Dixon</span> </td>
- <td> <span class="product">iPad</span> </td>
- <td><span class="count">250</span></td>
- <td>
- <span class="badge badge-complete">Complete</span>
- </td>
- </tr>
- <tr>
- <td class="serial">3.</td>
- <td class="avatar">
- <div class="round-img">
- <a href="#"><img class="rounded-circle" src="static/picture/3.jpg" alt=""></a>
- </div>
- </td>
- <td> #5467 </td>
- <td> <span class="name">Catherine Dixon</span> </td>
- <td> <span class="product">SSD</span> </td>
- <td><span class="count">250</span></td>
- <td>
- <span class="badge badge-complete">Complete</span>
- </td>
- </tr>
- <tr>
- <td class="serial">4.</td>
- <td class="avatar">
- <div class="round-img">
- <a href="#"><img class="rounded-circle" src="static/picture/4.jpg" alt=""></a>
- </div>
- </td>
- <td> #5466 </td>
- <td> <span class="name">Mary Silva</span> </td>
- <td> <span class="product">Magic Mouse</span> </td>
- <td><span class="count">250</span></td>
- <td>
- <span class="badge badge-pending">Pending</span>
- </td>
- </tr>
- <tr class=" pb-0">
- <td class="serial">5.</td>
- <td class="avatar pb-0">
- <div class="round-img">
- <a href="#"><img class="rounded-circle" src="static/picture/6.jpg" alt=""></a>
- </div>
- </td>
- <td> #5465 </td>
- <td> <span class="name">Johnny Stephens</span> </td>
- <td> <span class="product">Monitor</span> </td>
- <td><span class="count">250</span></td>
- <td>
- <span class="badge badge-complete">Complete</span>
- </td>
- </tr>
- </tbody>
- </table>
- </div> <!-- /.table-stats -->
- </div>
- </div> <!-- /.card -->
- </div> <!-- /.col-lg-8 -->
- <div class="col-xl-4">
- <div class="row">
- <div class="col-lg-6 col-xl-12">
- <div class="card br-0">
- <div class="card-body">
- <div class="chart-container ov-h">
- <div id="flotPie1" class="float-chart"></div>
- </div>
- </div>
- </div><!-- /.card -->
- </div>
- <div class="col-lg-6 col-xl-12">
- <div class="card bg-flat-color-3 ">
- <div class="card-body">
- <h4 class="card-title m-0 white-color ">August 2018</h4>
- </div>
- <div class="card-body">
- <div id="flotLine5" class="flot-line"></div>
- </div>
- </div>
- </div>
- </div>
- </div> <!-- /.col-md-4 -->
- </div>
- </div>
- <!-- /.orders -->
- <!-- To Do and Live Chat -->
- <div class="row">
- <div class="col-lg-6">
- <div class="card">
- <div class="card-body">
- <h4 class="card-title box-title">To Do List</h4>
- <div class="card-content">
- <div class="todo-list">
- <div class="tdl-holder">
- <div class="tdl-content">
- <ul>
- <li>
- <label>
- <input type="checkbox"><i class="check-box"></i><span>Conveniently fabricate interactive technology for ....</span>
- <a href='#' class="fa fa-times"></a>
- <a href='#' class="fa fa-pencil"></a>
- <a href='#' class="fa fa-check"></a>
- </label>
- </li>
- <li>
- <label>
- <input type="checkbox"><i class="check-box"></i><span>Creating component page</span>
- <a href='#' class="fa fa-times"></a>
- <a href='#' class="fa fa-pencil"></a>
- <a href='#' class="fa fa-check"></a>
- </label>
- </li>
- <li>
- <label>
- <input type="checkbox" checked=""><i class="check-box"></i><span>Follow back those who follow you</span>
- <a href='#' class="fa fa-times"></a>
- <a href='#' class="fa fa-pencil"></a>
- <a href='#' class="fa fa-check"></a>
- </label>
- </li>
- <li>
- <label>
- <input type="checkbox" checked=""><i class="check-box"></i><span>Design One page theme</span>
- <a href='#' class="fa fa-times"></a>
- <a href='#' class="fa fa-pencil"></a>
- <a href='#' class="fa fa-check"></a>
- </label>
- </li>
- <li>
- <label>
- <input type="checkbox" checked=""><i class="check-box"></i><span>Creating component page</span>
- <a href='#' class="fa fa-times"></a>
- <a href='#' class="fa fa-pencil"></a>
- <a href='#' class="fa fa-check"></a>
- </label>
- </li>
- </ul>
- </div>
- </div>
- </div> <!-- /.todo-list -->
- </div>
- </div> <!-- /.card-body -->
- </div><!-- /.card -->
- </div>
- <div class="col-lg-6">
- <div class="card">
- <div class="card-body">
- <h4 class="card-title box-title">Live Chat</h4>
- <div class="card-content">
- <div class="messenger-box">
- <ul>
- <li>
- <div class="msg-received msg-container">
- <div class="avatar">
- <img src="static/picture/64-1.jpg" alt="">
- <div class="send-time">11.11 am</div>
- </div>
- <div class="msg-box">
- <div class="inner-box">
- <div class="name">
- John Doe
- </div>
- <div class="meg">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sunt placeat velit ad reiciendis ipsam
- </div>
- </div>
- </div>
- </div><!-- /.msg-received -->
- </li>
- <li>
- <div class="msg-sent msg-container">
- <div class="avatar">
- <img src="static/picture/64-2.jpg" alt="">
- <div class="send-time">11.11 am</div>
- </div>
- <div class="msg-box">
- <div class="inner-box">
- <div class="name">
- John Doe
- </div>
- <div class="meg">
- Hay how are you doing?
- </div>
- </div>
- </div>
- </div><!-- /.msg-sent -->
- </li>
- </ul>
- <div class="send-mgs">
- <div class="yourmsg">
- <input class="form-control" type="text">
- </div>
- <button class="btn msg-send-btn">
- <i class="pe-7s-paper-plane"></i>
- </button>
- </div>
- </div><!-- /.messenger-box -->
- </div>
- </div> <!-- /.card-body -->
- </div><!-- /.card -->
- </div>
- </div>
- <!-- /To Do and Live Chat -->
- <!-- Calender Chart Weather -->
- <div class="row">
- <div class="col-md-12 col-lg-4">
- <div class="card">
- <div class="card-body">
- <!-- <h4 class="box-title">Chandler</h4> -->
- <div class="calender-cont widget-calender">
- <div id="calendar"></div>
- </div>
- </div>
- </div><!-- /.card -->
- </div>
- <div class="col-lg-4 col-md-6">
- <div class="card ov-h">
- <div class="card-body bg-flat-color-2">
- <div id="flotBarChart" class="float-chart ml-4 mr-4"></div>
- </div>
- <div id="cellPaiChart" class="float-chart"></div>
- </div><!-- /.card -->
- </div>
- <div class="col-lg-4 col-md-6">
- <div class="card weather-box">
- <h4 class="weather-title box-title">Weather</h4>
- <div class="card-body">
- <div class="weather-widget">
- <div id="weather-one" class="weather-one"></div>
- </div>
- </div>
- </div><!-- /.card -->
- </div>
- </div>
- <!-- /Calender Chart Weather -->
- <!-- Modal - Calendar - Add New Event -->
- <div class="modal fade none-border" id="event-modal">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h4 class="modal-title"><strong>Add New Event</strong></h4>
- </div>
- <div class="modal-body"></div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-success save-event waves-effect waves-light">Create event</button>
- <button type="button" class="btn btn-danger delete-event waves-effect waves-light" data-dismiss="modal">Delete</button>
- </div>
- </div>
- </div>
- </div>
- <!-- /#event-modal -->
- <!-- Modal - Calendar - Add Category -->
- <div class="modal fade none-border" id="add-category">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h4 class="modal-title"><strong>Add a category </strong></h4>
- </div>
- <div class="modal-body">
- <form>
- <div class="row">
- <div class="col-md-6">
- <label class="control-label">Category Name</label>
- <input class="form-control form-white" placeholder="Enter name" type="text" name="category-name">
- </div>
- <div class="col-md-6">
- <label class="control-label">Choose Category Color</label>
- <select class="form-control form-white" data-placeholder="Choose a color..." name="category-color">
- <option value="success">Success</option>
- <option value="danger">Danger</option>
- <option value="info">Info</option>
- <option value="pink">Pink</option>
- <option value="primary">Primary</option>
- <option value="warning">Warning</option>
- </select>
- </div>
- </div>
- </form>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-danger waves-effect waves-light save-category" data-dismiss="modal">Save</button>
- </div>
- </div>
- </div>
- </div>
- <!-- /#add-category -->
- </div>
- <!-- .animated -->
- </div>
- <!-- /.content -->
- <div class="clearfix"></div>
- <!-- Footer -->
- <footer class="site-footer">
- <div class="footer-inner bg-white">
- <div class="row">
- <div class="col-sm-6">
- Copyright © 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a>
- </div>
- <div class="col-sm-6 text-right">
-
- </div>
- </div>
- </div>
- </footer>
- <!-- /.site-footer -->
- </div>
- <!-- /#right-panel -->
- <!-- Scripts -->
- <script src="static/js/jquery.min.js"></script>
- <script src="static/js/popper.min.js"></script>
- <script src="static/js/bootstrap.min.js"></script>
- <script src="static/js/jquery.matchHeight.min.js"></script>
- <script src="static/js/main.js"></script>
- <!-- Chart js -->
- <script src="static/js/Chart.bundle.min.js"></script>
- <!--Chartist Chart-->
- <script src="static/js/chartist.min.js"></script>
- <script src="static/js/chartist-plugin-legend.min.js"></script>
- <script src="static/js/jquery.flot.min1.js"></script>
- <script src="static/js/jquery.flot.pie.min1.js"></script>
- <script src="static/js/jquery.flot.spline.min.js"></script>
- <script src="static/js/jquery.simpleWeather.min.js"></script>
- <script src="static/js/weather-init.js"></script>
- <script src="static/js/moment.min.js"></script>
- <script src="static/js/fullcalendar.min.js"></script>
- <script src="static/js/fullcalendar-init.js"></script>
- <!--Local Stuff-->
- <script>
- jQuery(document).ready(function($) {
- "use strict";
- // Pie chart flotPie1
- var piedata = [
- { label: "Desktop visits", data: [[1,32]], color: '#5c6bc0'},
- { label: "Tab visits", data: [[1,33]], color: '#ef5350'},
- { label: "Mobile visits", data: [[1,35]], color: '#66bb6a'}
- ];
- $.plot('#flotPie1', piedata, {
- series: {
- pie: {
- show: true,
- radius: 1,
- innerRadius: 0.65,
- label: {
- show: true,
- radius: 2/3,
- threshold: 1
- },
- stroke: {
- width: 0
- }
- }
- },
- grid: {
- hoverable: true,
- clickable: true
- }
- });
- // Pie chart flotPie1 End
- // cellPaiChart
- var cellPaiChart = [
- { label: "Direct Sell", data: [[1,65]], color: '#5b83de'},
- { label: "Channel Sell", data: [[1,35]], color: '#00bfa5'}
- ];
- $.plot('#cellPaiChart', cellPaiChart, {
- series: {
- pie: {
- show: true,
- stroke: {
- width: 0
- }
- }
- },
- legend: {
- show: false
- },grid: {
- hoverable: true,
- clickable: true
- }
- });
- // cellPaiChart End
- // Line Chart #flotLine5
- var newCust = [[0, 3], [1, 5], [2,4], [3, 7], [4, 9], [5, 3], [6, 6], [7, 4], [8, 10]];
- var plot = $.plot($('#flotLine5'),[{
- data: newCust,
- label: 'New Data Flow',
- color: '#fff'
- }],
- {
- series: {
- lines: {
- show: true,
- lineColor: '#fff',
- lineWidth: 2
- },
- points: {
- show: true,
- fill: true,
- fillColor: "#ffffff",
- symbol: "circle",
- radius: 3
- },
- shadowSize: 0
- },
- points: {
- show: true,
- },
- legend: {
- show: false
- },
- grid: {
- show: false
- }
- });
- // Line Chart #flotLine5 End
- // Traffic Chart using chartist
- if ($('#traffic-chart').length) {
- var chart = new Chartist.Line('#traffic-chart', {
- labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
- series: [
- [0, 18000, 35000, 25000, 22000, 0],
- [0, 33000, 15000, 20000, 15000, 300],
- [0, 15000, 28000, 15000, 30000, 5000]
- ]
- }, {
- low: 0,
- showArea: true,
- showLine: false,
- showPoint: false,
- fullWidth: true,
- axisX: {
- showGrid: true
- }
- });
- chart.on('draw', function(data) {
- if(data.type === 'line' || data.type === 'area') {
- data.element.animate({
- d: {
- begin: 2000 * data.index,
- dur: 2000,
- from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
- to: data.path.clone().stringify(),
- easing: Chartist.Svg.Easing.easeOutQuint
- }
- });
- }
- });
- }
- // Traffic Chart using chartist End
- //Traffic chart chart-js
- if ($('#TrafficChart').length) {
- var ctx = document.getElementById( "TrafficChart" );
- ctx.height = 150;
- var myChart = new Chart( ctx, {
- type: 'line',
- data: {
- labels: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" ],
- datasets: [
- {
- label: "Visit",
- borderColor: "rgba(4, 73, 203,.09)",
- borderWidth: "1",
- backgroundColor: "rgba(4, 73, 203,.5)",
- data: [ 0, 2900, 5000, 3300, 6000, 3250, 0 ]
- },
- {
- label: "Bounce",
- borderColor: "rgba(245, 23, 66, 0.9)",
- borderWidth: "1",
- backgroundColor: "rgba(245, 23, 66,.5)",
- pointHighlightStroke: "rgba(245, 23, 66,.5)",
- data: [ 0, 4200, 4500, 1600, 4200, 1500, 4000 ]
- },
- {
- label: "Targeted",
- borderColor: "rgba(40, 169, 46, 0.9)",
- borderWidth: "1",
- backgroundColor: "rgba(40, 169, 46, .5)",
- pointHighlightStroke: "rgba(40, 169, 46,.5)",
- data: [1000, 5200, 3600, 2600, 4200, 5300, 0 ]
- }
- ]
- },
- options: {
- responsive: true,
- tooltips: {
- mode: 'index',
- intersect: false
- },
- hover: {
- mode: 'nearest',
- intersect: true
- }
- }
- } );
- }
- //Traffic chart chart-js End
- // Bar Chart #flotBarChart
- $.plot("#flotBarChart", [{
- data: [[0, 18], [2, 8], [4, 5], [6, 13],[8,5], [10,7],[12,4], [14,6],[16,15], [18, 9],[20,17], [22,7],[24,4], [26,9],[28,11]],
- bars: {
- show: true,
- lineWidth: 0,
- fillColor: '#ffffff8a'
- }
- }], {
- grid: {
- show: false
- }
- });
- // Bar Chart #flotBarChart End
- });
- </script>
- </body>
- </html>
|