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

chartjs to apexcharts

pull/5003/head
Daniel 2023-03-24 15:07:17 +05:30
parent 6f07c889bd
commit cb2bda5270
3 changed files with 252 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
src/html/pages/index.astro
View File

@ -15,6 +15,9 @@ const page = 'index'
<html lang="en">
<head>
<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>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
@ -109,36 +112,18 @@ const page = 'index'
<div class="row">
<!-- Start col -->
<div class="col-lg-7">
<!-- Custom tabs (Charts with tabs)-->
<div class="card">
<div class="card-header">
<h3 class="card-title">
<i class="fa-solid fa-chart-pie me-1"></i>
Sales
</h3>
<h3 class="card-title">Sales Value</h3>
<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><!-- /.card-header -->
</div>
<div class="card-body">
<div class="tab-content p-0">
<!-- 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 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 id="revenue-chart"></div>
</div>
</div>
<!-- /.card -->
@ -360,114 +345,53 @@ const page = 'index'
<!-- 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 -->
<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>
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR DEMO
// ++++++++++++++++++++++++++++++++++++++++++
/* Chart.js Charts */
// Sales chart
(function () {
'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]
},
{
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]
}
]
}
var salesChartOptions = {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: {
display: false
}
var sales_chart_options = {
series: [{
name: 'Digital Goods',
data: [28, 48, 40, 19, 86, 27, 90]
},{
name: 'Electronics',
data: [65, 59, 80, 81, 56, 55, 40]
}],
chart: {
height: 300,
type: 'area',
toolbar: {
show: false,
},
scales: {
xAxes: {
gridLines: {
display: false
}
},
yAxes: {
gridLines: {
display: false
}
}
}
}
// This will get the first returned node in the js collection.
var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
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
}
},
legend: {
show: false
},
colors:['#0d6efd', '#20c997'],
dataLabels: {
enabled: false,
},
stroke: {
curve: 'smooth'
},
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'
},
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
})
})()
},
};
var sales_chart = new ApexCharts(document.querySelector("#revenue-chart"), sales_chart_options);
sales_chart.render();
</script>
</body>
</html>

259
src/html/pages/index2.astro
View File

