first commit
This commit is contained in:
9
WebRoot/node_modules/chart.js/samples/.eslintrc.yml
generated
vendored
Normal file
9
WebRoot/node_modules/chart.js/samples/.eslintrc.yml
generated
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
globals:
|
||||
$: true
|
||||
Chart: true
|
||||
Samples: true
|
||||
moment: true
|
||||
randomScalingFactor: true
|
||||
|
||||
rules:
|
||||
no-new: 0
|
||||
131
WebRoot/node_modules/chart.js/samples/advanced/data-labelling.html
generated
vendored
Normal file
131
WebRoot/node_modules/chart.js/samples/advanced/data-labelling.html
generated
vendored
Normal file
@ -0,0 +1,131 @@
|
||||
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Labelling Data Points</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width: 75%">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<script>
|
||||
var color = Chart.helpers.color;
|
||||
var barChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
type: 'bar',
|
||||
label: 'Dataset 1',
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
||||
borderColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
type: 'line',
|
||||
label: 'Dataset 2',
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
||||
borderColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
type: 'bar',
|
||||
label: 'Dataset 3',
|
||||
backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
|
||||
borderColor: window.chartColors.green,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
// Define a plugin to provide data labels
|
||||
Chart.plugins.register({
|
||||
afterDatasetsDraw: function(chart) {
|
||||
var ctx = chart.ctx;
|
||||
|
||||
chart.data.datasets.forEach(function(dataset, i) {
|
||||
var meta = chart.getDatasetMeta(i);
|
||||
if (!meta.hidden) {
|
||||
meta.data.forEach(function(element, index) {
|
||||
// Draw the text in black, with the specified font
|
||||
ctx.fillStyle = 'rgb(0, 0, 0)';
|
||||
|
||||
var fontSize = 16;
|
||||
var fontStyle = 'normal';
|
||||
var fontFamily = 'Helvetica Neue';
|
||||
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
|
||||
|
||||
// Just naively convert to string for now
|
||||
var dataString = dataset.data[index].toString();
|
||||
|
||||
// Make sure alignment settings are correct
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
|
||||
var padding = 5;
|
||||
var position = element.tooltipPosition();
|
||||
ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myBar = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: barChartData,
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Combo Bar Line Chart'
|
||||
},
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
barChartData.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
});
|
||||
window.myBar.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
95
WebRoot/node_modules/chart.js/samples/advanced/progress-bar.html
generated
vendored
Normal file
95
WebRoot/node_modules/chart.js/samples/advanced/progress-bar.html
generated
vendored
Normal file
@ -0,0 +1,95 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title> Animation Callbacks </title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width: 75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
<progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<script>
|
||||
var progress = document.getElementById('animationProgress');
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
fill: false,
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'My Second dataset ',
|
||||
fill: false,
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Animation Progress Bar'
|
||||
},
|
||||
animation: {
|
||||
duration: 2000,
|
||||
onProgress: function(animation) {
|
||||
progress.value = animation.currentStep / animation.numSteps;
|
||||
},
|
||||
onComplete: function() {
|
||||
window.setTimeout(function() {
|
||||
progress.value = 0;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
66
WebRoot/node_modules/chart.js/samples/charts/area/analyser.js
generated
vendored
Normal file
66
WebRoot/node_modules/chart.js/samples/charts/area/analyser.js
generated
vendored
Normal file
@ -0,0 +1,66 @@
|
||||
/* global Chart */
|
||||
|
||||
'use strict';
|
||||
|
||||
(function() {
|
||||
Chart.plugins.register({
|
||||
id: 'samples-filler-analyser',
|
||||
|
||||
beforeInit: function(chart, options) {
|
||||
this.element = document.getElementById(options.target);
|
||||
},
|
||||
|
||||
afterUpdate: function(chart) {
|
||||
var datasets = chart.data.datasets;
|
||||
var element = this.element;
|
||||
var stats = [];
|
||||
var meta, i, ilen, dataset;
|
||||
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (i = 0, ilen = datasets.length; i < ilen; ++i) {
|
||||
meta = chart.getDatasetMeta(i).$filler;
|
||||
if (meta) {
|
||||
dataset = datasets[i];
|
||||
stats.push({
|
||||
fill: dataset.fill,
|
||||
target: meta.fill,
|
||||
visible: meta.visible,
|
||||
index: i
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.element.innerHTML = '<table>' +
|
||||
'<tr>' +
|
||||
'<th>Dataset</th>' +
|
||||
'<th>Fill</th>' +
|
||||
'<th>Target (visibility)</th>' +
|
||||
'</tr>' +
|
||||
stats.map(function(stat) {
|
||||
var target = stat.target;
|
||||
var row =
|
||||
'<td><b>' + stat.index + '</b></td>' +
|
||||
'<td>' + JSON.stringify(stat.fill) + '</td>';
|
||||
|
||||
if (target === false) {
|
||||
target = 'none';
|
||||
} else if (isFinite(target)) {
|
||||
target = 'dataset ' + target;
|
||||
} else {
|
||||
target = 'boundary "' + target + '"';
|
||||
}
|
||||
|
||||
if (stat.visible) {
|
||||
row += '<td>' + target + '</td>';
|
||||
} else {
|
||||
row += '<td>(hidden)</td>';
|
||||
}
|
||||
|
||||
return '<tr>' + row + '</tr>';
|
||||
}).join('') + '</table>';
|
||||
}
|
||||
});
|
||||
}());
|
||||
121
WebRoot/node_modules/chart.js/samples/charts/area/line-boundaries.html
generated
vendored
Normal file
121
WebRoot/node_modules/chart.js/samples/charts/area/line-boundaries.html
generated
vendored
Normal file
@ -0,0 +1,121 @@
|
||||
<!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 > boundaries | Chart.js sample</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../style.css">
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<script src="analyser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="wrapper col-2"><canvas id="chart-0"></canvas></div>
|
||||
<div class="wrapper col-2"><canvas id="chart-1"></canvas></div>
|
||||
<div class="wrapper col-2"><canvas id="chart-2"></canvas></div>
|
||||
<div class="wrapper col-2"><canvas id="chart-3"></canvas></div>
|
||||
|
||||
<div class="toolbar">
|
||||
<button onclick="toggleSmooth(this)">Smooth</button>
|
||||
<button onclick="randomize(this)">Randomize</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var presets = window.chartColors;
|
||||
var utils = Samples.utils;
|
||||
var inputs = {
|
||||
min: -100,
|
||||
max: 100,
|
||||
count: 8,
|
||||
decimals: 2,
|
||||
continuity: 1
|
||||
};
|
||||
|
||||
function generateData(config) {
|
||||
return utils.numbers(Chart.helpers.merge(inputs, config || {}));
|
||||
}
|
||||
|
||||
function generateLabels(config) {
|
||||
return utils.months(Chart.helpers.merge({
|
||||
count: inputs.count,
|
||||
section: 3
|
||||
}, config || {}));
|
||||
}
|
||||
|
||||
var options = {
|
||||
maintainAspectRatio: false,
|
||||
spanGaps: false,
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.000001
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
filler: {
|
||||
propagate: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
autoSkip: false,
|
||||
maxRotation: 0
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
[false, 'origin', 'start', 'end'].forEach(function(boundary, index) {
|
||||
|
||||
// reset the random seed to generate the same data for all charts
|
||||
utils.srand(8);
|
||||
|
||||
new Chart('chart-' + index, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: generateLabels(),
|
||||
datasets: [{
|
||||
backgroundColor: utils.transparentize(presets.red),
|
||||
borderColor: presets.red,
|
||||
data: generateData(),
|
||||
label: 'Dataset',
|
||||
fill: boundary
|
||||
}]
|
||||
},
|
||||
options: Chart.helpers.merge(options, {
|
||||
title: {
|
||||
text: 'fill: ' + boundary,
|
||||
display: true
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function toggleSmooth(btn) {
|
||||
var value = btn.classList.toggle('btn-on');
|
||||
Chart.helpers.each(Chart.instances, function(chart) {
|
||||
chart.options.elements.line.tension = value ? 0.4 : 0.000001;
|
||||
chart.update();
|
||||
});
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function randomize() {
|
||||
var seed = utils.rand();
|
||||
Chart.helpers.each(Chart.instances, function(chart) {
|
||||
utils.srand(seed);
|
||||
|
||||
chart.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = generateData();
|
||||
});
|
||||
|
||||
chart.update();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
160
WebRoot/node_modules/chart.js/samples/charts/area/line-datasets.html
generated
vendored
Normal file
160
WebRoot/node_modules/chart.js/samples/charts/area/line-datasets.html
generated
vendored
Normal file
@ -0,0 +1,160 @@
|
||||
<!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.bundle.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>
|
||||
183
WebRoot/node_modules/chart.js/samples/charts/area/line-stacked.html
generated
vendored
Normal file
183
WebRoot/node_modules/chart.js/samples/charts/area/line-stacked.html
generated
vendored
Normal file
@ -0,0 +1,183 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<button id="addDataset">Add Dataset</button>
|
||||
<button id="removeDataset">Remove Dataset</button>
|
||||
<button id="addData">Add Data</button>
|
||||
<button id="removeData">Remove Data</button>
|
||||
<script>
|
||||
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
label: 'My Third dataset',
|
||||
borderColor: window.chartColors.green,
|
||||
backgroundColor: window.chartColors.green,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
label: 'My Third dataset',
|
||||
borderColor: window.chartColors.yellow,
|
||||
backgroundColor: window.chartColors.yellow,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Stacked Area'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
},
|
||||
hover: {
|
||||
mode: 'index'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
stacked: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
var colorNames = Object.keys(window.chartColors);
|
||||
document.getElementById('addDataset').addEventListener('click', function() {
|
||||
var colorName = colorNames[config.data.datasets.length % colorNames.length];
|
||||
var newColor = window.chartColors[colorName];
|
||||
var newDataset = {
|
||||
label: 'Dataset ' + config.data.datasets.length,
|
||||
borderColor: newColor,
|
||||
backgroundColor: newColor,
|
||||
data: [],
|
||||
};
|
||||
|
||||
for (var index = 0; index < config.data.labels.length; ++index) {
|
||||
newDataset.data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
config.data.datasets.push(newDataset);
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
document.getElementById('addData').addEventListener('click', function() {
|
||||
if (config.data.datasets.length > 0) {
|
||||
var month = MONTHS[config.data.labels.length % MONTHS.length];
|
||||
config.data.labels.push(month);
|
||||
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.push(randomScalingFactor());
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('removeDataset').addEventListener('click', function() {
|
||||
config.data.datasets.splice(0, 1);
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
document.getElementById('removeData').addEventListener('click', function() {
|
||||
config.data.labels.splice(-1, 1); // remove the label first
|
||||
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.pop();
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
139
WebRoot/node_modules/chart.js/samples/charts/area/radar.html
generated
vendored
Normal file
139
WebRoot/node_modules/chart.js/samples/charts/area/radar.html
generated
vendored
Normal file
@ -0,0 +1,139 @@
|
||||
<!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 > radar | Chart.js sample</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../style.css">
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<script src="analyser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="wrapper" style="max-width: 512px; margin: auto">
|
||||
<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: 8,
|
||||
max: 16,
|
||||
count: 8,
|
||||
decimals: 2,
|
||||
continuity: 1
|
||||
};
|
||||
|
||||
function generateData() {
|
||||
// radar chart doesn't support stacked values, let's do it manually
|
||||
var values = utils.numbers(inputs);
|
||||
inputs.from = values;
|
||||
return values;
|
||||
}
|
||||
|
||||
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(),
|
||||
label: 'D0'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.orange),
|
||||
borderColor: presets.orange,
|
||||
data: generateData(),
|
||||
hidden: true,
|
||||
label: 'D1',
|
||||
fill: '-1'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.yellow),
|
||||
borderColor: presets.yellow,
|
||||
data: generateData(),
|
||||
label: 'D2',
|
||||
fill: 1
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.green),
|
||||
borderColor: presets.green,
|
||||
data: generateData(),
|
||||
label: 'D3',
|
||||
fill: false
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.blue),
|
||||
borderColor: presets.blue,
|
||||
data: generateData(),
|
||||
label: 'D4',
|
||||
fill: '-1'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.purple),
|
||||
borderColor: presets.purple,
|
||||
data: generateData(),
|
||||
label: 'D5',
|
||||
fill: '-1'
|
||||
}]
|
||||
};
|
||||
|
||||
var options = {
|
||||
maintainAspectRatio: true,
|
||||
spanGaps: false,
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.000001
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
filler: {
|
||||
propagate: false
|
||||
},
|
||||
'samples-filler-analyser': {
|
||||
target: 'chart-analyser'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new Chart('chart-0', {
|
||||
type: 'radar',
|
||||
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() {
|
||||
inputs.from = [];
|
||||
chart.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = generateData();
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
149
WebRoot/node_modules/chart.js/samples/charts/bar/horizontal.html
generated
vendored
Normal file
149
WebRoot/node_modules/chart.js/samples/charts/bar/horizontal.html
generated
vendored
Normal file
@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Horizontal Bar Chart</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container" style="width: 75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<button id="addDataset">Add Dataset</button>
|
||||
<button id="removeDataset">Remove Dataset</button>
|
||||
<button id="addData">Add Data</button>
|
||||
<button id="removeData">Remove Data</button>
|
||||
<script>
|
||||
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
var color = Chart.helpers.color;
|
||||
var horizontalBarChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Dataset 1',
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors.red,
|
||||
borderWidth: 1,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'Dataset 2',
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myHorizontalBar = new Chart(ctx, {
|
||||
type: 'horizontalBar',
|
||||
data: horizontalBarChartData,
|
||||
options: {
|
||||
// Elements options apply to all of the options unless overridden in a dataset
|
||||
// In this case, we are setting the border of each horizontal bar to be 2px wide
|
||||
elements: {
|
||||
rectangle: {
|
||||
borderWidth: 2,
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
legend: {
|
||||
position: 'right',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Horizontal Bar Chart'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
var zero = Math.random() < 0.2 ? true : false;
|
||||
horizontalBarChartData.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return zero ? 0.0 : randomScalingFactor();
|
||||
});
|
||||
|
||||
});
|
||||
window.myHorizontalBar.update();
|
||||
});
|
||||
|
||||
var colorNames = Object.keys(window.chartColors);
|
||||
|
||||
document.getElementById('addDataset').addEventListener('click', function() {
|
||||
var colorName = colorNames[horizontalBarChartData.datasets.length % colorNames.length];
|
||||
var dsColor = window.chartColors[colorName];
|
||||
var newDataset = {
|
||||
label: 'Dataset ' + horizontalBarChartData.datasets.length,
|
||||
backgroundColor: color(dsColor).alpha(0.5).rgbString(),
|
||||
borderColor: dsColor,
|
||||
data: []
|
||||
};
|
||||
|
||||
for (var index = 0; index < horizontalBarChartData.labels.length; ++index) {
|
||||
newDataset.data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
horizontalBarChartData.datasets.push(newDataset);
|
||||
window.myHorizontalBar.update();
|
||||
});
|
||||
|
||||
document.getElementById('addData').addEventListener('click', function() {
|
||||
if (horizontalBarChartData.datasets.length > 0) {
|
||||
var month = MONTHS[horizontalBarChartData.labels.length % MONTHS.length];
|
||||
horizontalBarChartData.labels.push(month);
|
||||
|
||||
for (var index = 0; index < horizontalBarChartData.datasets.length; ++index) {
|
||||
horizontalBarChartData.datasets[index].data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
window.myHorizontalBar.update();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('removeDataset').addEventListener('click', function() {
|
||||
horizontalBarChartData.datasets.splice(0, 1);
|
||||
window.myHorizontalBar.update();
|
||||
});
|
||||
|
||||
document.getElementById('removeData').addEventListener('click', function() {
|
||||
horizontalBarChartData.labels.splice(-1, 1); // remove the label first
|
||||
|
||||
horizontalBarChartData.datasets.forEach(function(dataset) {
|
||||
dataset.data.pop();
|
||||
});
|
||||
|
||||
window.myHorizontalBar.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
108
WebRoot/node_modules/chart.js/samples/charts/bar/multi-axis.html
generated
vendored
Normal file
108
WebRoot/node_modules/chart.js/samples/charts/bar/multi-axis.html
generated
vendored
Normal file
@ -0,0 +1,108 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Bar Chart Multi Axis</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width: 75%">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<script>
|
||||
var barChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Dataset 1',
|
||||
backgroundColor: [
|
||||
window.chartColors.red,
|
||||
window.chartColors.orange,
|
||||
window.chartColors.yellow,
|
||||
window.chartColors.green,
|
||||
window.chartColors.blue,
|
||||
window.chartColors.purple,
|
||||
window.chartColors.red
|
||||
],
|
||||
yAxisID: 'y-axis-1',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'Dataset 2',
|
||||
backgroundColor: window.chartColors.grey,
|
||||
yAxisID: 'y-axis-2',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}]
|
||||
|
||||
};
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myBar = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: barChartData,
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Bar Chart - Multi Axis'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: true
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
|
||||
display: true,
|
||||
position: 'left',
|
||||
id: 'y-axis-1',
|
||||
}, {
|
||||
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
|
||||
display: true,
|
||||
position: 'right',
|
||||
id: 'y-axis-2',
|
||||
gridLines: {
|
||||
drawOnChartArea: false
|
||||
}
|
||||
}],
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
barChartData.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
});
|
||||
window.myBar.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
105
WebRoot/node_modules/chart.js/samples/charts/bar/stacked-group.html
generated
vendored
Normal file
105
WebRoot/node_modules/chart.js/samples/charts/bar/stacked-group.html
generated
vendored
Normal file
@ -0,0 +1,105 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Stacked Bar Chart with Groups</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width: 75%">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<script>
|
||||
var barChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Dataset 1',
|
||||
backgroundColor: window.chartColors.red,
|
||||
stack: 'Stack 0',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'Dataset 2',
|
||||
backgroundColor: window.chartColors.blue,
|
||||
stack: 'Stack 0',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'Dataset 3',
|
||||
backgroundColor: window.chartColors.green,
|
||||
stack: 'Stack 1',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}]
|
||||
|
||||
};
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myBar = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: barChartData,
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Bar Chart - Stacked'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
stacked: true,
|
||||
}],
|
||||
yAxes: [{
|
||||
stacked: true
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
barChartData.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
});
|
||||
window.myBar.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
102
WebRoot/node_modules/chart.js/samples/charts/bar/stacked.html
generated
vendored
Normal file
102
WebRoot/node_modules/chart.js/samples/charts/bar/stacked.html
generated
vendored
Normal file
@ -0,0 +1,102 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Stacked Bar Chart</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width: 75%">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<script>
|
||||
var barChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Dataset 1',
|
||||
backgroundColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'Dataset 2',
|
||||
backgroundColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'Dataset 3',
|
||||
backgroundColor: window.chartColors.green,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}]
|
||||
|
||||
};
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myBar = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: barChartData,
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Bar Chart - Stacked'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
stacked: true,
|
||||
}],
|
||||
yAxes: [{
|
||||
stacked: true
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
barChartData.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
});
|
||||
window.myBar.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
144
WebRoot/node_modules/chart.js/samples/charts/bar/vertical.html
generated
vendored
Normal file
144
WebRoot/node_modules/chart.js/samples/charts/bar/vertical.html
generated
vendored
Normal file
@ -0,0 +1,144 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Bar Chart</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container" style="width: 75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<button id="addDataset">Add Dataset</button>
|
||||
<button id="removeDataset">Remove Dataset</button>
|
||||
<button id="addData">Add Data</button>
|
||||
<button id="removeData">Remove Data</button>
|
||||
<script>
|
||||
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
var color = Chart.helpers.color;
|
||||
var barChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Dataset 1',
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors.red,
|
||||
borderWidth: 1,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'Dataset 2',
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors.blue,
|
||||
borderWidth: 1,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myBar = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: barChartData,
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Bar Chart'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
var zero = Math.random() < 0.2 ? true : false;
|
||||
barChartData.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return zero ? 0.0 : randomScalingFactor();
|
||||
});
|
||||
|
||||
});
|
||||
window.myBar.update();
|
||||
});
|
||||
|
||||
var colorNames = Object.keys(window.chartColors);
|
||||
document.getElementById('addDataset').addEventListener('click', function() {
|
||||
var colorName = colorNames[barChartData.datasets.length % colorNames.length];
|
||||
var dsColor = window.chartColors[colorName];
|
||||
var newDataset = {
|
||||
label: 'Dataset ' + barChartData.datasets.length,
|
||||
backgroundColor: color(dsColor).alpha(0.5).rgbString(),
|
||||
borderColor: dsColor,
|
||||
borderWidth: 1,
|
||||
data: []
|
||||
};
|
||||
|
||||
for (var index = 0; index < barChartData.labels.length; ++index) {
|
||||
newDataset.data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
barChartData.datasets.push(newDataset);
|
||||
window.myBar.update();
|
||||
});
|
||||
|
||||
document.getElementById('addData').addEventListener('click', function() {
|
||||
if (barChartData.datasets.length > 0) {
|
||||
var month = MONTHS[barChartData.labels.length % MONTHS.length];
|
||||
barChartData.labels.push(month);
|
||||
|
||||
for (var index = 0; index < barChartData.datasets.length; ++index) {
|
||||
// window.myBar.addData(randomScalingFactor(), index);
|
||||
barChartData.datasets[index].data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
window.myBar.update();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('removeDataset').addEventListener('click', function() {
|
||||
barChartData.datasets.splice(0, 1);
|
||||
window.myBar.update();
|
||||
});
|
||||
|
||||
document.getElementById('removeData').addEventListener('click', function() {
|
||||
barChartData.labels.splice(-1, 1); // remove the label first
|
||||
|
||||
barChartData.datasets.forEach(function(dataset) {
|
||||
dataset.data.pop();
|
||||
});
|
||||
|
||||
window.myBar.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
191
WebRoot/node_modules/chart.js/samples/charts/bubble.html
generated
vendored
Normal file
191
WebRoot/node_modules/chart.js/samples/charts/bubble.html
generated
vendored
Normal file
@ -0,0 +1,191 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Bubble Chart</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style type="text/css">
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container" style="width: 75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<button id="addDataset">Add Dataset</button>
|
||||
<button id="removeDataset">Remove Dataset</button>
|
||||
<button id="addData">Add Data</button>
|
||||
<button id="removeData">Remove Data</button>
|
||||
<script>
|
||||
var DEFAULT_DATASET_SIZE = 7;
|
||||
|
||||
var addedCount = 0;
|
||||
var color = Chart.helpers.color;
|
||||
var bubbleChartData = {
|
||||
animation: {
|
||||
duration: 10000
|
||||
},
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors.red,
|
||||
borderWidth: 1,
|
||||
data: [{
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
}]
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors.orange,
|
||||
borderWidth: 1,
|
||||
data: [{
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
}]
|
||||
}]
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myChart = new Chart(ctx, {
|
||||
type: 'bubble',
|
||||
data: bubbleChartData,
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Bubble Chart'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'point'
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
bubbleChartData.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
};
|
||||
});
|
||||
});
|
||||
window.myChart.update();
|
||||
});
|
||||
|
||||
var colorNames = Object.keys(window.chartColors);
|
||||
document.getElementById('addDataset').addEventListener('click', function() {
|
||||
++addedCount;
|
||||
var colorName = colorNames[bubbleChartData.datasets.length % colorNames.length];
|
||||
var dsColor = window.chartColors[colorName];
|
||||
var newDataset = {
|
||||
label: 'My added dataset ' + addedCount,
|
||||
backgroundColor: color(dsColor).alpha(0.5).rgbString(),
|
||||
borderColor: dsColor,
|
||||
borderWidth: 1,
|
||||
data: []
|
||||
};
|
||||
|
||||
for (var index = 0; index < DEFAULT_DATASET_SIZE; ++index) {
|
||||
newDataset.data.push({
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
});
|
||||
}
|
||||
|
||||
bubbleChartData.datasets.push(newDataset);
|
||||
window.myChart.update();
|
||||
});
|
||||
|
||||
document.getElementById('addData').addEventListener('click', function() {
|
||||
if (bubbleChartData.datasets.length > 0) {
|
||||
for (var index = 0; index < bubbleChartData.datasets.length; ++index) {
|
||||
bubbleChartData.datasets[index].data.push({
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: Math.abs(randomScalingFactor()) / 5,
|
||||
});
|
||||
}
|
||||
|
||||
window.myChart.update();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('removeDataset').addEventListener('click', function() {
|
||||
bubbleChartData.datasets.splice(0, 1);
|
||||
window.myChart.update();
|
||||
});
|
||||
|
||||
document.getElementById('removeData').addEventListener('click', function() {
|
||||
bubbleChartData.datasets.forEach(function(dataset) {
|
||||
dataset.data.pop();
|
||||
});
|
||||
|
||||
window.myChart.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
101
WebRoot/node_modules/chart.js/samples/charts/combo-bar-line.html
generated
vendored
Normal file
101
WebRoot/node_modules/chart.js/samples/charts/combo-bar-line.html
generated
vendored
Normal file
@ -0,0 +1,101 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Combo Bar-Line Chart</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width: 75%">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<script>
|
||||
var chartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
type: 'line',
|
||||
label: 'Dataset 1',
|
||||
borderColor: window.chartColors.blue,
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
type: 'bar',
|
||||
label: 'Dataset 2',
|
||||
backgroundColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
borderColor: 'white',
|
||||
borderWidth: 2
|
||||
}, {
|
||||
type: 'bar',
|
||||
label: 'Dataset 3',
|
||||
backgroundColor: window.chartColors.green,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}]
|
||||
|
||||
};
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myMixedChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: chartData,
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Combo Bar Line Chart'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: true
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
chartData.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
});
|
||||
window.myMixedChart.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
144
WebRoot/node_modules/chart.js/samples/charts/doughnut.html
generated
vendored
Normal file
144
WebRoot/node_modules/chart.js/samples/charts/doughnut.html
generated
vendored
Normal file
@ -0,0 +1,144 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Doughnut Chart</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="canvas-holder" style="width:40%">
|
||||
<canvas id="chart-area"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<button id="addDataset">Add Dataset</button>
|
||||
<button id="removeDataset">Remove Dataset</button>
|
||||
<button id="addData">Add Data</button>
|
||||
<button id="removeData">Remove Data</button>
|
||||
<script>
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
],
|
||||
backgroundColor: [
|
||||
window.chartColors.red,
|
||||
window.chartColors.orange,
|
||||
window.chartColors.yellow,
|
||||
window.chartColors.green,
|
||||
window.chartColors.blue,
|
||||
],
|
||||
label: 'Dataset 1'
|
||||
}],
|
||||
labels: [
|
||||
'Red',
|
||||
'Orange',
|
||||
'Yellow',
|
||||
'Green',
|
||||
'Blue'
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Doughnut Chart'
|
||||
},
|
||||
animation: {
|
||||
animateScale: true,
|
||||
animateRotate: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('chart-area').getContext('2d');
|
||||
window.myDoughnut = new Chart(ctx, config);
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
});
|
||||
|
||||
window.myDoughnut.update();
|
||||
});
|
||||
|
||||
var colorNames = Object.keys(window.chartColors);
|
||||
document.getElementById('addDataset').addEventListener('click', function() {
|
||||
var newDataset = {
|
||||
backgroundColor: [],
|
||||
data: [],
|
||||
label: 'New dataset ' + config.data.datasets.length,
|
||||
};
|
||||
|
||||
for (var index = 0; index < config.data.labels.length; ++index) {
|
||||
newDataset.data.push(randomScalingFactor());
|
||||
|
||||
var colorName = colorNames[index % colorNames.length];
|
||||
var newColor = window.chartColors[colorName];
|
||||
newDataset.backgroundColor.push(newColor);
|
||||
}
|
||||
|
||||
config.data.datasets.push(newDataset);
|
||||
window.myDoughnut.update();
|
||||
});
|
||||
|
||||
document.getElementById('addData').addEventListener('click', function() {
|
||||
if (config.data.datasets.length > 0) {
|
||||
config.data.labels.push('data #' + config.data.labels.length);
|
||||
|
||||
var colorName = colorNames[config.data.datasets[0].data.length % colorNames.length];
|
||||
var newColor = window.chartColors[colorName];
|
||||
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.push(randomScalingFactor());
|
||||
dataset.backgroundColor.push(newColor);
|
||||
});
|
||||
|
||||
window.myDoughnut.update();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('removeDataset').addEventListener('click', function() {
|
||||
config.data.datasets.splice(0, 1);
|
||||
window.myDoughnut.update();
|
||||
});
|
||||
|
||||
document.getElementById('removeData').addEventListener('click', function() {
|
||||
config.data.labels.splice(-1, 1); // remove the label first
|
||||
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.pop();
|
||||
dataset.backgroundColor.pop();
|
||||
});
|
||||
|
||||
window.myDoughnut.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
163
WebRoot/node_modules/chart.js/samples/charts/line/basic.html
generated
vendored
Normal file
163
WebRoot/node_modules/chart.js/samples/charts/line/basic.html
generated
vendored
Normal file
@ -0,0 +1,163 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<button id="addDataset">Add Dataset</button>
|
||||
<button id="removeDataset">Remove Dataset</button>
|
||||
<button id="addData">Add Data</button>
|
||||
<button id="removeData">Remove Data</button>
|
||||
<script>
|
||||
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: window.chartColors.red,
|
||||
borderColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
fill: false,
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
fill: false,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
borderColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
hover: {
|
||||
mode: 'nearest',
|
||||
intersect: true
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
var colorNames = Object.keys(window.chartColors);
|
||||
document.getElementById('addDataset').addEventListener('click', function() {
|
||||
var colorName = colorNames[config.data.datasets.length % colorNames.length];
|
||||
var newColor = window.chartColors[colorName];
|
||||
var newDataset = {
|
||||
label: 'Dataset ' + config.data.datasets.length,
|
||||
backgroundColor: newColor,
|
||||
borderColor: newColor,
|
||||
data: [],
|
||||
fill: false
|
||||
};
|
||||
|
||||
for (var index = 0; index < config.data.labels.length; ++index) {
|
||||
newDataset.data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
config.data.datasets.push(newDataset);
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
document.getElementById('addData').addEventListener('click', function() {
|
||||
if (config.data.datasets.length > 0) {
|
||||
var month = MONTHS[config.data.labels.length % MONTHS.length];
|
||||
config.data.labels.push(month);
|
||||
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.push(randomScalingFactor());
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('removeDataset').addEventListener('click', function() {
|
||||
config.data.datasets.splice(0, 1);
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
document.getElementById('removeData').addEventListener('click', function() {
|
||||
config.data.labels.splice(-1, 1); // remove the label first
|
||||
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.pop();
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
103
WebRoot/node_modules/chart.js/samples/charts/line/interpolation-modes.html
generated
vendored
Normal file
103
WebRoot/node_modules/chart.js/samples/charts/line/interpolation-modes.html
generated
vendored
Normal file
@ -0,0 +1,103 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart - Cubic interpolation mode</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<script>
|
||||
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
};
|
||||
|
||||
var datapoints = [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170];
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
|
||||
datasets: [{
|
||||
label: 'Cubic interpolation (monotone)',
|
||||
data: datapoints,
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
fill: false,
|
||||
cubicInterpolationMode: 'monotone'
|
||||
}, {
|
||||
label: 'Cubic interpolation (default)',
|
||||
data: datapoints,
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
fill: false,
|
||||
}, {
|
||||
label: 'Linear interpolation',
|
||||
data: datapoints,
|
||||
borderColor: window.chartColors.green,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
fill: false,
|
||||
lineTension: 0
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Cubic interpolation mode'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: -10,
|
||||
suggestedMax: 200,
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
for (var i = 0, len = datapoints.length; i < len; ++i) {
|
||||
datapoints[i] = Math.random() < 0.05 ? NaN : randomScalingFactor();
|
||||
}
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
111
WebRoot/node_modules/chart.js/samples/charts/line/line-styles.html
generated
vendored
Normal file
111
WebRoot/node_modules/chart.js/samples/charts/line/line-styles.html
generated
vendored
Normal file
@ -0,0 +1,111 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Styles</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Unfilled',
|
||||
fill: false,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
borderColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
label: 'Dashed',
|
||||
fill: false,
|
||||
backgroundColor: window.chartColors.green,
|
||||
borderColor: window.chartColors.green,
|
||||
borderDash: [5, 5],
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
label: 'Filled',
|
||||
backgroundColor: window.chartColors.red,
|
||||
borderColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
fill: true,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
hover: {
|
||||
mode: 'nearest',
|
||||
intersect: true
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
104
WebRoot/node_modules/chart.js/samples/charts/line/multi-axis.html
generated
vendored
Normal file
104
WebRoot/node_modules/chart.js/samples/charts/line/multi-axis.html
generated
vendored
Normal file
@ -0,0 +1,104 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart Multiple Axes</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<script>
|
||||
var lineChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: window.chartColors.red,
|
||||
fill: false,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
yAxisID: 'y-axis-1',
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
fill: false,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
yAxisID: 'y-axis-2'
|
||||
}]
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = Chart.Line(ctx, {
|
||||
data: lineChartData,
|
||||
options: {
|
||||
responsive: true,
|
||||
hoverMode: 'index',
|
||||
stacked: false,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Multi Axis'
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
|
||||
display: true,
|
||||
position: 'left',
|
||||
id: 'y-axis-1',
|
||||
}, {
|
||||
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
|
||||
display: true,
|
||||
position: 'right',
|
||||
id: 'y-axis-2',
|
||||
|
||||
// grid line settings
|
||||
gridLines: {
|
||||
drawOnChartArea: false, // only want the grid lines for one axis to show up
|
||||
},
|
||||
}],
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
lineChartData.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
129
WebRoot/node_modules/chart.js/samples/charts/line/point-sizes.html
generated
vendored
Normal file
129
WebRoot/node_modules/chart.js/samples/charts/line/point-sizes.html
generated
vendored
Normal file
@ -0,0 +1,129 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Different Point Sizes</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'dataset - big points',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
backgroundColor: window.chartColors.red,
|
||||
borderColor: window.chartColors.red,
|
||||
fill: false,
|
||||
borderDash: [5, 5],
|
||||
pointRadius: 15,
|
||||
pointHoverRadius: 10,
|
||||
}, {
|
||||
label: 'dataset - individual point sizes',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
backgroundColor: window.chartColors.blue,
|
||||
borderColor: window.chartColors.blue,
|
||||
fill: false,
|
||||
borderDash: [5, 5],
|
||||
pointRadius: [2, 4, 6, 18, 0, 12, 20],
|
||||
}, {
|
||||
label: 'dataset - large pointHoverRadius',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
backgroundColor: window.chartColors.green,
|
||||
borderColor: window.chartColors.green,
|
||||
fill: false,
|
||||
pointHoverRadius: 30,
|
||||
}, {
|
||||
label: 'dataset - large pointHitRadius',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
backgroundColor: window.chartColors.yellow,
|
||||
borderColor: window.chartColors.yellow,
|
||||
fill: false,
|
||||
pointHitRadius: 20,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
},
|
||||
hover: {
|
||||
mode: 'index'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
}
|
||||
}]
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Different point sizes'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
96
WebRoot/node_modules/chart.js/samples/charts/line/point-styles.html
generated
vendored
Normal file
96
WebRoot/node_modules/chart.js/samples/charts/line/point-styles.html
generated
vendored
Normal file
@ -0,0 +1,96 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.chart-container {
|
||||
width: 500px;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
</div>
|
||||
<script>
|
||||
function createConfig(pointStyle) {
|
||||
return {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: window.chartColors.red,
|
||||
borderColor: window.chartColors.red,
|
||||
data: [10, 23, 5, 99, 67, 43, 0],
|
||||
fill: false,
|
||||
pointRadius: 10,
|
||||
pointHoverRadius: 15,
|
||||
showLine: false // no line shown
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Point Style: ' + pointStyle
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
pointStyle: pointStyle
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
var container = document.querySelector('.container');
|
||||
[
|
||||
'circle',
|
||||
'triangle',
|
||||
'rect',
|
||||
'rectRounded',
|
||||
'rectRot',
|
||||
'cross',
|
||||
'crossRot',
|
||||
'star',
|
||||
'line',
|
||||
'dash'
|
||||
].forEach(function(pointStyle) {
|
||||
var div = document.createElement('div');
|
||||
div.classList.add('chart-container');
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
div.appendChild(canvas);
|
||||
container.appendChild(div);
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
var config = createConfig(pointStyle);
|
||||
new Chart(ctx, config);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
95
WebRoot/node_modules/chart.js/samples/charts/line/skip-points.html
generated
vendored
Normal file
95
WebRoot/node_modules/chart.js/samples/charts/line/skip-points.html
generated
vendored
Normal file
@ -0,0 +1,95 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
borderColor: window.chartColors.red,
|
||||
fill: false,
|
||||
// Skip a point in the middle
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
NaN,
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
borderColor: window.chartColors.blue,
|
||||
fill: false,
|
||||
// Skip first and last points
|
||||
data: [
|
||||
NaN,
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
NaN
|
||||
],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Skip Points'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
},
|
||||
hover: {
|
||||
mode: 'index'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
},
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
103
WebRoot/node_modules/chart.js/samples/charts/line/stepped.html
generated
vendored
Normal file
103
WebRoot/node_modules/chart.js/samples/charts/line/stepped.html
generated
vendored
Normal file
@ -0,0 +1,103 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Stepped Line Chart</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.chart-container {
|
||||
width: 500px;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
</div>
|
||||
<script>
|
||||
function createConfig(details, data) {
|
||||
return {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
|
||||
datasets: [{
|
||||
label: 'steppedLine: ' + details.steppedLine,
|
||||
steppedLine: details.steppedLine,
|
||||
data: data,
|
||||
borderColor: details.color,
|
||||
fill: false,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: details.label,
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
window.onload = function() {
|
||||
var container = document.querySelector('.container');
|
||||
|
||||
var data = [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
];
|
||||
|
||||
var steppedLineSettings = [{
|
||||
steppedLine: false,
|
||||
label: 'No Step Interpolation',
|
||||
color: window.chartColors.red
|
||||
}, {
|
||||
steppedLine: true,
|
||||
label: 'Step Before Interpolation',
|
||||
color: window.chartColors.green
|
||||
}, {
|
||||
steppedLine: 'before',
|
||||
label: 'Step Before Interpolation',
|
||||
color: window.chartColors.green
|
||||
}, {
|
||||
steppedLine: 'after',
|
||||
label: 'Step After Interpolation',
|
||||
color: window.chartColors.purple
|
||||
}];
|
||||
|
||||
steppedLineSettings.forEach(function(details) {
|
||||
var div = document.createElement('div');
|
||||
div.classList.add('chart-container');
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
div.appendChild(canvas);
|
||||
container.appendChild(div);
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
var config = createConfig(details, data);
|
||||
new Chart(ctx, config);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
97
WebRoot/node_modules/chart.js/samples/charts/pie.html
generated
vendored
Normal file
97
WebRoot/node_modules/chart.js/samples/charts/pie.html
generated
vendored
Normal file
@ -0,0 +1,97 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Pie Chart</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="canvas-holder" style="width:40%">
|
||||
<canvas id="chart-area"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<button id="addDataset">Add Dataset</button>
|
||||
<button id="removeDataset">Remove Dataset</button>
|
||||
<script>
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'pie',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
],
|
||||
backgroundColor: [
|
||||
window.chartColors.red,
|
||||
window.chartColors.orange,
|
||||
window.chartColors.yellow,
|
||||
window.chartColors.green,
|
||||
window.chartColors.blue,
|
||||
],
|
||||
label: 'Dataset 1'
|
||||
}],
|
||||
labels: [
|
||||
'Red',
|
||||
'Orange',
|
||||
'Yellow',
|
||||
'Green',
|
||||
'Blue'
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('chart-area').getContext('2d');
|
||||
window.myPie = new Chart(ctx, config);
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
});
|
||||
|
||||
window.myPie.update();
|
||||
});
|
||||
|
||||
var colorNames = Object.keys(window.chartColors);
|
||||
document.getElementById('addDataset').addEventListener('click', function() {
|
||||
var newDataset = {
|
||||
backgroundColor: [],
|
||||
data: [],
|
||||
label: 'New dataset ' + config.data.datasets.length,
|
||||
};
|
||||
|
||||
for (var index = 0; index < config.data.labels.length; ++index) {
|
||||
newDataset.data.push(randomScalingFactor());
|
||||
|
||||
var colorName = colorNames[index % colorNames.length];
|
||||
var newColor = window.chartColors[colorName];
|
||||
newDataset.backgroundColor.push(newColor);
|
||||
}
|
||||
|
||||
config.data.datasets.push(newDataset);
|
||||
window.myPie.update();
|
||||
});
|
||||
|
||||
document.getElementById('removeDataset').addEventListener('click', function() {
|
||||
config.data.datasets.splice(0, 1);
|
||||
window.myPie.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
117
WebRoot/node_modules/chart.js/samples/charts/polar-area.html
generated
vendored
Normal file
117
WebRoot/node_modules/chart.js/samples/charts/polar-area.html
generated
vendored
Normal file
@ -0,0 +1,117 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Polar Area Chart</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="canvas-holder" style="width:50%">
|
||||
<canvas id="chart-area"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<button id="addData">Add Data</button>
|
||||
<button id="removeData">Remove Data</button>
|
||||
<script>
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
};
|
||||
|
||||
var chartColors = window.chartColors;
|
||||
var color = Chart.helpers.color;
|
||||
var config = {
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
],
|
||||
backgroundColor: [
|
||||
color(chartColors.red).alpha(0.5).rgbString(),
|
||||
color(chartColors.orange).alpha(0.5).rgbString(),
|
||||
color(chartColors.yellow).alpha(0.5).rgbString(),
|
||||
color(chartColors.green).alpha(0.5).rgbString(),
|
||||
color(chartColors.blue).alpha(0.5).rgbString(),
|
||||
],
|
||||
label: 'My dataset' // for legend
|
||||
}],
|
||||
labels: [
|
||||
'Red',
|
||||
'Orange',
|
||||
'Yellow',
|
||||
'Green',
|
||||
'Blue'
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
position: 'right',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Polar Area Chart'
|
||||
},
|
||||
scale: {
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
reverse: false
|
||||
},
|
||||
animation: {
|
||||
animateRotate: false,
|
||||
animateScale: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('chart-area');
|
||||
window.myPolarArea = Chart.PolarArea(ctx, config);
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(piece, i) {
|
||||
piece.data.forEach(function(value, j) {
|
||||
config.data.datasets[i].data[j] = randomScalingFactor();
|
||||
});
|
||||
});
|
||||
window.myPolarArea.update();
|
||||
});
|
||||
|
||||
var colorNames = Object.keys(window.chartColors);
|
||||
document.getElementById('addData').addEventListener('click', function() {
|
||||
if (config.data.datasets.length > 0) {
|
||||
config.data.labels.push('data #' + config.data.labels.length);
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
var colorName = colorNames[config.data.labels.length % colorNames.length];
|
||||
dataset.backgroundColor.push(window.chartColors[colorName]);
|
||||
dataset.data.push(randomScalingFactor());
|
||||
});
|
||||
window.myPolarArea.update();
|
||||
}
|
||||
});
|
||||
document.getElementById('removeData').addEventListener('click', function() {
|
||||
config.data.labels.pop(); // remove the label first
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.backgroundColor.pop();
|
||||
dataset.data.pop();
|
||||
});
|
||||
window.myPolarArea.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
109
WebRoot/node_modules/chart.js/samples/charts/radar-skip-points.html
generated
vendored
Normal file
109
WebRoot/node_modules/chart.js/samples/charts/radar-skip-points.html
generated
vendored
Normal file
@ -0,0 +1,109 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Radar Chart</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:40%">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<script>
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
};
|
||||
|
||||
var color = Chart.helpers.color;
|
||||
var config = {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [{
|
||||
label: 'Skip first dataset',
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
||||
pointBackgroundColor: window.chartColors.red,
|
||||
data: [
|
||||
NaN,
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'Skip mid dataset',
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
||||
pointBackgroundColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
NaN,
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'Skip last dataset',
|
||||
borderColor: window.chartColors.green,
|
||||
backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
|
||||
pointBackgroundColor: window.chartColors.green,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
NaN
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Radar Chart - Skip Points'
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.0,
|
||||
}
|
||||
},
|
||||
scale: {
|
||||
beginAtZero: true,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
window.myRadar = new Chart(document.getElementById('canvas'), config);
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
window.myRadar.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
146
WebRoot/node_modules/chart.js/samples/charts/radar.html
generated
vendored
Normal file
146
WebRoot/node_modules/chart.js/samples/charts/radar.html
generated
vendored
Normal file
@ -0,0 +1,146 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Radar Chart</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:40%">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<button id="addDataset">Add Dataset</button>
|
||||
<button id="removeDataset">Remove Dataset</button>
|
||||
<button id="addData">Add Data</button>
|
||||
<button id="removeData">Remove Data</button>
|
||||
<script>
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
};
|
||||
|
||||
var color = Chart.helpers.color;
|
||||
var config = {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
||||
borderColor: window.chartColors.red,
|
||||
pointBackgroundColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
||||
borderColor: window.chartColors.blue,
|
||||
pointBackgroundColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Radar Chart'
|
||||
},
|
||||
scale: {
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
window.myRadar = new Chart(document.getElementById('canvas'), config);
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
});
|
||||
|
||||
window.myRadar.update();
|
||||
});
|
||||
|
||||
var colorNames = Object.keys(window.chartColors);
|
||||
document.getElementById('addDataset').addEventListener('click', function() {
|
||||
var colorName = colorNames[config.data.datasets.length % colorNames.length];
|
||||
var newColor = window.chartColors[colorName];
|
||||
|
||||
var newDataset = {
|
||||
label: 'Dataset ' + config.data.datasets.length,
|
||||
borderColor: newColor,
|
||||
backgroundColor: color(newColor).alpha(0.2).rgbString(),
|
||||
pointBorderColor: newColor,
|
||||
data: [],
|
||||
};
|
||||
|
||||
for (var index = 0; index < config.data.labels.length; ++index) {
|
||||
newDataset.data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
config.data.datasets.push(newDataset);
|
||||
window.myRadar.update();
|
||||
});
|
||||
|
||||
document.getElementById('addData').addEventListener('click', function() {
|
||||
if (config.data.datasets.length > 0) {
|
||||
config.data.labels.push('dataset #' + config.data.labels.length);
|
||||
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.push(randomScalingFactor());
|
||||
});
|
||||
|
||||
window.myRadar.update();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('removeDataset').addEventListener('click', function() {
|
||||
config.data.datasets.splice(0, 1);
|
||||
window.myRadar.update();
|
||||
});
|
||||
|
||||
document.getElementById('removeData').addEventListener('click', function() {
|
||||
config.data.labels.pop(); // remove the label first
|
||||
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.pop();
|
||||
});
|
||||
|
||||
window.myRadar.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
107
WebRoot/node_modules/chart.js/samples/charts/scatter/basic.html
generated
vendored
Normal file
107
WebRoot/node_modules/chart.js/samples/charts/scatter/basic.html
generated
vendored
Normal file
@ -0,0 +1,107 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Scatter Chart</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<script>
|
||||
var color = Chart.helpers.color;
|
||||
var scatterChartData = {
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
||||
data: [{
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}]
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
||||
data: [{
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}]
|
||||
}]
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myScatter = Chart.Scatter(ctx, {
|
||||
data: scatterChartData,
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Scatter Chart'
|
||||
},
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
scatterChartData.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor()
|
||||
};
|
||||
});
|
||||
});
|
||||
window.myScatter.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
139
WebRoot/node_modules/chart.js/samples/charts/scatter/multi-axis.html
generated
vendored
Normal file
139
WebRoot/node_modules/chart.js/samples/charts/scatter/multi-axis.html
generated
vendored
Normal file
@ -0,0 +1,139 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Scatter Chart Multi Axis</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<script>
|
||||
var color = Chart.helpers.color;
|
||||
var scatterChartData = {
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
xAxisID: 'x-axis-1',
|
||||
yAxisID: 'y-axis-1',
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
||||
data: [{
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}]
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
xAxisID: 'x-axis-1',
|
||||
yAxisID: 'y-axis-2',
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
||||
data: [{
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}, {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
}]
|
||||
}]
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myScatter = Chart.Scatter(ctx, {
|
||||
data: scatterChartData,
|
||||
options: {
|
||||
responsive: true,
|
||||
hoverMode: 'nearest',
|
||||
intersect: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Scatter Chart - Multi Axis'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
position: 'bottom',
|
||||
gridLines: {
|
||||
zeroLineColor: 'rgba(0,0,0,1)'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
|
||||
display: true,
|
||||
position: 'left',
|
||||
id: 'y-axis-1',
|
||||
}, {
|
||||
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
|
||||
display: true,
|
||||
position: 'right',
|
||||
reverse: true,
|
||||
id: 'y-axis-2',
|
||||
|
||||
// grid line settings
|
||||
gridLines: {
|
||||
drawOnChartArea: false, // only want the grid lines for one axis to show up
|
||||
},
|
||||
}],
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
scatterChartData.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return {
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor()
|
||||
};
|
||||
});
|
||||
});
|
||||
window.myScatter.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
WebRoot/node_modules/chart.js/samples/favicon.ico
generated
vendored
Normal file
BIN
WebRoot/node_modules/chart.js/samples/favicon.ico
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
58
WebRoot/node_modules/chart.js/samples/index.html
generated
vendored
Normal file
58
WebRoot/node_modules/chart.js/samples/index.html
generated
vendored
Normal file
@ -0,0 +1,58 @@
|
||||
<!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">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="samples.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<title>Chart.js samples</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<div class="chartjs-title">Samples</div>
|
||||
<div class="chartjs-caption">Simple yet flexible JavaScript charting for designers & developers</div>
|
||||
<div class="chartjs-links">
|
||||
<a class="btn btn-chartjs" href="http://www.chartjs.org">Website</a>
|
||||
<a class="btn btn-docs" href="http://www.chartjs.org/docs">Documentation</a>
|
||||
<a class="btn btn-gh" href="https://github.com/chartjs/Chart.js">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="categories" class="samples-categories"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function createCategory(item) {
|
||||
var el = document.createElement('div');
|
||||
el.className = 'samples-category';
|
||||
el.innerHTML =
|
||||
'<div class="title">' + item.title + '</div>' +
|
||||
'<div class="items"></div>';
|
||||
return el;
|
||||
}
|
||||
|
||||
function createEntry(item) {
|
||||
var el = document.createElement('div');
|
||||
el.className = 'samples-entry';
|
||||
el.innerHTML = '<a class="title" href="' + item.path + '">' + item.title + '</a>';
|
||||
return el;
|
||||
}
|
||||
|
||||
var categories = document.getElementById('categories');
|
||||
Samples.items.forEach(function(item) {
|
||||
var category = createCategory(item);
|
||||
var children = category.getElementsByClassName('items')[0];
|
||||
|
||||
(item.items || []).forEach(function(item2) {
|
||||
children.appendChild(createEntry(item2));
|
||||
});
|
||||
|
||||
categories.appendChild(category);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
116
WebRoot/node_modules/chart.js/samples/legend/point-style.html
generated
vendored
Normal file
116
WebRoot/node_modules/chart.js/samples/legend/point-style.html
generated
vendored
Normal file
@ -0,0 +1,116 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Legend Point Style</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.chart-container {
|
||||
width: 500px;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="chart-container">
|
||||
<canvas id="chart-legend-normal"></canvas>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<canvas id="chart-legend-pointstyle"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var color = Chart.helpers.color;
|
||||
function createConfig(colorName) {
|
||||
return {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors[colorName],
|
||||
borderWidth: 1,
|
||||
pointStyle: 'rectRot',
|
||||
pointRadius: 5,
|
||||
pointBorderColor: 'rgb(0, 0, 0)'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
labels: {
|
||||
usePointStyle: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
}
|
||||
}]
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Normal Legend'
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function createPointStyleConfig(colorName) {
|
||||
var config = createConfig(colorName);
|
||||
config.options.legend.labels.usePointStyle = true;
|
||||
config.options.title.text = 'Point Style Legend';
|
||||
return config;
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
[{
|
||||
id: 'chart-legend-normal',
|
||||
config: createConfig('red')
|
||||
}, {
|
||||
id: 'chart-legend-pointstyle',
|
||||
config: createPointStyleConfig('blue')
|
||||
}].forEach(function(details) {
|
||||
var ctx = document.getElementById(details.id).getContext('2d');
|
||||
new Chart(ctx, details.config);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
121
WebRoot/node_modules/chart.js/samples/legend/positioning.html
generated
vendored
Normal file
121
WebRoot/node_modules/chart.js/samples/legend/positioning.html
generated
vendored
Normal file
@ -0,0 +1,121 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Legend Positions</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.chart-container {
|
||||
width: 500px;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="chart-container">
|
||||
<canvas id="chart-legend-top"></canvas>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<canvas id="chart-legend-right"></canvas>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<canvas id="chart-legend-bottom"></canvas>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<canvas id="chart-legend-left"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var color = Chart.helpers.color;
|
||||
function createConfig(legendPosition, colorName) {
|
||||
return {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors[colorName],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
position: legendPosition,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
}
|
||||
}]
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Legend Position: ' + legendPosition
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
[{
|
||||
id: 'chart-legend-top',
|
||||
legendPosition: 'top',
|
||||
color: 'red'
|
||||
}, {
|
||||
id: 'chart-legend-right',
|
||||
legendPosition: 'right',
|
||||
color: 'blue'
|
||||
}, {
|
||||
id: 'chart-legend-bottom',
|
||||
legendPosition: 'bottom',
|
||||
color: 'green'
|
||||
}, {
|
||||
id: 'chart-legend-left',
|
||||
legendPosition: 'left',
|
||||
color: 'yellow'
|
||||
}].forEach(function(details) {
|
||||
var ctx = document.getElementById(details.id).getContext('2d');
|
||||
var config = createConfig(details.legendPosition, details.color);
|
||||
new Chart(ctx, config);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1
WebRoot/node_modules/chart.js/samples/logo.svg
generated
vendored
Normal file
1
WebRoot/node_modules/chart.js/samples/logo.svg
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
<svg width="160" height="160" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg"><title>Artboard 6</title><g fill="none" fill-rule="evenodd"><path d="M144.086 80.568c-21.978.43-17.402 14.346-32.89 17.866C95.46 102.01 92.975 60 77.243 60c-15.733 0-19.216 40.806-38.918 68.823l-.56.794L80 154l64.086-37V80.568z" fill="#36A2EB"/><path d="M144.086 79.3C136.726 69.856 131.736 59 121 59c-19 0-14 31-35 31s-23.207-33.346-47-2c-7.58 9.988-13.682 21.124-18.475 31.662L80 154l64.086-37V79.3z" fill="#FFCE56"/><path d="M15.914 92.143C23.124 72.173 26.237 56 40 56c21 0 26 59 44 53s16-38 44-38c5.33 0 10.772 3.263 16.086 8.546V117L80 154l-64.086-37V92.143z" fill-opacity=".8" fill="#FE6184"/><path stroke="#E7E9ED" stroke-width="8" d="M80 6l64.086 37v74L80 154l-64.086-37V43z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 783 B |
193
WebRoot/node_modules/chart.js/samples/samples.js
generated
vendored
Normal file
193
WebRoot/node_modules/chart.js/samples/samples.js
generated
vendored
Normal file
@ -0,0 +1,193 @@
|
||||
(function(global) {
|
||||
|
||||
var Samples = global.Samples || (global.Samples = {});
|
||||
|
||||
Samples.items = [{
|
||||
title: 'Bar charts',
|
||||
items: [{
|
||||
title: 'Vertical',
|
||||
path: 'charts/bar/vertical.html'
|
||||
}, {
|
||||
title: 'Horizontal',
|
||||
path: 'charts/bar/horizontal.html'
|
||||
}, {
|
||||
title: 'Multi axis',
|
||||
path: 'charts/bar/multi-axis.html'
|
||||
}, {
|
||||
title: 'Stacked',
|
||||
path: 'charts/bar/stacked.html'
|
||||
}, {
|
||||
title: 'Stacked groups',
|
||||
path: 'charts/bar/stacked-group.html'
|
||||
}]
|
||||
}, {
|
||||
title: 'Line charts',
|
||||
items: [{
|
||||
title: 'Basic',
|
||||
path: 'charts/line/basic.html'
|
||||
}, {
|
||||
title: 'Multi axis',
|
||||
path: 'charts/line/multi-axis.html'
|
||||
}, {
|
||||
title: 'Stepped',
|
||||
path: 'charts/line/stepped.html'
|
||||
}, {
|
||||
title: 'Interpolation',
|
||||
path: 'charts/line/interpolation-modes.html'
|
||||
}, {
|
||||
title: 'Line styles',
|
||||
path: 'charts/line/line-styles.html'
|
||||
}, {
|
||||
title: 'Point styles',
|
||||
path: 'charts/line/point-styles.html'
|
||||
}, {
|
||||
title: 'Point sizes',
|
||||
path: 'charts/line/point-sizes.html'
|
||||
}]
|
||||
}, {
|
||||
title: 'Area charts',
|
||||
items: [{
|
||||
title: 'Boundaries (line)',
|
||||
path: 'charts/area/line-boundaries.html'
|
||||
}, {
|
||||
title: 'Datasets (line)',
|
||||
path: 'charts/area/line-datasets.html'
|
||||
}, {
|
||||
title: 'Stacked (line)',
|
||||
path: 'charts/area/line-stacked.html'
|
||||
}, {
|
||||
title: 'Radar',
|
||||
path: 'charts/area/radar.html'
|
||||
}]
|
||||
}, {
|
||||
title: 'Other charts',
|
||||
items: [{
|
||||
title: 'Scatter',
|
||||
path: 'charts/scatter/basic.html'
|
||||
}, {
|
||||
title: 'Scatter - Multi axis',
|
||||
path: 'charts/scatter/multi-axis.html'
|
||||
}, {
|
||||
title: 'Doughnut',
|
||||
path: 'charts/doughnut.html'
|
||||
}, {
|
||||
title: 'Pie',
|
||||
path: 'charts/pie.html'
|
||||
}, {
|
||||
title: 'Polar area',
|
||||
path: 'charts/polar-area.html'
|
||||
}, {
|
||||
title: 'Radar',
|
||||
path: 'charts/radar.html'
|
||||
}, {
|
||||
title: 'Combo bar/line',
|
||||
path: 'charts/combo-bar-line.html'
|
||||
}]
|
||||
}, {
|
||||
title: 'Linear scale',
|
||||
items: [{
|
||||
title: 'Step size',
|
||||
path: 'scales/linear/step-size.html'
|
||||
}, {
|
||||
title: 'Min & max',
|
||||
path: 'scales/linear/min-max.html'
|
||||
}, {
|
||||
title: 'Min & max (suggested)',
|
||||
path: 'scales/linear/min-max-suggested.html'
|
||||
}]
|
||||
}, {
|
||||
title: 'Logarithmic scale',
|
||||
items: [{
|
||||
title: 'Line',
|
||||
path: 'scales/logarithmic/line.html'
|
||||
}, {
|
||||
title: 'Scatter',
|
||||
path: 'scales/logarithmic/scatter.html'
|
||||
}]
|
||||
}, {
|
||||
title: 'Time scale',
|
||||
items: [{
|
||||
title: 'Line',
|
||||
path: 'scales/time/line.html'
|
||||
}, {
|
||||
title: 'Line (point data)',
|
||||
path: 'scales/time/line-point-data.html'
|
||||
}, {
|
||||
title: 'Time Series',
|
||||
path: 'scales/time/financial.html'
|
||||
}, {
|
||||
title: 'Combo',
|
||||
path: 'scales/time/combo.html'
|
||||
}]
|
||||
}, {
|
||||
title: 'Scale options',
|
||||
items: [{
|
||||
title: 'Grid lines display',
|
||||
path: 'scales/gridlines-display.html'
|
||||
}, {
|
||||
title: 'Grid lines style',
|
||||
path: 'scales/gridlines-style.html'
|
||||
}, {
|
||||
title: 'Multiline labels',
|
||||
path: 'scales/multiline-labels.html'
|
||||
}, {
|
||||
title: 'Filtering Labels',
|
||||
path: 'scales/filtering-labels.html'
|
||||
}, {
|
||||
title: 'Non numeric Y Axis',
|
||||
path: 'scales/non-numeric-y.html'
|
||||
}, {
|
||||
title: 'Toggle Scale Type',
|
||||
path: 'scales/toggle-scale-type.html'
|
||||
}]
|
||||
}, {
|
||||
title: 'Legend',
|
||||
items: [{
|
||||
title: 'Positioning',
|
||||
path: 'legend/positioning.html'
|
||||
}, {
|
||||
title: 'Point style',
|
||||
path: 'legend/point-style.html'
|
||||
}]
|
||||
}, {
|
||||
title: 'Tooltip',
|
||||
items: [{
|
||||
title: 'Positioning',
|
||||
path: 'tooltips/positioning.html'
|
||||
}, {
|
||||
title: 'Interactions',
|
||||
path: 'tooltips/interactions.html'
|
||||
}, {
|
||||
title: 'Callbacks',
|
||||
path: 'tooltips/callbacks.html'
|
||||
}, {
|
||||
title: 'Border',
|
||||
path: 'tooltips/border.html'
|
||||
}, {
|
||||
title: 'HTML tooltips (line)',
|
||||
path: 'tooltips/custom-line.html'
|
||||
}, {
|
||||
title: 'HTML tooltips (pie)',
|
||||
path: 'tooltips/custom-pie.html'
|
||||
}, {
|
||||
title: 'HTML tooltips (points)',
|
||||
path: 'tooltips/custom-points.html'
|
||||
}]
|
||||
}, {
|
||||
title: 'Scriptable',
|
||||
items: [{
|
||||
title: 'Bubble Chart',
|
||||
path: 'scriptable/bubble.html'
|
||||
}]
|
||||
}, {
|
||||
title: 'Advanced',
|
||||
items: [{
|
||||
title: 'Progress bar',
|
||||
path: 'advanced/progress-bar.html'
|
||||
}, {
|
||||
title: 'Data labelling (plugin)',
|
||||
path: 'advanced/data-labelling.html'
|
||||
}]
|
||||
}];
|
||||
|
||||
}(this));
|
||||
91
WebRoot/node_modules/chart.js/samples/scales/filtering-labels.html
generated
vendored
Normal file
91
WebRoot/node_modules/chart.js/samples/scales/filtering-labels.html
generated
vendored
Normal file
@ -0,0 +1,91 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Chart with xAxis Filtering</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 50 * (Math.random() > 0.5 ? 1 : 1)) + 50;
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
fill: false,
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
fill: false,
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - X-Axis Filter'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
ticks: {
|
||||
callback: function(dataLabel, index) {
|
||||
// Hide the label of every 2nd dataset. return null to hide the grid line too
|
||||
return index % 2 === 0 ? dataLabel : '';
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
beginAtZero: false
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
124
WebRoot/node_modules/chart.js/samples/scales/gridlines-display.html
generated
vendored
Normal file
124
WebRoot/node_modules/chart.js/samples/scales/gridlines-display.html
generated
vendored
Normal file
@ -0,0 +1,124 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Grid Lines Display Settings</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.chart-container {
|
||||
width: 500px;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container"></div>
|
||||
<script>
|
||||
function createConfig(gridlines, title) {
|
||||
return {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: window.chartColors.red,
|
||||
borderColor: window.chartColors.red,
|
||||
data: [10, 30, 39, 20, 25, 34, 0],
|
||||
fill: false,
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
fill: false,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
borderColor: window.chartColors.blue,
|
||||
data: [18, 33, 22, 19, 11, 39, 30],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: title
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: gridlines
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: gridlines,
|
||||
ticks: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
stepSize: 10
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
var container = document.querySelector('.container');
|
||||
|
||||
[{
|
||||
title: 'Display: true',
|
||||
gridLines: {
|
||||
display: true
|
||||
}
|
||||
}, {
|
||||
title: 'Display: false',
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
}, {
|
||||
title: 'Display: false, no border',
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
}
|
||||
}, {
|
||||
title: 'DrawOnChartArea: false',
|
||||
gridLines: {
|
||||
display: true,
|
||||
drawBorder: true,
|
||||
drawOnChartArea: false,
|
||||
}
|
||||
}, {
|
||||
title: 'DrawTicks: false',
|
||||
gridLines: {
|
||||
display: true,
|
||||
drawBorder: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
}
|
||||
}].forEach(function(details) {
|
||||
var div = document.createElement('div');
|
||||
div.classList.add('chart-container');
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
div.appendChild(canvas);
|
||||
container.appendChild(div);
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
var config = createConfig(details.gridLines, details.title);
|
||||
new Chart(ctx, config);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
69
WebRoot/node_modules/chart.js/samples/scales/gridlines-style.html
generated
vendored
Normal file
69
WebRoot/node_modules/chart.js/samples/scales/gridlines-style.html
generated
vendored
Normal file
@ -0,0 +1,69 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Grid Lines Style Settings</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: window.chartColors.red,
|
||||
borderColor: window.chartColors.red,
|
||||
data: [10, 30, 39, 20, 25, 34, -10],
|
||||
fill: false,
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
fill: false,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
borderColor: window.chartColors.blue,
|
||||
data: [18, 33, 22, 19, 11, 39, 30],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Grid Line Settings'
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
|
||||
},
|
||||
ticks: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
stepSize: 10
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
67
WebRoot/node_modules/chart.js/samples/scales/linear/min-max-suggested.html
generated
vendored
Normal file
67
WebRoot/node_modules/chart.js/samples/scales/linear/min-max-suggested.html
generated
vendored
Normal file
@ -0,0 +1,67 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Suggested Min/Max Settings</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: window.chartColors.red,
|
||||
borderColor: window.chartColors.red,
|
||||
data: [10, 30, 39, 20, 25, 34, -10],
|
||||
fill: false,
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
fill: false,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
borderColor: window.chartColors.blue,
|
||||
data: [18, 33, 22, 19, 11, 39, 30],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Min and Max Settings'
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
// the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
|
||||
suggestedMin: 10,
|
||||
|
||||
// the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
|
||||
suggestedMax: 50
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
64
WebRoot/node_modules/chart.js/samples/scales/linear/min-max.html
generated
vendored
Normal file
64
WebRoot/node_modules/chart.js/samples/scales/linear/min-max.html
generated
vendored
Normal file
@ -0,0 +1,64 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Min/Max Settings</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: window.chartColors.red,
|
||||
borderColor: window.chartColors.red,
|
||||
data: [10, 30, 50, 20, 25, 44, -10],
|
||||
fill: false,
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
fill: false,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
borderColor: window.chartColors.blue,
|
||||
data: [100, 33, 22, 19, 11, 49, 30],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Min and Max Settings'
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
min: 10,
|
||||
max: 50
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
175
WebRoot/node_modules/chart.js/samples/scales/linear/step-size.html
generated
vendored
Normal file
175
WebRoot/node_modules/chart.js/samples/scales/linear/step-size.html
generated
vendored
Normal file
@ -0,0 +1,175 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<button id="addDataset">Add Dataset</button>
|
||||
<button id="removeDataset">Remove Dataset</button>
|
||||
<button id="addData">Add Data</button>
|
||||
<button id="removeData">Remove Data</button>
|
||||
<script>
|
||||
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: window.chartColors.red,
|
||||
borderColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
fill: false,
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
fill: false,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
borderColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
hover: {
|
||||
mode: 'nearest',
|
||||
intersect: true
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
},
|
||||
ticks: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
|
||||
// forces step size to be 5 units
|
||||
stepSize: 5
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
var colorNames = Object.keys(window.chartColors);
|
||||
document.getElementById('addDataset').addEventListener('click', function() {
|
||||
var colorName = colorNames[config.data.datasets.length % colorNames.length];
|
||||
var newColor = window.chartColors[colorName];
|
||||
var newDataset = {
|
||||
label: 'Dataset ' + config.data.datasets.length,
|
||||
backgroundColor: newColor,
|
||||
borderColor: newColor,
|
||||
data: [],
|
||||
fill: false
|
||||
};
|
||||
|
||||
for (var index = 0; index < config.data.labels.length; ++index) {
|
||||
newDataset.data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
config.data.datasets.push(newDataset);
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
document.getElementById('addData').addEventListener('click', function() {
|
||||
if (config.data.datasets.length > 0) {
|
||||
var month = MONTHS[config.data.labels.length % MONTHS.length];
|
||||
config.data.labels.push(month);
|
||||
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.push(randomScalingFactor());
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('removeDataset').addEventListener('click', function() {
|
||||
config.data.datasets.splice(0, 1);
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
document.getElementById('removeData').addEventListener('click', function() {
|
||||
config.data.labels.splice(-1, 1); // remove the label first
|
||||
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.pop();
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
97
WebRoot/node_modules/chart.js/samples/scales/logarithmic/line.html
generated
vendored
Normal file
97
WebRoot/node_modules/chart.js/samples/scales/logarithmic/line.html
generated
vendored
Normal file
@ -0,0 +1,97 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Logarithmic Line Chart</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<script>
|
||||
var randomScalingFactor = function() {
|
||||
return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: window.chartColors.red,
|
||||
borderColor: window.chartColors.red,
|
||||
fill: false,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: window.chartColors.blue,
|
||||
borderColor: window.chartColors.blue,
|
||||
fill: false,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Logarithmic'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
type: 'logarithmic',
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
171
WebRoot/node_modules/chart.js/samples/scales/logarithmic/scatter.html
generated
vendored
Normal file
171
WebRoot/node_modules/chart.js/samples/scales/logarithmic/scatter.html
generated
vendored
Normal file
@ -0,0 +1,171 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Scatter Chart</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
var color = Chart.helpers.color;
|
||||
var scatterChartData = {
|
||||
datasets: [{
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
|
||||
label: 'V(node2)',
|
||||
data: [{
|
||||
x: 1,
|
||||
y: -1.711e-2,
|
||||
}, {
|
||||
x: 1.26,
|
||||
y: -2.708e-2,
|
||||
}, {
|
||||
x: 1.58,
|
||||
y: -4.285e-2,
|
||||
}, {
|
||||
x: 2.0,
|
||||
y: -6.772e-2,
|
||||
}, {
|
||||
x: 2.51,
|
||||
y: -1.068e-1,
|
||||
}, {
|
||||
x: 3.16,
|
||||
y: -1.681e-1,
|
||||
}, {
|
||||
x: 3.98,
|
||||
y: -2.635e-1,
|
||||
}, {
|
||||
x: 5.01,
|
||||
y: -4.106e-1,
|
||||
}, {
|
||||
x: 6.31,
|
||||
y: -6.339e-1,
|
||||
}, {
|
||||
x: 7.94,
|
||||
y: -9.659e-1,
|
||||
}, {
|
||||
x: 10.00,
|
||||
y: -1.445,
|
||||
}, {
|
||||
x: 12.6,
|
||||
y: -2.110,
|
||||
}, {
|
||||
x: 15.8,
|
||||
y: -2.992,
|
||||
}, {
|
||||
x: 20.0,
|
||||
y: -4.102,
|
||||
}, {
|
||||
x: 25.1,
|
||||
y: -5.429,
|
||||
}, {
|
||||
x: 31.6,
|
||||
y: -6.944,
|
||||
}, {
|
||||
x: 39.8,
|
||||
y: -8.607,
|
||||
}, {
|
||||
x: 50.1,
|
||||
y: -1.038e1,
|
||||
}, {
|
||||
x: 63.1,
|
||||
y: -1.223e1,
|
||||
}, {
|
||||
x: 79.4,
|
||||
y: -1.413e1,
|
||||
}, {
|
||||
x: 100.00,
|
||||
y: -1.607e1,
|
||||
}, {
|
||||
x: 126,
|
||||
y: -1.803e1,
|
||||
}, {
|
||||
x: 158,
|
||||
y: -2e1,
|
||||
}, {
|
||||
x: 200,
|
||||
y: -2.199e1,
|
||||
}, {
|
||||
x: 251,
|
||||
y: -2.398e1,
|
||||
}, {
|
||||
x: 316,
|
||||
y: -2.597e1,
|
||||
}, {
|
||||
x: 398,
|
||||
y: -2.797e1,
|
||||
}, {
|
||||
x: 501,
|
||||
y: -2.996e1,
|
||||
}, {
|
||||
x: 631,
|
||||
y: -3.196e1,
|
||||
}, {
|
||||
x: 794,
|
||||
y: -3.396e1,
|
||||
}, {
|
||||
x: 1000,
|
||||
y: -3.596e1,
|
||||
}]
|
||||
}]
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myScatter = Chart.Scatter(ctx, {
|
||||
data: scatterChartData,
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'logarithmic',
|
||||
position: 'bottom',
|
||||
ticks: {
|
||||
userCallback: function(tick) {
|
||||
var remain = tick / (Math.pow(10, Math.floor(Chart.helpers.log10(tick))));
|
||||
if (remain === 1 || remain === 2 || remain === 5) {
|
||||
return tick.toString() + 'Hz';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
},
|
||||
scaleLabel: {
|
||||
labelString: 'Frequency',
|
||||
display: true,
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
type: 'linear',
|
||||
ticks: {
|
||||
userCallback: function(tick) {
|
||||
return tick.toString() + 'dB';
|
||||
}
|
||||
},
|
||||
scaleLabel: {
|
||||
labelString: 'Voltage',
|
||||
display: true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
86
WebRoot/node_modules/chart.js/samples/scales/multiline-labels.html
generated
vendored
Normal file
86
WebRoot/node_modules/chart.js/samples/scales/multiline-labels.html
generated
vendored
Normal file
@ -0,0 +1,86 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:90%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [['June', '2015'], 'July', 'August', 'September', 'October', 'November', 'December', ['January', '2016'], 'February', 'March', 'April', 'May'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
fill: false,
|
||||
backgroundColor: window.chartColors.red,
|
||||
borderColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
fill: false,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
borderColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart with Multiline Labels'
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
72
WebRoot/node_modules/chart.js/samples/scales/non-numeric-y.html
generated
vendored
Normal file
72
WebRoot/node_modules/chart.js/samples/scales/non-numeric-y.html
generated
vendored
Normal file
@ -0,0 +1,72 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
xLabels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
yLabels: ['', 'Request Added', 'Request Viewed', 'Request Accepted', 'Request Solved', 'Solving Confirmed'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
data: ['', 'Request Added', 'Request Added', 'Request Added', 'Request Viewed', 'Request Viewed', 'Request Viewed'],
|
||||
fill: false,
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: window.chartColors.red
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart with Non Numeric Y Axis'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
type: 'category',
|
||||
position: 'left',
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Request State'
|
||||
},
|
||||
ticks: {
|
||||
reverse: true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
175
WebRoot/node_modules/chart.js/samples/scales/time/combo.html
generated
vendored
Normal file
175
WebRoot/node_modules/chart.js/samples/scales/time/combo.html
generated
vendored
Normal file
@ -0,0 +1,175 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart - Combo Time Scale</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
|
||||
<script src="../../../dist/Chart.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<button id="addDataset">Add Dataset</button>
|
||||
<button id="removeDataset">Remove Dataset</button>
|
||||
<button id="addData">Add Data</button>
|
||||
<button id="removeData">Remove Data</button>
|
||||
<script>
|
||||
var timeFormat = 'MM/DD/YYYY HH:mm';
|
||||
|
||||
function newDateString(days) {
|
||||
return moment().add(days, 'd').format(timeFormat);
|
||||
}
|
||||
|
||||
var color = Chart.helpers.color;
|
||||
var config = {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [
|
||||
newDateString(0),
|
||||
newDateString(1),
|
||||
newDateString(2),
|
||||
newDateString(3),
|
||||
newDateString(4),
|
||||
newDateString(5),
|
||||
newDateString(6)
|
||||
],
|
||||
datasets: [{
|
||||
type: 'bar',
|
||||
label: 'Dataset 1',
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
type: 'bar',
|
||||
label: 'Dataset 2',
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
type: 'line',
|
||||
label: 'Dataset 3',
|
||||
backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors.green,
|
||||
fill: false,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
text: 'Chart.js Combo Time Scale'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'time',
|
||||
display: true,
|
||||
time: {
|
||||
format: timeFormat,
|
||||
// round: 'day'
|
||||
}
|
||||
}],
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
var colorNames = Object.keys(window.chartColors);
|
||||
document.getElementById('addDataset').addEventListener('click', function() {
|
||||
var colorName = colorNames[config.data.datasets.length % colorNames.length];
|
||||
var newColor = window.chartColors[colorName];
|
||||
var newDataset = {
|
||||
label: 'Dataset ' + config.data.datasets.length,
|
||||
borderColor: newColor,
|
||||
backgroundColor: color(newColor).alpha(0.5).rgbString(),
|
||||
data: [],
|
||||
};
|
||||
|
||||
for (var index = 0; index < config.data.labels.length; ++index) {
|
||||
newDataset.data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
config.data.datasets.push(newDataset);
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
document.getElementById('addData').addEventListener('click', function() {
|
||||
if (config.data.datasets.length > 0) {
|
||||
config.data.labels.push(newDateString(config.data.labels.length));
|
||||
|
||||
for (var index = 0; index < config.data.datasets.length; ++index) {
|
||||
config.data.datasets[index].data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
window.myLine.update();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('removeDataset').addEventListener('click', function() {
|
||||
config.data.datasets.splice(0, 1);
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
document.getElementById('removeData').addEventListener('click', function() {
|
||||
config.data.labels.splice(-1, 1); // remove the label first
|
||||
|
||||
config.data.datasets.forEach(function(dataset, datasetIndex) {
|
||||
config.data.datasets[datasetIndex].data.pop();
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
102
WebRoot/node_modules/chart.js/samples/scales/time/financial.html
generated
vendored
Normal file
102
WebRoot/node_modules/chart.js/samples/scales/time/financial.html
generated
vendored
Normal file
@ -0,0 +1,102 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
|
||||
<script src="../../../dist/Chart.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:1000px">
|
||||
<canvas id="chart1"></canvas>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
Chart Type:
|
||||
<select id="type">
|
||||
<option value="line">Line</option>
|
||||
<option value="bar">Bar</option>
|
||||
</select>
|
||||
<button id="update">update</button>
|
||||
<script>
|
||||
function randomNumber(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
function randomBar(date, lastClose) {
|
||||
var open = randomNumber(lastClose * 0.95, lastClose * 1.05);
|
||||
var close = randomNumber(open * 0.95, open * 1.05);
|
||||
return {
|
||||
t: date.valueOf(),
|
||||
y: close
|
||||
};
|
||||
}
|
||||
|
||||
var dateFormat = 'MMMM DD YYYY';
|
||||
var date = moment('April 01 2017', dateFormat);
|
||||
var data = [randomBar(date, 30)];
|
||||
var labels = [date];
|
||||
while (data.length < 60) {
|
||||
date = date.clone().add(1, 'd');
|
||||
if (date.isoWeekday() <= 5) {
|
||||
data.push(randomBar(date, data[data.length - 1].y));
|
||||
labels.push(date);
|
||||
}
|
||||
}
|
||||
|
||||
var ctx = document.getElementById('chart1').getContext('2d');
|
||||
ctx.canvas.width = 1000;
|
||||
ctx.canvas.height = 300;
|
||||
var cfg = {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'CHRT - Chart.js Corporation',
|
||||
data: data,
|
||||
type: 'line',
|
||||
pointRadius: 0,
|
||||
fill: false,
|
||||
lineTension: 0,
|
||||
borderWidth: 2
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'time',
|
||||
distribution: 'series',
|
||||
ticks: {
|
||||
source: 'labels'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Closing price ($)'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
var chart = new Chart(ctx, cfg);
|
||||
|
||||
document.getElementById('update').addEventListener('click', function() {
|
||||
var type = document.getElementById('type').value;
|
||||
chart.config.data.datasets[0].type = type;
|
||||
chart.update();
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
160
WebRoot/node_modules/chart.js/samples/scales/time/line-point-data.html
generated
vendored
Normal file
160
WebRoot/node_modules/chart.js/samples/scales/time/line-point-data.html
generated
vendored
Normal file
@ -0,0 +1,160 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Time Scale Point Data</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
|
||||
<script src="../../../dist/Chart.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<button id="addData">Add Data</button>
|
||||
<button id="removeData">Remove Data</button>
|
||||
<script>
|
||||
function newDate(days) {
|
||||
return moment().add(days, 'd').toDate();
|
||||
}
|
||||
|
||||
function newDateString(days) {
|
||||
return moment().add(days, 'd').format();
|
||||
}
|
||||
|
||||
var color = Chart.helpers.color;
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: 'Dataset with string point data',
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors.red,
|
||||
fill: false,
|
||||
data: [{
|
||||
x: newDateString(0),
|
||||
y: randomScalingFactor()
|
||||
}, {
|
||||
x: newDateString(2),
|
||||
y: randomScalingFactor()
|
||||
}, {
|
||||
x: newDateString(4),
|
||||
y: randomScalingFactor()
|
||||
}, {
|
||||
x: newDateString(5),
|
||||
y: randomScalingFactor()
|
||||
}],
|
||||
}, {
|
||||
label: 'Dataset with date object point data',
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors.blue,
|
||||
fill: false,
|
||||
data: [{
|
||||
x: newDate(0),
|
||||
y: randomScalingFactor()
|
||||
}, {
|
||||
x: newDate(2),
|
||||
y: randomScalingFactor()
|
||||
}, {
|
||||
x: newDate(4),
|
||||
y: randomScalingFactor()
|
||||
}, {
|
||||
x: newDate(5),
|
||||
y: randomScalingFactor()
|
||||
}]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Time Point Data'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'time',
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Date'
|
||||
},
|
||||
ticks: {
|
||||
major: {
|
||||
fontStyle: 'bold',
|
||||
fontColor: '#FF0000'
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'value'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.forEach(function(dataObj) {
|
||||
dataObj.y = randomScalingFactor();
|
||||
});
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
// TODO : fix issue with addData
|
||||
// See https://github.com/chartjs/Chart.js/issues/5197
|
||||
// The Add Data button for this sample has no effect.
|
||||
// An error is logged in the console.
|
||||
document.getElementById('addData').addEventListener('click', function() {
|
||||
if (config.data.datasets.length > 0) {
|
||||
var numTicks = window.myLine.scales['x-axis-0'].ticksAsTimestamps.length;
|
||||
var lastTime = numTicks ? moment(window.myLine.scales['x-axis-0'].ticksAsTimestamps[numTicks - 1]) : moment();
|
||||
|
||||
var newTime = lastTime
|
||||
.clone()
|
||||
.add(1, 'day')
|
||||
.format('MM/DD/YYYY HH:mm');
|
||||
|
||||
for (var index = 0; index < config.data.datasets.length; ++index) {
|
||||
config.data.datasets[index].data.push({
|
||||
x: newTime,
|
||||
y: randomScalingFactor()
|
||||
});
|
||||
}
|
||||
|
||||
window.myLine.update();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('removeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.pop();
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
203
WebRoot/node_modules/chart.js/samples/scales/time/line.html
generated
vendored
Normal file
203
WebRoot/node_modules/chart.js/samples/scales/time/line.html
generated
vendored
Normal file
@ -0,0 +1,203 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
|
||||
<script src="../../../dist/Chart.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<button id="addDataset">Add Dataset</button>
|
||||
<button id="removeDataset">Remove Dataset</button>
|
||||
<button id="addData">Add Data</button>
|
||||
<button id="removeData">Remove Data</button>
|
||||
<script>
|
||||
var timeFormat = 'MM/DD/YYYY HH:mm';
|
||||
|
||||
function newDate(days) {
|
||||
return moment().add(days, 'd').toDate();
|
||||
}
|
||||
|
||||
function newDateString(days) {
|
||||
return moment().add(days, 'd').format(timeFormat);
|
||||
}
|
||||
|
||||
var color = Chart.helpers.color;
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [ // Date Objects
|
||||
newDate(0),
|
||||
newDate(1),
|
||||
newDate(2),
|
||||
newDate(3),
|
||||
newDate(4),
|
||||
newDate(5),
|
||||
newDate(6)
|
||||
],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors.red,
|
||||
fill: false,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors.blue,
|
||||
fill: false,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
label: 'Dataset with point data',
|
||||
backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors.green,
|
||||
fill: false,
|
||||
data: [{
|
||||
x: newDateString(0),
|
||||
y: randomScalingFactor()
|
||||
}, {
|
||||
x: newDateString(5),
|
||||
y: randomScalingFactor()
|
||||
}, {
|
||||
x: newDateString(7),
|
||||
y: randomScalingFactor()
|
||||
}, {
|
||||
x: newDateString(15),
|
||||
y: randomScalingFactor()
|
||||
}],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
text: 'Chart.js Time Scale'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'time',
|
||||
time: {
|
||||
format: timeFormat,
|
||||
// round: 'day'
|
||||
tooltipFormat: 'll HH:mm'
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Date'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'value'
|
||||
}
|
||||
}]
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.forEach(function(dataObj, j) {
|
||||
if (typeof dataObj === 'object') {
|
||||
dataObj.y = randomScalingFactor();
|
||||
} else {
|
||||
dataset.data[j] = randomScalingFactor();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
var colorNames = Object.keys(window.chartColors);
|
||||
document.getElementById('addDataset').addEventListener('click', function() {
|
||||
var colorName = colorNames[config.data.datasets.length % colorNames.length];
|
||||
var newColor = window.chartColors[colorName];
|
||||
var newDataset = {
|
||||
label: 'Dataset ' + config.data.datasets.length,
|
||||
borderColor: newColor,
|
||||
backgroundColor: color(newColor).alpha(0.5).rgbString(),
|
||||
data: [],
|
||||
};
|
||||
|
||||
for (var index = 0; index < config.data.labels.length; ++index) {
|
||||
newDataset.data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
config.data.datasets.push(newDataset);
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
document.getElementById('addData').addEventListener('click', function() {
|
||||
if (config.data.datasets.length > 0) {
|
||||
config.data.labels.push(newDate(config.data.labels.length));
|
||||
|
||||
for (var index = 0; index < config.data.datasets.length; ++index) {
|
||||
if (typeof config.data.datasets[index].data[0] === 'object') {
|
||||
config.data.datasets[index].data.push({
|
||||
x: newDate(config.data.datasets[index].data.length),
|
||||
y: randomScalingFactor(),
|
||||
});
|
||||
} else {
|
||||
config.data.datasets[index].data.push(randomScalingFactor());
|
||||
}
|
||||
}
|
||||
|
||||
window.myLine.update();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('removeDataset').addEventListener('click', function() {
|
||||
config.data.datasets.splice(0, 1);
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
document.getElementById('removeData').addEventListener('click', function() {
|
||||
config.data.labels.splice(-1, 1); // remove the label first
|
||||
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.pop();
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
99
WebRoot/node_modules/chart.js/samples/scales/toggle-scale-type.html
generated
vendored
Normal file
99
WebRoot/node_modules/chart.js/samples/scales/toggle-scale-type.html
generated
vendored
Normal file
@ -0,0 +1,99 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Toggle Scale Type</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<button id="toggleScale">Toggle Scale Type</button>
|
||||
<script>
|
||||
var randomScalingFactor = function() {
|
||||
return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
|
||||
};
|
||||
|
||||
var type = 'linear';
|
||||
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: window.chartColors.red,
|
||||
borderColor: window.chartColors.red,
|
||||
fill: false,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: window.chartColors.blue,
|
||||
borderColor: window.chartColors.blue,
|
||||
fill: false,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - ' + type
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
type: type
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
|
||||
document.getElementById('toggleScale').addEventListener('click', function() {
|
||||
type = type === 'linear' ? 'logarithmic' : 'linear';
|
||||
window.myLine.options.title.text = 'Chart.js Line Chart - ' + type;
|
||||
window.myLine.options.scales.yAxes[0] = {
|
||||
display: true,
|
||||
type: type
|
||||
};
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
131
WebRoot/node_modules/chart.js/samples/scriptable/bubble.html
generated
vendored
Normal file
131
WebRoot/node_modules/chart.js/samples/scriptable/bubble.html
generated
vendored
Normal file
@ -0,0 +1,131 @@
|
||||
<!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 > Bubble | Chart.js sample</title>
|
||||
<link rel="stylesheet" type="text/css" href="../style.css">
|
||||
<script src="../../dist/Chart.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 = 16;
|
||||
var MIN_XY = -150;
|
||||
var MAX_XY = 100;
|
||||
|
||||
var utils = Samples.utils;
|
||||
|
||||
utils.srand(110);
|
||||
|
||||
function colorize(opaque, context) {
|
||||
var value = context.dataset.data[context.dataIndex];
|
||||
var x = value.x / 100;
|
||||
var y = value.y / 100;
|
||||
var r = x < 0 && y < 0 ? 250 : x < 0 ? 150 : y < 0 ? 50 : 0;
|
||||
var g = x < 0 && y < 0 ? 0 : x < 0 ? 50 : y < 0 ? 150 : 250;
|
||||
var b = x < 0 && y < 0 ? 0 : x > 0 && y > 0 ? 250 : 150;
|
||||
var a = opaque ? 1 : 0.5 * value.v / 1000;
|
||||
|
||||
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
|
||||
}
|
||||
|
||||
function generateData() {
|
||||
var data = [];
|
||||
var i;
|
||||
|
||||
for (i = 0; i < DATA_COUNT; ++i) {
|
||||
data.push({
|
||||
x: utils.rand(MIN_XY, MAX_XY),
|
||||
y: utils.rand(MIN_XY, MAX_XY),
|
||||
v: utils.rand(0, 1000)
|
||||
});
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
var data = {
|
||||
datasets: [{
|
||||
data: generateData()
|
||||
}, {
|
||||
data: generateData()
|
||||
}]
|
||||
};
|
||||
|
||||
var options = {
|
||||
aspectRatio: 1,
|
||||
legend: false,
|
||||
tooltips: false,
|
||||
|
||||
elements: {
|
||||
point: {
|
||||
backgroundColor: colorize.bind(null, false),
|
||||
|
||||
borderColor: colorize.bind(null, true),
|
||||
|
||||
borderWidth: function(context) {
|
||||
return Math.min(Math.max(1, context.datasetIndex + 1), 8);
|
||||
},
|
||||
|
||||
hoverBackgroundColor: 'transparent',
|
||||
|
||||
hoverBorderColor: function(context) {
|
||||
return utils.color(context.datasetIndex);
|
||||
},
|
||||
|
||||
hoverBorderWidth: function(context) {
|
||||
var value = context.dataset.data[context.dataIndex];
|
||||
return Math.round(8 * value.v / 1000);
|
||||
},
|
||||
|
||||
radius: function(context) {
|
||||
var value = context.dataset.data[context.dataIndex];
|
||||
var size = context.chart.width;
|
||||
var base = Math.abs(value.v) / 1000;
|
||||
return (size / 24) * base;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new Chart('chart-0', {
|
||||
type: 'bubble',
|
||||
data: data,
|
||||
options: options
|
||||
});
|
||||
|
||||
// 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 addDataset() {
|
||||
chart.data.datasets.push({
|
||||
data: generateData()
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function removeDataset() {
|
||||
chart.data.datasets.shift();
|
||||
chart.update();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
192
WebRoot/node_modules/chart.js/samples/style.css
generated
vendored
Normal file
192
WebRoot/node_modules/chart.js/samples/style.css
generated
vendored
Normal file
@ -0,0 +1,192 @@
|
||||
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
|
||||
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');
|
||||
|
||||
body, html {
|
||||
color: #333538;
|
||||
font-family: 'Lato', sans-serif;
|
||||
line-height: 1.6;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #f27173;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #e25f5f;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
padding: 16px 32px;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 400px;
|
||||
padding: 16px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrapper.col-2 {
|
||||
display: inline-block;
|
||||
min-height: 256px;
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.wrapper.col-2 {
|
||||
width: 100%
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.toolbar > * {
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: #aaa;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
}
|
||||
|
||||
.btn .fa {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #888;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-chartjs { background-color: #f27173; }
|
||||
.btn-chartjs:hover { background-color: #e25f5f; }
|
||||
.btn-docs:hover { background-color: #2793db; }
|
||||
.btn-docs { background-color: #36A2EB; }
|
||||
.btn-docs:hover { background-color: #2793db; }
|
||||
.btn-gh { background-color: #444; }
|
||||
.btn-gh:hover { background-color: #333; }
|
||||
|
||||
.btn-on {
|
||||
border-style: inset;
|
||||
}
|
||||
|
||||
.chartjs-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chartjs-title::before {
|
||||
background-image: url(logo.svg);
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 40px;
|
||||
content: 'Chart.js | ';
|
||||
color: #f27173;
|
||||
font-weight: 600;
|
||||
padding-left: 48px;
|
||||
}
|
||||
|
||||
.chartjs-caption {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.chartjs-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.chartjs-links a {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 0.9rem;
|
||||
margin: 0.2rem;
|
||||
}
|
||||
|
||||
.chartjs-links .fa:before {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.samples-category {
|
||||
display: inline-block;
|
||||
margin-bottom: 32px;
|
||||
vertical-align: top;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.samples-category > .title {
|
||||
color: #aaa;
|
||||
font-weight: 300;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.samples-category:hover > .title {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.samples-category > .items {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.samples-entry {
|
||||
padding: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.samples-entry > .title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.samples-category { width: 33%; }
|
||||
}
|
||||
|
||||
@media (max-width: 512px) {
|
||||
.samples-category { width: 50%; }
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.chartjs-caption { font-size: 1.05rem; }
|
||||
.chartjs-title::before { content: ''; }
|
||||
.chartjs-links a { flex-direction: column; }
|
||||
.chartjs-links .fa { margin: 0 }
|
||||
.samples-category { width: 100%; }
|
||||
}
|
||||
|
||||
.analyser table {
|
||||
color: #333;
|
||||
font-size: 0.9rem;
|
||||
margin: 8px 0;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.analyser th {
|
||||
background-color: #f0f0f0;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.analyser td {
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
85
WebRoot/node_modules/chart.js/samples/tooltips/border.html
generated
vendored
Normal file
85
WebRoot/node_modules/chart.js/samples/tooltips/border.html
generated
vendored
Normal file
@ -0,0 +1,85 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Tooltip Border</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.chart-container {
|
||||
width: 70%;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
</div>
|
||||
<script>
|
||||
function createConfig() {
|
||||
return {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'Dataset',
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: window.chartColors.red,
|
||||
data: [10, 30, 46, 2, 8, 50, 0],
|
||||
fill: false,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Sample tooltip with border'
|
||||
},
|
||||
tooltips: {
|
||||
position: 'nearest',
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
yPadding: 10,
|
||||
xPadding: 10,
|
||||
caretSize: 8,
|
||||
backgroundColor: 'rgba(72, 241, 12, 1)',
|
||||
titleFontColor: window.chartColors.black,
|
||||
bodyFontColor: window.chartColors.black,
|
||||
borderColor: 'rgba(0,0,0,1)',
|
||||
borderWidth: 4
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
var container = document.querySelector('.container');
|
||||
var div = document.createElement('div');
|
||||
div.classList.add('chart-container');
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
div.appendChild(canvas);
|
||||
container.appendChild(div);
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
var config = createConfig();
|
||||
new Chart(ctx, config);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
107
WebRoot/node_modules/chart.js/samples/tooltips/callbacks.html
generated
vendored
Normal file
107
WebRoot/node_modules/chart.js/samples/tooltips/callbacks.html
generated
vendored
Normal file
@ -0,0 +1,107 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Tooltip Hooks</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
fill: false,
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
fill: false,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Custom Information in Tooltip'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
callbacks: {
|
||||
// Use the footer callback to display the sum of the items showing in the tooltip
|
||||
footer: function(tooltipItems, data) {
|
||||
var sum = 0;
|
||||
|
||||
tooltipItems.forEach(function(tooltipItem) {
|
||||
sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
|
||||
});
|
||||
return 'Sum: ' + sum;
|
||||
},
|
||||
},
|
||||
footerFontStyle: 'normal'
|
||||
},
|
||||
hover: {
|
||||
mode: 'index',
|
||||
intersect: true
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
show: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
show: true,
|
||||
labelString: 'Value'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
166
WebRoot/node_modules/chart.js/samples/tooltips/custom-line.html
generated
vendored
Normal file
166
WebRoot/node_modules/chart.js/samples/tooltips/custom-line.html
generated
vendored
Normal file
@ -0,0 +1,166 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart with Custom Tooltips</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
#chartjs-tooltip {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, .7);
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: all .1s ease;
|
||||
transition: all .1s ease;
|
||||
pointer-events: none;
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.chartjs-tooltip-key {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="canvas-holder1" style="width:75%;">
|
||||
<canvas id="chart"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
Chart.defaults.global.pointHitDetectionRadius = 1;
|
||||
|
||||
var customTooltips = function(tooltip) {
|
||||
// Tooltip Element
|
||||
var tooltipEl = document.getElementById('chartjs-tooltip');
|
||||
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement('div');
|
||||
tooltipEl.id = 'chartjs-tooltip';
|
||||
tooltipEl.innerHTML = '<table></table>';
|
||||
this._chart.canvas.parentNode.appendChild(tooltipEl);
|
||||
}
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
// Set caret Position
|
||||
tooltipEl.classList.remove('above', 'below', 'no-transform');
|
||||
if (tooltip.yAlign) {
|
||||
tooltipEl.classList.add(tooltip.yAlign);
|
||||
} else {
|
||||
tooltipEl.classList.add('no-transform');
|
||||
}
|
||||
|
||||
function getBody(bodyItem) {
|
||||
return bodyItem.lines;
|
||||
}
|
||||
|
||||
// Set Text
|
||||
if (tooltip.body) {
|
||||
var titleLines = tooltip.title || [];
|
||||
var bodyLines = tooltip.body.map(getBody);
|
||||
|
||||
var innerHtml = '<thead>';
|
||||
|
||||
titleLines.forEach(function(title) {
|
||||
innerHtml += '<tr><th>' + title + '</th></tr>';
|
||||
});
|
||||
innerHtml += '</thead><tbody>';
|
||||
|
||||
bodyLines.forEach(function(body, i) {
|
||||
var colors = tooltip.labelColors[i];
|
||||
var style = 'background:' + colors.backgroundColor;
|
||||
style += '; border-color:' + colors.borderColor;
|
||||
style += '; border-width: 2px';
|
||||
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
|
||||
innerHtml += '<tr><td>' + span + body + '</td></tr>';
|
||||
});
|
||||
innerHtml += '</tbody>';
|
||||
|
||||
var tableRoot = tooltipEl.querySelector('table');
|
||||
tableRoot.innerHTML = innerHtml;
|
||||
}
|
||||
|
||||
var positionY = this._chart.canvas.offsetTop;
|
||||
var positionX = this._chart.canvas.offsetLeft;
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
|
||||
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
|
||||
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
|
||||
tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
|
||||
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
|
||||
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
|
||||
};
|
||||
|
||||
var lineChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
borderColor: window.chartColors.red,
|
||||
pointBackgroundColor: window.chartColors.red,
|
||||
fill: false,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
borderColor: window.chartColors.blue,
|
||||
pointBackgroundColor: window.chartColors.blue,
|
||||
fill: false,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var chartEl = document.getElementById('chart');
|
||||
window.myLine = new Chart(chartEl, {
|
||||
type: 'line',
|
||||
data: lineChartData,
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Custom Tooltips'
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
mode: 'index',
|
||||
position: 'nearest',
|
||||
custom: customTooltips
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
146
WebRoot/node_modules/chart.js/samples/tooltips/custom-pie.html
generated
vendored
Normal file
146
WebRoot/node_modules/chart.js/samples/tooltips/custom-pie.html
generated
vendored
Normal file
@ -0,0 +1,146 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Pie Chart with Custom Tooltips</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
|
||||
<style>
|
||||
#canvas-holder {
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
#chartjs-tooltip {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, .7);
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: all .1s ease;
|
||||
transition: all .1s ease;
|
||||
pointer-events: none;
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.chartjs-tooltip-key {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="canvas-holder" style="width: 300px;">
|
||||
<canvas id="chart-area" width="300" height="300"></canvas>
|
||||
<div id="chartjs-tooltip">
|
||||
<table></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
Chart.defaults.global.tooltips.custom = function(tooltip) {
|
||||
// Tooltip Element
|
||||
var tooltipEl = document.getElementById('chartjs-tooltip');
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
// Set caret Position
|
||||
tooltipEl.classList.remove('above', 'below', 'no-transform');
|
||||
if (tooltip.yAlign) {
|
||||
tooltipEl.classList.add(tooltip.yAlign);
|
||||
} else {
|
||||
tooltipEl.classList.add('no-transform');
|
||||
}
|
||||
|
||||
function getBody(bodyItem) {
|
||||
return bodyItem.lines;
|
||||
}
|
||||
|
||||
// Set Text
|
||||
if (tooltip.body) {
|
||||
var titleLines = tooltip.title || [];
|
||||
var bodyLines = tooltip.body.map(getBody);
|
||||
|
||||
var innerHtml = '<thead>';
|
||||
|
||||
titleLines.forEach(function(title) {
|
||||
innerHtml += '<tr><th>' + title + '</th></tr>';
|
||||
});
|
||||
innerHtml += '</thead><tbody>';
|
||||
|
||||
bodyLines.forEach(function(body, i) {
|
||||
var colors = tooltip.labelColors[i];
|
||||
var style = 'background:' + colors.backgroundColor;
|
||||
style += '; border-color:' + colors.borderColor;
|
||||
style += '; border-width: 2px';
|
||||
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
|
||||
innerHtml += '<tr><td>' + span + body + '</td></tr>';
|
||||
});
|
||||
innerHtml += '</tbody>';
|
||||
|
||||
var tableRoot = tooltipEl.querySelector('table');
|
||||
tableRoot.innerHTML = innerHtml;
|
||||
}
|
||||
|
||||
var positionY = this._chart.canvas.offsetTop;
|
||||
var positionX = this._chart.canvas.offsetLeft;
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
|
||||
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
|
||||
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
|
||||
tooltipEl.style.fontSize = tooltip.bodyFontSize;
|
||||
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
|
||||
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'pie',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [300, 50, 100, 40, 10],
|
||||
backgroundColor: [
|
||||
window.chartColors.red,
|
||||
window.chartColors.orange,
|
||||
window.chartColors.yellow,
|
||||
window.chartColors.green,
|
||||
window.chartColors.blue,
|
||||
],
|
||||
}],
|
||||
labels: [
|
||||
'Red',
|
||||
'Orange',
|
||||
'Yellow',
|
||||
'Green',
|
||||
'Blue'
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('chart-area').getContext('2d');
|
||||
window.myPie = new Chart(ctx, config);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
128
WebRoot/node_modules/chart.js/samples/tooltips/custom-points.html
generated
vendored
Normal file
128
WebRoot/node_modules/chart.js/samples/tooltips/custom-points.html
generated
vendored
Normal file
@ -0,0 +1,128 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Custom Tooltips using Data Points</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
<style>
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.chartjs-tooltip {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, .7);
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: all .1s ease;
|
||||
transition: all .1s ease;
|
||||
pointer-events: none;
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.chartjs-tooltip-key {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="canvas-holder1" style="width:75%;">
|
||||
<canvas id="chart1"></canvas>
|
||||
<div class="chartjs-tooltip" id="tooltip-0"></div>
|
||||
<div class="chartjs-tooltip" id="tooltip-1"></div>
|
||||
</div>
|
||||
<script>
|
||||
var customTooltips = function(tooltip) {
|
||||
$(this._chart.canvas).css('cursor', 'pointer');
|
||||
|
||||
var positionY = this._chart.canvas.offsetTop;
|
||||
var positionX = this._chart.canvas.offsetLeft;
|
||||
|
||||
$('.chartjs-tooltip').css({
|
||||
opacity: 0,
|
||||
});
|
||||
|
||||
if (!tooltip || !tooltip.opacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (tooltip.dataPoints.length > 0) {
|
||||
tooltip.dataPoints.forEach(function(dataPoint) {
|
||||
var content = [dataPoint.xLabel, dataPoint.yLabel].join(': ');
|
||||
var $tooltip = $('#tooltip-' + dataPoint.datasetIndex);
|
||||
|
||||
$tooltip.html(content);
|
||||
$tooltip.css({
|
||||
opacity: 1,
|
||||
top: positionY + dataPoint.y + 'px',
|
||||
left: positionX + dataPoint.x + 'px',
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
var color = Chart.helpers.color;
|
||||
var lineChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
||||
borderColor: window.chartColors.red,
|
||||
pointBackgroundColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
||||
borderColor: window.chartColors.blue,
|
||||
pointBackgroundColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var chartEl = document.getElementById('chart1');
|
||||
new Chart(chartEl, {
|
||||
type: 'line',
|
||||
data: lineChartData,
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js - Custom Tooltips using Data Points'
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
custom: customTooltips
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
125
WebRoot/node_modules/chart.js/samples/tooltips/interactions.html
generated
vendored
Normal file
125
WebRoot/node_modules/chart.js/samples/tooltips/interactions.html
generated
vendored
Normal file
@ -0,0 +1,125 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Tooltip Interaction Modes</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.chart-container {
|
||||
width: 500px;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
</div>
|
||||
<script>
|
||||
function createConfig(mode, intersect) {
|
||||
return {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: window.chartColors.red,
|
||||
data: [10, 30, 46, 2, 8, 50, 0],
|
||||
fill: false,
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
data: [7, 49, 46, 13, 25, 30, 22],
|
||||
fill: false,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Mode: ' + mode + ', intersect = ' + intersect
|
||||
},
|
||||
tooltips: {
|
||||
mode: mode,
|
||||
intersect: intersect,
|
||||
},
|
||||
hover: {
|
||||
mode: mode,
|
||||
intersect: intersect
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
var container = document.querySelector('.container');
|
||||
|
||||
[{
|
||||
mode: 'index',
|
||||
intersect: true,
|
||||
}, {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
}, {
|
||||
mode: 'dataset',
|
||||
intersect: true,
|
||||
}, {
|
||||
mode: 'dataset',
|
||||
intersect: false,
|
||||
}, {
|
||||
mode: 'point',
|
||||
intersect: true,
|
||||
}, {
|
||||
mode: 'point',
|
||||
intersect: false,
|
||||
}, {
|
||||
mode: 'nearest',
|
||||
intersect: true,
|
||||
}, {
|
||||
mode: 'nearest',
|
||||
intersect: false,
|
||||
}, {
|
||||
mode: 'x',
|
||||
intersect: true
|
||||
}, {
|
||||
mode: 'x',
|
||||
intersect: false
|
||||
}, {
|
||||
mode: 'y',
|
||||
intersect: true
|
||||
}, {
|
||||
mode: 'y',
|
||||
intersect: false
|
||||
}].forEach(function(details) {
|
||||
var div = document.createElement('div');
|
||||
div.classList.add('chart-container');
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
div.appendChild(canvas);
|
||||
container.appendChild(div);
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
var config = createConfig(details.mode, details.intersect);
|
||||
new Chart(ctx, config);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
86
WebRoot/node_modules/chart.js/samples/tooltips/positioning.html
generated
vendored
Normal file
86
WebRoot/node_modules/chart.js/samples/tooltips/positioning.html
generated
vendored
Normal file
@ -0,0 +1,86 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Tooltip Interaction Modes</title>
|
||||
<script src="../../dist/Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.chart-container {
|
||||
width: 500px;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
</div>
|
||||
<script>
|
||||
function createConfig(position) {
|
||||
return {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: window.chartColors.red,
|
||||
data: [10, 30, 46, 2, 8, 50, 0],
|
||||
fill: false,
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
data: [7, 49, 46, 13, 25, 30, 22],
|
||||
fill: false,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Tooltip Position: ' + position
|
||||
},
|
||||
tooltips: {
|
||||
position: position,
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
var container = document.querySelector('.container');
|
||||
|
||||
['average', 'nearest'].forEach(function(position) {
|
||||
var div = document.createElement('div');
|
||||
div.classList.add('chart-container');
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
div.appendChild(canvas);
|
||||
container.appendChild(div);
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
var config = createConfig(position);
|
||||
new Chart(ctx, config);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
147
WebRoot/node_modules/chart.js/samples/utils.js
generated
vendored
Normal file
147
WebRoot/node_modules/chart.js/samples/utils.js
generated
vendored
Normal file
@ -0,0 +1,147 @@
|
||||
'use strict';
|
||||
|
||||
window.chartColors = {
|
||||
red: 'rgb(255, 99, 132)',
|
||||
orange: 'rgb(255, 159, 64)',
|
||||
yellow: 'rgb(255, 205, 86)',
|
||||
green: 'rgb(75, 192, 192)',
|
||||
blue: 'rgb(54, 162, 235)',
|
||||
purple: 'rgb(153, 102, 255)',
|
||||
grey: 'rgb(201, 203, 207)'
|
||||
};
|
||||
|
||||
(function(global) {
|
||||
var Months = [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December'
|
||||
];
|
||||
|
||||
var COLORS = [
|
||||
'#4dc9f6',
|
||||
'#f67019',
|
||||
'#f53794',
|
||||
'#537bc4',
|
||||
'#acc236',
|
||||
'#166a8f',
|
||||
'#00a950',
|
||||
'#58595b',
|
||||
'#8549ba'
|
||||
];
|
||||
|
||||
var Samples = global.Samples || (global.Samples = {});
|
||||
var Color = global.Color;
|
||||
|
||||
Samples.utils = {
|
||||
// Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
|
||||
srand: function(seed) {
|
||||
this._seed = seed;
|
||||
},
|
||||
|
||||
rand: function(min, max) {
|
||||
var seed = this._seed;
|
||||
min = min === undefined ? 0 : min;
|
||||
max = max === undefined ? 1 : max;
|
||||
this._seed = (seed * 9301 + 49297) % 233280;
|
||||
return min + (this._seed / 233280) * (max - min);
|
||||
},
|
||||
|
||||
numbers: function(config) {
|
||||
var cfg = config || {};
|
||||
var min = cfg.min || 0;
|
||||
var max = cfg.max || 1;
|
||||
var from = cfg.from || [];
|
||||
var count = cfg.count || 8;
|
||||
var decimals = cfg.decimals || 8;
|
||||
var continuity = cfg.continuity || 1;
|
||||
var dfactor = Math.pow(10, decimals) || 0;
|
||||
var data = [];
|
||||
var i, value;
|
||||
|
||||
for (i = 0; i < count; ++i) {
|
||||
value = (from[i] || 0) + this.rand(min, max);
|
||||
if (this.rand() <= continuity) {
|
||||
data.push(Math.round(dfactor * value) / dfactor);
|
||||
} else {
|
||||
data.push(null);
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
},
|
||||
|
||||
labels: function(config) {
|
||||
var cfg = config || {};
|
||||
var min = cfg.min || 0;
|
||||
var max = cfg.max || 100;
|
||||
var count = cfg.count || 8;
|
||||
var step = (max - min) / count;
|
||||
var decimals = cfg.decimals || 8;
|
||||
var dfactor = Math.pow(10, decimals) || 0;
|
||||
var prefix = cfg.prefix || '';
|
||||
var values = [];
|
||||
var i;
|
||||
|
||||
for (i = min; i < max; i += step) {
|
||||
values.push(prefix + Math.round(dfactor * i) / dfactor);
|
||||
}
|
||||
|
||||
return values;
|
||||
},
|
||||
|
||||
months: function(config) {
|
||||
var cfg = config || {};
|
||||
var count = cfg.count || 12;
|
||||
var section = cfg.section;
|
||||
var values = [];
|
||||
var i, value;
|
||||
|
||||
for (i = 0; i < count; ++i) {
|
||||
value = Months[Math.ceil(i) % 12];
|
||||
values.push(value.substring(0, section));
|
||||
}
|
||||
|
||||
return values;
|
||||
},
|
||||
|
||||
color: function(index) {
|
||||
return COLORS[index % COLORS.length];
|
||||
},
|
||||
|
||||
transparentize: function(color, opacity) {
|
||||
var alpha = opacity === undefined ? 0.5 : 1 - opacity;
|
||||
return Color(color).alpha(alpha).rgbString();
|
||||
}
|
||||
};
|
||||
|
||||
// DEPRECATED
|
||||
window.randomScalingFactor = function() {
|
||||
return Math.round(Samples.utils.rand(-100, 100));
|
||||
};
|
||||
|
||||
// INITIALIZATION
|
||||
|
||||
Samples.utils.srand(Date.now());
|
||||
|
||||
// Google Analytics
|
||||
/* eslint-disable */
|
||||
if (document.location.hostname.match(/^(www\.)?chartjs\.org$/)) {
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-28909194-3', 'auto');
|
||||
ga('send', 'pageview');
|
||||
}
|
||||
/* eslint-enable */
|
||||
|
||||
}(this));
|
||||
Reference in New Issue
Block a user