jtith
/
PassionProject-HTML
forked de Cohort4.2/PassionProject-HTML
Seguir 1
Destacar 0
Cuchillo 0
Código Incidencias 0 Peticiones pull 0 Lanzamientos 0 Wiki Activity
2 Commits
1 Rama
Rama: master
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde 'master'
${ noResults }
PassionProject-HTML/pages/morris.html

morris.html 22KB
Enlace permanente Histórico Original

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. 

  4. <head>

  5. 

  6.     <meta charset="utf-8">

  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  8.     <meta name="viewport" content="width=device-width, initial-scale=1">

  9.     <meta name="description" content="">

  10.     <meta name="author" content="">

  11. 

  12.     <title>SB Admin 2 - Bootstrap Admin Theme</title>

  13. 

  14.     <!-- Bootstrap Core CSS -->

  15.     <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  16. 

  17.     <!-- MetisMenu CSS -->

  18.     <link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

  19. 

  20.     <!-- Custom CSS -->

  21.     <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

  22. 

  23.     <!-- Morris Charts CSS -->

  24.     <link href="../vendor/morrisjs/morris.css" rel="stylesheet">

  25. 

  26.     <!-- Custom Fonts -->

  27.     <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

  28. 

  29.     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

  30.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

  31.     <!--[if lt IE 9]>

  32.         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

  33.         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

  34.     <![endif]-->

  35. 

  36. </head>

  37. 

  38. <body>

  39. 

  40.     <div id="wrapper">

  41. 

  42.         <!-- Navigation -->

  43.         <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

  44.             <div class="navbar-header">

  45.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

  46.                     <span class="sr-only">Toggle navigation</span>

  47.                     <span class="icon-bar"></span>

  48.                     <span class="icon-bar"></span>

  49.                     <span class="icon-bar"></span>

  50.                 </button>

  51.                 <a class="navbar-brand" href="index.html">SB Admin v2.0</a>

  52.             </div>

  53.             <!-- /.navbar-header -->

  54. 

  55.             <ul class="nav navbar-top-links navbar-right">

  56.                 <li class="dropdown">

  57.                     <a class="dropdown-toggle" data-toggle="dropdown" href="#">

  58.                         <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>

  59.                     </a>

  60.                     <ul class="dropdown-menu dropdown-messages">

  61.                         <li>

  62.                             <a href="#">

  63.                                 <div>

  64.                                     <strong>John Smith</strong>

  65.                                     <span class="pull-right text-muted">

  66.                                         <em>Yesterday</em>

  67.                                     </span>

  68.                                 </div>

  69.                                 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>

  70.                             </a>

  71.                         </li>

  72.                         <li class="divider"></li>

  73.                         <li>

  74.                             <a href="#">

  75.                                 <div>

  76.                                     <strong>John Smith</strong>

  77.                                     <span class="pull-right text-muted">

  78.                                         <em>Yesterday</em>

  79.                                     </span>

  80.                                 </div>

  81.                                 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>

  82.                             </a>

  83.                         </li>

  84.                         <li class="divider"></li>

  85.                         <li>

  86.                             <a href="#">

  87.                                 <div>

  88.                                     <strong>John Smith</strong>

  89.                                     <span class="pull-right text-muted">

  90.                                         <em>Yesterday</em>

  91.                                     </span>

  92.                                 </div>

  93.                                 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>

  94.                             </a>

  95.                         </li>

  96.                         <li class="divider"></li>

  97.                         <li>

  98.                             <a class="text-center" href="#">

  99.                                 <strong>Read All Messages</strong>

  100.                                 <i class="fa fa-angle-right"></i>

  101.                             </a>

  102.                         </li>

  103.                     </ul>

  104.                     <!-- /.dropdown-messages -->

  105.                 </li>

  106.                 <!-- /.dropdown -->

  107.                 <li class="dropdown">

  108.                     <a class="dropdown-toggle" data-toggle="dropdown" href="#">

  109.                         <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>

  110.                     </a>

  111.                     <ul class="dropdown-menu dropdown-tasks">

  112.                         <li>

  113.                             <a href="#">

  114.                                 <div>

  115.                                     <p>

  116.                                         <strong>Task 1</strong>

  117.                                         <span class="pull-right text-muted">40% Complete</span>

  118.                                     </p>

  119.                                     <div class="progress progress-striped active">

  120.                                         <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">

  121.                                             <span class="sr-only">40% Complete (success)</span>

  122.                                         </div>

  123.                                     </div>

  124.                                 </div>

  125.                             </a>

  126.                         </li>

  127.                         <li class="divider"></li>

  128.                         <li>

  129.                             <a href="#">

  130.                                 <div>

  131.                                     <p>

  132.                                         <strong>Task 2</strong>

  133.                                         <span class="pull-right text-muted">20% Complete</span>

  134.                                     </p>

  135.                                     <div class="progress progress-striped active">

  136.                                         <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">

  137.                                             <span class="sr-only">20% Complete</span>

  138.                                         </div>

  139.                                     </div>

  140.                                 </div>

  141.                             </a>

  142.                         </li>

  143.                         <li class="divider"></li>

  144.                         <li>

  145.                             <a href="#">

  146.                                 <div>

  147.                                     <p>

  148.                                         <strong>Task 3</strong>

  149.                                         <span class="pull-right text-muted">60% Complete</span>

  150.                                     </p>

  151.                                     <div class="progress progress-striped active">

  152.                                         <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">

  153.                                             <span class="sr-only">60% Complete (warning)</span>

  154.                                         </div>

  155.                                     </div>

  156.                                 </div>

  157.                             </a>

  158.                         </li>

  159.                         <li class="divider"></li>

  160.                         <li>

  161.                             <a href="#">

  162.                                 <div>

  163.                                     <p>

  164.                                         <strong>Task 4</strong>

  165.                                         <span class="pull-right text-muted">80% Complete</span>

  166.                                     </p>

  167.                                     <div class="progress progress-striped active">

  168.                                         <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">

  169.                                             <span class="sr-only">80% Complete (danger)</span>

  170.                                         </div>

  171.                                     </div>

  172.                                 </div>

  173.                             </a>

  174.                         </li>

  175.                         <li class="divider"></li>

  176.                         <li>

  177.                             <a class="text-center" href="#">

  178.                                 <strong>See All Tasks</strong>

  179.                                 <i class="fa fa-angle-right"></i>

  180.                             </a>

  181.                         </li>

  182.                     </ul>

  183.                     <!-- /.dropdown-tasks -->

  184.                 </li>

  185.                 <!-- /.dropdown -->

  186.                 <li class="dropdown">

  187.                     <a class="dropdown-toggle" data-toggle="dropdown" href="#">

  188.                         <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>

  189.                     </a>

  190.                     <ul class="dropdown-menu dropdown-alerts">

  191.                         <li>

  192.                             <a href="#">

  193.                                 <div>

  194.                                     <i class="fa fa-comment fa-fw"></i> New Comment

  195.                                     <span class="pull-right text-muted small">4 minutes ago</span>

  196.                                 </div>

  197.                             </a>

  198.                         </li>

  199.                         <li class="divider"></li>

  200.                         <li>

  201.                             <a href="#">

  202.                                 <div>

  203.                                     <i class="fa fa-twitter fa-fw"></i> 3 New Followers

  204.                                     <span class="pull-right text-muted small">12 minutes ago</span>

  205.                                 </div>

  206.                             </a>

  207.                         </li>

  208.                         <li class="divider"></li>

  209.                         <li>

  210.                             <a href="#">

  211.                                 <div>

  212.                                     <i class="fa fa-envelope fa-fw"></i> Message Sent

  213.                                     <span class="pull-right text-muted small">4 minutes ago</span>

  214.                                 </div>

  215.                             </a>

  216.                         </li>

  217.                         <li class="divider"></li>

  218.                         <li>

  219.                             <a href="#">

  220.                                 <div>

  221.                                     <i class="fa fa-tasks fa-fw"></i> New Task

  222.                                     <span class="pull-right text-muted small">4 minutes ago</span>

  223.                                 </div>

  224.                             </a>

  225.                         </li>

  226.                         <li class="divider"></li>

  227.                         <li>

  228.                             <a href="#">

  229.                                 <div>

  230.                                     <i class="fa fa-upload fa-fw"></i> Server Rebooted

  231.                                     <span class="pull-right text-muted small">4 minutes ago</span>

  232.                                 </div>

  233.                             </a>

  234.                         </li>

  235.                         <li class="divider"></li>

  236.                         <li>

  237.                             <a class="text-center" href="#">

  238.                                 <strong>See All Alerts</strong>

  239.                                 <i class="fa fa-angle-right"></i>

  240.                             </a>

  241.                         </li>

  242.                     </ul>

  243.                     <!-- /.dropdown-alerts -->

  244.                 </li>

  245.                 <!-- /.dropdown -->

  246.                 <li class="dropdown">

  247.                     <a class="dropdown-toggle" data-toggle="dropdown" href="#">

  248.                         <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>

  249.                     </a>

  250.                     <ul class="dropdown-menu dropdown-user">

  251.                         <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>

  252.                         </li>

  253.                         <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>

  254.                         </li>

  255.                         <li class="divider"></li>

  256.                         <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>

  257.                         </li>

  258.                     </ul>

  259.                     <!-- /.dropdown-user -->

  260.                 </li>

  261.                 <!-- /.dropdown -->

  262.             </ul>

  263.             <!-- /.navbar-top-links -->

  264. 

  265.             <div class="navbar-default sidebar" role="navigation">

  266.                 <div class="sidebar-nav navbar-collapse">

  267.                     <ul class="nav" id="side-menu">

  268.                         <li class="sidebar-search">

  269.                             <div class="input-group custom-search-form">

  270.                                 <input type="text" class="form-control" placeholder="Search...">

  271.                                 <span class="input-group-btn">

  272.                                 <button class="btn btn-default" type="button">

  273.                                     <i class="fa fa-search"></i>

  274.                                 </button>

  275.                             </span>

  276.                             </div>

  277.                             <!-- /input-group -->

  278.                         </li>

  279.                         <li>

  280.                             <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>

  281.                         </li>

  282.                         <li>

  283.                             <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span></a>

  284.                             <ul class="nav nav-second-level">

  285.                                 <li>

  286.                                     <a href="flot.html">Flot Charts</a>

  287.                                 </li>

  288.                                 <li>

  289.                                     <a href="morris.html">Morris.js Charts</a>

  290.                                 </li>

  291.                             </ul>

  292.                             <!-- /.nav-second-level -->

  293.                         </li>

  294.                         <li>

  295.                             <a href="tables.html"><i class="fa fa-table fa-fw"></i> Tables</a>

  296.                         </li>

  297.                         <li>

  298.                             <a href="forms.html"><i class="fa fa-edit fa-fw"></i> Forms</a>

  299.                         </li>

  300.                         <li>

  301.                             <a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span></a>

  302.                             <ul class="nav nav-second-level">

  303.                                 <li>

  304.                                     <a href="panels-wells.html">Panels and Wells</a>

  305.                                 </li>

  306.                                 <li>

  307.                                     <a href="buttons.html">Buttons</a>

  308.                                 </li>

  309.                                 <li>

  310.                                     <a href="notifications.html">Notifications</a>

  311.                                 </li>

  312.                                 <li>

  313.                                     <a href="typography.html">Typography</a>

  314.                                 </li>

  315.                                 <li>

  316.                                     <a href="icons.html"> Icons</a>

  317.                                 </li>

  318.                                 <li>

  319.                                     <a href="grid.html">Grid</a>

  320.                                 </li>

  321.                             </ul>

  322.                             <!-- /.nav-second-level -->

  323.                         </li>

  324.                         <li>

  325.                             <a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>

  326.                             <ul class="nav nav-second-level">

  327.                                 <li>

  328.                                     <a href="#">Second Level Item</a>

  329.                                 </li>

  330.                                 <li>

  331.                                     <a href="#">Second Level Item</a>

  332.                                 </li>

  333.                                 <li>

  334.                                     <a href="#">Third Level <span class="fa arrow"></span></a>

  335.                                     <ul class="nav nav-third-level">

  336.                                         <li>

  337.                                             <a href="#">Third Level Item</a>

  338.                                         </li>

  339.                                         <li>

  340.                                             <a href="#">Third Level Item</a>

  341.                                         </li>

  342.                                         <li>

  343.                                             <a href="#">Third Level Item</a>

  344.                                         </li>

  345.                                         <li>

  346.                                             <a href="#">Third Level Item</a>

  347.                                         </li>

  348.                                     </ul>

  349.                                     <!-- /.nav-third-level -->

  350.                                 </li>

  351.                             </ul>

  352.                             <!-- /.nav-second-level -->

  353.                         </li>

  354.                         <li>

  355.                             <a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span></a>

  356.                             <ul class="nav nav-second-level">

  357.                                 <li>

  358.                                     <a href="blank.html">Blank Page</a>

  359.                                 </li>

  360.                                 <li>

  361.                                     <a href="login.html">Login Page</a>

  362.                                 </li>

  363.                             </ul>

  364.                             <!-- /.nav-second-level -->

  365.                         </li>

  366.                     </ul>

  367.                 </div>

  368.                 <!-- /.sidebar-collapse -->

  369.             </div>

  370.             <!-- /.navbar-static-side -->

  371.         </nav>

  372. 

  373.         <div id="page-wrapper">

  374.             <div class="row">

  375.                 <div class="col-lg-12">

  376.                     <h1 class="page-header">Morris.js Charts</h1>

  377.                 </div>

  378.                 <!-- /.col-lg-12 -->

  379.             </div>

  380.             <!-- /.row -->

  381.             <div class="row">

  382.                 <div class="col-lg-6">

  383.                     <div class="panel panel-default">

  384.                         <div class="panel-heading">

  385.                             Area Chart Example

  386.                         </div>

  387.                         <!-- /.panel-heading -->

  388.                         <div class="panel-body">

  389.                             <div id="morris-area-chart"></div>

  390.                         </div>

  391.                         <!-- /.panel-body -->

  392.                     </div>

  393.                     <!-- /.panel -->

  394.                 </div>

  395.                 <!-- /.col-lg-6 -->

  396.                 <div class="col-lg-6">

  397.                     <div class="panel panel-default">

  398.                         <div class="panel-heading">

  399.                             Bar Chart Example

  400.                         </div>

  401.                         <!-- /.panel-heading -->

  402.                         <div class="panel-body">

  403.                             <div id="morris-bar-chart"></div>

  404.                         </div>

  405.                         <!-- /.panel-body -->

  406.                     </div>

  407.                     <!-- /.panel -->

  408.                 </div>

  409.                 <!-- /.col-lg-6 -->

  410.                 <div class="col-lg-6">

  411.                     <div class="panel panel-default">

  412.                         <div class="panel-heading">

  413.                             Line Chart Example

  414.                         </div>

  415.                         <!-- /.panel-heading -->

  416.                         <div class="panel-body">

  417.                             <div id="morris-line-chart"></div>

  418.                         </div>

  419.                         <!-- /.panel-body -->

  420.                     </div>

  421.                     <!-- /.panel -->

  422.                 </div>

  423.                 <!-- /.col-lg-6 -->

  424.                 <div class="col-lg-6">

  425.                     <div class="panel panel-default">

  426.                         <div class="panel-heading">

  427.                             Donut Chart Example

  428.                         </div>

  429.                         <!-- /.panel-heading -->

  430.                         <div class="panel-body">

  431.                             <div id="morris-donut-chart"></div>

  432.                         </div>

  433.                         <!-- /.panel-body -->

  434.                     </div>

  435.                     <!-- /.panel -->

  436.                 </div>

  437.                 <!-- /.col-lg-6 -->

  438.                 <div class="col-lg-12">

  439.                     <div class="panel panel-default">

  440.                         <div class="panel-heading">

  441.                             Morris.js Usage

  442.                         </div>

  443.                         <!-- /.panel-heading -->

  444.                         <div class="panel-body">

  445.                             <p>Morris.js is a jQuery based charting plugin created by Olly Smith. In SB Admin, we are using the most recent version of Morris.js which includes the resize function, which makes the charts fully responsive. The documentation for Morris.js is available on their website, <a target="_blank" href="http://morrisjs.github.io/morris.js/">http://morrisjs.github.io/morris.js/</a>.</p>

  446.                             <a target="_blank" class="btn btn-default btn-lg btn-block" href="http://morrisjs.github.io/morris.js/">View Morris.js Documentation</a>

  447.                         </div>

  448.                         <!-- /.panel-body -->

  449.                     </div>

  450.                     <!-- /.panel -->

  451.                 </div>

  452.                 <!-- /.col-lg-6 -->

  453.             </div>

  454.             <!-- /.row -->

  455.         </div>

  456.         <!-- /#page-wrapper -->

  457. 

  458.     </div>

  459.     <!-- /#wrapper -->

  460. 

  461.     <!-- jQuery -->

  462.     <script src="../vendor/jquery/jquery.min.js"></script>

  463. 

  464.     <!-- Bootstrap Core JavaScript -->

  465.     <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>

  466. 

  467.     <!-- Metis Menu Plugin JavaScript -->

  468.     <script src="../vendor/metisMenu/metisMenu.min.js"></script>

  469. 

  470.     <!-- Morris Charts JavaScript -->

  471.     <script src="../vendor/raphael/raphael.min.js"></script>

  472.     <script src="../vendor/morrisjs/morris.min.js"></script>

  473.     <script src="../data/morris-data.js"></script>

  474. 

  475.     <!-- Custom Theme JavaScript -->

  476.     <script src="../dist/js/sb-admin-2.js"></script>

  477. 

  478. </body>

  479. 

  480. </html>