Black Friday! Up to 90% OFF
<nav aria-label="..." class="draggable"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" tabindex="-1"> <i class="fa fa-angle-left"></i> <span class="sr-only">Previous</span> </a> </li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"> <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a> </li> <li class="page-item"> <a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#"> <i class="fa fa-angle-right"></i> <span class="sr-only">Next</span> </a> </li> </ul> </nav>
<div class="card bg-default draggable"> <div class="card-header bg-transparent"> <div class="row align-items-center"> <div class="col"> <h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6> <h5 class="h3 text-white mb-0">Sales value</h5> </div> <div class="col"> <ul class="nav nav-pills justify-content-end"> <li class="nav-item mr-2 mr-md-0" data-toggle="chart"> <a href="#" class="nav-link py-2 px-3 active" data-toggle="tab"> <span class="d-none d-md-block">Month</span> <span class="d-md-none">M</span> </a> </li> <li class="nav-item" data-toggle="chart"> <a href="#" class="nav-link py-2 px-3" data-toggle="tab"> <span class="d-none d-md-block">Week</span> <span class="d-md-none">W</span> </a> </li> </ul> </div> </div> </div> <div class="card-body"> <div class="chart"> <canvas id="chart-sales-dark" class="chart-line chart-canvas"></canvas> </div> </div> </div><script>var chartsLine = document.querySelectorAll(".chart-line"); chartsLine.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "line", data: { labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Performance", tension: 0.4, borderWidth: 4, borderColor: "#5e72e4", pointRadius: 0, backgroundColor: "transparent", data: [0, 20, 10, 30, 15, 40, 20, 60, 60], }, ], }, options: { responsive: true, maintainAspectRatio: false, legend: { display: false, }, tooltips: { enabled: true, mode: "index", intersect: false, }, scales: { yAxes: [{ barPercentage: 1.6, gridLines: { drawBorder: false, color: "rgba(29,140,248,0.0)", zeroLineColor: "transparent", }, ticks: { padding: 0, fontColor: "#8898aa", fontSize: 13, fontFamily: "Open Sans", }, }, ], xAxes: [{ barPercentage: 1.6, gridLines: { drawBorder: false, color: "rgba(29,140,248,0.0)", zeroLineColor: "transparent", }, ticks: { padding: 10, fontColor: "#8898aa", fontSize: 13, fontFamily: "Open Sans", }, }, ], }, layout: { padding: 0, }, }, }); chart.setAttribute("data-chart-initialized", "true"); } });</script>
<div class="card bg-default draggable"> <div class="card-header bg-transparent"> <div class="row align-items-center"> <div class="col"> <h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6> <h5 class="h3 text-white mb-0">Sales value</h5> </div> <div class="col"> <ul class="nav nav-pills justify-content-end"> <li class="nav-item mr-2 mr-md-0" data-toggle="chart"> <a href="#" class="nav-link py-2 px-3 active" data-toggle="tab"> <span class="d-none d-md-block">Month</span> <span class="d-md-none">M</span> </a> </li> <li class="nav-item" data-toggle="chart"> <a href="#" class="nav-link py-2 px-3" data-toggle="tab"> <span class="d-none d-md-block">Week</span> <span class="d-md-none">W</span> </a> </li> </ul> </div> </div> </div> <div class="card-body"> <div class="chart"> <canvas id="chart-sales-dark" class="chart-line chart-canvas"></canvas> </div> </div> </div>
var chartsLine = document.querySelectorAll(".chart-line"); chartsLine.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "line", data: { labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Performance", tension: 0.4, borderWidth: 4, borderColor: "#5e72e4", pointRadius: 0, backgroundColor: "transparent", data: [0, 20, 10, 30, 15, 40, 20, 60, 60], }, ], }, options: { responsive: true, maintainAspectRatio: false, legend: { display: false, }, tooltips: { enabled: true, mode: "index", intersect: false, }, scales: { yAxes: [{ barPercentage: 1.6, gridLines: { drawBorder: false, color: "rgba(29,140,248,0.0)", zeroLineColor: "transparent", }, ticks: { padding: 0, fontColor: "#8898aa", fontSize: 13, fontFamily: "Open Sans", }, }, ], xAxes: [{ barPercentage: 1.6, gridLines: { drawBorder: false, color: "rgba(29,140,248,0.0)", zeroLineColor: "transparent", }, ticks: { padding: 10, fontColor: "#8898aa", fontSize: 13, fontFamily: "Open Sans", }, }, ], }, layout: { padding: 0, }, }, }); chart.setAttribute("data-chart-initialized", "true"); } });
<div class="card draggable"> <div class="card-header border-0"> <div class="row align-items-center"> <div class="col"> <h3 class="mb-0">Page visits</h3> </div> <div class="col text-right"> <a href="#!" class="btn btn-sm btn-primary">See all</a> </div> </div> </div> <div class="table-responsive"> <table class="table align-items-center table-flush"> <thead class="thead-light"> <tr> <th scope="col">Page name</th> <th scope="col">Visitors</th> <th scope="col">Unique users</th> <th scope="col">Bounce rate</th> </tr> </thead> <tbody> <tr> <th scope="row"> /argon/ </th> <td> 4,569 </td> <td> 340 </td> <td> <i class="fas fa-arrow-up text-success mr-3"></i> 46,53% </td> </tr> <tr> <th scope="row"> /argon/index.html </th> <td> 3,985 </td> <td> 319 </td> <td> <i class="fas fa-arrow-down text-warning mr-3"></i> 46,53% </td> </tr> <tr> <th scope="row"> /argon/charts.html </th> <td> 3,513 </td> <td> 294 </td> <td> <i class="fas fa-arrow-down text-warning mr-3"></i> 36,49% </td> </tr> <tr> <th scope="row"> /argon/tables.html </th> <td> 2,050 </td> <td> 147 </td> <td> <i class="fas fa-arrow-up text-success mr-3"></i> 50,87% </td> </tr> <tr> <th scope="row"> /argon/profile.html </th> <td> 1,795 </td> <td> 190 </td> <td> <i class="fas fa-arrow-down text-danger mr-3"></i> 46,53% </td> </tr> </tbody> </table> </div> </div>
<div class="card draggable"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div>
<div class="card draggable"> <div class="card-header bg-transparent"> <h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6> <h5 class="h3 mb-0">Total orders</h5> </div> <div class="card-body"> <div class="chart"> <canvas id="chart-bars" class="chart-bar chart-canvas"></canvas> </div> </div> </div><script>var chartsBar = document.querySelectorAll(".chart-bar"); chartsBar.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "bar", data: { labels: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [ { label: "Sales", tension: 0.4, borderWidth: 0, pointRadius: 0, backgroundColor: "#fb6340", data: [25, 20, 30, 22, 17, 29], maxBarThickness: 10, }, ], }, options: { responsive: true, maintainAspectRatio: false, legend: { display: false, }, tooltips: { enabled: true, mode: "index", intersect: false, }, scales: { yAxes: [ { gridLines: { borderDash: [2], borderDashOffset: [2], drawTicks: false, drawBorder: false, lineWidth: 1, zeroLineWidth: 0, zeroLineBorderDash: [0], zeroLineBorderDashOffset: [2], }, ticks: { beginAtZero: true, padding: 10, fontSize: 13, lineHeight: 5, fontColor: "#8898aa", fontFamily: "Open Sans", }, }, ], xAxes: [ { gridLines: { display: false, drawBorder: false, drawOnChartArea: false, drawTicks: false, }, ticks: { padding: 20, fontSize: 13, fontColor: "#8898aa", fontFamily: "Open Sans", }, }, ], }, }, }); chart.setAttribute("data-chart-initialized", "true"); } });</script>
<div class="card draggable"> <div class="card-header bg-transparent"> <h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6> <h5 class="h3 mb-0">Total orders</h5> </div> <div class="card-body"> <div class="chart"> <canvas id="chart-bars" class="chart-bar chart-canvas"></canvas> </div> </div> </div>
var chartsBar = document.querySelectorAll(".chart-bar"); chartsBar.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "bar", data: { labels: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [ { label: "Sales", tension: 0.4, borderWidth: 0, pointRadius: 0, backgroundColor: "#fb6340", data: [25, 20, 30, 22, 17, 29], maxBarThickness: 10, }, ], }, options: { responsive: true, maintainAspectRatio: false, legend: { display: false, }, tooltips: { enabled: true, mode: "index", intersect: false, }, scales: { yAxes: [ { gridLines: { borderDash: [2], borderDashOffset: [2], drawTicks: false, drawBorder: false, lineWidth: 1, zeroLineWidth: 0, zeroLineBorderDash: [0], zeroLineBorderDashOffset: [2], }, ticks: { beginAtZero: true, padding: 10, fontSize: 13, lineHeight: 5, fontColor: "#8898aa", fontFamily: "Open Sans", }, }, ], xAxes: [ { gridLines: { display: false, drawBorder: false, drawOnChartArea: false, drawTicks: false, }, ticks: { padding: 20, fontSize: 13, fontColor: "#8898aa", fontFamily: "Open Sans", }, }, ], }, }, }); chart.setAttribute("data-chart-initialized", "true"); } });
<div class="card draggable"> <div class="card-header"> <div class="row align-items-center"> <div class="col-8"> <h3 class="mb-0">Edit profile </h3> </div> <div class="col-4 text-right"> <a href="#!" class="btn btn-sm btn-primary">Settings</a> </div> </div> </div> <div class="card-body"> <form> <h6 class="heading-small text-muted mb-4">User information</h6> <div class="pl-lg-4"> <div class="row"> <div class="col-lg-6"> <div class="form-group"> <label class="form-control-label" for="input-username">Username</label> <input type="text" id="input-username" class="form-control" placeholder="Username" value="lucky.jesse"> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label class="form-control-label" for="input-email">Email address</label> <input type="email" id="input-email" class="form-control" placeholder="[email protected]"> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <div class="form-group"> <label class="form-control-label" for="input-first-name">First name</label> <input type="text" id="input-first-name" class="form-control" placeholder="First name" value="Lucky"> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label class="form-control-label" for="input-last-name">Last name</label> <input type="text" id="input-last-name" class="form-control" placeholder="Last name" value="Jesse"> </div> </div> </div> </div> <hr class="my-4"> <!-- Address --> <h6 class="heading-small text-muted mb-4">Contact information</h6> <div class="pl-lg-4"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label class="form-control-label" for="input-address">Address</label> <input id="input-address" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09" type="text"> </div> </div> </div> <div class="row"> <div class="col-lg-4"> <div class="form-group"> <label class="form-control-label" for="input-city">City</label> <input type="text" id="input-city" class="form-control" placeholder="City" value="New York"> </div> </div> <div class="col-lg-4"> <div class="form-group"> <label class="form-control-label" for="input-country">Country</label> <input type="text" id="input-country" class="form-control" placeholder="Country" value="United States"> </div> </div> <div class="col-lg-4"> <div class="form-group"> <label class="form-control-label" for="input-country">Postal code</label> <input type="number" id="input-postal-code" class="form-control" placeholder="Postal code"> </div> </div> </div> </div> <hr class="my-4"> <!-- Description --> <h6 class="heading-small text-muted mb-4">About me</h6> <div class="pl-lg-4"> <div class="form-group"> <label class="form-control-label">About Me</label> <textarea rows="4" class="form-control" placeholder="A few words about you ...">A beautiful Dashboard for Bootstrap 4. It is Free and Open Source.</textarea> </div> </div> </form> </div> </div>
<div class="sidenav-header align-items-center"> <a class="navbar-brand" href="javascript:void(0)"> <img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/brand/blue.png" class="navbar-brand-img" alt="..."> </a> </div> <div class="navbar-inner"> <div class="collapse navbar-collapse" id="sidenav-collapse-main"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" href="javascript:"> <i class="fa fa-desktop text-primary"></i> <span class="nav-link-text">Dashboard</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:"> <i class="fa fa-globe text-info"></i> <span class="nav-link-text">Icons</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:"> <i class="fa fa-map-marker text-warning"></i> <span class="nav-link-text">Maps</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:"> <i class="fa fa-table text-dark"></i> <span class="nav-link-text">Tables</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:"> <i class="fa fa-lock text-danger"></i> <span class="nav-link-text">Login</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:"> <i class="fa fa-key text-success"></i> <span class="nav-link-text">Register</span> </a> </li> </ul> <hr class="my-3"> <h6 class="navbar-heading p-0 text-muted"> <span class="docs-normal">Documentation</span> </h6> <ul class="navbar-nav mb-md-3"> <li class="nav-item"> <a class="nav-link" href="javascript:"> <i class="fa fa-rocket"></i> <span class="nav-link-text">Getting started</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:"> <i class="fa fa-palette"></i> <span class="nav-link-text">Foundation</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:"> <i class="fa fa-chart-pie"></i> <span class="nav-link-text">Components</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:"> <i class="fa fa-puzzle-piece"></i> <span class="nav-link-text">Plugins</span> </a> </li> </ul> </div> </div>
<div class="row removable"> <div class="col-xl-8 drop-zone"> <div class="card bg-default draggable"> <div class="card-header bg-transparent"> <div class="row align-items-center"> <div class="col"> <h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6> <h5 class="h3 text-white mb-0">Sales value</h5> </div> <div class="col"> <ul class="nav nav-pills justify-content-end"> <li class="nav-item mr-2 mr-md-0" data-toggle="chart" data-target="#chart-sales-dark" data-update="{"data":{"datasets":[{"data":[0, 20, 10, 30, 15, 40, 20, 60, 60]}]}}" data-prefix="$" data-suffix="k"> <a href="#" class="nav-link py-2 px-3 active" data-toggle="tab"> <span class="d-none d-md-block">Month</span> <span class="d-md-none">M</span> </a> </li> <li class="nav-item" data-toggle="chart" data-target="#chart-sales-dark" data-update="{"data":{"datasets":[{"data":[0, 20, 5, 25, 10, 30, 15, 40, 40]}]}}" data-prefix="$" data-suffix="k"> <a href="#" class="nav-link py-2 px-3" data-toggle="tab"> <span class="d-none d-md-block">Week</span> <span class="d-md-none">W</span> </a> </li> </ul> </div> </div> </div> <div class="card-body"> <!-- Chart --> <div class="chart"> <div class="chartjs-size-monitor"> <div class="chartjs-size-monitor-expand"> <div class=""></div> </div> <div class="chartjs-size-monitor-shrink"> <div class=""></div> </div> </div> <!-- Chart wrapper --> <canvas id="chart-sales-dark" class="chart-line chart-canvas chartjs-render-monitor" width="1342" height="700" style="display: block; height: 350px; width: 671px;"></canvas> </div> </div> </div> </div> <div class="col-xl-4 drop-zone"> <div class="card draggable"> <div class="card-header bg-transparent"> <div class="row align-items-center"> <div class="col"> <h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6> <h5 class="h3 mb-0">Total orders</h5> </div> </div> </div> <div class="card-body"> <!-- Chart --> <div class="chart"> <div class="chartjs-size-monitor"> <div class="chartjs-size-monitor-expand"> <div class=""></div> </div> <div class="chartjs-size-monitor-shrink"> <div class=""></div> </div> </div> <canvas id="chart-bars" class="chart-bar chart-canvas chartjs-render-monitor" style="display: block; height: 350px; width: 297px;" width="594" height="700"></canvas> </div> </div> </div> </div> </div><script>var chartsLine = document.querySelectorAll(".chart-line"); chartsLine.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "line", data: { labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Performance", tension: 0.4, borderWidth: 4, borderColor: "#5e72e4", pointRadius: 0, backgroundColor: "transparent", data: [0, 20, 10, 30, 15, 40, 20, 60, 60], }, ], }, options: { responsive: true, maintainAspectRatio: false, legend: { display: false, }, tooltips: { enabled: true, mode: "index", intersect: false, }, scales: { yAxes: [{ barPercentage: 1.6, gridLines: { drawBorder: false, color: "rgba(29,140,248,0.0)", zeroLineColor: "transparent", }, ticks: { padding: 0, fontColor: "#8898aa", fontSize: 13, fontFamily: "Open Sans", }, }, ], xAxes: [{ barPercentage: 1.6, gridLines: { drawBorder: false, color: "rgba(29,140,248,0.0)", zeroLineColor: "transparent", }, ticks: { padding: 10, fontColor: "#8898aa", fontSize: 13, fontFamily: "Open Sans", }, }, ], }, layout: { padding: 0, }, }, }); chart.setAttribute("data-chart-initialized", "true"); } }); var chartsBar = document.querySelectorAll(".chart-bar"); chartsBar.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "bar", data: { labels: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [ { label: "Sales", tension: 0.4, borderWidth: 0, pointRadius: 0, backgroundColor: "#fb6340", data: [25, 20, 30, 22, 17, 29], maxBarThickness: 10, }, ], }, options: { responsive: true, maintainAspectRatio: false, legend: { display: false, }, tooltips: { enabled: true, mode: "index", intersect: false, }, scales: { yAxes: [ { gridLines: { borderDash: [2], borderDashOffset: [2], drawTicks: false, drawBorder: false, lineWidth: 1, zeroLineWidth: 0, zeroLineBorderDash: [0], zeroLineBorderDashOffset: [2], }, ticks: { beginAtZero: true, padding: 10, fontSize: 13, lineHeight: 5, fontColor: "#8898aa", fontFamily: "Open Sans", }, }, ], xAxes: [ { gridLines: { display: false, drawBorder: false, drawOnChartArea: false, drawTicks: false, }, ticks: { padding: 20, fontSize: 13, fontColor: "#8898aa", fontFamily: "Open Sans", }, }, ], }, }, }); chart.setAttribute("data-chart-initialized", "true"); } });</script>
<div class="row removable"> <div class="col-xl-8 drop-zone"> <div class="card bg-default draggable"> <div class="card-header bg-transparent"> <div class="row align-items-center"> <div class="col"> <h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6> <h5 class="h3 text-white mb-0">Sales value</h5> </div> <div class="col"> <ul class="nav nav-pills justify-content-end"> <li class="nav-item mr-2 mr-md-0" data-toggle="chart" data-target="#chart-sales-dark" data-update="{"data":{"datasets":[{"data":[0, 20, 10, 30, 15, 40, 20, 60, 60]}]}}" data-prefix="$" data-suffix="k"> <a href="#" class="nav-link py-2 px-3 active" data-toggle="tab"> <span class="d-none d-md-block">Month</span> <span class="d-md-none">M</span> </a> </li> <li class="nav-item" data-toggle="chart" data-target="#chart-sales-dark" data-update="{"data":{"datasets":[{"data":[0, 20, 5, 25, 10, 30, 15, 40, 40]}]}}" data-prefix="$" data-suffix="k"> <a href="#" class="nav-link py-2 px-3" data-toggle="tab"> <span class="d-none d-md-block">Week</span> <span class="d-md-none">W</span> </a> </li> </ul> </div> </div> </div> <div class="card-body"> <!-- Chart --> <div class="chart"> <div class="chartjs-size-monitor"> <div class="chartjs-size-monitor-expand"> <div class=""></div> </div> <div class="chartjs-size-monitor-shrink"> <div class=""></div> </div> </div> <!-- Chart wrapper --> <canvas id="chart-sales-dark" class="chart-line chart-canvas chartjs-render-monitor" width="1342" height="700" style="display: block; height: 350px; width: 671px;"></canvas> </div> </div> </div> </div> <div class="col-xl-4 drop-zone"> <div class="card draggable"> <div class="card-header bg-transparent"> <div class="row align-items-center"> <div class="col"> <h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6> <h5 class="h3 mb-0">Total orders</h5> </div> </div> </div> <div class="card-body"> <!-- Chart --> <div class="chart"> <div class="chartjs-size-monitor"> <div class="chartjs-size-monitor-expand"> <div class=""></div> </div> <div class="chartjs-size-monitor-shrink"> <div class=""></div> </div> </div> <canvas id="chart-bars" class="chart-bar chart-canvas chartjs-render-monitor" style="display: block; height: 350px; width: 297px;" width="594" height="700"></canvas> </div> </div> </div> </div> </div>
var chartsLine = document.querySelectorAll(".chart-line"); chartsLine.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "line", data: { labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Performance", tension: 0.4, borderWidth: 4, borderColor: "#5e72e4", pointRadius: 0, backgroundColor: "transparent", data: [0, 20, 10, 30, 15, 40, 20, 60, 60], }, ], }, options: { responsive: true, maintainAspectRatio: false, legend: { display: false, }, tooltips: { enabled: true, mode: "index", intersect: false, }, scales: { yAxes: [{ barPercentage: 1.6, gridLines: { drawBorder: false, color: "rgba(29,140,248,0.0)", zeroLineColor: "transparent", }, ticks: { padding: 0, fontColor: "#8898aa", fontSize: 13, fontFamily: "Open Sans", }, }, ], xAxes: [{ barPercentage: 1.6, gridLines: { drawBorder: false, color: "rgba(29,140,248,0.0)", zeroLineColor: "transparent", }, ticks: { padding: 10, fontColor: "#8898aa", fontSize: 13, fontFamily: "Open Sans", }, }, ], }, layout: { padding: 0, }, }, }); chart.setAttribute("data-chart-initialized", "true"); } }); var chartsBar = document.querySelectorAll(".chart-bar"); chartsBar.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "bar", data: { labels: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [ { label: "Sales", tension: 0.4, borderWidth: 0, pointRadius: 0, backgroundColor: "#fb6340", data: [25, 20, 30, 22, 17, 29], maxBarThickness: 10, }, ], }, options: { responsive: true, maintainAspectRatio: false, legend: { display: false, }, tooltips: { enabled: true, mode: "index", intersect: false, }, scales: { yAxes: [ { gridLines: { borderDash: [2], borderDashOffset: [2], drawTicks: false, drawBorder: false, lineWidth: 1, zeroLineWidth: 0, zeroLineBorderDash: [0], zeroLineBorderDashOffset: [2], }, ticks: { beginAtZero: true, padding: 10, fontSize: 13, lineHeight: 5, fontColor: "#8898aa", fontFamily: "Open Sans", }, }, ], xAxes: [ { gridLines: { display: false, drawBorder: false, drawOnChartArea: false, drawTicks: false, }, ticks: { padding: 20, fontSize: 13, fontColor: "#8898aa", fontFamily: "Open Sans", }, }, ], }, }, }); chart.setAttribute("data-chart-initialized", "true"); } });
<div class="row removable"> <div class="col-xl-3 col-md-6 drop-zone"> <div class="card card-stats draggable"> <!-- Card body --> <div class="card-body"> <div class="row"> <div class="col"> <h5 class="card-title text-uppercase text-muted mb-0">Total traffic</h5> <span class="h2 font-weight-bold mb-0">350,897</span> </div> <div class="col-auto"> <div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow"> <i class="fa fa-user"></i> </div> </div> </div> <p class="mt-3 mb-0 text-sm"> <span class="text-success mr-2"> <i class="fa fa-arrow-up"></i> 3.48% </span> <span class="text-nowrap">Since last month</span> </p> </div> </div> </div> <div class="col-xl-3 col-md-6 drop-zone"> <div class="card card-stats draggable"> <!-- Card body --> <div class="card-body"> <div class="row"> <div class="col"> <h5 class="card-title text-uppercase text-muted mb-0">New users</h5> <span class="h2 font-weight-bold mb-0">2,356</span> </div> <div class="col-auto"> <div class="icon icon-shape bg-gradient-orange text-white rounded-circle shadow"> <i class="fa fa-chart-pie"></i> </div> </div> </div> <p class="mt-3 mb-0 text-sm"> <span class="text-success mr-2"> <i class="fa fa-arrow-up"></i> 3.48% </span> <span class="text-nowrap">Since last month</span> </p> </div> </div> </div> <div class="col-xl-3 col-md-6 drop-zone"> <div class="card card-stats draggable"> <!-- Card body --> <div class="card-body"> <div class="row"> <div class="col"> <h5 class="card-title text-uppercase text-muted mb-0">Sales</h5> <span class="h2 font-weight-bold mb-0">924</span> </div> <div class="col-auto"> <div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow"> <i class="fa fa-coins"></i> </div> </div> </div> <p class="mt-3 mb-0 text-sm"> <span class="text-success mr-2"> <i class="fa fa-arrow-up"></i> 3.48% </span> <span class="text-nowrap">Since last month</span> </p> </div> </div> </div> <div class="col-xl-3 col-md-6 drop-zone"> <div class="card card-stats draggable"> <!-- Card body --> <div class="card-body"> <div class="row"> <div class="col"> <h5 class="card-title text-uppercase text-muted mb-0">Performance</h5> <span class="h2 font-weight-bold mb-0">49,65%</span> </div> <div class="col-auto"> <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow"> <i class="fa fa-chart-bar"></i> </div> </div> </div> <p class="mt-3 mb-0 text-sm"> <span class="text-success mr-2"> <i class="fa fa-arrow-up"></i> 3.48% </span> <span class="text-nowrap">Since last month</span> </p> </div> </div> </div> </div>
<div class="row removable"> <div class="col-xl-3 col-md-6 drop-zone"> <div class="card bg-gradient-primary border-0 draggable"> <!-- Card body --> <div class="card-body"> <div class="row"> <div class="col"> <h5 class="card-title text-uppercase text-muted mb-0 text-white">Tasks completed</h5> <span class="h2 font-weight-bold mb-0 text-white">8/24</span> <div class="progress progress-xs mt-3 mb-0"> <div class="progress-bar bg-success" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div> </div> </div> <div class="col-auto"> <button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-ellipsis-h"></i> </button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> <p class="mt-3 mb-0 text-sm"> <a href="#!" class="text-nowrap text-white font-weight-600">See details</a> </p> </div> </div> </div> <div class="col-xl-3 col-md-6 drop-zone"> <div class="card bg-gradient-info border-0 draggable"> <!-- Card body --> <div class="card-body"> <div class="row"> <div class="col"> <h5 class="card-title text-uppercase text-muted mb-0 text-white">Contacts</h5> <span class="h2 font-weight-bold mb-0 text-white">123/267</span> <div class="progress progress-xs mt-3 mb-0"> <div class="progress-bar bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div> </div> </div> <div class="col-auto"> <button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-ellipsis-h"></i> </button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> <p class="mt-3 mb-0 text-sm"> <a href="#!" class="text-nowrap text-white font-weight-600">See details</a> </p> </div> </div> </div> <div class="col-xl-3 col-md-6 drop-zone"> <div class="card bg-gradient-danger border-0 draggable"> <!-- Card body --> <div class="card-body"> <div class="row"> <div class="col"> <h5 class="card-title text-uppercase text-muted mb-0 text-white">Items sold</h5> <span class="h2 font-weight-bold mb-0 text-white">200/300</span> <div class="progress progress-xs mt-3 mb-0"> <div class="progress-bar bg-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> </div> </div> <div class="col-auto"> <button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-ellipsis-h"></i> </button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> <p class="mt-3 mb-0 text-sm"> <a href="#!" class="text-nowrap text-white font-weight-600">See details</a> </p> </div> </div> </div> <div class="col-xl-3 col-md-6 drop-zone"> <div class="card bg-gradient-default border-0 draggable"> <!-- Card body --> <div class="card-body"> <div class="row"> <div class="col"> <h5 class="card-title text-uppercase text-muted mb-0 text-white">Notifications</h5> <span class="h2 font-weight-bold mb-0 text-white">50/62</span> <div class="progress progress-xs mt-3 mb-0"> <div class="progress-bar bg-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div> </div> </div> <div class="col-auto"> <button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-ellipsis-h"></i> </button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> <p class="mt-3 mb-0 text-sm"> <a href="#!" class="text-nowrap text-white font-weight-600">See details</a> </p> </div> </div> </div> </div>