Home Explore Help
Register Sign In
wilson.silva
/
AdminLte
mirror of https://github.com/almasaeed2010/AdminLTE
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Prettified the charts and added chartjs

Abdullah Almsaeed 10 years ago
parent
d373b16699
commit
993aff4e31
3 changed files with 71 additions and 17 deletions
Unified View Show Diff Stats
  1. 30 8
      pages/charts/chartjs.html
  2. 21 5
      pages/charts/flot.html
  3. 20 4
      pages/charts/morris.html

+ 30 - 8
pages/charts/chartjs.html
View File 

@@ -25,7 +25,7 @@
 
   </head>
 
   </head>
 
   <body class="skin-blue sidebar-mini">
 
   <body class="skin-blue sidebar-mini">
 
     <div class="wrapper">
 
     <div class="wrapper">
 
-      
+
 
       <header class="main-header">
 
       <header class="main-header">
 
         <a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
 
         <a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
 
         <!-- Header Navbar: style can be found in header.less -->
 
         <!-- Header Navbar: style can be found in header.less -->
 
@@ -345,18 +345,28 @@
 
             <div class="col-md-6">
 
             <div class="col-md-6">
 
               <!-- AREA CHART -->
 
               <!-- AREA CHART -->
 
               <div class="box box-primary">
 
               <div class="box box-primary">
 
-                <div class="box-header">
 
+                <div class="box-header with-border">
 
                   <h3 class="box-title">Area Chart</h3>
 
                   <h3 class="box-title">Area Chart</h3>
 
+                  <div class="box-tools pull-right">
 
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 
+                  </div>
 
                 </div>
 
                 </div>
 
                 <div class="box-body">
 
                 <div class="box-body">
 
-                  <canvas id="areaChart" height="250"></canvas>
 
+                  <div class="margin">
 
+                    <canvas id="areaChart" height="250"></canvas>
 
+                  </div>
 
                 </div><!-- /.box-body -->
 
                 </div><!-- /.box-body -->
 
               </div><!-- /.box -->
 
               </div><!-- /.box -->
 
 
 
               <!-- DONUT CHART -->
 
               <!-- DONUT CHART -->
 
               <div class="box box-danger">
 
               <div class="box box-danger">
 
-                <div class="box-header">
 
+                <div class="box-header with-border">
 
                   <h3 class="box-title">Donut Chart</h3>
 
                   <h3 class="box-title">Donut Chart</h3>
 
+                  <div class="box-tools pull-right">
 
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 
+                  </div>
 
                 </div>
 
                 </div>
 
                 <div class="box-body">
 
                 <div class="box-body">
 
                   <div class="chart-responsive">
 
                   <div class="chart-responsive">
 
@@ -369,21 +379,33 @@
 
             <div class="col-md-6">
 
             <div class="col-md-6">
 
               <!-- LINE CHART -->
 
               <!-- LINE CHART -->
 
               <div class="box box-info">
 
               <div class="box box-info">
 
-                <div class="box-header">
 
+                <div class="box-header with-border">
 
                   <h3 class="box-title">Line Chart</h3>
 
                   <h3 class="box-title">Line Chart</h3>
 
+                  <div class="box-tools pull-right">
 
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 
+                  </div>
 
                 </div>
 
                 </div>
 
                 <div class="box-body">
 
                 <div class="box-body">
 
-                  <canvas id="lineChart" height="250"></canvas>
 
+                  <div class="margin">
 
+                    <canvas id="lineChart" height="250"></canvas>
 
+                  </div>
 
                 </div><!-- /.box-body -->
 
                 </div><!-- /.box-body -->
 
               </div><!-- /.box -->
 
               </div><!-- /.box -->
 
 
 
               <!-- BAR CHART -->
 
               <!-- BAR CHART -->
 
               <div class="box box-success">
 
               <div class="box box-success">
 
-                <div class="box-header">
 
+                <div class="box-header with-border">
 
                   <h3 class="box-title">Bar Chart</h3>
 
                   <h3 class="box-title">Bar Chart</h3>
 
