528 lines
12 KiB
JavaScript
528 lines
12 KiB
JavaScript
/* Project Analysis Chart */
|
|
var element = document.getElementById("projectAnalysis");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var options = {
|
|
series: [{
|
|
name: 'Projects',
|
|
type: 'column',
|
|
data: [1.8, 2.5, 2.5, 1.5, 2.5, 2.8, 3.8]
|
|
}, {
|
|
name: 'Tasks',
|
|
type: 'column',
|
|
data: [1.1, 2.2, 3.1, 4, 4.1, 4.9, 6.5]
|
|
}, {
|
|
name: 'Revenue',
|
|
type: 'line',
|
|
data: [20, 29, 37, 35, 44, 43, 50],
|
|
},
|
|
],
|
|
chart: {
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
height: 300,
|
|
type: 'line',
|
|
stacked: false,
|
|
fontFamily: 'Poppins, Arial, sans-serif',
|
|
},
|
|
grid: {
|
|
borderColor: '#f5f4f4',
|
|
strokeDashArray: 3
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
title: {
|
|
text: undefined,
|
|
},
|
|
xaxis: {
|
|
categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
|
},
|
|
yaxis: [
|
|
{
|
|
show: true,
|
|
axisTicks: {
|
|
show: true,
|
|
},
|
|
axisBorder: {
|
|
show: false,
|
|
color: '#4eb6d0'
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: '#4eb6d0',
|
|
}
|
|
},
|
|
title: {
|
|
text: undefined,
|
|
},
|
|
tooltip: {
|
|
enabled: true
|
|
}
|
|
},
|
|
{
|
|
seriesName: 'Projects',
|
|
opposite: true,
|
|
axisTicks: {
|
|
show: true,
|
|
},
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: '#00E396',
|
|
}
|
|
},
|
|
title: {
|
|
text: undefined,
|
|
},
|
|
},
|
|
{
|
|
seriesName: 'Revenue',
|
|
opposite: true,
|
|
axisTicks: {
|
|
show: true,
|
|
},
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
},
|
|
title: {
|
|
text: undefined,
|
|
}
|
|
},
|
|
],
|
|
tooltip: {
|
|
enabled: true,
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: 'top',
|
|
offsetX: 40,
|
|
fontSize: '13px',
|
|
fontWeight: 'normal',
|
|
labels: {
|
|
colors: '#acb1b1',
|
|
},
|
|
markers: {
|
|
width: 10,
|
|
height: 10,
|
|
},
|
|
},
|
|
stroke: {
|
|
width: [0, 0, 1.5],
|
|
curve: 'straight',
|
|
dashArray: [0, 0, 0],
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: "35%",
|
|
borderRadius: 3
|
|
}
|
|
},
|
|
colors: ["rgb(132, 90, 223)", "#ededed", "#23b7e5"]
|
|
};
|
|
var chart1 = new ApexCharts(document.querySelector("#projectAnalysis"), options);
|
|
chart1.render();
|
|
}
|
|
|
|
function projectAnalysis() {
|
|
chart1.updateOptions({
|
|
colors: ["rgb(" + myVarVal + ")", "#ededed", "#23b7e5"],
|
|
})
|
|
}
|
|
/* Project Analysis Chart */
|
|
|
|
/* for user1 */
|
|
var element = document.getElementById("user1");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var spark1 = {
|
|
chart: {
|
|
type: 'line',
|
|
height: 20,
|
|
width: 80,
|
|
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: 'smooth',
|
|
lineCap: 'butt',
|
|
colors: undefined,
|
|
width: 1.5,
|
|
dashArray: 0,
|
|
},
|
|
fill: {
|
|
gradient: {
|
|
enabled: false
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Value',
|
|
data: [54, 38, 56, 24, 65]
|
|
}],
|
|
yaxis: {
|
|
min: 0,
|
|
show: false
|
|
},
|
|
xaxis: {
|
|
show: false,
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
},
|
|
colors: ['#09ad95'],
|
|
|
|
}
|
|
var spark1 = new ApexCharts(document.querySelector("#user1"), spark1);
|
|
spark1.render();
|
|
}
|
|
/* for user1 */
|
|
|
|
/* for user2 */
|
|
var element = document.getElementById("user2");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var spark2 = {
|
|
chart: {
|
|
type: 'line',
|
|
height: 20,
|
|
width: 80,
|
|
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: 'smooth',
|
|
lineCap: 'butt',
|
|
colors: undefined,
|
|
width: 1.5,
|
|
dashArray: 0,
|
|
},
|
|
fill: {
|
|
gradient: {
|
|
enabled: false
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Value',
|
|
data: [24, 54, 15, 42, 16]
|
|
}],
|
|
yaxis: {
|
|
min: 0,
|
|
show: false
|
|
},
|
|
xaxis: {
|
|
show: false,
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
},
|
|
colors: ['#fb6b27'],
|
|
|
|
}
|
|
var spark2 = new ApexCharts(document.querySelector("#user2"), spark2);
|
|
spark2.render();
|
|
}
|
|
/* for user2 */
|
|
|
|
/* for user3 */
|
|
var element = document.getElementById("user3");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var spark3 = {
|
|
chart: {
|
|
type: 'line',
|
|
height: 20,
|
|
width: 80,
|
|
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: 'smooth',
|
|
lineCap: 'butt',
|
|
colors: undefined,
|
|
width: 1.5,
|
|
dashArray: 0,
|
|
},
|
|
fill: {
|
|
gradient: {
|
|
enabled: false
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Value',
|
|
data: [15, 42, 16, 44, 24 ]
|
|
}],
|
|
yaxis: {
|
|
min: 0,
|
|
show: false
|
|
},
|
|
xaxis: {
|
|
show: false,
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
},
|
|
colors: ['#1170e4'],
|
|
|
|
}
|
|
var spark3 = new ApexCharts(document.querySelector("#user3"), spark3);
|
|
spark3.render();
|
|
}
|
|
/* for user3 */
|
|
|
|
/* for user4 */
|
|
var element = document.getElementById("user4");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var spark4 = {
|
|
chart: {
|
|
type: 'line',
|
|
height: 20,
|
|
width: 80,
|
|
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: 'smooth',
|
|
lineCap: 'butt',
|
|
colors: undefined,
|
|
width: 1.5,
|
|
dashArray: 0,
|
|
},
|
|
fill: {
|
|
gradient: {
|
|
enabled: false
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Value',
|
|
data: [54, 38, 56, 24, 65]
|
|
}],
|
|
yaxis: {
|
|
min: 0,
|
|
show: false
|
|
},
|
|
xaxis: {
|
|
show: false,
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
},
|
|
colors: ['#e82646'],
|
|
|
|
}
|
|
var spark4 = new ApexCharts(document.querySelector("#user4"), spark4);
|
|
spark4.render();
|
|
}
|
|
/* for user4 */
|
|
|
|
/* for user5 */
|
|
var element = document.getElementById("user5");
|
|
if (element !== null) {
|
|
element.innerHTML = "";
|
|
var spark5 = {
|
|
chart: {
|
|
type: 'line',
|
|
height: 20,
|
|
width: 80,
|
|
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: 'smooth',
|
|
lineCap: 'butt',
|
|
colors: undefined,
|
|
width: 1.5,
|
|
dashArray: 0,
|
|
},
|
|
fill: {
|
|
gradient: {
|
|
enabled: false
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Value',
|
|
data: [15, 42, 16, 44, 24 ]
|
|
}],
|
|
yaxis: {
|
|
min: 0,
|
|
show: false
|
|
},
|
|
xaxis: {
|
|
show: false,
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
},
|
|
colors: ['#f7b731'],
|
|
|
|
}
|
|
var spark5 = new ApexCharts(document.querySelector("#user5"), spark5);
|
|
spark5.render();
|
|
}
|
|
/* for user5 */ |