github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Prettified the charts and added chartjs

pull/325/merge
Abdullah Almsaeed 2015-03-23 10:13:35 -04:00
parent d373b16699
commit 993aff4e31
3 changed files with 71 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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