@ -14,6 +14,9 @@ const page = 'index2'
<html lang="en">
<head>
<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>
<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>
</p>
<div class="chart">
<!-- Sales Chart Canvas -->
<canvas id="salesChart" style="height: 180px;"></canvas>
</div>
<!-- /.chart-responsive -->
<div id="sales-chart"></div>
</div>
<!-- /.col -->
<div class="col-md-4">
@ -682,22 +681,8 @@ const page = 'index2'
<!-- /.card-header -->
<div class="card-body">
<div class="row">
<div class="col-md-8">
<div class="chart-responsive">
<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 class="col-12">
<div id="pie-chart"></div>
</div>
<!-- /.col -->
</div>
@ -752,63 +737,63 @@ const page = 'index2'
</div>
<!-- /.card-header -->
<div class="card-body p-0">
<ul class="products-list product-list-in-card ps-2 pe-2">
<li class="item">
<div class="product-img">
<div class="px-2">
<div class="d-flex border-top py-2 px-1">
<div class="col-2">
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
</div>
<div class="product-info">
<a href="javascript:void(0)" class="product-title">Samsung TV
<div class="col-10">
<a href="javascript:void(0)" class="fw-bold">Samsung TV
<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.
</span>
</div>
</div>
</li>
</div>
<!-- /.item -->
<li class="item">
<div class="product-img">
<div class="d-flex border-top py-2 px-1">
<div class="col-2">
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
</div>
<div class="product-info">
<a href="javascript:void(0)" class="product-title">Bicycle
<div class="col-10">
<a href="javascript:void(0)" class="fw-bold">Bicycle
<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.
</span>
</div>
</div>
</li>
</div>
<!-- /.item -->
<li class="item">
<div class="product-img">
<div class="d-flex border-top py-2 px-1">
<div class="col-2">
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
</div>
<div class="product-info">
<a href="javascript:void(0)" class="product-title">
<div class="col-10">
<a href="javascript:void(0)" class="fw-bold">
Xbox One <span class="badge text-bg-danger float-end">
$350
</span>
</a>
<span class="product-description">
<div class="text-truncate">
Xbox One Console Bundle with Halo Master Chief Collection.
</span>
</div>
</div>
</li>
</div>
<!-- /.item -->
<li class="item">
<div class="product-img">
<div class="d-flex border-top py-2 px-1">
<div class="col-2">
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
</div>
<div class="product-info">
<a href="javascript:void(0)" class="product-title">PlayStation 4
<div class="col-10">
<a href="javascript:void(0)" class="fw-bold">PlayStation 4
<span class="badge text-bg-success float-end">$399</span></a>
<span class="product-description">
<div class="text-truncate">
PlayStation 4 500GB Console (PS4)
</span>
</div>
</div>
</li>
</div>
<!-- /.item -->
</ul>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer text-center">
@ -834,130 +819,92 @@ const page = 'index2'
<!-- OPTIONAL SCRIPTS -->
<!-- ChartJS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
<!-- apexcharts -->
<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>
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// 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 -
//-----------------------
(function () {
'use strict'
// Get context with querySelector - using Chart.js .getContext('2d') method.
var salesChartCanvas = document.querySelector('#salesChart').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,
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]
},
{
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]
}
]
}
var salesChartOptions = {
maintainAspectRatio: false,
responsive: true,
tension: 0.4,
plugins: {
legend: {
display: false
}
var sales_chart_options = {
series: [{
name: 'Digital Goods',
data: [28, 48, 40, 19, 86, 27, 90]
},{
name: 'Electronics',
data: [65, 59, 80, 81, 56, 55, 40]
}],
chart: {
height: 180,
type: 'area',
toolbar: {
show: false,
},
scales: {
xAxes: {
gridLines: {
display: false
}
},
yAxes: {
gridLines: {
display: false
}
}
}
}
},
legend: {
show: false
},
colors:['#0d6efd', '#20c997'],
dataLabels: {
enabled: false,
},
stroke: {
curve: 'smooth'
},
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 salesChart = new Chart(salesChartCanvas, {
type: 'line',
data: salesChartData,
options: salesChartOptions
})
var sales_chart = new ApexCharts(document.querySelector("#sales-chart"), sales_chart_options);
sales_chart.render();
//---------------------------
// - END MONTHLY SALES CHART -
//---------------------------
//---------------------------
// - END MONTHLY SALES CHART -
//---------------------------
//-------------
// - PIE CHART -
//-------------
//-------------
// - PIE CHART -
//-------------
// Get context with querySelector - using Chart.js .getContext('2d') method.
var pieChartCanvas = document.querySelector('#pieChart').getContext('2d')
var pie_chart_options = {
series: [700, 500, 400, 600, 300, 100],
chart: {
type: 'donut',
},
labels: [
'Chrome',
'Edge',
'FireFox',
'Safari',
'Opera',
'IE',
],
dataLabels: {
enabled: false,
},
colors: ['#0d6efd', '#20c997', '#ffc107', '#d63384', '#6f42c1', '#adb5bd']
};
var pie_chart = new ApexCharts(document.querySelector("#pie-chart"), pie_chart_options);
pie_chart.render();
var pieData = {
labels: [
'Chrome',
'IE',
'FireFox',
'Safari',
'Opera',
'Navigator'
],
datasets: [
{
data: [700, 500, 400, 600, 300, 100],
backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
}
]
}
var pieOptions = {
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 -
//-----------------

219
src/html/pages/index3.astro
View File

@ -14,6 +14,9 @@ const page = 'index3'
<html lang="en">
<head>
<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>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
@ -64,7 +67,7 @@ const page = 'index3'
<!-- /.d-flex -->
<div class="position-relative mb-4">
<canvas id="visitors-chart" height="200"></canvas>
<div id="visitors-chart"></div>
</div>
<div class="d-flex flex-row justify-content-end">
@ -205,13 +208,13 @@ const page = 'index3'
<span class="text-success">
<i class="fa-solid fa-arrow-up"></i> 33.1%
</span>
<span class="text-secondary">Since last month</span>
<span class="text-secondary">Since Past Year</span>
</p>
</div>
<!-- /.d-flex -->
<div class="position-relative mb-4">
<canvas id="sales-chart" height="200"></canvas>
<div id="sales-chart"></div>
</div>
<div class="d-flex flex-row justify-content-end">
@ -301,131 +304,109 @@ const page = 'index3'
<!-- OPTIONAL SCRIPTS -->
<!-- ChartJS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
<!-- apexcharts -->
<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>
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR DEMO
// ++++++++++++++++++++++++++++++++++++++++++
/* global Chart:false */
(function () {
'use strict'
var visitors_chart_options = {
series: [
{
name: "High - 2023",
data: [100, 120, 170, 167, 180, 177, 160]
},
{
name: "Low - 2023",
data: [60, 80, 70, 67, 80, 77, 100]
}
],
chart: {
height: 200,
type: 'line',
toolbar: {
show: false
}
},
colors: ['#0d6efd', '#adb5bd'],
stroke: {
curve: 'smooth'
},
grid: {
borderColor: '#e7e7e7',
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
legend: {
show: false
},
markers: {
size: 1
},
xaxis: {
categories: ['22th', '23th', '24th', '25th', '26th', '27th', '28th'],
},
};
var ticksStyle = {
fontColor: '#495057',
fontStyle: 'bold'
var visitors_chart = new ApexCharts(document.querySelector("#visitors-chart"), visitors_chart_options);
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
},
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 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'
},
{
type: 'line',
data: [60, 80, 70, 67, 80, 77, 100],
backgroundColor: 'tansparent',
borderColor: '#ced4da',
pointBorderColor: '#ced4da',
pointBackgroundColor: '#ced4da'
// pointHoverBackgroundColor: '#ced4da',
// pointHoverBorderColor : '#ced4da'
}]
},
options: {
maintainAspectRatio: false,
tooltip: {
mode: mode,
intersect: intersect
},
hover: {
mode: mode,
intersect: intersect
},
plugins: {
legend: {
display: false
}
},
scales: {
yAxes: {
// display: false,
gridLines: {
display: true,
lineWidth: '4px',
color: 'rgba(0, 0, 0, .2)',
zeroLineColor: 'transparent'
},
ticks: Object.assign({
beginAtZero: true,
suggestedMax: 200
}, ticksStyle)
},
xAxes: {
display: true,
gridLines: {
display: false
},
ticks: ticksStyle
}
}
}
})
})()
var sales_chart = new ApexCharts(document.querySelector("#sales-chart"), sales_chart_options);
sales_chart.render();
</script>
</body>
</html>