<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Codefox - Responsive Bootstrap 4 Admin Dashboard Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
        <meta content="Coderthemes" name="author" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <!-- App favicon -->
        <link rel="shortcut icon" href="/theme/assets/images/favicon.ico">

        <!-- App css -->
        
        <link href="/theme/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="/theme/assets/css/metismenu.min.css" rel="stylesheet" type="text/css" />
        <link href="/theme/assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="/theme/assets/css/style.css" rel="stylesheet" type="text/css" />

        <link href="/theme/plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />

        <script src="/theme/assets/js/modernizr.min.js"></script>

    </head>


    <body>

        <!-- Begin page -->
        <div id="wrapper">

            <!-- Top Bar Start -->
            <div class="topbar">

                <!-- LOGO -->
                <div class="topbar-left">
                    <!--<a href="index.html" class="logo"><span>Code<span>Fox</span></span><i class="mdi mdi-layers"></i></a>-->
                    <!-- Image logo -->
                    <a href="index.html" class="logo">
                        <span>
                            <img src="/theme/assets/images/logo.png" alt="" height="20">
                        </span>
                        <i>
                            <img src="/theme/assets/images/logo_sm.png" alt="" height="28">
                        </i>
                    </a>
                </div>

                <!-- Button mobile view to collapse sidebar menu -->
                <div class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">

                        <!-- Navbar-left -->
                        <ul class="nav navbar-left">
                            <li>
                                <button type="button" class="button-menu-mobile open-left waves-effect">
                                    <i class="dripicons-menu"></i>
                                </button>
                            </li>

                            <li class="d-none d-sm-block lang-option">
                                <select class="selectpicker form-control" title="" data-width="110px">
                                    <option> English </option>
                                    <option> French </option>
                                    <option> Germany </option>
                                    <option> Spanish</option>
                                </select>
                            </li>
                        </ul>

                        <!-- Right(Notification) -->
                        <ul class="nav navbar-right list-inline">
                            <li class="d-none d-sm-block list-inline-item">
                                <form role="search" class="app-search">
                                    <input type="text" placeholder="Search..."
                                           class="form-control">
                                    <a href=""><i class="fa fa-search"></i></a>
                                </form>
                            </li>
                            <li class="list-inline-item">
                                <div class="dropdown">
									<a href="#" class="right-menu-item dropdown-toggle" data-toggle="dropdown">
										<i class="dripicons-bell"></i>
										<span class="badge badge-pill badge-pink">4</span>
									</a>
	
									<ul class="dropdown-menu dropdown-menu-right dropdown-lg user-list notify-list">
										<li class="list-group notification-list m-b-0">
											<div class="slimscroll">
												<!-- list item-->
												<a href="javascript:void(0);" class="list-group-item">
													<div class="media">
														<div class="media-left p-r-10">
														<em class="fa fa-diamond bg-primary"></em>
														</div>
														<div class="media-body">
														<h5 class="media-heading">A new order has been placed A new order has been placed</h5>
														<p class="m-0">
															There are new settings available
														</p>
														</div>
													</div>
												</a>
	
												<!-- list item-->
												<a href="javascript:void(0);" class="list-group-item">
													<div class="media">
														<div class="media-left p-r-10">
														<em class="fa fa-cog bg-warning"></em>
														</div>
														<div class="media-body">
														<h5 class="media-heading">New settings</h5>
														<p class="m-0">
															There are new settings available
														</p>
														</div>
													</div>
												</a>
	
												<!-- list item-->
												<a href="javascript:void(0);" class="list-group-item">
													<div class="media">
														<div class="media-left p-r-10">
														<em class="fa fa-bell-o bg-custom"></em>
														</div>
														<div class="media-body">
														<h5 class="media-heading">Updates</h5>
														<p class="m-0">
															There are <span class="text-primary font-600">2</span> new updates available
														</p>
														</div>
													</div>
												</a>
	
												<!-- list item-->
												<a href="javascript:void(0);" class="list-group-item">
													<div class="media">
														<div class="media-left p-r-10">
														<em class="fa fa-user-plus bg-danger"></em>
														</div>
														<div class="media-body">
														<h5 class="media-heading">New user registered</h5>
														<p class="m-0">
															You have 10 unread messages
														</p>
														</div>
													</div>
												</a>
	
												<!-- list item-->
												<a href="javascript:void(0);" class="list-group-item">
													<div class="media">
														<div class="media-left p-r-10">
														<em class="fa fa-diamond bg-primary"></em>
														</div>
														<div class="media-body">
														<h5 class="media-heading">A new order has been placed A new order has been placed</h5>
														<p class="m-0">
															There are new settings available
														</p>
														</div>
													</div>
												</a>
	
												<!-- list item-->
												<a href="javascript:void(0);" class="list-group-item">
													<div class="media">
														<div class="media-left p-r-10">
														<em class="fa fa-cog bg-warning"></em>
														</div>
														<div class="media-body">
														<h5 class="media-heading">New settings</h5>
														<p class="m-0">
															There are new settings available
														</p>
														</div>
													</div>
												</a>
											</div>
										</li>
										<!-- end notification list -->
									</ul>
								</div>
                            </li>

                            <li class="dropdown user-box list-inline-item">
                                <a href="" class="dropdown-toggle waves-effect user-link" data-toggle="dropdown" aria-expanded="true">
                                    <img src="/theme/assets/images/users/avatar-1.jpg" alt="user-img" class="rounded-circle user-img">
                                </a>

                                <ul class="dropdown-menu dropdown-menu-right arrow-dropdown-menu arrow-menu-right user-list notify-list">
                                    <li><a href="javascript:void(0)" class="dropdown-item">Profile</a></li>
                                    <li><a href="javascript:void(0)" class="dropdown-item"><span class="badge badge-pill badge-info float-right">4</span>Settings</a></li>
                                    <li><a href="javascript:void(0)" class="dropdown-item">Lock screen</a></li>
                                    <li class="dropdown-divider"></li>
                                    <li><a href="javascript:void(0)" class="dropdown-item">Logout</a></li>
                                </ul>
                            </li>

                        </ul> <!-- end navbar-right -->

                    </div><!-- end container-fluid -->
                </div><!-- end navbar -->
            </div>
            <!-- Top Bar End -->


            <!-- ========== Left Sidebar Start ========== -->
            <div class="left side-menu">
                <div class="slimscroll-menu" id="remove-scroll">

                    <!--- Sidemenu -->
                    <div id="sidebar-menu">
                        <!-- Left Menu Start -->
                        <ul class="metismenu list-unstyled" id="side-menu">
                            <li class="menu-title">Navigation</li>
                            <li>
                                <a href="index.html"><i class="fi-air-play"></i><span class="badge badge-pill badge-success float-right">1</span> <span> Dashboard </span> </a>
                            </li>

                            <li>
                                <a href="javascript: void(0);"><i class="fi-briefcase"></i> <span> UI Kit </span> <span class="menu-arrow"></span></a>
                                <ul class="nav-second-level nav" aria-expanded="false">
                                    <li><a href="/theme/pages/ui-typography.html">Typography</a></li>
                                    <li><a href="/theme/pages/ui-cards.html">Cards</a></li>
                                    <li><a href="/theme/pages/ui-buttons.html">Buttons</a></li>
                                    <li><a href="/theme/pages/ui-modals.html">Modals</a></li>
                                    <li><a href="/theme/pages/ui-checkbox-radio.html">Checkboxs-Radios</a></li>
                                    <li><a href="/theme/pages/ui-tabs.html">Tabs</a></li>
                                    <li><a href="/theme/pages/ui-progressbars.html">Progress Bars</a></li>
                                    <li><a href="/theme/pages/ui-notifications.html">Notification</a></li>
                                    <li><a href="/theme/pages/ui-carousel.html">Carousel</a>
                                    <li><a href="/theme/pages/ui-video.html">Video</a>
                                    <li><a href="/theme/pages/ui-tooltips-popovers.html">Tooltips & Popovers</a></li>
                                    <li><a href="/theme/pages/ui-images.html">Images</a></li>
                                    <li><a href="/theme/pages/ui-bootstrap.html">Bootstrap UI</a></li>
                                </ul>
                            </li>

                                                        <li>
                                <a href="javascript: void(0);"><i class="fi-box"></i><span> Icons </span> <span class="menu-arrow"></span></a>
                                <ul class="nav-second-level nav" aria-expanded="false">
                                    <li><a href="icons-colored.html">Colored Icons</a></li>
                                    <li><a href="icons-materialdesign.html">Material Design</a></li>
                                    <li><a href="icons-dripicons.html">Dripicons</a></li>
                                    <li><a href="icons-fontawesome.html">Font awesome</a></li>
                                    <li><a href="icons-feather.html">Feather Icons</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="javascript: void(0);"><i class="fi-bar-graph-2"></i><span> Graphs </span> <span class="menu-arrow"></span></a>
                                <ul class="nav-second-level nav" aria-expanded="false">
                                    <li><a href="chart-flot.html">Flot Chart</a></li>
                                    <li><a href="chart-morris.html">Morris Chart</a></li>
                                    <li><a href="chart-google.html">Google Chart</a></li>
                                    <li><a href="chart-chartist.html">Chartist Charts</a></li>
                                    <li><a href="chart-chartjs.html">Chartjs Chart</a></li>
                                    <li><a href="chart-c3.html">C3 Chart</a></li>
                                    <li><a href="chart-sparkline.html">Sparkline Chart</a></li>
                                    <li><a href="chart-knob.html">Jquery Knob</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="javascript: void(0);"><i class="fi-disc"></i><span class="badge badge-pill badge-primary float-right">9</span> <span> Forms </span></a>
                                <ul class="nav-second-level nav" aria-expanded="false">
                                    <li><a href="form-elements.html">Form Elements</a></li>
                                    <li><a href="form-advanced.html">Form Advanced</a></li>
                                    <li><a href="form-validation.html">Form Validation</a></li>
                                    <li><a href="form-pickers.html">Form Pickers</a></li>
                                    <li><a href="form-wizard.html">Form Wizard</a></li>
                                    <li><a href="form-mask.html">Form Masks</a></li>
                                    <li><a href="form-summernote.html">Summernote</a></li>
                                    <li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
                                    <li><a href="form-uploads.html">Multiple File Upload</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="javascript: void(0);"><i class="fi-layout"></i> <span> Tables </span> <span class="menu-arrow"></span></a>
                                <ul class="nav-second-level nav" aria-expanded="false">
                                    <li><a href="tables-basic.html">Basic Tables</a></li>
                                    <li><a href="tables-layouts.html">Tables Layouts</a></li>
                                    <li><a href="tables-datatable.html">Data Table</a></li>
                                    <li><a href="tables-responsive.html">Responsive Table</a></li>
                                    <li><a href="tables-tablesaw.html">Tablesaw Table</a></li>
                                    <li><a href="tables-editable.html">Editable Table</a></li>

                                </ul>
                            </li>

                            <li class="menu-title">More</li>

                            <li>
                                <a href="javascript: void(0);"><i class="fi-target"></i> <span> Admin UI </span> <span class="menu-arrow"></span></a>
                                <ul class="nav-second-level nav" aria-expanded="false">
                                    <li><a href="admin-grid.html">Grid</a></li>
                                    <li><a href="admin-sweet-alert.html">Sweet Alert</a></li>
                                    <li><a href="admin-widgets.html">Widgets</a></li>
                                    <li><a href="admin-nestable.html">Nestable List</a></li>
                                    <li><a href="admin-rangeslider.html">Range Slider</a></li>
                                    <li><a href="admin-ratings.html">Ratings</a></li>
                                </ul>
                            </li>

                            <li><a href="calendar.html"><i class="fi-clock"></i> <span>Calendar</span> </a></li>

                            <li>
                                <a href="javascript: void(0);"><i class="fi-map"></i> <span> Maps </span> <span class="menu-arrow"></span></a>
                                <ul class="nav-second-level nav" aria-expanded="false">
                                    <li><a href="maps-google.html">Google Maps</a></li>
                                    <li><a href="maps-vector.html">Vector Maps</a></li>
                                    <li><a href="maps-mapael.html">Mapael Maps</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript: void(0);"><i class="fi-paper-stack"></i><span> Pages </span> <span class="menu-arrow"></span></a>
                                <ul class="nav-second-level nav" aria-expanded="false">
                                    <li><a href="page-starter.html">Starter Page</a></li>
                                    <li><a href="page-login.html">Login</a></li>
                                    <li><a href="page-register.html">Register</a></li>
                                    <li><a href="page-logout.html">Logout</a></li>
                                    <li><a href="page-recoverpw.html">Recover Password</a></li>
                                    <li><a href="page-lock-screen.html">Lock Screen</a></li>
                                    <li><a href="page-confirm-mail.html">Confirm Mail</a></li>
                                    <li><a href="page-404.html">Error 404</a></li>
                                    <li><a href="page-404-alt.html">Error 404-alt</a></li>
                                    <li><a href="page-500.html">Error 500</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="javascript: void(0);"><i class="fi-marquee-plus"></i><span> Extra Pages </span> <span class="menu-arrow"></span></a>
                                <ul class="nav-second-level nav" aria-expanded="false">
                                    <li><a href="extras-about.html">About Us</a></li>
                                    <li><a href="extras-contact.html">Contact</a></li>
                                    <li><a href="extras-members.html">Members</a></li>
                                    <li><a href="extras-timeline.html">Timeline</a></li>
                                    <li><a href="extras-invoice.html">Invoice</a></li>
                                    <li><a href="extras-maintenance.html">Maintenance</a></li>
                                    <li><a href="extras-coming-soon.html">Coming Soon</a></li>
                                    <li><a href="extras-faq.html">FAQ</a></li>
                                    <li><a href="extras-pricing.html">Pricing</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="javascript: void(0);" aria-expanded="true"><i class="fi-share"></i> <span>Multi Level</span> <span class="menu-arrow"></span></a>
                                <ul class="nav-second-level nav" aria-expanded="true">
                                    <li><a href="javascript: void(0);">Level 1.1</a></li>
                                    <li><a href="javascript: void(0);" aria-expanded="true">Level 1.2 <span class="menu-arrow"></span></a>
                                        <ul class="nav-third-level nav" aria-expanded="true">
                                            <li><a href="javascript: void(0);">Level 2.1</a></li>
                                            <li><a href="javascript: void(0);">Level 2.2</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>


                        </ul>

                    </div>
                    <!-- Sidebar -->
                    <div class="clearfix"></div>

                </div>
                <!-- Sidebar -left -->

            </div>
            <!-- Left Sidebar End -->



            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="content-page">
                <!-- Start content -->
                <div class="content">
                    <div class="container-fluid">
                        <div class="row">
							<div class="col-12">
								<div class="page-title-box">
                                    <h4 class="page-title">Flot Chart</h4>
                                    <ol class="breadcrumb p-0 m-0">
                                        <li>
                                            <a href="#">Codefox</a>
                                        </li>
                                        <li>
                                            <a href="#">Charts</a>
                                        </li>
                                        <li class="active">
                                            Flot Chart
                                        </li>
                                    </ol>
                                    <div class="clearfix"></div>
                                </div>
							</div>
						</div>
                        <!-- end row -->

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="header-title m-t-0">Multiple Statistics</h4>
                                        <p class="text-muted m-b-30">
                                            Stacked chart not only shows the trends over time, you can also see the cumulative
                                            sum of all data.Your awesome text goes here.
                                        </p>
    
                                        <div id="website-stats" style="height: 320px;" class="flot-chart"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="header-title m-t-0">Realtime Statistics</h4>
                                        <p class="text-muted m-b-30">
                                            You can update a chart periodically to get a real-time effect by using a timer
                                            to insert the new data in the plot and redraw it.
                                        </p>
    
                                        <div id="flotRealTime" style="height: 320px;" class="flot-chart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end row -->

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="header-title m-t-0">Line Chart</h4>
                                        <p class="text-muted m-b-30">
                                            The line chart is most often used chart, aslo the easiest to make, it shows trends over time,
                                            visualizes data and information, so users can know how exactly these numbers are relate to
                                            each other in one glance.
                                        </p>
    
                                        <div id="website-stats1" style="height: 320px;" class="flot-chart"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="header-title m-t-0">Donut Pie</h4>
                                        <p class="text-muted m-b-30">
                                            Pie chart is used to see the proprotion of each data groups, making Flot pie chart is pretty simple,
                                            in order to make pie chart you have to incldue jquery.flot.pie.js plugin.
                                        </p>
    
                                        <div id="donut-chart">
                                            <div id="donut-chart-container" class="flot-chart" style="height: 320px;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- end row -->


                        <div class="row">

                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="header-title m-t-0">Pie Chart</h4>
                                        <p class="text-muted m-b-30">
                                            Pie chart is used to see the proprotion of each data groups, making Flot pie chart is pretty simple,
                                            in order to make pie chart you have to incldue jquery.flot.pie.js plugin.
                                        </p>
    
                                        <div id="pie-chart">
                                            <div id="pie-chart-container" class="flot-chart" style="height: 320px;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="header-title m-t-0">Stacked Bar chart</h4>
                                        <p class="text-muted m-b-30">
                                            With the stack plugin, you can have Flot stack the series. This is useful if you wish to display
                                            both a total and the constituents it is made of.
                                        </p>
    
                                        <div id="ordered-bars-chart" style="height: 320px;"></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- end row -->


                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="header-title m-t-0">Line Chart</h4>
                                        <p class="text-muted m-b-30">
                                            The line chart is most often used chart, aslo the easiest to make, it shows trends over time,
                                            visualizes data and information, so users can know how exactly these numbers are relate to
                                            each other in one glance.
                                        </p>
    
                                        <div id="line-chart-alt"  style="height:320px;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end row -->

                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="header-title m-t-0 m-b-30">Combine Chart</h4>
    
                                        <div id="combine-chart">
                                            <div id="combine-chart-container" class="flot-chart" style="height: 320px;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end row -->

                    </div> <!-- container-fluid -->

                </div> <!-- content -->

                <footer class="footer">
                    2016 - 2018 © Codefox. - Coderthemes.com
                </footer>

            </div>


            <!-- ============================================================== -->
            <!-- End Right content here -->
            <!-- ============================================================== -->


        </div>
        <!-- END wrapper -->



        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="/theme/assets/js/jquery.min.js"></script>
        <script src="/theme/assets/js/bootstrap.bundle.min.js"></script>
        <script src="/theme/assets/js/metisMenu.min.js"></script>
        <script src="/theme/assets/js/waves.js"></script>
        <script src="/theme/assets/js/jquery.slimscroll.js"></script>
        <script src="/theme/plugins/bootstrap-select/js/bootstrap-select.min.js"></script>

        <script src="/theme/plugins/flot-chart/jquery.flot.min.js"></script>
        <script src="/theme/plugins/flot-chart/jquery.flot.time.js"></script>
        <script src="/theme/plugins/flot-chart/jquery.flot.tooltip.min.js"></script>
        <script src="/theme/plugins/flot-chart/jquery.flot.resize.js"></script>
        <script src="/theme/plugins/flot-chart/jquery.flot.pie.js"></script>
        <script src="/theme/plugins/flot-chart/jquery.flot.selection.js"></script>
        <script src="/theme/plugins/flot-chart/jquery.flot.stack.js"></script>
        <script src="/theme/plugins/flot-chart/jquery.flot.orderBars.min.js"></script>
        <script src="/theme/plugins/flot-chart/jquery.flot.crosshair.js"></script>
        <script src="/theme/assets/pages/jquery.flot.init.js"></script>

        <!-- App js -->
        <script src="/theme/assets/js/jquery.core.js"></script>
        <script src="/theme/assets/js/jquery.app.js"></script>

    </body>
</html>