+                  <div class="box-tools pull-right">
 
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 
+                  </div>
 
                 </div>
 
                 </div>
 
                 <div class="box-body">
 
                 <div class="box-body">
 
-                  <canvas id="barChart" height="230"></canvas>
 
+                  <div class="margin">
 
+                    <canvas id="barChart" height="230"></canvas>
 
+                  </div>
 
                 </div><!-- /.box-body -->
 
                 </div><!-- /.box-body -->
 
               </div><!-- /.box -->
 
               </div><!-- /.box -->

+ 21 - 5
pages/charts/flot.html
View File 

@@ -452,7 +452,7 @@
 
             <div class="col-xs-12">
 
             <div class="col-xs-12">
 
               <!-- interactive chart -->
 
               <!-- interactive chart -->
 
               <div class="box box-primary">
 
               <div class="box box-primary">
 
-                <div class="box-header">
 
+                <div class="box-header with-border">
 
                   <i class="fa fa-bar-chart-o"></i>
 
                   <i class="fa fa-bar-chart-o"></i>
 
                   <h3 class="box-title">Interactive Area Chart</h3>
 
                   <h3 class="box-title">Interactive Area Chart</h3>
 
                   <div class="box-tools pull-right">
 
                   <div class="box-tools pull-right">
 
@@ -475,9 +475,13 @@
 
             <div class="col-md-6">
 
             <div class="col-md-6">
 
               <!-- Line chart -->
 
               <!-- Line chart -->
 
               <div class="box box-primary">
 
               <div class="box box-primary">
 
-                <div class="box-header">
 
+                <div class="box-header with-border">
 
                   <i class="fa fa-bar-chart-o"></i>
 
                   <i class="fa fa-bar-chart-o"></i>
 
                   <h3 class="box-title">Line Chart</h3>
 
                   <h3 class="box-title">Line Chart</h3>
 
+                  <div class="box-tools pull-right">
 
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 
+                  </div>
 
                 </div>
 
                 </div>
 
                 <div class="box-body">
 
                 <div class="box-body">
 
                   <div id="line-chart" style="height: 300px;"></div>
 
                   <div id="line-chart" style="height: 300px;"></div>
 
@@ -486,9 +490,13 @@
 
 
 
               <!-- Area chart -->
 
               <!-- Area chart -->
 
               <div class="box box-primary">
 
               <div class="box box-primary">
 
-                <div class="box-header">
 
+                <div class="box-header with-border">
 
                   <i class="fa fa-bar-chart-o"></i>
 
                   <i class="fa fa-bar-chart-o"></i>
 
                   <h3 class="box-title">Full Width Area Chart</h3>
 
                   <h3 class="box-title">Full Width Area Chart</h3>
 
+                  <div class="box-tools pull-right">
 
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 
+                  </div>
 
                 </div>
 
                 </div>
 
                 <div class="box-body">
 
                 <div class="box-body">
 
                   <div id="area-chart" style="height: 338px;" class="full-width-chart"></div>
 
                   <div id="area-chart" style="height: 338px;" class="full-width-chart"></div>
 
@@ -500,9 +508,13 @@
 
             <div class="col-md-6">
 
             <div class="col-md-6">
 
               <!-- Bar chart -->
 
               <!-- Bar chart -->
 
               <div class="box box-primary">
 
               <div class="box box-primary">
 
-                <div class="box-header">
 
+                <div class="box-header with-border">
 
                   <i class="fa fa-bar-chart-o"></i>
 
                   <i class="fa fa-bar-chart-o"></i>
 
                   <h3 class="box-title">Bar Chart</h3>
 
                   <h3 class="box-title">Bar Chart</h3>
 
+                  <div class="box-tools pull-right">
 
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 
+                  </div>
 
                 </div>
 
                 </div>
 
                 <div class="box-body">
 
                 <div class="box-body">
 
                   <div id="bar-chart" style="height: 300px;"></div>
 
                   <div id="bar-chart" style="height: 300px;"></div>
 
