Prettified the charts and added chartjs

pull/325/merge
Abdullah Almsaeed 10 years ago
parent d373b16699
commit 993aff4e31

@ -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 -->

@ -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>

@ -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>

Loading…
Cancel
Save