File: /var/www/admin.javaapp.co.uk/public/plugins/apex/custom-apexcharts.js
if (Cookies.getCookie('dark_mode') != "") {
Apex.grid = {
borderColor: '#191e3a'
}
Apex.track = {
background: '#0e1726',
}
Apex.tooltip = {
theme: 'dark'
}
}
// Simple Line
if (Cookies.getCookie('dark_mode') != "") {
var sline = {
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
},
toolbar: {
show: false,
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: [{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#3b3f5c', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
}
}
} else {
var sline = {
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
},
toolbar: {
show: false,
}
},
// colors: ['#4361ee'],
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: [{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f1f2f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
}
}
}
var chart = new ApexCharts(
document.querySelector("#s-line"),
sline
);
chart.render();
// Simple Line Area
if (Cookies.getCookie('dark_mode') != "") {
var sLineArea = {
chart: {
height: 350,
type: 'area',
toolbar: {
show: false,
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
series: [{
name: 'series1',
data: [31, 40, 28, 51, 42, 109, 100]
}, {
name: 'series2',
data: [11, 32, 45, 32, 34, 52, 41]
}],
xaxis: {
type: 'datetime',
categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00", "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00", "2018-09-19T06:30:00"],
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
}
}
} else {
var sLineArea = {
chart: {
height: 350,
type: 'area',
toolbar: {
show: false,
}
},
// colors: ['#4361ee', '#888ea8'],
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
series: [{
name: 'series1',
data: [31, 40, 28, 51, 42, 109, 100]
}, {
name: 'series2',
data: [11, 32, 45, 32, 34, 52, 41]
}],
xaxis: {
type: 'datetime',
categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00", "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00", "2018-09-19T06:30:00"],
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
}
}
}
var chart = new ApexCharts(
document.querySelector("#s-line-area"),
sLineArea
);
chart.render();
// Simple Column
if (Cookies.getCookie('dark_mode') != "") {
var sCol = {
chart: {
height: 350,
type: 'bar',
toolbar: {
show: false,
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
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]
}],
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
},
yaxis: {
title: {
text: '$ (thousands)'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
}
}
} else {
var sCol = {
chart: {
height: 350,
type: 'bar',
toolbar: {
show: false,
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
// colors: ['#888ea8', '#4361ee'],
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
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]
}],
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
},
yaxis: {
title: {
text: '$ (thousands)'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#s-col"),
sCol
);
chart.render();
// Simple Column Stacked
if (Cookies.getCookie('dark_mode') != "") {
var sColStacked = {
chart: {
height: 350,
type: 'bar',
stacked: true,
toolbar: {
show: false,
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
plotOptions: {
bar: {
horizontal: false,
},
},
series: [{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43]
},{
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27]
},{
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14]
},{
name: 'PRODUCT D',
data: [21, 7, 25, 13, 22, 8]
}],
xaxis: {
type: 'datetime',
categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT', '01/05/2011 GMT', '01/06/2011 GMT'],
},
legend: {
position: 'right',
offsetY: 40
},
fill: {
opacity: 1
},
}
} else {
var sColStacked = {
chart: {
height: 350,
type: 'bar',
stacked: true,
toolbar: {
show: false,
}
},
// colors: ['#4361ee', '#888ea8', '#e3e4eb', '#d3d3d3'],
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
plotOptions: {
bar: {
horizontal: false,
},
},
series: [{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43]
},{
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27]
},{
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14]
},{
name: 'PRODUCT D',
data: [21, 7, 25, 13, 22, 8]
}],
xaxis: {
type: 'datetime',
categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT', '01/05/2011 GMT', '01/06/2011 GMT'],
},
legend: {
position: 'right',
offsetY: 40
},
fill: {
opacity: 1
},
}
}
var chart = new ApexCharts(
document.querySelector("#s-col-stacked"),
sColStacked
);
chart.render();
// Simple Bar
if (Cookies.getCookie('dark_mode') != "") {
var sBar = {
chart: {
height: 350,
type: 'bar',
toolbar: {
show: false,
}
},
plotOptions: {
bar: {
horizontal: true,
}
},
dataLabels: {
enabled: false
},
series: [{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
}],
xaxis: {
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
}
}
} else {
var sBar = {
chart: {
height: 350,
type: 'bar',
toolbar: {
show: false,
}
},
// colors: ['#4361ee'],
plotOptions: {
bar: {
horizontal: true,
}
},
dataLabels: {
enabled: false
},
series: [{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
}],
xaxis: {
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
}
}
}
var chart = new ApexCharts(
document.querySelector("#s-bar"),
sBar
);
chart.render();
// Mixed Chart
if (Cookies.getCookie('dark_mode') != "") {
var options = {
chart: {
height: 350,
type: 'line',
toolbar: {
show: false,
}
},
series: [{
name: 'Website Blog',
type: 'column',
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
}, {
name: 'Social Media',
type: 'line',
data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
}],
stroke: {
width: [0, 4]
},
title: {
text: 'Traffic Sources'
},
labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
xaxis: {
type: 'datetime'
},
yaxis: [{
title: {
text: 'Website Blog',
},
}, {
opposite: true,
title: {
text: 'Social Media'
}
}]
}
} else {
var options = {
chart: {
height: 350,
type: 'line',
toolbar: {
show: false,
}
},
// colors: ['#4361ee', '#888ea8'],
series: [{
name: 'Website Blog',
type: 'column',
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
}, {
name: 'Social Media',
type: 'line',
data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
}],
stroke: {
width: [0, 4]
},
title: {
text: 'Traffic Sources'
},
labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
xaxis: {
type: 'datetime'
},
yaxis: [{
title: {
text: 'Website Blog',
},
}, {
opposite: true,
title: {
text: 'Social Media'
}
}]
}
}
var chart = new ApexCharts(
document.querySelector("#mixed-chart"),
options
);
chart.render();
// Donut Chart
if (Cookies.getCookie('dark_mode') != "") {
var donutChart = {
chart: {
height: 350,
type: 'donut',
toolbar: {
show: false,
}
},
stroke: {
colors: '#0e1726'
},
series: [44, 55, 41, 17],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
}
} else {
var donutChart = {
chart: {
height: 350,
type: 'donut',
toolbar: {
show: false,
}
},
// colors: ['#4361ee', '#888ea8', '#e3e4eb', '#d3d3d3'],
series: [44, 55, 41, 17],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
}
}
var donut = new ApexCharts(
document.querySelector("#donut-chart"),
donutChart
);
donut.render();
// Radial Chart
if (Cookies.getCookie('dark_mode') != "") {
var radialChart = {
chart: {
height: 350,
type: 'radialBar',
toolbar: {
show: false,
}
},
plotOptions: {
radialBar: {
dataLabels: {
name: {
fontSize: '22px',
},
value: {
fontSize: '16px',
},
total: {
show: true,
label: 'Total',
formatter: function (w) {
// By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
return 249
}
}
}
}
},
series: [44, 55, 67, 83],
labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
}
} else {
var radialChart = {
chart: {
height: 350,
type: 'radialBar',
toolbar: {
show: false,
}
},
// colors: ['#4361ee', '#888ea8', '#e3e4eb', '#d3d3d3'],
plotOptions: {
radialBar: {
dataLabels: {
name: {
fontSize: '22px',
},
value: {
fontSize: '16px',
},
total: {
show: true,
label: 'Total',
formatter: function (w) {
// By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
return 249
}
}
}
}
},
series: [44, 55, 67, 83],
labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
}
}
var chart = new ApexCharts(
document.querySelector("#radial-chart"),
radialChart
);
chart.render();