@@ -511,9 +523,13 @@
 
 
 
               <!-- Donut chart -->
 
               <!-- Donut chart -->
 
               <div class="box box-primary">
 
               <div class="box box-primary">
 
-                <div class="box-header">
 
+                <div class="box-header with-border">
 
                   <i class="fa fa-bar-chart-o"></i>
 
                   <i class="fa fa-bar-chart-o"></i>
 
                   <h3 class="box-title">Donut Chart</h3>
 
                   <h3 class="box-title">Donut Chart</h3>
 
+                  <div class="box-tools pull-right">
 
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 
+                  </div>
 
                 </div>
 
                 </div>
 
                 <div class="box-body">
 
                 <div class="box-body">
 
                   <div id="donut-chart" style="height: 300px;"></div>
 
                   <div id="donut-chart" style="height: 300px;"></div>

+ 20 - 4
pages/charts/morris.html
View File 

@@ -459,8 +459,12 @@
 
             <div class="col-md-6">
 
             <div class="col-md-6">
 
               <!-- AREA CHART -->
 
               <!-- AREA CHART -->
 
               <div class="box box-primary">
 
               <div class="box box-primary">
 
-                <div class="box-header">
 
+                <div class="box-header with-border">
 
                   <h3 class="box-title">Area Chart</h3>
 
                   <h3 class="box-title">Area Chart</h3>
 
+                  <div class="box-tools pull-right">
 
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 
+                  </div>
 
                 </div>
 
                 </div>
 
                 <div class="box-body chart-responsive">
 
                 <div class="box-body chart-responsive">
 
                   <div class="chart" id="revenue-chart" style="height: 300px;"></div>
 
                   <div class="chart" id="revenue-chart" style="height: 300px;"></div>
 
@@ -469,8 +473,12 @@
 
 
 
               <!-- DONUT CHART -->
 
               <!-- DONUT CHART -->
 
               <div class="box box-danger">
 
               <div class="box box-danger">
 
-                <div class="box-header">
 
+                <div class="box-header with-border">
 
                   <h3 class="box-title">Donut Chart</h3>
 
                   <h3 class="box-title">Donut Chart</h3>
 
+                  <div class="box-tools pull-right">
 
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 
+                  </div>
 
                 </div>
 
                 </div>
 
                 <div class="box-body chart-responsive">
 
                 <div class="box-body chart-responsive">
 
                   <div class="chart" id="sales-chart" style="height: 300px; position: relative;"></div>
 
                   <div class="chart" id="sales-chart" style="height: 300px; position: relative;"></div>
 
@@ -481,8 +489,12 @@
 
             <div class="col-md-6">
 
             <div class="col-md-6">
 
               <!-- LINE CHART -->
 
               <!-- LINE CHART -->
 
               <div class="box box-info">
 
               <div class="box box-info">
 
-                <div class="box-header">
 
+                <div class="box-header with-border">
 
                   <h3 class="box-title">Line Chart</h3>
 
                   <h3 class="box-title">Line Chart</h3>
 
+                  <div class="box-tools pull-right">
 
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 
+                  </div>
 
                 </div>
 
                 </div>
 
                 <div class="box-body chart-responsive">
 
                 <div class="box-body chart-responsive">
 
                   <div class="chart" id="line-chart" style="height: 300px;"></div>
 
                   <div class="chart" id="line-chart" style="height: 300px;"></div>
 
@@ -491,8 +503,12 @@
 
 
 
               <!-- BAR CHART -->
 
               <!-- BAR CHART -->
 
               <div class="box box-success">
 
               <div class="box box-success">
 
-                <div class="box-header">
 
+                <div class="box-header with-border">
 
                   <h3 class="box-title">Bar Chart</h3>
 
                   <h3 class="box-title">Bar Chart</h3>
 
+                  <div class="box-tools pull-right">
 
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 
+                  </div>
 
                 </div>
 
                 </div>
 
                 <div class="box-body chart-responsive">
 
                 <div class="box-body chart-responsive">
 
                   <div class="chart" id="bar-chart" style="height: 300px;"></div>
 
                   <div class="chart" id="bar-chart" style="height: 300px;"></div>