<!-- Content Header (Page header) -->
|
<section class="content-header">
|
<h1>
|
ChartJS
|
<small>Preview sample</small>
|
</h1>
|
<ol class="breadcrumb">
|
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
|
<li><a href="#">Charts</a></li>
|
<li class="active">ChartJS</li>
|
</ol>
|
</section>
|
|
<!-- Main content -->
|
<section class="content">
|
<div class="row">
|
<div class="col-md-6">
|
<!-- AREA CHART -->
|
<div class="box box-primary">
|
<div class="box-header with-border">
|
<h3 class="box-title">Area Chart</h3>
|
|
<div class="box-tools pull-right">
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
|
</button>
|
<button type="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">
|
<canvas id="areaChart" style="height:250px"></canvas>
|
</div>
|
</div>
|
<!-- /.box-body -->
|
</div>
|
<!-- /.box -->
|
|
<!-- DONUT CHART -->
|
<div class="box box-danger">
|
<div class="box-header with-border">
|
<h3 class="box-title">Donut Chart</h3>
|
|
<div class="box-tools pull-right">
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
|
</button>
|
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
</div>
|
</div>
|
<div class="box-body">
|
<canvas id="pieChart" style="height:250px"></canvas>
|
</div>
|
<!-- /.box-body -->
|
</div>
|
<!-- /.box -->
|
|
</div>
|
<!-- /.col (LEFT) -->
|
<div class="col-md-6">
|
<!-- LINE CHART -->
|
<div class="box box-info">
|
<div class="box-header with-border">
|
<h3 class="box-title">Line Chart</h3>
|
|
<div class="box-tools pull-right">
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
|
</button>
|
<button type="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">
|
<canvas id="lineChart" style="height:250px"></canvas>
|
</div>
|
</div>
|
<!-- /.box-body -->
|
</div>
|
<!-- /.box -->
|
|
<!-- BAR CHART -->
|
<div class="box box-success">
|
<div class="box-header with-border">
|
<h3 class="box-title">Bar Chart</h3>
|
|
<div class="box-tools pull-right">
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
|
</button>
|
<button type="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">
|
<canvas id="barChart" style="height:230px"></canvas>
|
</div>
|
</div>
|
<!-- /.box-body -->
|
</div>
|
<!-- /.box -->
|
|
</div>
|
<!-- /.col (RIGHT) -->
|
</div>
|
<!-- /.row -->
|
|
</section>
|
