163 lines
3.1 KiB
JavaScript
163 lines
3.1 KiB
JavaScript
/**
|
||
* Theme: Attex - Responsive Tailwind CSS 3 Admin Dashboard
|
||
* Author: Coderthemes
|
||
* Module/App: Apex Radar Charts
|
||
*/
|
||
|
||
//
|
||
// BASIC RADAR CHART
|
||
//
|
||
var colors = ["#3e60d5"];
|
||
var dataColors = document.querySelector("#basic-radar").dataset.colors;
|
||
if (dataColors) {
|
||
colors = dataColors.split(",");
|
||
}
|
||
var options = {
|
||
chart: {
|
||
height: 350,
|
||
type: 'radar',
|
||
},
|
||
series: [{
|
||
name: 'Series 1',
|
||
data: [80, 50, 30, 40, 100, 20],
|
||
}],
|
||
colors: colors,
|
||
labels: ['January', 'February', 'March', 'April', 'May', 'June']
|
||
}
|
||
|
||
var chart = new ApexCharts(
|
||
document.querySelector("#basic-radar"),
|
||
options
|
||
);
|
||
|
||
chart.render();
|
||
|
||
|
||
//
|
||
// RADAR WITH POLYGON-FILL
|
||
//
|
||
var colors = ["#FF4560"];
|
||
var dataColors = document.querySelector("#radar-polygon").dataset.colors;
|
||
if (dataColors) {
|
||
colors = dataColors.split(",");
|
||
}
|
||
var options = {
|
||
chart: {
|
||
height: 350,
|
||
type: 'radar',
|
||
},
|
||
series: [{
|
||
name: 'Series 1',
|
||
data: [20, 100, 40, 30, 50, 80, 33],
|
||
}],
|
||
labels: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
||
plotOptions: {
|
||
radar: {
|
||
size: 140,
|
||
}
|
||
},
|
||
colors: colors,
|
||
markers: {
|
||
size: 4,
|
||
colors: ['#fff'],
|
||
strokeColor: colors,
|
||
strokeWidth: 2,
|
||
},
|
||
tooltip: {
|
||
y: {
|
||
formatter: function(val) {
|
||
return val
|
||
}
|
||
}
|
||
},
|
||
yaxis: {
|
||
tickAmount: 7,
|
||
labels: {
|
||
formatter: function(val, i) {
|
||
if(i % 2 === 0) {
|
||
return val
|
||
} else {
|
||
return ''
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
var chart = new ApexCharts(
|
||
document.querySelector("#radar-polygon"),
|
||
options
|
||
);
|
||
|
||
chart.render();
|
||
|
||
//
|
||
// RADAR – MULTIPLE SERIES
|
||
//
|
||
var colors = ["#3e60d5","#02a8b5","#fd7e14"];
|
||
var dataColors = document.querySelector("#radar-multiple-series").dataset.colors;
|
||
if (dataColors) {
|
||
colors = dataColors.split(",");
|
||
}
|
||
var options = {
|
||
chart: {
|
||
height: 350,
|
||
type: 'radar'
|
||
},
|
||
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],
|
||
}],
|
||
stroke: {
|
||
width: 0
|
||
},
|
||
fill: {
|
||
opacity: 0.4
|
||
},
|
||
markers: {
|
||
size: 0
|
||
},
|
||
legend: {
|
||
offsetY: -10,
|
||
},
|
||
colors: colors,
|
||
labels: ['2011', '2012', '2013', '2014', '2015', '2016']
|
||
}
|
||
|
||
var chart = new ApexCharts(
|
||
document.querySelector("#radar-multiple-series"),
|
||
options
|
||
);
|
||
|
||
chart.render();
|
||
|
||
function update() {
|
||
|
||
function randomSeries() {
|
||
var arr = []
|
||
for(var i = 0; i < 6; i++) {
|
||
arr.push(Math.floor(Math.random() * 100))
|
||
}
|
||
|
||
return arr
|
||
}
|
||
|
||
|
||
chart.updateSeries([{
|
||
name: 'Series 1',
|
||
data: randomSeries(),
|
||
}, {
|
||
name: 'Series 2',
|
||
data: randomSeries(),
|
||
}, {
|
||
name: 'Series 3',
|
||
data: randomSeries(),
|
||
}])
|
||
}
|