Преглед изворни кода

Prettified the charts and added chartjs

Abdullah Almsaeed пре 10 година
родитељ
комит
993aff4e31
3 измењених фајлова са 71 додато и 17 уклоњено
  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

@@ -25,7 +25,7 @@
   </head>
   <body class="skin-blue sidebar-mini">
     <div class="wrapper">
-      
+
       <header class="main-header">
         <a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
         <!-- Header Navbar: style can be found in header.less -->
@@ -345,18 +345,28 @@
             <div class="col-md-6">
               <!-- AREA CHART -->
               <div class="box box-primary">
-                <div class="box-header">
+                <div class="box-header with-border">
                   <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 class="box-body">
-                  <canvas id="areaChart" height="250"></canvas>
+                  <div class="margin">
+                    <canvas id="areaChart" height="250"></canvas>
+                  </div>
                 </div><!-- /.box-body -->
               </div><!-- /.box -->
 
               <!-- DONUT CHART -->
               <div class="box box-danger">
-                <div class="box-header">
+                <div class="box-header with-border">
                   <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 class="box-body">
                   <div class="chart-responsive">
@@ -369,21 +379,33 @@
             <div class="col-md-6">
               <!-- LINE CHART -->
               <div class="box box-info">
-                <div class="box-header">
+                <div class="box-header with-border">
                   <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 class="box-body">
-                  <canvas id="lineChart" height="250"></canvas>
+                  <div class="margin">
+                    <canvas id="lineChart" height="250"></canvas>
+                  </div>
                 </div><!-- /.box-body -->
               </div><!-- /.box -->
 
               <!-- BAR CHART -->
               <div class="box box-success">
-                <div class="box-header">
+                <div class="box-header with-border">
                   <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 class="box-body">
-                  <canvas id="barChart" height="230"></canvas>
+                  <div class="margin">
+                    <canvas id="barChart" height="230"></canvas>
+                  </div>
                 </div><!-- /.box-body -->
               </div><!-- /.box -->
 

+ 21 - 5
pages/charts/flot.html

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

+ 20 - 4
pages/charts/morris.html

@@ -459,8 +459,12 @@
             <div class="col-md-6">
               <!-- AREA CHART -->
               <div class="box box-primary">
-                <div class="box-header">
+                <div class="box-header with-border">
                   <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 class="box-body chart-responsive">
                   <div class="chart" id="revenue-chart" style="height: 300px;"></div>
@@ -469,8 +473,12 @@
 
               <!-- DONUT CHART -->
               <div class="box box-danger">
-                <div class="box-header">
+                <div class="box-header with-border">
                   <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 class="box-body chart-responsive">
                   <div class="chart" id="sales-chart" style="height: 300px; position: relative;"></div>
@@ -481,8 +489,12 @@
             <div class="col-md-6">
               <!-- LINE CHART -->
               <div class="box box-info">
-                <div class="box-header">
+                <div class="box-header with-border">
                   <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 class="box-body chart-responsive">
                   <div class="chart" id="line-chart" style="height: 300px;"></div>
@@ -491,8 +503,12 @@
 
               <!-- BAR CHART -->
               <div class="box box-success">
-                <div class="box-header">
+                <div class="box-header with-border">
                   <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 class="box-body chart-responsive">
                   <div class="chart" id="bar-chart" style="height: 300px;"></div>