1038 lines
24 KiB
JavaScript
1038 lines
24 KiB
JavaScript
|
$(function() {
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// chart 1
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
chart: {
|
||
|
|
height: 125,
|
||
|
|
type: 'area',
|
||
|
|
zoom: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
foreColor: 'rgba(255, 255, 255, 0.65)',
|
||
|
|
toolbar: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
sparkline:{
|
||
|
|
enabled:true,
|
||
|
|
},
|
||
|
|
dropShadow: {
|
||
|
|
enabled: false,
|
||
|
|
opacity: 0.15,
|
||
|
|
blur: 3,
|
||
|
|
left: -7,
|
||
|
|
top: 15,
|
||
|
|
//color: 'rgba(0, 158, 253, 0.65)',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
bar: {
|
||
|
|
columnWidth: '10%',
|
||
|
|
endingShape: 'rounded',
|
||
|
|
dataLabels: {
|
||
|
|
position: 'top', // top, center, bottom
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
width: 3,
|
||
|
|
curve: 'straight'
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: 'Twitter Followers',
|
||
|
|
data: [76, 85, 101, 98, 87, 105, 91, 114, 94] // use the array for displaying data from mysql or .net remove the hard number-->
|
||
|
|
}],
|
||
|
|
|
||
|
|
xaxis: {
|
||
|
|
type: 'month',
|
||
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
axisBorder: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTicks: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
labels: {
|
||
|
|
show: false,
|
||
|
|
formatter: function(val) {
|
||
|
|
return parseInt(val);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
shade: 'light',
|
||
|
|
//gradientToColors: ['rgba(255, 255, 255, 0.12)'],
|
||
|
|
shadeIntensity: 1,
|
||
|
|
type: 'vertical',
|
||
|
|
opacityFrom: 0.7,
|
||
|
|
opacityTo: 0.1,
|
||
|
|
stops: [0, 100, 100, 100]
|
||
|
|
},
|
||
|
|
},
|
||
|
|
colors: ["#fff"],
|
||
|
|
legend: {
|
||
|
|
show: 0,
|
||
|
|
position: "top",
|
||
|
|
horizontalAlign: "center",
|
||
|
|
offsetX: -20,
|
||
|
|
fontSize: "12px",
|
||
|
|
markers: {
|
||
|
|
radius: 50,
|
||
|
|
width: 10,
|
||
|
|
height: 10
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid:{
|
||
|
|
show: false,
|
||
|
|
borderColor: 'rgba(66, 59, 116, 0.12)',
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
theme: 'dark',
|
||
|
|
x: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var chart = new ApexCharts(
|
||
|
|
document.querySelector("#twitter-followers"),
|
||
|
|
options
|
||
|
|
);
|
||
|
|
|
||
|
|
chart.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// chart 2
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
chart: {
|
||
|
|
height: 270,
|
||
|
|
type: 'radialBar',
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
radialBar: {
|
||
|
|
startAngle: -135,
|
||
|
|
endAngle: 225,
|
||
|
|
hollow: {
|
||
|
|
margin: 0,
|
||
|
|
size: '75%',
|
||
|
|
background: 'transparent',
|
||
|
|
dropShadow: {
|
||
|
|
enabled: true,
|
||
|
|
top: -3,
|
||
|
|
left: 0,
|
||
|
|
blur: 4,
|
||
|
|
opacity: 0.35
|
||
|
|
}
|
||
|
|
},
|
||
|
|
track: {
|
||
|
|
background: 'rgba(255, 255, 255, 0.12)',
|
||
|
|
strokeWidth: '100%',
|
||
|
|
margin: 0, // margin is in pixels
|
||
|
|
dropShadow: {
|
||
|
|
enabled: true,
|
||
|
|
top: -3,
|
||
|
|
left: 0,
|
||
|
|
blur: 4,
|
||
|
|
opacity: 0.35
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
name: {
|
||
|
|
fontSize: '14px',
|
||
|
|
color: '#fff',
|
||
|
|
offsetY: -10
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
offsetY: 0,
|
||
|
|
fontSize: '22px',
|
||
|
|
color: '#fff',
|
||
|
|
formatter: function (val) {
|
||
|
|
return val + "%";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
dashArray: 4
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
shade: 'dark',
|
||
|
|
type: 'horizontal',
|
||
|
|
shadeIntensity: 0.15,
|
||
|
|
gradientToColors: ['#fff'],
|
||
|
|
inverseColors: false,
|
||
|
|
opacityFrom: 1,
|
||
|
|
opacityTo: 1,
|
||
|
|
stops: [0, 50, 65, 91]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
colors: ["#fff"],
|
||
|
|
series: [75],
|
||
|
|
labels: ['Median Ratio'],
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var chart = new ApexCharts(
|
||
|
|
document.querySelector("#total-visitors"),
|
||
|
|
options
|
||
|
|
);
|
||
|
|
|
||
|
|
chart.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// chart 3
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
chart: {
|
||
|
|
height: 35,
|
||
|
|
type: 'bar',
|
||
|
|
zoom: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
foreColor: 'rgba(255, 255, 255, 0.65)',
|
||
|
|
toolbar: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
sparkline:{
|
||
|
|
enabled:true,
|
||
|
|
},
|
||
|
|
dropShadow: {
|
||
|
|
enabled: true,
|
||
|
|
opacity: 0.1,
|
||
|
|
blur: 3,
|
||
|
|
left: -7,
|
||
|
|
top: 15,
|
||
|
|
//color: 'rgba(0, 158, 253, 0.65)',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
bar: {
|
||
|
|
columnWidth: '10%',
|
||
|
|
endingShape: 'rounded',
|
||
|
|
dataLabels: {
|
||
|
|
position: 'top', // top, center, bottom
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
width: 3,
|
||
|
|
curve: 'straight'
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: 'Facebook Pageviews',
|
||
|
|
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
|
||
|
|
}],
|
||
|
|
|
||
|
|
xaxis: {
|
||
|
|
type: 'month',
|
||
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
axisBorder: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTicks: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
labels: {
|
||
|
|
show: false,
|
||
|
|
formatter: function(val) {
|
||
|
|
return parseInt(val);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
shade: 'light',
|
||
|
|
gradientToColors: ['#fff'],
|
||
|
|
shadeIntensity: 1,
|
||
|
|
type: 'vertical',
|
||
|
|
opacityFrom: 1,
|
||
|
|
opacityTo: 1,
|
||
|
|
stops: [0, 80, 100]
|
||
|
|
},
|
||
|
|
},
|
||
|
|
colors: ['#fff'],
|
||
|
|
legend: {
|
||
|
|
show: 0,
|
||
|
|
position: "top",
|
||
|
|
horizontalAlign: "center",
|
||
|
|
offsetX: -20,
|
||
|
|
fontSize: "12px",
|
||
|
|
markers: {
|
||
|
|
radius: 50,
|
||
|
|
width: 10,
|
||
|
|
height: 10
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid:{
|
||
|
|
show: false,
|
||
|
|
borderColor: 'rgba(66, 59, 116, 0.12)',
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
theme: 'dark',
|
||
|
|
x: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var chart = new ApexCharts(
|
||
|
|
document.querySelector("#facebook-pageviews"),
|
||
|
|
options
|
||
|
|
);
|
||
|
|
|
||
|
|
chart.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// chart 4
|
||
|
|
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
chart: {
|
||
|
|
height: 35,
|
||
|
|
type: 'line',
|
||
|
|
zoom: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
foreColor: 'rgba(255, 255, 255, 0.65)',
|
||
|
|
toolbar: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
sparkline:{
|
||
|
|
enabled:true,
|
||
|
|
},
|
||
|
|
dropShadow: {
|
||
|
|
enabled: true,
|
||
|
|
opacity: 0.15,
|
||
|
|
blur: 3,
|
||
|
|
left: -7,
|
||
|
|
top: 5,
|
||
|
|
//color: 'rgba(0, 158, 253, 0.65)',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
bar: {
|
||
|
|
columnWidth: '10%',
|
||
|
|
endingShape: 'rounded',
|
||
|
|
dataLabels: {
|
||
|
|
position: 'top', // top, center, bottom
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
width: 2.5,
|
||
|
|
curve: 'straight'
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: 'Bounce Rate',
|
||
|
|
data: [85, 101, 98, 87, 105, 91, 114, 94]
|
||
|
|
}],
|
||
|
|
|
||
|
|
xaxis: {
|
||
|
|
type: 'month',
|
||
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
axisBorder: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTicks: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
labels: {
|
||
|
|
show: false,
|
||
|
|
formatter: function(val) {
|
||
|
|
return parseInt(val);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
shade: 'light',
|
||
|
|
gradientToColors: ['#fff'],
|
||
|
|
shadeIntensity: 1,
|
||
|
|
type: 'horizontal',
|
||
|
|
opacityFrom: 1,
|
||
|
|
opacityTo: 1,
|
||
|
|
stops: [0, 80, 100]
|
||
|
|
},
|
||
|
|
},
|
||
|
|
colors: ['#fff'],
|
||
|
|
legend: {
|
||
|
|
show: 0,
|
||
|
|
position: "top",
|
||
|
|
horizontalAlign: "center",
|
||
|
|
offsetX: -20,
|
||
|
|
fontSize: "12px",
|
||
|
|
markers: {
|
||
|
|
radius: 50,
|
||
|
|
width: 10,
|
||
|
|
height: 10
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid:{
|
||
|
|
show: false,
|
||
|
|
borderColor: 'rgba(66, 59, 116, 0.12)',
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
theme: 'dark',
|
||
|
|
x: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var chart = new ApexCharts(
|
||
|
|
document.querySelector("#bounce-rate"),
|
||
|
|
options
|
||
|
|
);
|
||
|
|
|
||
|
|
chart.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// chart 5
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
chart: {
|
||
|
|
height: 200,
|
||
|
|
type: 'area',
|
||
|
|
zoom: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
foreColor: 'rgba(255, 255, 255, 0.65)',
|
||
|
|
toolbar: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
sparkline:{
|
||
|
|
enabled:false,
|
||
|
|
},
|
||
|
|
dropShadow: {
|
||
|
|
enabled: false,
|
||
|
|
opacity: 0.15,
|
||
|
|
blur: 3,
|
||
|
|
left: -7,
|
||
|
|
top: 15,
|
||
|
|
//color: 'rgba(0, 158, 253, 0.65)',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
bar: {
|
||
|
|
columnWidth: '30%',
|
||
|
|
endingShape: 'rounded',
|
||
|
|
dataLabels: {
|
||
|
|
position: 'top', // top, center, bottom
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
width: 3,
|
||
|
|
curve: 'smooth'
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: 'List Subscribers',
|
||
|
|
data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5]
|
||
|
|
}],
|
||
|
|
|
||
|
|
xaxis: {
|
||
|
|
type: 'month',
|
||
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
axisBorder: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTicks: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
labels: {
|
||
|
|
show: false,
|
||
|
|
formatter: function(val) {
|
||
|
|
return parseInt(val);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
shade: 'light',
|
||
|
|
gradientToColors: ['#fff'],
|
||
|
|
shadeIntensity: 1,
|
||
|
|
type: 'vertical',
|
||
|
|
opacityFrom: 0.8,
|
||
|
|
opacityTo: 0.2,
|
||
|
|
stops: [0, 100, 100, 100]
|
||
|
|
},
|
||
|
|
},
|
||
|
|
colors: ['#fff'],
|
||
|
|
grid:{
|
||
|
|
show: true,
|
||
|
|
borderColor: 'rgba(255, 255, 255, 0.12)',
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
theme: 'dark',
|
||
|
|
x: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: 'Monthly List Subscribers'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var chart = new ApexCharts(
|
||
|
|
document.querySelector("#list-subscribers"),
|
||
|
|
options
|
||
|
|
);
|
||
|
|
|
||
|
|
chart.render();
|
||
|
|
|
||
|
|
|
||
|
|
// chart 6
|
||
|
|
|
||
|
|
var optionsProgress1 = {
|
||
|
|
chart: {
|
||
|
|
height: 70,
|
||
|
|
type: 'bar',
|
||
|
|
foreColor: 'rgba(255, 255, 255, 0.65)',
|
||
|
|
stacked: true,
|
||
|
|
sparkline: {
|
||
|
|
enabled: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
bar: {
|
||
|
|
horizontal: true,
|
||
|
|
barHeight: '15%',
|
||
|
|
colors: {
|
||
|
|
backgroundBarColors: ['rgba(255, 255, 255, 0.12)']
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
width: 0,
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: 'Direct',
|
||
|
|
data: [44]
|
||
|
|
}],
|
||
|
|
title: {
|
||
|
|
floating: true,
|
||
|
|
offsetX: -10,
|
||
|
|
offsetY: 5,
|
||
|
|
text: 'Direct'
|
||
|
|
},
|
||
|
|
subtitle: {
|
||
|
|
floating: true,
|
||
|
|
align: 'right',
|
||
|
|
offsetY: 0,
|
||
|
|
text: '44%',
|
||
|
|
style: {
|
||
|
|
fontSize: '20px'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
gradientToColors: ['#fff']
|
||
|
|
},
|
||
|
|
},
|
||
|
|
colors: ['#fff'],
|
||
|
|
tooltip: {
|
||
|
|
theme: 'dark',
|
||
|
|
x: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
enabled: true
|
||
|
|
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
categories: ['Direct'],
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
max: 100
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var chartProgress1 = new ApexCharts(document.querySelector('#direct'), optionsProgress1);
|
||
|
|
chartProgress1.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// chart 7
|
||
|
|
|
||
|
|
var optionsProgress2 = {
|
||
|
|
chart: {
|
||
|
|
height: 70,
|
||
|
|
type: 'bar',
|
||
|
|
foreColor: 'rgba(255, 255, 255, 0.65)',
|
||
|
|
stacked: true,
|
||
|
|
sparkline: {
|
||
|
|
enabled: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
bar: {
|
||
|
|
horizontal: true,
|
||
|
|
barHeight: '15%',
|
||
|
|
colors: {
|
||
|
|
backgroundBarColors: ['rgba(255, 255, 255, 0.12)']
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
width: 0,
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: 'Organic Search',
|
||
|
|
data: [80]
|
||
|
|
}],
|
||
|
|
title: {
|
||
|
|
floating: true,
|
||
|
|
offsetX: -10,
|
||
|
|
offsetY: 5,
|
||
|
|
text: 'Organic Search'
|
||
|
|
},
|
||
|
|
subtitle: {
|
||
|
|
floating: true,
|
||
|
|
align: 'right',
|
||
|
|
offsetY: 0,
|
||
|
|
text: '80%',
|
||
|
|
style: {
|
||
|
|
fontSize: '20px'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
gradientToColors: ['#fff']
|
||
|
|
},
|
||
|
|
},
|
||
|
|
colors: ['#fff'],
|
||
|
|
tooltip: {
|
||
|
|
theme: 'dark',
|
||
|
|
x: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
enabled: true
|
||
|
|
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
categories: ['Organic Search'],
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
max: 100
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
var chartProgress2 = new ApexCharts(document.querySelector('#organic-search'), optionsProgress2);
|
||
|
|
chartProgress2.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// chart 8
|
||
|
|
|
||
|
|
var optionsProgress3 = {
|
||
|
|
chart: {
|
||
|
|
height: 70,
|
||
|
|
type: 'bar',
|
||
|
|
foreColor: 'rgba(255, 255, 255, 0.65)',
|
||
|
|
stacked: true,
|
||
|
|
sparkline: {
|
||
|
|
enabled: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
bar: {
|
||
|
|
horizontal: true,
|
||
|
|
barHeight: '15%',
|
||
|
|
colors: {
|
||
|
|
backgroundBarColors: ['rgba(255, 255, 255, 0.12)']
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
width: 0,
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: 'Referral',
|
||
|
|
data: [74]
|
||
|
|
}],
|
||
|
|
title: {
|
||
|
|
floating: true,
|
||
|
|
offsetX: -10,
|
||
|
|
offsetY: 5,
|
||
|
|
text: 'Referral'
|
||
|
|
},
|
||
|
|
subtitle: {
|
||
|
|
floating: true,
|
||
|
|
align: 'right',
|
||
|
|
offsetY: 0,
|
||
|
|
text: '74%',
|
||
|
|
style: {
|
||
|
|
fontSize: '20px'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
gradientToColors: ['#fff']
|
||
|
|
},
|
||
|
|
},
|
||
|
|
colors: ['#fff'],
|
||
|
|
tooltip: {
|
||
|
|
theme: 'dark',
|
||
|
|
x: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
enabled: true
|
||
|
|
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
categories: ['Referral'],
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
max: 100
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
var chartProgress3 = new ApexCharts(document.querySelector('#referral'), optionsProgress3);
|
||
|
|
chartProgress3.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// chart 9
|
||
|
|
|
||
|
|
var optionsProgress4 = {
|
||
|
|
chart: {
|
||
|
|
height: 70,
|
||
|
|
type: 'bar',
|
||
|
|
foreColor: 'rgba(255, 255, 255, 0.65)',
|
||
|
|
stacked: true,
|
||
|
|
sparkline: {
|
||
|
|
enabled: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
bar: {
|
||
|
|
horizontal: true,
|
||
|
|
barHeight: '15%',
|
||
|
|
colors: {
|
||
|
|
backgroundBarColors: ['rgba(255, 255, 255, 0.12)']
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
width: 0,
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: 'Social',
|
||
|
|
data: [63]
|
||
|
|
}],
|
||
|
|
title: {
|
||
|
|
floating: true,
|
||
|
|
offsetX: -10,
|
||
|
|
offsetY: 5,
|
||
|
|
text: 'Social'
|
||
|
|
},
|
||
|
|
subtitle: {
|
||
|
|
floating: true,
|
||
|
|
align: 'right',
|
||
|
|
offsetY: 0,
|
||
|
|
text: '63%',
|
||
|
|
style: {
|
||
|
|
fontSize: '20px'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
gradientToColors: ['#fff']
|
||
|
|
},
|
||
|
|
},
|
||
|
|
colors: ['#fff'],
|
||
|
|
tooltip: {
|
||
|
|
theme: 'dark',
|
||
|
|
x: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
enabled: true
|
||
|
|
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
categories: ['Social'],
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
max: 100
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
var chartProgress4 = new ApexCharts(document.querySelector('#social'), optionsProgress4);
|
||
|
|
chartProgress4.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// chart 10
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
chart: {
|
||
|
|
height: 270,
|
||
|
|
type: 'radialBar',
|
||
|
|
toolbar: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
radialBar: {
|
||
|
|
//startAngle: -135,
|
||
|
|
//endAngle: 225,
|
||
|
|
hollow: {
|
||
|
|
margin: 0,
|
||
|
|
size: '85%',
|
||
|
|
background: 'transparent',
|
||
|
|
image: undefined,
|
||
|
|
imageOffsetX: 0,
|
||
|
|
imageOffsetY: 0,
|
||
|
|
position: 'front',
|
||
|
|
dropShadow: {
|
||
|
|
enabled: false,
|
||
|
|
top: 3,
|
||
|
|
left: 0,
|
||
|
|
blur: 4,
|
||
|
|
color: 'rgba(255, 255, 255, 0.12)',
|
||
|
|
opacity: 0.65
|
||
|
|
}
|
||
|
|
},
|
||
|
|
track: {
|
||
|
|
background: 'rgba(255, 255, 255, 0.12)',
|
||
|
|
strokeWidth: '67%',
|
||
|
|
margin: 0, // margin is in pixels
|
||
|
|
dropShadow: {
|
||
|
|
enabled: false,
|
||
|
|
top: -3,
|
||
|
|
left: 0,
|
||
|
|
blur: 4,
|
||
|
|
color: 'rgba(255, 255, 255, 0.12)',
|
||
|
|
opacity: 0.65
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
dataLabels: {
|
||
|
|
showOn: 'always',
|
||
|
|
name: {
|
||
|
|
offsetY: -5,
|
||
|
|
show: false,
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: '14px'
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
formatter: function (val) {
|
||
|
|
return val + "%";
|
||
|
|
},
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: '35px',
|
||
|
|
show: true,
|
||
|
|
offsetY: 10,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
shade: 'light',
|
||
|
|
type: 'horizontal',
|
||
|
|
shadeIntensity: 0.5,
|
||
|
|
gradientToColors: ['#fff'],
|
||
|
|
inverseColors: false,
|
||
|
|
opacityFrom: 1,
|
||
|
|
opacityTo: 1,
|
||
|
|
stops: [0, 100]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
colors: ["#fff"],
|
||
|
|
series: [64],
|
||
|
|
stroke: {
|
||
|
|
lineCap: 'round',
|
||
|
|
//dashArray: 4
|
||
|
|
},
|
||
|
|
labels: ['Newsletter Open Rate'],
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var chart = new ApexCharts(
|
||
|
|
document.querySelector("#newsletter-open-rate"),
|
||
|
|
options
|
||
|
|
);
|
||
|
|
|
||
|
|
chart.render();
|
||
|
|
|
||
|
|
|
||
|
|
// chart 11
|
||
|
|
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
chart: {
|
||
|
|
height: 270,
|
||
|
|
type: 'radialBar',
|
||
|
|
toolbar: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
radialBar: {
|
||
|
|
//startAngle: -135,
|
||
|
|
// endAngle: 225,
|
||
|
|
hollow: {
|
||
|
|
margin: 0,
|
||
|
|
size: '85%',
|
||
|
|
background: 'transparent',
|
||
|
|
image: undefined,
|
||
|
|
imageOffsetX: 0,
|
||
|
|
imageOffsetY: 0,
|
||
|
|
position: 'front',
|
||
|
|
dropShadow: {
|
||
|
|
enabled: false,
|
||
|
|
top: 3,
|
||
|
|
left: 0,
|
||
|
|
blur: 4,
|
||
|
|
color: 'rgba(255, 255, 255, 0.12)',
|
||
|
|
opacity: 0.65
|
||
|
|
}
|
||
|
|
},
|
||
|
|
track: {
|
||
|
|
background: 'rgba(255, 255, 255, 0.12)',
|
||
|
|
strokeWidth: '67%',
|
||
|
|
margin: 0, // margin is in pixels
|
||
|
|
dropShadow: {
|
||
|
|
enabled: false,
|
||
|
|
top: -3,
|
||
|
|
left: 0,
|
||
|
|
blur: 4,
|
||
|
|
color: 'rgba(255, 255, 255, 0.12)',
|
||
|
|
opacity: 0.65
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
dataLabels: {
|
||
|
|
showOn: 'always',
|
||
|
|
name: {
|
||
|
|
offsetY: -5,
|
||
|
|
show: false,
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: '14px'
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
formatter: function (val) {
|
||
|
|
return val + "%";
|
||
|
|
},
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: '35px',
|
||
|
|
show: true,
|
||
|
|
offsetY: 10,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
gradient: {
|
||
|
|
shade: 'light',
|
||
|
|
type: 'horizontal',
|
||
|
|
shadeIntensity: 0.5,
|
||
|
|
gradientToColors: ['#fff'],
|
||
|
|
inverseColors: false,
|
||
|
|
opacityFrom: 1,
|
||
|
|
opacityTo: 1,
|
||
|
|
stops: [0, 100]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
colors: ["#fff"],
|
||
|
|
series: [68],
|
||
|
|
stroke: {
|
||
|
|
lineCap: 'round',
|
||
|
|
//dashArray: 4
|
||
|
|
},
|
||
|
|
labels: ['Click Through Rate'],
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var chart = new ApexCharts(
|
||
|
|
document.querySelector("#click-through-rate"),
|
||
|
|
options
|
||
|
|
);
|
||
|
|
|
||
|
|
chart.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|