⚡ some files
This commit is contained in:
Daniel
parent
ca97a4a48d
commit
1d56279d3f
37
.gitignore
vendored
37
.gitignore
vendored
|
|
@ -19,43 +19,6 @@ nbproject/private
|
|||
node_modules/
|
||||
bower_components/
|
||||
|
||||
# Plugins
|
||||
/plugins/**/*.html
|
||||
/plugins/**/*.less
|
||||
/plugins/**/*.md
|
||||
/plugins/**/*.scss
|
||||
/plugins/**/*.ts
|
||||
/plugins/**/bower.json
|
||||
/plugins/**/package.json
|
||||
/plugins/**/webpack.config.js
|
||||
/plugins/**/demo/
|
||||
/plugins/**/demos/
|
||||
/plugins/**/dev/
|
||||
/plugins/**/example/
|
||||
/plugins/**/examples/
|
||||
/plugins/**/less/
|
||||
/plugins/**/test/
|
||||
/plugins/**/tests/
|
||||
/plugins/daterangepicker/website/
|
||||
/plugins/daterangepicker/drp.png
|
||||
/plugins/daterangepicker/moment.min.js
|
||||
/plugins/daterangepicker/package.js
|
||||
/plugins/daterangepicker/website.css
|
||||
/plugins/daterangepicker/website.js
|
||||
/plugins/jquery-ui/AUTHORS.txt
|
||||
/plugins/jquery-ui/external/jquery/jquery.js
|
||||
/plugins/inputmask/bindings/
|
||||
/plugins/flot/plugins/jquery*.js
|
||||
!/plugins/flot/plugins/jquery.flot.*.js
|
||||
!/plugins/**/LICENSE.md
|
||||
!/plugins/**/LICENSE.txt
|
||||
!/plugins/**/license.md
|
||||
!/plugins/**/license.txt
|
||||
!/plugins/**/LICENSE
|
||||
!/plugins/**/license
|
||||
!/plugins/**/COPYING
|
||||
|
||||
|
||||
# Docs
|
||||
/docs/_site/
|
||||
/docs/vendor/
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@ const html = () => src([paths.src.html])
|
|||
.pipe(dest(paths.temp.html))
|
||||
.pipe(browserSync.stream())
|
||||
|
||||
const lintHtml = () => src([paths.temp.html + '/**/*.html', paths.temp.base + '*.html'])
|
||||
const lintHtml = () => src([paths.temp.html + '/**/*.html', paths.temp.base + '*.html'], { since: lastRun(lintHtml) })
|
||||
.pipe(validator())
|
||||
|
||||
const serve = () => {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
"docs-lint": "node -v",
|
||||
"lint": "npx gulp lint && npm run lockfile-lint",
|
||||
"compile": "npx gulp compile",
|
||||
"production": "npx gulp production"
|
||||
"production": "npx gulp production",
|
||||
"dev": "npx gulp"
|
||||
},
|
||||
"keywords": [
|
||||
"css",
|
||||
|
|
|
|||
|
|
@ -1,99 +0,0 @@
|
|||
/* eslint-disable no-undef */
|
||||
/* Chart.js Charts */
|
||||
// Sales chart
|
||||
const salesChartCanvas = document.querySelector('#revenue-chart-canvas').getContext('2d')
|
||||
|
||||
const 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]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const salesChartOptions = {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
// This will get the first returned node in the jQuery collection.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
|
||||
type: 'line',
|
||||
data: salesChartData,
|
||||
options: salesChartOptions
|
||||
})
|
||||
|
||||
// Donut Chart
|
||||
const pieChartCanvas = document.querySelector('#sales-chart-canvas').getContext('2d')
|
||||
const pieData = {
|
||||
labels: [
|
||||
'Instore Sales',
|
||||
'Download Sales',
|
||||
'Mail-Order Sales'
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [30, 12, 20],
|
||||
backgroundColor: ['#f56954', '#00a65a', '#f39c12']
|
||||
}
|
||||
]
|
||||
}
|
||||
const 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
|
||||
const pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
|
||||
type: 'doughnut',
|
||||
data: pieData,
|
||||
options: pieOptions
|
||||
})
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
/* eslint-disable no-undef */
|
||||
/* ChartJS
|
||||
* -------
|
||||
* Here we will create a few charts using ChartJS
|
||||
*/
|
||||
|
||||
//-----------------------
|
||||
// - MONTHLY SALES CHART -
|
||||
//-----------------------
|
||||
|
||||
// Get context with querySelector - using Chart.js .getContext('2d') method.
|
||||
const salesChartCanvas = document.querySelector('#salesChart').getContext('2d')
|
||||
|
||||
const 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]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const salesChartOptions = {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
tension: 0.4,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
// This will get the first returned node in the jQuery collection.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const salesChart = new Chart(salesChartCanvas, {
|
||||
type: 'line',
|
||||
data: salesChartData,
|
||||
options: salesChartOptions
|
||||
})
|
||||
|
||||
//---------------------------
|
||||
// - END MONTHLY SALES CHART -
|
||||
//---------------------------
|
||||
|
||||
//-------------
|
||||
// - PIE CHART -
|
||||
//-------------
|
||||
|
||||
// Get context with querySelector - using Chart.js .getContext('2d') method.
|
||||
const pieChartCanvas = document.querySelector('#pieChart').getContext('2d')
|
||||
|
||||
const pieData = {
|
||||
labels: [
|
||||
'Chrome',
|
||||
'IE',
|
||||
'FireFox',
|
||||
'Safari',
|
||||
'Opera',
|
||||
'Navigator'
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [700, 500, 400, 600, 300, 100],
|
||||
backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
|
||||
}
|
||||
]
|
||||
}
|
||||
const 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
|
||||
const pieChart = new Chart(pieChartCanvas, {
|
||||
type: 'doughnut',
|
||||
data: pieData,
|
||||
options: pieOptions
|
||||
})
|
||||
|
||||
//-----------------
|
||||
// - END PIE CHART -
|
||||
//-----------------
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
/* global Chart:false */
|
||||
|
||||
const ticksStyle = {
|
||||
fontColor: '#495057',
|
||||
fontStyle: 'bold'
|
||||
}
|
||||
|
||||
const mode = 'index'
|
||||
const intersect = true
|
||||
|
||||
const salesChartSelector = document.querySelector('#sales-chart')
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const 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
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const visitorsChartSelector = document.querySelector('#visitors-chart')
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const 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,
|
||||
intersect
|
||||
},
|
||||
hover: {
|
||||
mode,
|
||||
intersect
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
// display: false,
|
||||
grid: {
|
||||
display: true,
|
||||
lineWidth: '4px',
|
||||
color: 'rgba(0, 0, 0, .2)',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: Object.assign({
|
||||
beginAtZero: true,
|
||||
suggestedMax: 200
|
||||
}, ticksStyle)
|
||||
}],
|
||||
xAxes: [{
|
||||
display: true,
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
ticks: ticksStyle
|
||||
}]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// lgtm [js/unused-local-variable]
|
||||
110
src/index.html
110
src/index.html
|
|
@ -364,7 +364,113 @@
|
|||
|
||||
<!-- ChartJS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
|
||||
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
|
||||
<script src="./assets/js/dashboard.js"></script>
|
||||
<script>
|
||||
// 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
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
},
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
128
src/index2.html
128
src/index2.html
|
|
@ -838,7 +838,131 @@
|
|||
|
||||
<!-- ChartJS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
|
||||
<!-- AdminLTE dashboard2 demo (This is only for demo purposes) -->
|
||||
<script src="./assets/js/dashboard2.js"></script>
|
||||
|
||||
<script>
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR DEMO
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/* ChartJS
|
||||
* -------
|
||||
* Here we will create a few charts using ChartJS
|
||||
*/
|
||||
|
||||
//-----------------------
|
||||
// - 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
|
||||
}
|
||||
},
|
||||
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, {
|
||||
type: 'line',
|
||||
data: salesChartData,
|
||||
options: salesChartOptions
|
||||
})
|
||||
|
||||
//---------------------------
|
||||
// - END MONTHLY SALES CHART -
|
||||
//---------------------------
|
||||
|
||||
//-------------
|
||||
// - PIE CHART -
|
||||
//-------------
|
||||
|
||||
// Get context with querySelector - using Chart.js .getContext('2d') method.
|
||||
var pieChartCanvas = document.querySelector('#pieChart').getContext('2d')
|
||||
|
||||
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 -
|
||||
//-----------------
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
123
src/index3.html
123
src/index3.html
|
|
@ -303,5 +303,128 @@
|
|||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
|
||||
<!-- AdminLTE dashboard3 demo (This is only for demo purposes) -->
|
||||
<script src="./assets/js/dashboard3.js"></script>
|
||||
<script>
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR DEMO
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/* global Chart:false */
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
var ticksStyle = {
|
||||
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'
|
||||
},
|
||||
{
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue