124 lines
2.7 KiB
JavaScript
124 lines
2.7 KiB
JavaScript
// **------radar chart 1**
|
|
|
|
const radar1options = {
|
|
series: [{
|
|
name: 'Series 1',
|
|
data: [80, 50, 30, 40, 100, 20],
|
|
}],
|
|
chart: {
|
|
fontFamily: 'Montserrat, system-ui',
|
|
height: 350,
|
|
type: 'radar',
|
|
},
|
|
|
|
colors: [getLocalStorageItem('color-primary','#0F626A')],
|
|
xaxis: {
|
|
categories: ['January', 'February', 'March', 'April', 'May', 'June']
|
|
}
|
|
};
|
|
|
|
const radar1chart = new ApexCharts(document.querySelector("#radar1"), radar1options);
|
|
radar1chart.render();
|
|
|
|
// **------radar chart 2**
|
|
|
|
const radar2options = {
|
|
series: [{
|
|
name: 'Series 1',
|
|
data: [80, 50, 30, 40, 100, 20],
|
|
}, {
|
|
name: 'Series 2',
|
|
data: [20, 30, 40, 80, 20, 80],
|
|
}, {
|
|
name: 'Series 3',
|
|
data: [44, 76, 78, 13, 43, 10],
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'radar',
|
|
dropShadow: {
|
|
enabled: true,
|
|
blur: 1,
|
|
left: 1,
|
|
top: 1
|
|
}
|
|
},
|
|
|
|
stroke: {
|
|
width: 2
|
|
},
|
|
fill: {
|
|
opacity: 0.1
|
|
},
|
|
markers: {
|
|
size: 0
|
|
},
|
|
xaxis: {
|
|
categories: ['2011', '2012', '2013', '2014', '2015', '2016']
|
|
},
|
|
colors: [getLocalStorageItem('color-secondary','#626262'),'#0AB964','#E14E5A',],
|
|
};
|
|
|
|
const radar2chart = new ApexCharts(document.querySelector("#radar2"), radar2options);
|
|
radar2chart.render();
|
|
|
|
// **------radar chart 3**
|
|
|
|
const radar3options = {
|
|
series: [{
|
|
name: 'Series 1',
|
|
data: [20, 100, 40, 30, 50, 80, 33],
|
|
}],
|
|
chart: {
|
|
fontFamily: 'Montserrat, system-ui',
|
|
height: 350,
|
|
type: 'radar',
|
|
},
|
|
dataLabels: {
|
|
enabled: true
|
|
},
|
|
plotOptions: {
|
|
radar: {
|
|
size: 140,
|
|
polygons: {
|
|
strokeColors: '#e9e9e9',
|
|
|
|
}
|
|
}
|
|
},
|
|
|
|
colors: ['#F9D249'],
|
|
markers: {
|
|
size: 4,
|
|
colors: ['#fff'],
|
|
strokeColor: '#eaea4f',
|
|
strokeWidth: 2,
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function(val) {
|
|
return val
|
|
}
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
|
|
},
|
|
yaxis: {
|
|
tickAmount: 7,
|
|
labels: {
|
|
formatter: function(val, i) {
|
|
if (i % 2 === 0) {
|
|
return val
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const radar3chart = new ApexCharts(document.querySelector("#radar3"), radar3options);
|
|
radar3chart.render();
|
|
|