147 lines
4.1 KiB
JavaScript
147 lines
4.1 KiB
JavaScript
$(document).ready(function() {
|
|
|
|
"use strict";
|
|
$('#themes-info').on('hidden.bs.modal', function (e) {
|
|
|
|
setTimeout(function() {
|
|
toastr.options = {
|
|
progressBar: true,
|
|
showMethod: 'fadeIn',
|
|
hideMethod: 'fadeOut',
|
|
timeOut: 5000
|
|
};
|
|
toastr.success('Try searching something!');
|
|
}, 1000);
|
|
});
|
|
var ctx = document.getElementById('visitorsChart');
|
|
var myChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors'],
|
|
datasets: [{
|
|
|
|
label: 'Total',
|
|
data: [3, 6, 4, 5, 6, 5, 3, 5, 6, 5, 4],
|
|
backgroundColor: '#5780F7'
|
|
}, {
|
|
label: 'Unique',
|
|
data: [2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2],
|
|
backgroundColor: '#1F2331'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
legend: {
|
|
display: 0 // place legend on the right side of chart
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
display: 0,
|
|
stacked: true,
|
|
ticks: {
|
|
display: 0
|
|
},
|
|
gridLines: {
|
|
color: "rgba(255,255,255,0)"
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
display: 0,
|
|
stacked: true,
|
|
ticks: {
|
|
display: 0
|
|
},
|
|
gridLines: {
|
|
color: "rgba(255,255,255,0)"
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
|
|
var options = {
|
|
chart: {
|
|
height: 350,
|
|
type: 'bar',
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
foreColor: '#747985'
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '55%',
|
|
endingShape: 'rounded'
|
|
},
|
|
},
|
|
|
|
colors:['#FFCD36', '#5780F7', '#06BA54'],
|
|
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ['transparent']
|
|
},
|
|
series: [{
|
|
name: 'Space',
|
|
data: [44, 55, 57, 56, 61, 58, 63, 60, 66, 63, 60]
|
|
}, {
|
|
name: 'Modern',
|
|
data: [76, 85, 101, 98, 87, 105, 91, 114, 94, 89, 95]
|
|
}, {
|
|
name: 'Alpha',
|
|
data: [35, 41, 36, 26, 45, 48, 52, 53, 41, 39, 46]
|
|
}],
|
|
xaxis: {
|
|
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan'],
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (val) {
|
|
return "$ " + val + " thousands"
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
borderColor: '#747985'
|
|
}
|
|
}
|
|
var chart = new ApexCharts(
|
|
document.querySelector("#apex1"),
|
|
options
|
|
);
|
|
|
|
chart.render();
|
|
|
|
new Chart(document.getElementById("productsChart"),{
|
|
"type": "doughnut",
|
|
"data": {
|
|
"labels": ["Alpha","Space","Modern"],
|
|
"datasets": [{
|
|
"label": "My First Dataset",
|
|
"data": [327,82,145],
|
|
"backgroundColor": ["#06BA54","#FFCD36","#E6E6E6"]
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
});
|
|
|
|
$(window).on('load', function() {
|
|
setTimeout(function() {
|
|
$('#themes-info').modal('show');
|
|
}, 1600)
|
|
});
|
|
|
|
}); |