| 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/11584/cwd/html/ppaobm/vendor/bower-asset/chartjs/samples/charts/area/ |
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>area > datasets | 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>
<script src="analyser.js"></script>
</head>
<body>
<div class="content">
<div class="wrapper">
<canvas id="chart-0"></canvas>
</div>
<div class="toolbar">
<button onclick="togglePropagate(this)">Propagate</button>
<button onclick="toggleSmooth(this)">Smooth</button>
<button onclick="randomize(this)">Randomize</button>
</div>
<div id="chart-analyser" class="analyser"></div>
</div>
<script>
var presets = window.chartColors;
var utils = Samples.utils;
var inputs = {
min: 20,
max: 80,
count: 8,
decimals: 2,
continuity: 1
};
function generateData() {
return utils.numbers(inputs);
}
function generateLabels() {
return utils.months({count: inputs.count});
}
utils.srand(42);
var data = {
labels: generateLabels(),
datasets: [{
backgroundColor: utils.transparentize(presets.red),
borderColor: presets.red,
data: generateData(),
hidden: true,
label: 'D0'
}, {
backgroundColor: utils.transparentize(presets.orange),
borderColor: presets.orange,
data: generateData(),
label: 'D1',
fill: '-1'
}, {
backgroundColor: utils.transparentize(presets.yellow),
borderColor: presets.yellow,
data: generateData(),
hidden: true,
label: 'D2',
fill: 1
}, {
backgroundColor: utils.transparentize(presets.green),
borderColor: presets.green,
data: generateData(),
label: 'D3',
fill: '-1'
}, {
backgroundColor: utils.transparentize(presets.blue),
borderColor: presets.blue,
data: generateData(),
label: 'D4',
fill: '-1'
}, {
backgroundColor: utils.transparentize(presets.grey),
borderColor: presets.grey,
data: generateData(),
label: 'D5',
fill: '+2'
}, {
backgroundColor: utils.transparentize(presets.purple),
borderColor: presets.purple,
data: generateData(),
label: 'D6',
fill: false
}, {
backgroundColor: utils.transparentize(presets.red),
borderColor: presets.red,
data: generateData(),
label: 'D7',
fill: 8
}, {
backgroundColor: utils.transparentize(presets.orange),
borderColor: presets.orange,
data: generateData(),
hidden: true,
label: 'D8',
fill: 'end'
}]
};
var options = {
maintainAspectRatio: false,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
scales: {
yAxes: [{
stacked: true
}]
},
plugins: {
filler: {
propagate: false
},
'samples-filler-analyser': {
target: 'chart-analyser'
}
}
};
var chart = new Chart('chart-0', {
type: 'line',
data: data,
options: options
});
// eslint-disable-next-line no-unused-vars
function togglePropagate(btn) {
var value = btn.classList.toggle('btn-on');
chart.options.plugins.filler.propagate = value;
chart.update();
}
// eslint-disable-next-line no-unused-vars
function toggleSmooth(btn) {
var value = btn.classList.toggle('btn-on');
chart.options.elements.line.tension = value ? 0.4 : 0.000001;
chart.update();
}
// eslint-disable-next-line no-unused-vars
function randomize() {
chart.data.datasets.forEach(function(dataset) {
dataset.data = generateData();
});
chart.update();
}
</script>
</body>
</html>