sleek-dashboard
Version:
Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com
277 lines (271 loc) • 9.18 kB
HTML
---
layout: default
title: "General Widgets - Sleek Admin Dashboard Template"
parent: "widgets"
sub_parent: "widgets"
activePage: "chart-widget"
plugins: ["chart_js", "date_range_picker"]
---
<!-- First Row -->
<div class="row">
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="widget-block rounded bg-white d-flex">
<div class="widget-info align-self-center w-50">
<h3 class="text-dark mb-2">71,503</h3>
<p>Online Signups</p>
</div>
<div class="widget-chart w-50">
<canvas id="barChart1"></canvas>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="widget-block rounded bg-white d-flex">
<div class="widget-info align-self-center w-50">
<h3 class="text-dark mb-2">9,503</h3>
<p>Weekly Visitors</p>
</div>
<div class="widget-chart w-50">
<canvas id="linechart1"></canvas>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="widget-block rounded bg-white d-flex">
<div class="widget-info align-self-center w-50">
<h3 class="text-dark mb-2">71,503</h3>
<p>Weekly Total Order</p>
</div>
<div class="widget-chart w-50">
<canvas id="areaChart1"></canvas>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="widget-block rounded bg-white d-flex">
<div class="widget-info align-self-center w-50">
<h3 class="text-dark mb-2">10,503</h3>
<p>Revenue This Week</p>
</div>
<div class="widget-chart w-50">
<canvas id="gline1"></canvas>
</div>
</div>
</div>
</div>
<!-- Second Row -->
<div class="row">
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="widget-block rounded bg-primary d-flex">
<div class="widget-info align-self-center w-50">
<h3 class="text-white mb-2">71,503</h3>
<p>Online Signups</p>
</div>
<div class="widget-chart w-50">
<canvas id="barChart2"></canvas>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="widget-block rounded bg-warning d-flex">
<div class="widget-info align-self-center w-50">
<h3 class="text-white mb-2">9,503</h3>
<p>Weekly Visitors</p>
</div>
<div class="widget-chart w-50">
<canvas id="linechart2"></canvas>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="widget-block rounded bg-danger d-flex">
<div class="widget-info align-self-center w-50">
<h3 class="text-white mb-2">71,503</h3>
<p>Weekly Total Order</p>
</div>
<div class="widget-chart w-50">
<canvas id="areaChart2"></canvas>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="widget-block rounded bg-success d-flex">
<div class="widget-info align-self-center w-50">
<h3 class="text-white mb-2">10,503</h3>
<p>Revenue This Week</p>
</div>
<div class="widget-chart w-50">
<canvas id="gline2"></canvas>
</div>
</div>
</div>
</div>
<!-- Third Row -->
<div class="row">
<div class="col-xl-3 col-sm-6">
<div class="card widget-block p-4 rounded bg-white ">
<div class="card-block">
<h3 class="text-dark">71,503</h3>
<p class="py-2">Online Signups</p>
</div>
<div class="chartjs-wrapper" style="height: 110px;">
<canvas id="barChart"></canvas>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6">
<div class="card widget-block p-4 rounded bg-white ">
<div class="card-block">
<h3 class="text-dark">9,503</h3>
<p class="py-2">New Visitors Today</p>
</div>
<div class="chartjs-wrapper" style="height: 110px;">
<canvas id="dual-line"></canvas>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6">
<div class="card widget-block p-4 rounded bg-white ">
<div class="card-block">
<h3 class="text-dark">71,503</h3>
<p class="py-2">Monthly Total Order</p>
</div>
<div class="chartjs-wrapper" style="height: 110px;">
<canvas id="area-chart"></canvas>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6">
<div class="card widget-block p-4 rounded bg-white ">
<div class="card-block">
<h3 class="text-dark">9,503</h3>
<p class="py-2">Total Revenue This Year</p>
</div>
<div class="chartjs-wrapper" style="height: 110px;">
<canvas id="line"></canvas>
</div>
</div>
</div>
</div>
<!-- Fourth Row -->
<div class="row">
<div class="col-xl-3 col-sm-6">
<div class="card widget-block p-4 rounded bg-primary ">
<div class="card-block">
<h3 class="text-white">71,503</h3>
<p class="py-2">Online Signups</p>
</div>
<div class="chartjs-wrapper" style="height: 110px;">
<canvas id="barChart3"></canvas>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6">
<div class="card widget-block p-4 rounded bg-warning ">
<div class="card-block">
<h3 class="text-white">9,503</h3>
<p class="py-2">New Visitors Today</p>
</div>
<div class="chartjs-wrapper" style="height: 110px;">
<canvas id="dual-line3"></canvas>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6">
<div class="card widget-block p-4 rounded bg-danger ">
<div class="card-block">
<h3 class="text-white">71,503</h3>
<p class="py-2">Monthly Total Order</p>
</div>
<div class="chartjs-wrapper" style="height: 110px;">
<canvas id="area-chart3"></canvas>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6">
<div class="card widget-block p-4 rounded bg-success ">
<div class="card-block">
<h3 class="text-white">9,503</h3>
<p class="py-2">Total Revenue This Year</p>
</div>
<div class="chartjs-wrapper" style="height: 110px;">
<canvas id="line3"></canvas>
</div>
</div>
</div>
</div>
<!-- Fifth Row -->
<div class="row">
<div class="col-xl-8 col-md-12">
{%- include sales-graph.htm -%}
</div>
<div class="col-xl-4 col-md-12">
{%- include revenue-donut-chart.htm -%}
</div>
</div>
<!-- Sixth Row -->
<div class="row">
<div class="col-xl-4 col-md-12">
<div class="card card-default">
<div class="card-header justify-content-center">
<h2>Sale Overview</h2>
</div>
<div class="card-body pt-0" style="position: relative; height:50vh">
<canvas id="polar"></canvas>
</div>
</div>
</div>
<div class="col-xl-8 col-md-12">
<div class="card card-default" id="user-acquisition">
<div class="card-header justify-content-between pb-5">
<h2 class=" text-dark">User Acquisition</h2>
</div>
<div class="card-body pt-0 mb-5" style="position: relative; height:45vh">
<canvas id="acquisition" class="chartjs"></canvas>
<div id="acqLegend" class="customLegend"></div>
</div>
</div>
</div>
</div>
<!-- Seventh Row -->
<div class="row">
<div class="col-xl-8">
<div class="card card-default" id="activity-user">
<div class="card-header d-flex flex-wrap justify-content-between">
<h2>User Activity</h2>
<div class="date-range-report ">
<span></span>
</div>
</div>
<div class="card-body">
<canvas id="activity" class="chartjs"></canvas>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card card-default" id="activity-user">
<div class="card-header">
<h2>Current Users</h2>
</div>
<div class="card-body">
<canvas id="currentUser" class="chartjs"></canvas>
</div>
</div>
</div>
</div>
<!-- Recent Orders -->
<div class="row">
<div class="col-lg-6">
{%- include analytics-device.htm -%}
</div>
<div class="col-lg-6">
<div class="card card-default" id="activity-user">
<div class="card-header">
<h2>Sale Overview</h2>
</div>
<div class="card-body">
<canvas id="radar"></canvas>
</div>
</div>
</div>
</div>