mirror of https://github.com/ColorlibHQ/AdminLTE
chartjs to apexcharts
parent
6f07c889bd
commit
cb2bda5270
|
@ -15,6 +15,9 @@ const page = 'index'
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<Head title={title} path={path} />
|
<Head title={title} path={path} />
|
||||||
|
|
||||||
|
<!-- apexcharts -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
||||||
|
@ -109,36 +112,18 @@ const page = 'index'
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<!-- Start col -->
|
<!-- Start col -->
|
||||||
<div class="col-lg-7">
|
<div class="col-lg-7">
|
||||||
<!-- Custom tabs (Charts with tabs)-->
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title">
|
<h3 class="card-title">Sales Value</h3>
|
||||||
<i class="fa-solid fa-chart-pie me-1"></i>
|
|
||||||
Sales
|
|
||||||
</h3>
|
|
||||||
<div class="card-tools">
|
<div class="card-tools">
|
||||||
<ul class="nav nav-pills ms-auto">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active" href="#revenue-chart" data-bs-toggle="tab">Area</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#sales-chart" data-bs-toggle="tab">Donut</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /.card-header -->
|
</div>
|
||||||
|
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="tab-content p-0">
|
<div id="revenue-chart"></div>
|
||||||
<!-- Morris chart - Sales -->
|
|
||||||
<div class="chart tab-pane active" id="revenue-chart"
|
|
||||||
style="position: relative; height: 300px;">
|
|
||||||
<canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
|
|
||||||
<canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!-- /.card-body -->
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.card -->
|
<!-- /.card -->
|
||||||
|
|
||||||
|
@ -360,114 +345,53 @@ const page = 'index'
|
||||||
|
|
||||||
<!-- OPTIONAL SCRIPTS -->
|
<!-- OPTIONAL SCRIPTS -->
|
||||||
|
|
||||||
|
<!-- apexcharts -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
<!-- ChartJS -->
|
<!-- ChartJS -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
|
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||||
// IT'S ALL JUST JUNK FOR DEMO
|
// IT'S ALL JUST JUNK FOR DEMO
|
||||||
// ++++++++++++++++++++++++++++++++++++++++++
|
// ++++++++++++++++++++++++++++++++++++++++++
|
||||||
|
|
||||||
/* Chart.js Charts */
|
var sales_chart_options = {
|
||||||
// Sales chart
|
series: [{
|
||||||
(function () {
|
name: 'Digital Goods',
|
||||||
'use strict'
|
|
||||||
|
|
||||||
var salesChartCanvas = document.querySelector('#revenue-chart-canvas').getContext('2d')
|
|
||||||
|
|
||||||
var salesChartData = {
|
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Digital Goods',
|
|
||||||
backgroundColor: 'rgba(60,141,188,0.9)',
|
|
||||||
borderColor: 'rgba(60,141,188,0.8)',
|
|
||||||
fill: true,
|
|
||||||
tension: 0.4,
|
|
||||||
pointRadius: 0,
|
|
||||||
pointColor: '#3b8bba',
|
|
||||||
pointStrokeColor: 'rgba(60,141,188,1)',
|
|
||||||
pointHighlightFill: '#fff',
|
|
||||||
pointHighlightStroke: 'rgba(60,141,188,1)',
|
|
||||||
data: [28, 48, 40, 19, 86, 27, 90]
|
data: [28, 48, 40, 19, 86, 27, 90]
|
||||||
},
|
},{
|
||||||
{
|
name: 'Electronics',
|
||||||
label: 'Electronics',
|
|
||||||
backgroundColor: 'rgba(210, 214, 222, 1)',
|
|
||||||
borderColor: 'rgba(210, 214, 222, 1)',
|
|
||||||
fill: true,
|
|
||||||
tension: 0.4,
|
|
||||||
pointRadius: 0,
|
|
||||||
pointColor: 'rgba(210, 214, 222, 1)',
|
|
||||||
pointStrokeColor: '#c1c7d1',
|
|
||||||
pointHighlightFill: '#fff',
|
|
||||||
pointHighlightStroke: 'rgba(220,220,220,1)',
|
|
||||||
data: [65, 59, 80, 81, 56, 55, 40]
|
data: [65, 59, 80, 81, 56, 55, 40]
|
||||||
}
|
}],
|
||||||
]
|
chart: {
|
||||||
}
|
height: 300,
|
||||||
|
type: 'area',
|
||||||
var salesChartOptions = {
|
toolbar: {
|
||||||
maintainAspectRatio: false,
|
show: false,
|
||||||
responsive: true,
|
},
|
||||||
plugins: {
|
},
|
||||||
legend: {
|
legend: {
|
||||||
display: false
|
show: false
|
||||||
}
|
|
||||||
},
|
},
|
||||||
scales: {
|
colors:['#0d6efd', '#20c997'],
|
||||||
xAxes: {
|
dataLabels: {
|
||||||
gridLines: {
|
enabled: false,
|
||||||
display: false
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
yAxes: {
|
stroke: {
|
||||||
gridLines: {
|
curve: 'smooth'
|
||||||
display: false
|
},
|
||||||
}
|
xaxis: {
|
||||||
}
|
type: 'datetime',
|
||||||
}
|
categories: ["2023-01-01", "2023-02-01", "2023-03-01", "2023-04-01", "2023-05-01", "2023-06-01", "2023-07-01"]
|
||||||
}
|
},
|
||||||
|
tooltip: {
|
||||||
|
x: {
|
||||||
|
format: 'MMMM yyyy'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
// This will get the first returned node in the js collection.
|
var sales_chart = new ApexCharts(document.querySelector("#revenue-chart"), sales_chart_options);
|
||||||
var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
|
sales_chart.render();
|
||||||
type: 'line',
|
|
||||||
data: salesChartData,
|
|
||||||
options: salesChartOptions
|
|
||||||
})
|
|
||||||
|
|
||||||
// Donut Chart
|
|
||||||
var pieChartCanvas = document.querySelector('#sales-chart-canvas').getContext('2d')
|
|
||||||
var pieData = {
|
|
||||||
labels: [
|
|
||||||
'Instore Sales',
|
|
||||||
'Download Sales',
|
|
||||||
'Mail-Order Sales'
|
|
||||||
],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
data: [30, 12, 20],
|
|
||||||
backgroundColor: ['#f56954', '#00a65a', '#f39c12']
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
var pieOptions = {
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
responsive: true
|
|
||||||
}
|
|
||||||
// Create pie or douhnut chart
|
|
||||||
// You can switch between pie and douhnut using the method below.
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
var pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
|
|
||||||
type: 'doughnut',
|
|
||||||
data: pieData,
|
|
||||||
options: pieOptions
|
|
||||||
})
|
|
||||||
})()
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -14,6 +14,9 @@ const page = 'index2'
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<Head title={title} path={path} />
|
<Head title={title} path={path} />
|
||||||
|
|
||||||
|
<!-- apexcharts -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
||||||
|
@ -138,11 +141,7 @@ const page = 'index2'
|
||||||
<strong>Sales: 1 Jan, 2023 - 30 Jul, 2023</strong>
|
<strong>Sales: 1 Jan, 2023 - 30 Jul, 2023</strong>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="chart">
|
<div id="sales-chart"></div>
|
||||||
<!-- Sales Chart Canvas -->
|
|
||||||
<canvas id="salesChart" style="height: 180px;"></canvas>
|
|
||||||
</div>
|
|
||||||
<!-- /.chart-responsive -->
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.col -->
|
<!-- /.col -->
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
|
@ -682,22 +681,8 @@ const page = 'index2'
|
||||||
<!-- /.card-header -->
|
<!-- /.card-header -->
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-8">
|
<div class="col-12">
|
||||||
<div class="chart-responsive">
|
<div id="pie-chart"></div>
|
||||||
<canvas id="pieChart" height="150"></canvas>
|
|
||||||
</div>
|
|
||||||
<!-- ./chart-responsive -->
|
|
||||||
</div>
|
|
||||||
<!-- /.col -->
|
|
||||||
<div class="col-md-4">
|
|
||||||
<ul class="row list-unstyled text-nowrap">
|
|
||||||
<li class="col"><i class="fa-regular fa-circle text-danger"></i> Chrome</li>
|
|
||||||
<li class="col"><i class="fa-regular fa-circle text-success"></i> IE</li>
|
|
||||||
<li class="col"><i class="fa-regular fa-circle text-warning"></i> FireFox</li>
|
|
||||||
<li class="col"><i class="fa-regular fa-circle text-info"></i> Safari</li>
|
|
||||||
<li class="col"><i class="fa-regular fa-circle text-primary"></i> Opera</li>
|
|
||||||
<li class="col"><i class="fa-regular fa-circle text-secondary"></i> Navigator</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.col -->
|
<!-- /.col -->
|
||||||
</div>
|
</div>
|
||||||
|
@ -752,63 +737,63 @@ const page = 'index2'
|
||||||
</div>
|
</div>
|
||||||
<!-- /.card-header -->
|
<!-- /.card-header -->
|
||||||
<div class="card-body p-0">
|
<div class="card-body p-0">
|
||||||
<ul class="products-list product-list-in-card ps-2 pe-2">
|
<div class="px-2">
|
||||||
<li class="item">
|
<div class="d-flex border-top py-2 px-1">
|
||||||
<div class="product-img">
|
<div class="col-2">
|
||||||
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
|
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
|
||||||
</div>
|
</div>
|
||||||
<div class="product-info">
|
<div class="col-10">
|
||||||
<a href="javascript:void(0)" class="product-title">Samsung TV
|
<a href="javascript:void(0)" class="fw-bold">Samsung TV
|
||||||
<span class="badge text-bg-warning float-end">$1800</span></a>
|
<span class="badge text-bg-warning float-end">$1800</span></a>
|
||||||
<span class="product-description">
|
<div class="text-truncate">
|
||||||
Samsung 32" 1080p 60Hz LED Smart HDTV.
|
Samsung 32" 1080p 60Hz LED Smart HDTV.
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- /.item -->
|
<!-- /.item -->
|
||||||
<li class="item">
|
<div class="d-flex border-top py-2 px-1">
|
||||||
<div class="product-img">
|
<div class="col-2">
|
||||||
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
|
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
|
||||||
</div>
|
</div>
|
||||||
<div class="product-info">
|
<div class="col-10">
|
||||||
<a href="javascript:void(0)" class="product-title">Bicycle
|
<a href="javascript:void(0)" class="fw-bold">Bicycle
|
||||||
<span class="badge text-bg-info float-end">$700</span></a>
|
<span class="badge text-bg-info float-end">$700</span></a>
|
||||||
<span class="product-description">
|
<div class="text-truncate">
|
||||||
26" Mongoose Dolomite Men's 7-speed, Navy Blue.
|
26" Mongoose Dolomite Men's 7-speed, Navy Blue.
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- /.item -->
|
<!-- /.item -->
|
||||||
<li class="item">
|
<div class="d-flex border-top py-2 px-1">
|
||||||
<div class="product-img">
|
<div class="col-2">
|
||||||
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
|
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
|
||||||
</div>
|
</div>
|
||||||
<div class="product-info">
|
<div class="col-10">
|
||||||
<a href="javascript:void(0)" class="product-title">
|
<a href="javascript:void(0)" class="fw-bold">
|
||||||
Xbox One <span class="badge text-bg-danger float-end">
|
Xbox One <span class="badge text-bg-danger float-end">
|
||||||
$350
|
$350
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<span class="product-description">
|
<div class="text-truncate">
|
||||||
Xbox One Console Bundle with Halo Master Chief Collection.
|
Xbox One Console Bundle with Halo Master Chief Collection.
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- /.item -->
|
<!-- /.item -->
|
||||||
<li class="item">
|
<div class="d-flex border-top py-2 px-1">
|
||||||
<div class="product-img">
|
<div class="col-2">
|
||||||
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
|
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
|
||||||
</div>
|
</div>
|
||||||
<div class="product-info">
|
<div class="col-10">
|
||||||
<a href="javascript:void(0)" class="product-title">PlayStation 4
|
<a href="javascript:void(0)" class="fw-bold">PlayStation 4
|
||||||
<span class="badge text-bg-success float-end">$399</span></a>
|
<span class="badge text-bg-success float-end">$399</span></a>
|
||||||
<span class="product-description">
|
<div class="text-truncate">
|
||||||
PlayStation 4 500GB Console (PS4)
|
PlayStation 4 500GB Console (PS4)
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- /.item -->
|
<!-- /.item -->
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- /.card-body -->
|
<!-- /.card-body -->
|
||||||
<div class="card-footer text-center">
|
<div class="card-footer text-center">
|
||||||
|
@ -834,86 +819,61 @@ const page = 'index2'
|
||||||
|
|
||||||
<!-- OPTIONAL SCRIPTS -->
|
<!-- OPTIONAL SCRIPTS -->
|
||||||
|
|
||||||
<!-- ChartJS -->
|
<!-- apexcharts -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||||
// IT'S ALL JUST JUNK FOR DEMO
|
// IT'S ALL JUST JUNK FOR DEMO
|
||||||
// ++++++++++++++++++++++++++++++++++++++++++
|
// ++++++++++++++++++++++++++++++++++++++++++
|
||||||
|
|
||||||
/* ChartJS
|
/* apexcharts
|
||||||
* -------
|
* -------
|
||||||
* Here we will create a few charts using ChartJS
|
* Here we will create a few charts using apexcharts
|
||||||
*/
|
*/
|
||||||
|
|
||||||
//-----------------------
|
//-----------------------
|
||||||
// - MONTHLY SALES CHART -
|
// - MONTHLY SALES CHART -
|
||||||
//-----------------------
|
//-----------------------
|
||||||
(function () {
|
|
||||||
'use strict'
|
|
||||||
// Get context with querySelector - using Chart.js .getContext('2d') method.
|
|
||||||
var salesChartCanvas = document.querySelector('#salesChart').getContext('2d')
|
|
||||||
|
|
||||||
var salesChartData = {
|
var sales_chart_options = {
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
series: [{
|
||||||
datasets: [
|
name: 'Digital Goods',
|
||||||
{
|
|
||||||
label: 'Digital Goods',
|
|
||||||
backgroundColor: 'rgba(60,141,188,0.9)',
|
|
||||||
borderColor: 'rgba(60,141,188,0.8)',
|
|
||||||
fill: true,
|
|
||||||
pointRadius: 0,
|
|
||||||
pointColor: '#3b8bba',
|
|
||||||
pointStrokeColor: 'rgba(60,141,188,1)',
|
|
||||||
pointHighlightFill: '#fff',
|
|
||||||
pointHighlightStroke: 'rgba(60,141,188,1)',
|
|
||||||
data: [28, 48, 40, 19, 86, 27, 90]
|
data: [28, 48, 40, 19, 86, 27, 90]
|
||||||
},
|
},{
|
||||||
{
|
name: 'Electronics',
|
||||||
label: 'Electronics',
|
|
||||||
backgroundColor: 'rgba(210, 214, 222, 1)',
|
|
||||||
borderColor: 'rgba(210, 214, 222, 1)',
|
|
||||||
fill: true,
|
|
||||||
pointRadius: 0,
|
|
||||||
pointColor: 'rgba(210, 214, 222, 1)',
|
|
||||||
pointStrokeColor: '#c1c7d1',
|
|
||||||
pointHighlightFill: '#fff',
|
|
||||||
pointHighlightStroke: 'rgba(220,220,220,1)',
|
|
||||||
data: [65, 59, 80, 81, 56, 55, 40]
|
data: [65, 59, 80, 81, 56, 55, 40]
|
||||||
}
|
}],
|
||||||
]
|
chart: {
|
||||||
}
|
height: 180,
|
||||||
|
type: 'area',
|
||||||
var salesChartOptions = {
|
toolbar: {
|
||||||
maintainAspectRatio: false,
|
show: false,
|
||||||
responsive: true,
|
},
|
||||||
tension: 0.4,
|
},
|
||||||
plugins: {
|
|
||||||
legend: {
|
legend: {
|
||||||
display: false
|
show: false
|
||||||
}
|
|
||||||
},
|
},
|
||||||
scales: {
|
colors:['#0d6efd', '#20c997'],
|
||||||
xAxes: {
|
dataLabels: {
|
||||||
gridLines: {
|
enabled: false,
|
||||||
display: false
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
yAxes: {
|
stroke: {
|
||||||
gridLines: {
|
curve: 'smooth'
|
||||||
display: false
|
},
|
||||||
}
|
xaxis: {
|
||||||
}
|
type: 'datetime',
|
||||||
}
|
categories: ["2023-01-01", "2023-02-01", "2023-03-01", "2023-04-01", "2023-05-01", "2023-06-01", "2023-07-01"]
|
||||||
}
|
},
|
||||||
|
tooltip: {
|
||||||
|
x: {
|
||||||
|
format: 'MMMM yyyy'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
// This will get the first returned node in the js collection.
|
var sales_chart = new ApexCharts(document.querySelector("#sales-chart"), sales_chart_options);
|
||||||
var salesChart = new Chart(salesChartCanvas, {
|
sales_chart.render();
|
||||||
type: 'line',
|
|
||||||
data: salesChartData,
|
|
||||||
options: salesChartOptions
|
|
||||||
})
|
|
||||||
|
|
||||||
//---------------------------
|
//---------------------------
|
||||||
// - END MONTHLY SALES CHART -
|
// - END MONTHLY SALES CHART -
|
||||||
|
@ -923,41 +883,28 @@ const page = 'index2'
|
||||||
// - PIE CHART -
|
// - PIE CHART -
|
||||||
//-------------
|
//-------------
|
||||||
|
|
||||||
// Get context with querySelector - using Chart.js .getContext('2d') method.
|
var pie_chart_options = {
|
||||||
var pieChartCanvas = document.querySelector('#pieChart').getContext('2d')
|
series: [700, 500, 400, 600, 300, 100],
|
||||||
|
chart: {
|
||||||
var pieData = {
|
type: 'donut',
|
||||||
|
},
|
||||||
labels: [
|
labels: [
|
||||||
'Chrome',
|
'Chrome',
|
||||||
'IE',
|
'Edge',
|
||||||
'FireFox',
|
'FireFox',
|
||||||
'Safari',
|
'Safari',
|
||||||
'Opera',
|
'Opera',
|
||||||
'Navigator'
|
'IE',
|
||||||
],
|
],
|
||||||
datasets: [
|
dataLabels: {
|
||||||
{
|
enabled: false,
|
||||||
data: [700, 500, 400, 600, 300, 100],
|
},
|
||||||
backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
|
colors: ['#0d6efd', '#20c997', '#ffc107', '#d63384', '#6f42c1', '#adb5bd']
|
||||||
}
|
};
|
||||||
]
|
|
||||||
}
|
var pie_chart = new ApexCharts(document.querySelector("#pie-chart"), pie_chart_options);
|
||||||
var pieOptions = {
|
pie_chart.render();
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Create pie or douhnut chart
|
|
||||||
// You can switch between pie and douhnut using the method below.
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
var pieChart = new Chart(pieChartCanvas, {
|
|
||||||
type: 'doughnut',
|
|
||||||
data: pieData,
|
|
||||||
options: pieOptions
|
|
||||||
})
|
|
||||||
})()
|
|
||||||
//-----------------
|
//-----------------
|
||||||
// - END PIE CHART -
|
// - END PIE CHART -
|
||||||
//-----------------
|
//-----------------
|
||||||
|
|
|
@ -14,6 +14,9 @@ const page = 'index3'
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<Head title={title} path={path} />
|
<Head title={title} path={path} />
|
||||||
|
|
||||||
|
<!-- apexcharts -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
||||||
|
@ -64,7 +67,7 @@ const page = 'index3'
|
||||||
<!-- /.d-flex -->
|
<!-- /.d-flex -->
|
||||||
|
|
||||||
<div class="position-relative mb-4">
|
<div class="position-relative mb-4">
|
||||||
<canvas id="visitors-chart" height="200"></canvas>
|
<div id="visitors-chart"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="d-flex flex-row justify-content-end">
|
<div class="d-flex flex-row justify-content-end">
|
||||||
|
@ -205,13 +208,13 @@ const page = 'index3'
|
||||||
<span class="text-success">
|
<span class="text-success">
|
||||||
<i class="fa-solid fa-arrow-up"></i> 33.1%
|
<i class="fa-solid fa-arrow-up"></i> 33.1%
|
||||||
</span>
|
</span>
|
||||||
<span class="text-secondary">Since last month</span>
|
<span class="text-secondary">Since Past Year</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- /.d-flex -->
|
<!-- /.d-flex -->
|
||||||
|
|
||||||
<div class="position-relative mb-4">
|
<div class="position-relative mb-4">
|
||||||
<canvas id="sales-chart" height="200"></canvas>
|
<div id="sales-chart"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="d-flex flex-row justify-content-end">
|
<div class="d-flex flex-row justify-content-end">
|
||||||
|
@ -301,131 +304,109 @@ const page = 'index3'
|
||||||
|
|
||||||
<!-- OPTIONAL SCRIPTS -->
|
<!-- OPTIONAL SCRIPTS -->
|
||||||
|
|
||||||
<!-- ChartJS -->
|
<!-- apexcharts -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||||
// IT'S ALL JUST JUNK FOR DEMO
|
// IT'S ALL JUST JUNK FOR DEMO
|
||||||
// ++++++++++++++++++++++++++++++++++++++++++
|
// ++++++++++++++++++++++++++++++++++++++++++
|
||||||
|
|
||||||
/* global Chart:false */
|
var visitors_chart_options = {
|
||||||
(function () {
|
series: [
|
||||||
'use strict'
|
{
|
||||||
|
name: "High - 2023",
|
||||||
var ticksStyle = {
|
data: [100, 120, 170, 167, 180, 177, 160]
|
||||||
fontColor: '#495057',
|
|
||||||
fontStyle: 'bold'
|
|
||||||
}
|
|
||||||
|
|
||||||
var mode = 'index'
|
|
||||||
var intersect = true
|
|
||||||
|
|
||||||
var salesChartSelector = document.querySelector('#sales-chart')
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
var salesChart = new Chart(salesChartSelector, {
|
|
||||||
type: 'bar',
|
|
||||||
data: {
|
|
||||||
labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
|
|
||||||
datasets: [{
|
|
||||||
label: 'My First Dataset',
|
|
||||||
data: [65, 59, 80, 81, 56, 55, 40],
|
|
||||||
backgroundColor: [
|
|
||||||
'rgba(255, 99, 132, 0.2)',
|
|
||||||
'rgba(255, 159, 64, 0.2)',
|
|
||||||
'rgba(255, 205, 86, 0.2)',
|
|
||||||
'rgba(75, 192, 192, 0.2)',
|
|
||||||
'rgba(54, 162, 235, 0.2)',
|
|
||||||
'rgba(153, 102, 255, 0.2)',
|
|
||||||
'rgba(201, 203, 207, 0.2)'
|
|
||||||
],
|
|
||||||
borderColor: [
|
|
||||||
'rgb(255, 99, 132)',
|
|
||||||
'rgb(255, 159, 64)',
|
|
||||||
'rgb(255, 205, 86)',
|
|
||||||
'rgb(75, 192, 192)',
|
|
||||||
'rgb(54, 162, 235)',
|
|
||||||
'rgb(153, 102, 255)',
|
|
||||||
'rgb(201, 203, 207)'
|
|
||||||
],
|
|
||||||
borderWidth: 1
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
y: {
|
|
||||||
beginAtZero: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
var visitorsChartSelector = document.querySelector('#visitors-chart')
|
|
||||||
var visitorsChart = new Chart(visitorsChartSelector, {
|
|
||||||
data: {
|
|
||||||
labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
|
|
||||||
datasets: [{
|
|
||||||
type: 'line',
|
|
||||||
data: [100, 120, 170, 167, 180, 177, 160],
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: '#007bff',
|
|
||||||
pointBorderColor: '#007bff',
|
|
||||||
pointBackgroundColor: '#007bff'
|
|
||||||
// pointHoverBackgroundColor: '#007bff',
|
|
||||||
// pointHoverBorderColor : '#007bff'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
name: "Low - 2023",
|
||||||
|
data: [60, 80, 70, 67, 80, 77, 100]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
chart: {
|
||||||
|
height: 200,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: [60, 80, 70, 67, 80, 77, 100],
|
toolbar: {
|
||||||
backgroundColor: 'tansparent',
|
show: false
|
||||||
borderColor: '#ced4da',
|
}
|
||||||
pointBorderColor: '#ced4da',
|
|
||||||
pointBackgroundColor: '#ced4da'
|
|
||||||
// pointHoverBackgroundColor: '#ced4da',
|
|
||||||
// pointHoverBorderColor : '#ced4da'
|
|
||||||
}]
|
|
||||||
},
|
},
|
||||||
options: {
|
colors: ['#0d6efd', '#adb5bd'],
|
||||||
maintainAspectRatio: false,
|
stroke: {
|
||||||
tooltip: {
|
curve: 'smooth'
|
||||||
mode: mode,
|
},
|
||||||
intersect: intersect
|
grid: {
|
||||||
|
borderColor: '#e7e7e7',
|
||||||
|
row: {
|
||||||
|
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
|
||||||
|
opacity: 0.5
|
||||||
},
|
},
|
||||||
hover: {
|
|
||||||
mode: mode,
|
|
||||||
intersect: intersect
|
|
||||||
},
|
},
|
||||||
plugins: {
|
|
||||||
legend: {
|
legend: {
|
||||||
display: false
|
show: false
|
||||||
}
|
|
||||||
},
|
},
|
||||||
scales: {
|
markers: {
|
||||||
yAxes: {
|
size: 1
|
||||||
// display: false,
|
|
||||||
gridLines: {
|
|
||||||
display: true,
|
|
||||||
lineWidth: '4px',
|
|
||||||
color: 'rgba(0, 0, 0, .2)',
|
|
||||||
zeroLineColor: 'transparent'
|
|
||||||
},
|
},
|
||||||
ticks: Object.assign({
|
xaxis: {
|
||||||
beginAtZero: true,
|
categories: ['22th', '23th', '24th', '25th', '26th', '27th', '28th'],
|
||||||
suggestedMax: 200
|
|
||||||
}, ticksStyle)
|
|
||||||
},
|
},
|
||||||
xAxes: {
|
};
|
||||||
display: true,
|
|
||||||
gridLines: {
|
var visitors_chart = new ApexCharts(document.querySelector("#visitors-chart"), visitors_chart_options);
|
||||||
display: false
|
visitors_chart.render();
|
||||||
|
|
||||||
|
|
||||||
|
var sales_chart_options = {
|
||||||
|
series: [{
|
||||||
|
name: 'Net Profit',
|
||||||
|
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
|
||||||
|
}, {
|
||||||
|
name: 'Revenue',
|
||||||
|
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
|
||||||
|
}, {
|
||||||
|
name: 'Free Cash Flow',
|
||||||
|
data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
|
||||||
|
}],
|
||||||
|
chart: {
|
||||||
|
type: 'bar',
|
||||||
|
height: 200
|
||||||
},
|
},
|
||||||
ticks: ticksStyle
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
horizontal: false,
|
||||||
|
columnWidth: '55%',
|
||||||
|
endingShape: 'rounded'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
colors:['#0d6efd', '#20c997', '#ffc107'],
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
show: true,
|
||||||
|
width: 2,
|
||||||
|
colors: ['transparent']
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
y: {
|
||||||
|
formatter: function (val) {
|
||||||
|
return "$ " + val + " thousands"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
};
|
||||||
})()
|
|
||||||
|
var sales_chart = new ApexCharts(document.querySelector("#sales-chart"), sales_chart_options);
|
||||||
|
sales_chart.render();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue