536 lines
14 KiB
JavaScript
536 lines
14 KiB
JavaScript
/* Total Users Chart */
|
|
var element = document.getElementById("analytics-users");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var spark1 = {
|
|
chart: {
|
|
type: 'line',
|
|
height: 40,
|
|
width: 120,
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
enabledOnSeries: undefined,
|
|
top: 0,
|
|
left: 0,
|
|
blur: 3,
|
|
color: '#000',
|
|
opacity: 0.1
|
|
}
|
|
},
|
|
grid: {
|
|
show: false,
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
},
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
curve: 'straight',
|
|
lineCap: 'butt',
|
|
colors: undefined,
|
|
width: 1.5,
|
|
dashArray: 0,
|
|
},
|
|
fill: {
|
|
gradient: {
|
|
enabled: false
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Value',
|
|
data: [0, 21, 54, 38, 56, 24, 65]
|
|
}],
|
|
yaxis: {
|
|
min: 0,
|
|
show: false
|
|
},
|
|
xaxis: {
|
|
show: false,
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
},
|
|
colors: ['#23b7e5'],
|
|
|
|
}
|
|
var spark1 = new ApexCharts(document.querySelector("#analytics-users"), spark1);
|
|
spark1.render();
|
|
}
|
|
/* Total Users Chart */
|
|
|
|
/* Bounce rate Chart */
|
|
var element = document.getElementById("analytics-bouncerate");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var total = {
|
|
chart: {
|
|
type: 'line',
|
|
height: 45,
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
enabledOnSeries: undefined,
|
|
top: 0,
|
|
left: 0,
|
|
blur: 1,
|
|
color: '#fff',
|
|
opacity: 0.05
|
|
}
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
curve: 'smooth',
|
|
lineCap: 'butt',
|
|
colors: undefined,
|
|
width: 2,
|
|
dashArray: 0,
|
|
},
|
|
fill: {
|
|
gradient: {
|
|
enabled: false
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Value',
|
|
data: [54, 38, 56, 35, 65, 43, 53, 45, 62, 80, 35, 48]
|
|
}],
|
|
yaxis: {
|
|
min: 0,
|
|
show: false
|
|
},
|
|
xaxis: {
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
},
|
|
yaxis: {
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
},
|
|
colors: ["rgba(132, 90, 223, 0.1)"],
|
|
tooltip: {
|
|
enabled: false,
|
|
}
|
|
}
|
|
var total = new ApexCharts(document.querySelector("#analytics-bouncerate"), total);
|
|
total.render();
|
|
}
|
|
|
|
function bounceRate() {
|
|
total.updateOptions({
|
|
colors: ["rgba(" + myVarVal + ", 0.1)"],
|
|
})
|
|
}
|
|
/* Bounce rate Chart */
|
|
|
|
/* Sessions By Device Chart */
|
|
var element = document.getElementById("sessions");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var options = {
|
|
series: [1754, 1234, 878, 270],
|
|
labels: ["Mobile", "Tablet", "Desktop", "Others"],
|
|
chart: {
|
|
height: 257,
|
|
type: 'donut',
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
|
|
legend: {
|
|
show: false,
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
curve: 'smooth',
|
|
lineCap: 'round',
|
|
colors: "#fff",
|
|
width: 0,
|
|
dashArray: 0,
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
expandOnClick: false,
|
|
donut: {
|
|
size: '80%',
|
|
background: 'transparent',
|
|
labels: {
|
|
show: true,
|
|
name: {
|
|
show: true,
|
|
fontSize: '20px',
|
|
color: '#495057',
|
|
offsetY: -4
|
|
},
|
|
value: {
|
|
show: true,
|
|
fontSize: '18px',
|
|
color: undefined,
|
|
offsetY: 8,
|
|
formatter: function (val) {
|
|
return val + "%"
|
|
}
|
|
},
|
|
total: {
|
|
show: true,
|
|
showAlways: true,
|
|
label: 'Total',
|
|
fontSize: '22px',
|
|
fontWeight: 600,
|
|
color: '#495057',
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
},
|
|
colors: ["rgba(132, 90, 223, 1)", "rgba(35, 183, 229, 1)", "rgba(38, 191, 148, 1)", "rgba(245, 184, 73, 1)",],
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#sessions"), options);
|
|
chart.render();
|
|
}
|
|
|
|
function Sessions() {
|
|
chart.updateOptions({
|
|
colors: ["rgba(" + myVarVal + ", 1)", "rgba(35, 183, 229, 1)", "rgba(38, 191, 148, 1)", "rgba(245, 184, 73, 1)",],
|
|
})
|
|
};
|
|
/* Sessions By Device Chart */
|
|
|
|
/* Audience report Chart */
|
|
var element = document.getElementById("audienceReport");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: 'Views',
|
|
type: 'column',
|
|
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 45, 35]
|
|
},
|
|
{
|
|
name: 'Followers',
|
|
type: 'line',
|
|
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43, 27]
|
|
},
|
|
],
|
|
chart: {
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
type: 'line',
|
|
height: 250,
|
|
},
|
|
grid: {
|
|
borderColor: '#f1f1f1',
|
|
strokeDashArray: 3
|
|
},
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
width: [1, 1.1],
|
|
curve: ['straight', 'smooth'],
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: 'top',
|
|
},
|
|
xaxis: {
|
|
axisBorder: {
|
|
color: '#e9e9e9',
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: "20%",
|
|
borderRadius: 2
|
|
}
|
|
},
|
|
colors: ["rgba(132, 90, 223, 1)", '#23b7e5'],
|
|
};
|
|
var chart2 = new ApexCharts(document.querySelector("#audienceReport"), options);
|
|
chart2.render();
|
|
}
|
|
|
|
function audienceReport() {
|
|
chart2.updateOptions({
|
|
colors: ["rgba(" + myVarVal + ", 1)", '#23b7e5'],
|
|
})
|
|
}
|
|
/* Audience report Chart */
|
|
|
|
/* Country Sessions vs Bounce Rate Chart */
|
|
var element = document.getElementById("country-sessions");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: 'Session',
|
|
data: [24, 23, 20, 25, 27, 26, 24, 23, 23, 25, 23, 23],
|
|
type: 'line',
|
|
},
|
|
{
|
|
name: 'Bounce Rate',
|
|
data: [20, 23, 26, 22, 20, 26, 28, 26, 22, 27, 25, 26],
|
|
type: 'bar',
|
|
},
|
|
],
|
|
chart: {
|
|
height: 308,
|
|
zoom: {
|
|
enabled: false
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
show: true,
|
|
},
|
|
grid: {
|
|
borderColor: '#f1f1f1',
|
|
strokeDashArray: 3
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: 'top',
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 5,
|
|
columnWidth: "40%",
|
|
dataLabels: {
|
|
position: 'top', // top, center, bottom
|
|
},
|
|
}
|
|
},
|
|
colors: ["rgb(132, 90, 223)", "#ededed"],
|
|
stroke: {
|
|
curve: ['smooth', 'stepline'],
|
|
width: [2, 0],
|
|
columnWidth: '10%'
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
axisBorder: {
|
|
color: '#e9e9e9',
|
|
},
|
|
}
|
|
};
|
|
var chart3 = new ApexCharts(document.querySelector("#country-sessions"), options);
|
|
chart3.render();
|
|
}
|
|
|
|
function countrySessions() {
|
|
chart3.updateOptions({
|
|
colors: ["rgb(" + myVarVal + ")", "#ededed"],
|
|
})
|
|
}
|
|
/* Country Sessions vs Bounce Rate Chart */
|
|
|
|
/* Session Duration By New Users Chart */
|
|
var element = document.getElementById("session-users");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var options2 = {
|
|
series: [{
|
|
name: 'New Users',
|
|
data: [32, 15, 63, 51, 36, 62, 99, 42, 78, 76, 32, 120],
|
|
}, {
|
|
name: 'Sessions',
|
|
data: [56, 58, 38, 50, 64, 45, 55, 32, 15, 63, 51, 136]
|
|
}, {
|
|
name: 'Avg Session Duration',
|
|
data: [48, 29, 50, 69, 20, 59, 52, 12, 48, 28, 17, 98]
|
|
}],
|
|
chart: {
|
|
height: 387,
|
|
type: 'line',
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
background: 'none',
|
|
fill: "#fff",
|
|
},
|
|
grid: {
|
|
borderColor: '#f2f6f7',
|
|
},
|
|
colors: ["rgb(132, 90, 223)", "#23b7e5", "#f5b849"],
|
|
background: 'transparent',
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'straight',
|
|
width: 3
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: 'top',
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
show: false,
|
|
axisBorder: {
|
|
show: false,
|
|
color: 'rgba(119, 119, 142, 0.05)',
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
borderType: 'solid',
|
|
color: 'rgba(119, 119, 142, 0.05)',
|
|
width: 6,
|
|
offsetX: 0,
|
|
offsetY: 0
|
|
},
|
|
labels: {
|
|
rotate: -90,
|
|
}
|
|
},
|
|
yaxis: {
|
|
show: false,
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
}
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
format: 'dd/MM/yy HH:mm'
|
|
},
|
|
},
|
|
};
|
|
var chart4 = new ApexCharts(document.querySelector("#session-users"), options2);
|
|
chart4.render();
|
|
}
|
|
|
|
function userSession() {
|
|
chart4.updateOptions({
|
|
colors: ["rgb(" + myVarVal + ")", "#23b7e5", "#f5b849"],
|
|
})
|
|
}
|
|
/* Session Duration By New Users Chart */
|
|
|
|
/* Impressions Chart */
|
|
var element = document.getElementById("analytics-followers");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var options = {
|
|
chart: {
|
|
height: 120,
|
|
width: 100,
|
|
type: "radialBar",
|
|
},
|
|
|
|
series: [48],
|
|
colors: ["#23b7e5"],
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
margin: 0,
|
|
size: "50%",
|
|
background: "#fff"
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
offsetY: -10,
|
|
color: "#4b9bfa",
|
|
fontSize: "10px",
|
|
show: false
|
|
},
|
|
value: {
|
|
offsetY: 5,
|
|
color: "#4b9bfa",
|
|
fontSize: "12px",
|
|
show: true,
|
|
fontWeight: 800
|
|
}
|
|
}
|
|
}
|
|
},
|
|
stroke: {
|
|
lineCap: "round"
|
|
},
|
|
labels: ["Followers"]
|
|
};
|
|
var chart5 = new ApexCharts(document.querySelector("#analytics-followers"), options);
|
|
chart5.render();
|
|
}
|
|
/* Impressions Chart */
|
|
|
|
/* Clicks Chart */
|
|
var element = document.getElementById("analytics-views");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var options = {
|
|
chart: {
|
|
height: 120,
|
|
width: 100,
|
|
type: "radialBar",
|
|
},
|
|
|
|
series: [65],
|
|
colors: ["#f7b731"],
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
margin: 0,
|
|
size: "50%",
|
|
background: "#fff"
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
offsetY: -10,
|
|
color: "#4b9bfa",
|
|
fontSize: "10px",
|
|
show: false
|
|
},
|
|
value: {
|
|
offsetY: 5,
|
|
color: "#4b9bfa",
|
|
fontSize: "12px",
|
|
show: true,
|
|
fontWeight: 800
|
|
}
|
|
}
|
|
}
|
|
},
|
|
stroke: {
|
|
lineCap: "round"
|
|
},
|
|
labels: ["Views"]
|
|
};
|
|
var chart6 = new ApexCharts(document.querySelector("#analytics-views"), options);
|
|
chart6.render();
|
|
}
|
|
/* Clicks Chart */ |