| Server IP : 49.231.201.246 / Your IP : 216.73.216.149 Web Server : Apache/2.4.18 (Ubuntu) System : Linux 246 4.4.0-210-generic #242-Ubuntu SMP Fri Apr 16 09:57:56 UTC 2021 x86_64 User : root ( 0) PHP Version : 7.0.33-0ubuntu0.16.04.16 Disable Function : exec,passthru,shell_exec,system,proc_open,popen,pcntl_exec MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /proc/thread-self/root/var/www/html/ppaobm/vendor/bower-asset/chartjs/samples/scriptable/ |
Upload File : |
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scriptable > Radar | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
<div class="content">
<div class="wrapper"><canvas id="chart-0"></canvas></div>
<div class="toolbar">
<button onclick="randomize(this)">Randomize</button>
<button onclick="addDataset(this)">Add Dataset</button>
<button onclick="removeDataset(this)">Remove Dataset</button>
</div>
</div>
<script>
var DATA_COUNT = 7;
var utils = Samples.utils;
utils.srand(110);
function alternatePointStyles(ctx) {
var index = ctx.dataIndex;
return index % 2 === 0 ? 'circle' : 'rect';
}
function makeHalfAsOpaque(ctx) {
var c = ctx.dataset.backgroundColor;
return utils.transparentize(c);
}
function adjustRadiusBasedOnData(ctx) {
var v = ctx.dataset.data[ctx.dataIndex];
return v < 10 ? 5
: v < 25 ? 7
: v < 50 ? 9
: v < 75 ? 11
: 15;
}
function generateData() {
return utils.numbers({
count: DATA_COUNT,
min: 0,
max: 100
});
}
var data = {
labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
datasets: [{
data: generateData(),
backgroundColor: Chart.helpers.color('#4dc9f6').alpha(0.2).rgbString(),
borderColor: '#4dc9f6',
}]
};
var options = {
legend: false,
tooltips: true,
elements: {
point: {
hoverBackgroundColor: makeHalfAsOpaque,
radius: adjustRadiusBasedOnData,
pointStyle: alternatePointStyles,
hoverRadius: 15,
}
}
};
var chart = new Chart('chart-0', {
type: 'radar',
data: data,
options: options
});
// eslint-disable-next-line no-unused-vars
function addDataset() {
var newColor = utils.color(chart.data.datasets.length);
chart.data.datasets.push({
data: generateData(),
backgroundColor: Chart.helpers.color(newColor).alpha(0.2).rgbString(),
borderColor: newColor
});
chart.update();
}
// eslint-disable-next-line no-unused-vars
function randomize() {
chart.data.datasets.forEach(function(dataset) {
dataset.data = generateData();
});
chart.update();
}
// eslint-disable-next-line no-unused-vars
function removeDataset() {
chart.data.datasets.shift();
chart.update();
}
</script>
</body>
</html>