mirror of
https://github.com/Gnucash/gnucash.git
synced 2025-02-25 18:55:30 -06:00
[CHARTJS] add Chart.js v2.8.0
Released March 2019 This aims to replace jqplot which is unsupported.
This commit is contained in:
Christopher Lam
parent
e9506ec4ff
commit
847c531fdd
@ -1,9 +1,10 @@
|
||||
add_subdirectory(libc)
|
||||
add_subdirectory(goffice)
|
||||
add_subdirectory(chartjs)
|
||||
add_subdirectory(guile-json)
|
||||
if (WITH_GNUCASH)
|
||||
add_subdirectory(gwengui-gtk3)
|
||||
endif (WITH_GNUCASH)
|
||||
|
||||
set_local_dist(borrowed_DIST_local jenny/jenny.c CMakeLists.txt README)
|
||||
set(borrowed_DIST ${borrowed_DIST_local} ${libc_DIST} ${guile-json_DIST} ${goffice_DIST} ${gwengui_gtk3_DIST} PARENT_SCOPE)
|
||||
set(borrowed_DIST ${borrowed_DIST_local} ${chartjs_DIST} ${libc_DIST} ${guile-json_DIST} ${goffice_DIST} ${gwengui_gtk3_DIST} PARENT_SCOPE)
|
||||
|
||||
9
borrowed/chartjs/CMakeLists.txt
Normal file
9
borrowed/chartjs/CMakeLists.txt
Normal file
@ -0,0 +1,9 @@
|
||||
|
||||
set(gncchartjs_DATA
|
||||
Chart.bundle.min.js
|
||||
Chart.bundle.js
|
||||
)
|
||||
|
||||
install (FILES ${gncchartjs_DATA} DESTINATION ${CMAKE_INSTALL_DATADIR}/gnucash/chartjs)
|
||||
|
||||
set_dist_list(chartjs_DIST CMakeLists.txt ${chartjs_DATA})
|
||||
19288
borrowed/chartjs/Chart.bundle.js
Normal file
19288
borrowed/chartjs/Chart.bundle.js
Normal file
File diff suppressed because it is too large
Load Diff
7
borrowed/chartjs/Chart.bundle.min.js
vendored
Normal file
7
borrowed/chartjs/Chart.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
47
borrowed/chartjs/Chart.css
Normal file
47
borrowed/chartjs/Chart.css
Normal file
@ -0,0 +1,47 @@
|
||||
/*
|
||||
* DOM element rendering detection
|
||||
* https://davidwalsh.name/detect-node-insertion
|
||||
*/
|
||||
@keyframes chartjs-render-animation {
|
||||
from { opacity: 0.99; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.chartjs-render-monitor {
|
||||
animation: chartjs-render-animation 0.001s;
|
||||
}
|
||||
|
||||
/*
|
||||
* DOM element resizing detection
|
||||
* https://github.com/marcj/css-element-queries
|
||||
*/
|
||||
.chartjs-size-monitor,
|
||||
.chartjs-size-monitor-expand,
|
||||
.chartjs-size-monitor-shrink {
|
||||
position: absolute;
|
||||
direction: ltr;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.chartjs-size-monitor-expand > div {
|
||||
position: absolute;
|
||||
width: 1000000px;
|
||||
height: 1000000px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.chartjs-size-monitor-shrink > div {
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
14680
borrowed/chartjs/Chart.js
vendored
Normal file
14680
borrowed/chartjs/Chart.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
borrowed/chartjs/Chart.min.css
vendored
Normal file
1
borrowed/chartjs/Chart.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}
|
||||
7
borrowed/chartjs/Chart.min.js
vendored
Normal file
7
borrowed/chartjs/Chart.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
9
borrowed/chartjs/LICENSE.md
Normal file
9
borrowed/chartjs/LICENSE.md
Normal file
@ -0,0 +1,9 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2018 Chart.js Contributors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@ -0,0 +1,20 @@
|
||||
.content {
|
||||
max-width: 640px;
|
||||
margin: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.note {
|
||||
font-family: sans-serif;
|
||||
color: #5050a0;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f5f5ff;
|
||||
border: 1px solid #d0d0fa;
|
||||
border-radius: 4px;
|
||||
padding: 0.05rem 0.25rem;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
<!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">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
|
||||
<title>Scriptable > Bubble | Chart.js sample</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../dist/Chart.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="./content-security-policy.css">
|
||||
<script src="../../Chart.min.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<script src="content-security-policy.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="note">
|
||||
In order to support a strict content security policy (<code>default-src 'self'</code>),
|
||||
this page manually loads <code>Chart.min.css</code> and turns off the automatic style
|
||||
injection by setting <code>Chart.platform.disableCSSInjection = true;</code>.
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<canvas id="chart-0"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
54
borrowed/chartjs/samples/advanced/content-security-policy.js
Normal file
54
borrowed/chartjs/samples/advanced/content-security-policy.js
Normal file
@ -0,0 +1,54 @@
|
||||
var utils = Samples.utils;
|
||||
|
||||
// CSP: disable automatic style injection
|
||||
Chart.platform.disableCSSInjection = true;
|
||||
|
||||
utils.srand(110);
|
||||
|
||||
function generateData() {
|
||||
var DATA_COUNT = 16;
|
||||
var MIN_XY = -150;
|
||||
var MAX_XY = 100;
|
||||
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;
|
||||
}
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
new Chart('chart-0', {
|
||||
type: 'bubble',
|
||||
data: {
|
||||
datasets: [{
|
||||
backgroundColor: utils.color(0),
|
||||
data: generateData()
|
||||
}, {
|
||||
backgroundColor: utils.color(1),
|
||||
data: generateData()
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
aspectRatio: 1,
|
||||
legend: false,
|
||||
tooltip: false,
|
||||
elements: {
|
||||
point: {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
131
borrowed/chartjs/samples/advanced/data-labelling.html
Normal file
131
borrowed/chartjs/samples/advanced/data-labelling.html
Normal file
@ -0,0 +1,131 @@
|
||||
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Labelling Data Points</title>
|
||||
<script src="../../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>
|
||||
96
borrowed/chartjs/samples/advanced/progress-bar.html
Normal file
96
borrowed/chartjs/samples/advanced/progress-bar.html
Normal file
@ -0,0 +1,96 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title> Animation Callbacks </title>
|
||||
<script src="../../Chart.min.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: [{
|
||||
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: {
|
||||
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
borrowed/chartjs/samples/charts/area/analyser.js
Normal file
66
borrowed/chartjs/samples/charts/area/analyser.js
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
borrowed/chartjs/samples/charts/area/line-boundaries.html
Normal file
121
borrowed/chartjs/samples/charts/area/line-boundaries.html
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="../../../Chart.min.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
borrowed/chartjs/samples/charts/area/line-datasets.html
Normal file
160
borrowed/chartjs/samples/charts/area/line-datasets.html
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="../../../Chart.min.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<script src="analyser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="wrapper">
|
||||
<canvas id="chart-0"></canvas>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<button onclick="togglePropagate(this)">Propagate</button>
|
||||
<button onclick="toggleSmooth(this)">Smooth</button>
|
||||
<button onclick="randomize(this)">Randomize</button>
|
||||
</div>
|
||||
<div id="chart-analyser" class="analyser"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var presets = window.chartColors;
|
||||
var utils = Samples.utils;
|
||||
var inputs = {
|
||||
min: 20,
|
||||
max: 80,
|
||||
count: 8,
|
||||
decimals: 2,
|
||||
continuity: 1
|
||||
};
|
||||
|
||||
function generateData() {
|
||||
return utils.numbers(inputs);
|
||||
}
|
||||
|
||||
function generateLabels() {
|
||||
return utils.months({count: inputs.count});
|
||||
}
|
||||
|
||||
utils.srand(42);
|
||||
|
||||
var data = {
|
||||
labels: generateLabels(),
|
||||
datasets: [{
|
||||
backgroundColor: utils.transparentize(presets.red),
|
||||
borderColor: presets.red,
|
||||
data: generateData(),
|
||||
hidden: true,
|
||||
label: 'D0'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.orange),
|
||||
borderColor: presets.orange,
|
||||
data: generateData(),
|
||||
label: 'D1',
|
||||
fill: '-1'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.yellow),
|
||||
borderColor: presets.yellow,
|
||||
data: generateData(),
|
||||
hidden: true,
|
||||
label: 'D2',
|
||||
fill: 1
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.green),
|
||||
borderColor: presets.green,
|
||||
data: generateData(),
|
||||
label: 'D3',
|
||||
fill: '-1'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.blue),
|
||||
borderColor: presets.blue,
|
||||
data: generateData(),
|
||||
label: 'D4',
|
||||
fill: '-1'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.grey),
|
||||
borderColor: presets.grey,
|
||||
data: generateData(),
|
||||
label: 'D5',
|
||||
fill: '+2'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.purple),
|
||||
borderColor: presets.purple,
|
||||
data: generateData(),
|
||||
label: 'D6',
|
||||
fill: false
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.red),
|
||||
borderColor: presets.red,
|
||||
data: generateData(),
|
||||
label: 'D7',
|
||||
fill: 8
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.orange),
|
||||
borderColor: presets.orange,
|
||||
data: generateData(),
|
||||
hidden: true,
|
||||
label: 'D8',
|
||||
fill: 'end'
|
||||
}]
|
||||
};
|
||||
|
||||
var options = {
|
||||
maintainAspectRatio: false,
|
||||
spanGaps: false,
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.000001
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
stacked: true
|
||||
}]
|
||||
},
|
||||
plugins: {
|
||||
filler: {
|
||||
propagate: false
|
||||
},
|
||||
'samples-filler-analyser': {
|
||||
target: 'chart-analyser'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new Chart('chart-0', {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: options
|
||||
});
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function togglePropagate(btn) {
|
||||
var value = btn.classList.toggle('btn-on');
|
||||
chart.options.plugins.filler.propagate = value;
|
||||
chart.update();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function toggleSmooth(btn) {
|
||||
var value = btn.classList.toggle('btn-on');
|
||||
chart.options.elements.line.tension = value ? 0.4 : 0.000001;
|
||||
chart.update();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function randomize() {
|
||||
chart.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = generateData();
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
183
borrowed/chartjs/samples/charts/area/line-stacked.html
Normal file
183
borrowed/chartjs/samples/charts/area/line-stacked.html
Normal file
@ -0,0 +1,183 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/charts/area/radar.html
Normal file
139
borrowed/chartjs/samples/charts/area/radar.html
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="../../../Chart.min.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
borrowed/chartjs/samples/charts/bar/horizontal.html
Normal file
149
borrowed/chartjs/samples/charts/bar/horizontal.html
Normal file
@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Horizontal Bar Chart</title>
|
||||
<script src="../../../Chart.min.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 + 1),
|
||||
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.pop();
|
||||
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
borrowed/chartjs/samples/charts/bar/multi-axis.html
Normal file
108
borrowed/chartjs/samples/charts/bar/multi-axis.html
Normal file
@ -0,0 +1,108 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Bar Chart Multi Axis</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/charts/bar/stacked-group.html
Normal file
105
borrowed/chartjs/samples/charts/bar/stacked-group.html
Normal file
@ -0,0 +1,105 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Stacked Bar Chart with Groups</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/charts/bar/stacked.html
Normal file
102
borrowed/chartjs/samples/charts/bar/stacked.html
Normal file
@ -0,0 +1,102 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Stacked Bar Chart</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/charts/bar/vertical.html
Normal file
144
borrowed/chartjs/samples/charts/bar/vertical.html
Normal file
@ -0,0 +1,144 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Bar Chart</title>
|
||||
<script src="../../../Chart.min.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 + 1),
|
||||
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.pop();
|
||||
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
borrowed/chartjs/samples/charts/bubble.html
Normal file
191
borrowed/chartjs/samples/charts/bubble.html
Normal file
@ -0,0 +1,191 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Bubble Chart</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/charts/combo-bar-line.html
Normal file
101
borrowed/chartjs/samples/charts/combo-bar-line.html
Normal file
@ -0,0 +1,101 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Combo Bar-Line Chart</title>
|
||||
<script src="../../Chart.min.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>
|
||||
157
borrowed/chartjs/samples/charts/doughnut.html
Normal file
157
borrowed/chartjs/samples/charts/doughnut.html
Normal file
@ -0,0 +1,157 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Doughnut Chart</title>
|
||||
<script src="../../Chart.min.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>
|
||||
<button id="changeCircleSize">Semi/Full Circle</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();
|
||||
});
|
||||
|
||||
document.getElementById('changeCircleSize').addEventListener('click', function() {
|
||||
if (window.myDoughnut.options.circumference === Math.PI) {
|
||||
window.myDoughnut.options.circumference = 2 * Math.PI;
|
||||
window.myDoughnut.options.rotation = -Math.PI / 2;
|
||||
} else {
|
||||
window.myDoughnut.options.circumference = Math.PI;
|
||||
window.myDoughnut.options.rotation = -Math.PI;
|
||||
}
|
||||
|
||||
window.myDoughnut.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
163
borrowed/chartjs/samples/charts/line/basic.html
Normal file
163
borrowed/chartjs/samples/charts/line/basic.html
Normal file
@ -0,0 +1,163 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/charts/line/interpolation-modes.html
Normal file
103
borrowed/chartjs/samples/charts/line/interpolation-modes.html
Normal file
@ -0,0 +1,103 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart - Cubic interpolation mode</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/charts/line/line-styles.html
Normal file
111
borrowed/chartjs/samples/charts/line/line-styles.html
Normal file
@ -0,0 +1,111 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Styles</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/charts/line/multi-axis.html
Normal file
104
borrowed/chartjs/samples/charts/line/multi-axis.html
Normal file
@ -0,0 +1,104 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart Multiple Axes</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/charts/line/point-sizes.html
Normal file
129
borrowed/chartjs/samples/charts/line/point-sizes.html
Normal file
@ -0,0 +1,129 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Different Point Sizes</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/charts/line/point-styles.html
Normal file
96
borrowed/chartjs/samples/charts/line/point-styles.html
Normal file
@ -0,0 +1,96 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/charts/line/skip-points.html
Normal file
95
borrowed/chartjs/samples/charts/line/skip-points.html
Normal file
@ -0,0 +1,95 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../../../Chart.min.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>
|
||||
107
borrowed/chartjs/samples/charts/line/stepped.html
Normal file
107
borrowed/chartjs/samples/charts/line/stepped.html
Normal file
@ -0,0 +1,107 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Stepped Line Chart</title>
|
||||
<script src="../../../Chart.min.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
|
||||
}, {
|
||||
steppedLine: 'middle',
|
||||
label: 'Step Middle Interpolation',
|
||||
color: window.chartColors.blue
|
||||
}];
|
||||
|
||||
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
borrowed/chartjs/samples/charts/pie.html
Normal file
97
borrowed/chartjs/samples/charts/pie.html
Normal file
@ -0,0 +1,97 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Pie Chart</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/charts/polar-area.html
Normal file
117
borrowed/chartjs/samples/charts/polar-area.html
Normal file
@ -0,0 +1,117 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Polar Area Chart</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/charts/radar-skip-points.html
Normal file
109
borrowed/chartjs/samples/charts/radar-skip-points.html
Normal file
@ -0,0 +1,109 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Radar Chart</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/charts/radar.html
Normal file
146
borrowed/chartjs/samples/charts/radar.html
Normal file
@ -0,0 +1,146 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Radar Chart</title>
|
||||
<script src="../../Chart.min.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(),
|
||||
pointBackgroundColor: 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>
|
||||
76
borrowed/chartjs/samples/charts/scatter/basic.html
Normal file
76
borrowed/chartjs/samples/charts/scatter/basic.html
Normal file
@ -0,0 +1,76 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Scatter Chart</title>
|
||||
<script src="../../../Chart.min.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;
|
||||
function generateData() {
|
||||
var data = [];
|
||||
for (var i = 0; i < 7; i++) {
|
||||
data.push({
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor()
|
||||
});
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
var scatterChartData = {
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
||||
data: generateData()
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
||||
data: generateData()
|
||||
}]
|
||||
};
|
||||
|
||||
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
borrowed/chartjs/samples/charts/scatter/multi-axis.html
Normal file
139
borrowed/chartjs/samples/charts/scatter/multi-axis.html
Normal file
@ -0,0 +1,139 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Scatter Chart Multi Axis</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/favicon.ico
Normal file
BIN
borrowed/chartjs/samples/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
58
borrowed/chartjs/samples/index.html
Normal file
58
borrowed/chartjs/samples/index.html
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="https://www.chartjs.org">Website</a>
|
||||
<a class="btn btn-docs" href="https://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>
|
||||
124
borrowed/chartjs/samples/legend/callbacks.html
Normal file
124
borrowed/chartjs/samples/legend/callbacks.html
Normal file
@ -0,0 +1,124 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Legend Callbacks</title>
|
||||
<script src="../../Chart.min.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
#log {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #EEE;
|
||||
float: right;
|
||||
width: 20%;
|
||||
padding: 8px;
|
||||
overflow-y: auto;
|
||||
white-space: pre;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
var logEntry = 1;
|
||||
var logElement = document.getElementById('log');
|
||||
var utils = Samples.utils;
|
||||
var inputs = {
|
||||
min: 20,
|
||||
max: 80,
|
||||
count: 8,
|
||||
decimals: 2,
|
||||
continuity: 1
|
||||
};
|
||||
var config;
|
||||
|
||||
function log(text) {
|
||||
logElement.innerText += logEntry + '. ' + text + '\n';
|
||||
logElement.scrollTop = logElement.scrollHeight;
|
||||
logEntry++;
|
||||
}
|
||||
|
||||
function generateData() {
|
||||
return utils.numbers(inputs);
|
||||
}
|
||||
function generateLabels() {
|
||||
return utils.months({count: inputs.count});
|
||||
}
|
||||
|
||||
utils.srand(42);
|
||||
|
||||
config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: generateLabels(),
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: utils.color(0),
|
||||
borderColor: utils.color(0),
|
||||
data: generateData(),
|
||||
fill: false,
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
fill: false,
|
||||
backgroundColor: utils.color(1),
|
||||
borderColor: utils.color(1),
|
||||
data: generateData(),
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
onHover: function(event, legendItem) {
|
||||
log('onHover: ' + legendItem.text);
|
||||
},
|
||||
onLeave: function(event, legendItem) {
|
||||
log('onLeave: ' + legendItem.text);
|
||||
},
|
||||
onClick: function(event, legendItem) {
|
||||
log('onClick:' + legendItem.text);
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
new Chart(document.getElementById('canvas'), config);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
116
borrowed/chartjs/samples/legend/point-style.html
Normal file
116
borrowed/chartjs/samples/legend/point-style.html
Normal file
@ -0,0 +1,116 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Legend Point Style</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/legend/positioning.html
Normal file
121
borrowed/chartjs/samples/legend/positioning.html
Normal file
@ -0,0 +1,121 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Legend Positions</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/logo.svg
Normal file
1
borrowed/chartjs/samples/logo.svg
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 |
211
borrowed/chartjs/samples/samples.js
Normal file
211
borrowed/chartjs/samples/samples.js
Normal file
@ -0,0 +1,211 @@
|
||||
(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: 'Callbacks',
|
||||
path: 'legend/callbacks.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: 'Bar Chart',
|
||||
path: 'scriptable/bar.html'
|
||||
}, {
|
||||
title: 'Bubble Chart',
|
||||
path: 'scriptable/bubble.html'
|
||||
}, {
|
||||
title: 'Pie Chart',
|
||||
path: 'scriptable/pie.html'
|
||||
}, {
|
||||
title: 'Line Chart',
|
||||
path: 'scriptable/line.html'
|
||||
}, {
|
||||
title: 'Polar Area Chart',
|
||||
path: 'scriptable/polar.html'
|
||||
}, {
|
||||
title: 'Radar Chart',
|
||||
path: 'scriptable/radar.html'
|
||||
}]
|
||||
}, {
|
||||
title: 'Advanced',
|
||||
items: [{
|
||||
title: 'Progress bar',
|
||||
path: 'advanced/progress-bar.html'
|
||||
}, {
|
||||
title: 'Content Security Policy',
|
||||
path: 'advanced/content-security-policy.html'
|
||||
}]
|
||||
}];
|
||||
|
||||
}(this));
|
||||
91
borrowed/chartjs/samples/scales/filtering-labels.html
Normal file
91
borrowed/chartjs/samples/scales/filtering-labels.html
Normal file
@ -0,0 +1,91 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Chart with xAxis Filtering</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/scales/gridlines-display.html
Normal file
124
borrowed/chartjs/samples/scales/gridlines-display.html
Normal file
@ -0,0 +1,124 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Grid Lines Display Settings</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/scales/gridlines-style.html
Normal file
69
borrowed/chartjs/samples/scales/gridlines-style.html
Normal file
@ -0,0 +1,69 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Grid Lines Style Settings</title>
|
||||
<script src="../../Chart.min.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>
|
||||
@ -0,0 +1,67 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Suggested Min/Max Settings</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/scales/linear/min-max.html
Normal file
64
borrowed/chartjs/samples/scales/linear/min-max.html
Normal file
@ -0,0 +1,64 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Min/Max Settings</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/scales/linear/step-size.html
Normal file
175
borrowed/chartjs/samples/scales/linear/step-size.html
Normal file
@ -0,0 +1,175 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/scales/logarithmic/line.html
Normal file
97
borrowed/chartjs/samples/scales/logarithmic/line.html
Normal file
@ -0,0 +1,97 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Logarithmic Line Chart</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/scales/logarithmic/scatter.html
Normal file
171
borrowed/chartjs/samples/scales/logarithmic/scatter.html
Normal file
@ -0,0 +1,171 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Scatter Chart</title>
|
||||
<script src="../../../Chart.min.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
borrowed/chartjs/samples/scales/multiline-labels.html
Normal file
86
borrowed/chartjs/samples/scales/multiline-labels.html
Normal file
@ -0,0 +1,86 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/scales/non-numeric-y.html
Normal file
72
borrowed/chartjs/samples/scales/non-numeric-y.html
Normal file
@ -0,0 +1,72 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/scales/time/combo.html
Normal file
175
borrowed/chartjs/samples/scales/time/combo.html
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="../../../Chart.min.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>
|
||||
119
borrowed/chartjs/samples/scales/time/financial.html
Normal file
119
borrowed/chartjs/samples/scales/time/financial.html
Normal file
@ -0,0 +1,119 @@
|
||||
<!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="../../../Chart.min.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).toFixed(2);
|
||||
var close = randomNumber(open * 0.95, open * 1.05).toFixed(2);
|
||||
return {
|
||||
t: date.valueOf(),
|
||||
y: close
|
||||
};
|
||||
}
|
||||
|
||||
var dateFormat = 'MMMM DD YYYY';
|
||||
var date = moment('April 01 2017', dateFormat);
|
||||
var data = [randomBar(date, 30)];
|
||||
while (data.length < 60) {
|
||||
date = date.clone().add(1, 'd');
|
||||
if (date.isoWeekday() <= 5) {
|
||||
data.push(randomBar(date, data[data.length - 1].y));
|
||||
}
|
||||
}
|
||||
|
||||
var ctx = document.getElementById('chart1').getContext('2d');
|
||||
ctx.canvas.width = 1000;
|
||||
ctx.canvas.height = 300;
|
||||
|
||||
var color = Chart.helpers.color;
|
||||
var cfg = {
|
||||
type: 'bar',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: 'CHRT - Chart.js Corporation',
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
|
||||
borderColor: window.chartColors.red,
|
||||
data: data,
|
||||
type: 'line',
|
||||
pointRadius: 0,
|
||||
fill: false,
|
||||
lineTension: 0,
|
||||
borderWidth: 2
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'time',
|
||||
distribution: 'series',
|
||||
ticks: {
|
||||
source: 'data',
|
||||
autoSkip: true
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Closing price ($)'
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
mode: 'index',
|
||||
callbacks: {
|
||||
label: function(tooltipItem, myData) {
|
||||
var label = myData.datasets[tooltipItem.datasetIndex].label || '';
|
||||
if (label) {
|
||||
label += ': ';
|
||||
}
|
||||
label += parseFloat(tooltipItem.value).toFixed(2);
|
||||
return label;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
149
borrowed/chartjs/samples/scales/time/line-point-data.html
Normal file
149
borrowed/chartjs/samples/scales/time/line-point-data.html
Normal file
@ -0,0 +1,149 @@
|
||||
<!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="../../../Chart.min.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();
|
||||
});
|
||||
document.getElementById('addData').addEventListener('click', function() {
|
||||
if (config.data.datasets.length > 0) {
|
||||
config.data.datasets[0].data.push({
|
||||
x: newDateString(config.data.datasets[0].data.length + 2),
|
||||
y: randomScalingFactor()
|
||||
});
|
||||
config.data.datasets[1].data.push({
|
||||
x: newDate(config.data.datasets[1].data.length + 2),
|
||||
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
borrowed/chartjs/samples/scales/time/line.html
Normal file
203
borrowed/chartjs/samples/scales/time/line.html
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="../../../Chart.min.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: {
|
||||
parser: 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
borrowed/chartjs/samples/scales/toggle-scale-type.html
Normal file
99
borrowed/chartjs/samples/scales/toggle-scale-type.html
Normal file
@ -0,0 +1,99 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Toggle Scale Type</title>
|
||||
<script src="../../Chart.min.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>
|
||||
95
borrowed/chartjs/samples/scriptable/bar.html
Normal file
95
borrowed/chartjs/samples/scriptable/bar.html
Normal file
@ -0,0 +1,95 @@
|
||||
<!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 > Bar | Chart.js sample</title>
|
||||
<link rel="stylesheet" type="text/css" href="../style.css">
|
||||
<script src="../../Chart.min.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="wrapper"><canvas id="chart-0"></canvas></div>
|
||||
<div class="toolbar">
|
||||
<button onclick="randomize(this)">Randomize</button>
|
||||
<button onclick="addDataset(this)">Add Dataset</button>
|
||||
<button onclick="removeDataset(this)">Remove Dataset</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var DATA_COUNT = 16;
|
||||
|
||||
var utils = Samples.utils;
|
||||
|
||||
utils.srand(110);
|
||||
|
||||
function colorize(opaque, ctx) {
|
||||
var v = ctx.dataset.data[ctx.dataIndex];
|
||||
var c = v < -50 ? '#D60000'
|
||||
: v < 0 ? '#F46300'
|
||||
: v < 50 ? '#0358B6'
|
||||
: '#44DE28';
|
||||
|
||||
return opaque ? c : utils.transparentize(c, 1 - Math.abs(v / 150));
|
||||
}
|
||||
|
||||
function generateData() {
|
||||
return utils.numbers({
|
||||
count: DATA_COUNT,
|
||||
min: -100,
|
||||
max: 100
|
||||
});
|
||||
}
|
||||
|
||||
var data = {
|
||||
labels: utils.months({count: DATA_COUNT}),
|
||||
datasets: [{
|
||||
data: generateData()
|
||||
}]
|
||||
};
|
||||
|
||||
var options = {
|
||||
legend: false,
|
||||
tooltips: false,
|
||||
elements: {
|
||||
rectangle: {
|
||||
backgroundColor: colorize.bind(null, false),
|
||||
borderColor: colorize.bind(null, true),
|
||||
borderWidth: 2
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new Chart('chart-0', {
|
||||
type: 'bar',
|
||||
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>
|
||||
131
borrowed/chartjs/samples/scriptable/bubble.html
Normal file
131
borrowed/chartjs/samples/scriptable/bubble.html
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="../../Chart.min.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="wrapper"><canvas id="chart-0"></canvas></div>
|
||||
<div class="toolbar">
|
||||
<button onclick="randomize(this)">Randomize</button>
|
||||
<button onclick="addDataset(this)">Add Dataset</button>
|
||||
<button onclick="removeDataset(this)">Remove Dataset</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var DATA_COUNT = 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>
|
||||
115
borrowed/chartjs/samples/scriptable/line.html
Normal file
115
borrowed/chartjs/samples/scriptable/line.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!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 > Line | Chart.js sample</title>
|
||||
<link rel="stylesheet" type="text/css" href="../style.css">
|
||||
<script src="../../Chart.min.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="wrapper"><canvas id="chart-0"></canvas></div>
|
||||
<div class="toolbar">
|
||||
<button onclick="randomize(this)">Randomize</button>
|
||||
<button onclick="addDataset(this)">Add Dataset</button>
|
||||
<button onclick="removeDataset(this)">Remove Dataset</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var DATA_COUNT = 12;
|
||||
|
||||
var utils = Samples.utils;
|
||||
|
||||
utils.srand(110);
|
||||
|
||||
function alternatePointStyles(ctx) {
|
||||
var index = ctx.dataIndex;
|
||||
return index % 2 === 0 ? 'circle' : 'rect';
|
||||
}
|
||||
|
||||
function makeHalfAsOpaque(ctx) {
|
||||
var c = ctx.dataset.backgroundColor;
|
||||
return utils.transparentize(c);
|
||||
}
|
||||
|
||||
function adjustRadiusBasedOnData(ctx) {
|
||||
var v = ctx.dataset.data[ctx.dataIndex];
|
||||
return v < 10 ? 5
|
||||
: v < 25 ? 7
|
||||
: v < 50 ? 9
|
||||
: v < 75 ? 11
|
||||
: 15;
|
||||
}
|
||||
|
||||
function generateData() {
|
||||
return utils.numbers({
|
||||
count: DATA_COUNT,
|
||||
min: 0,
|
||||
max: 100
|
||||
});
|
||||
}
|
||||
|
||||
var data = {
|
||||
labels: utils.months({count: DATA_COUNT}),
|
||||
datasets: [{
|
||||
data: generateData(),
|
||||
backgroundColor: '#4dc9f6',
|
||||
borderColor: '#4dc9f6',
|
||||
}]
|
||||
};
|
||||
|
||||
var options = {
|
||||
legend: false,
|
||||
tooltips: true,
|
||||
elements: {
|
||||
line: {
|
||||
fill: false,
|
||||
},
|
||||
point: {
|
||||
hoverBackgroundColor: makeHalfAsOpaque,
|
||||
radius: adjustRadiusBasedOnData,
|
||||
pointStyle: alternatePointStyles,
|
||||
hoverRadius: 15,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new Chart('chart-0', {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: options
|
||||
});
|
||||
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function addDataset() {
|
||||
var newColor = utils.color(chart.data.datasets.length);
|
||||
|
||||
chart.data.datasets.push({
|
||||
data: generateData(),
|
||||
backgroundColor: newColor,
|
||||
borderColor: newColor
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function randomize() {
|
||||
chart.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = generateData();
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function removeDataset() {
|
||||
chart.data.datasets.shift();
|
||||
chart.update();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
110
borrowed/chartjs/samples/scriptable/pie.html
Normal file
110
borrowed/chartjs/samples/scriptable/pie.html
Normal file
@ -0,0 +1,110 @@
|
||||
<!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 > Pie | Chart.js sample</title>
|
||||
<link rel="stylesheet" type="text/css" href="../style.css">
|
||||
<script src="../../Chart.min.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="wrapper"><canvas id="chart-0"></canvas></div>
|
||||
<div class="toolbar">
|
||||
<button onclick="randomize()">Randomize</button>
|
||||
<button onclick="addDataset()">Add Dataset</button>
|
||||
<button onclick="removeDataset()">Remove Dataset</button>
|
||||
<button onclick="togglePieDoughnut()">Toggle Doughnut View</button>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var DATA_COUNT = 5;
|
||||
|
||||
var utils = Samples.utils;
|
||||
|
||||
utils.srand(110);
|
||||
|
||||
function colorize(opaque, hover, ctx) {
|
||||
var v = ctx.dataset.data[ctx.dataIndex];
|
||||
var c = v < -50 ? '#D60000'
|
||||
: v < 0 ? '#F46300'
|
||||
: v < 50 ? '#0358B6'
|
||||
: '#44DE28';
|
||||
|
||||
var opacity = hover ? 1 - Math.abs(v / 150) - 0.2 : 1 - Math.abs(v / 150);
|
||||
|
||||
return opaque ? c : utils.transparentize(c, opacity);
|
||||
}
|
||||
|
||||
function hoverColorize(ctx) {
|
||||
return colorize(false, true, ctx);
|
||||
}
|
||||
|
||||
function generateData() {
|
||||
return utils.numbers({
|
||||
count: DATA_COUNT,
|
||||
min: -100,
|
||||
max: 100
|
||||
});
|
||||
}
|
||||
|
||||
var data = {
|
||||
datasets: [{
|
||||
data: generateData(),
|
||||
}]
|
||||
};
|
||||
|
||||
var options = {
|
||||
legend: false,
|
||||
tooltips: false,
|
||||
elements: {
|
||||
arc: {
|
||||
backgroundColor: colorize.bind(null, false, false),
|
||||
hoverBackgroundColor: hoverColorize
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new Chart('chart-0', {
|
||||
type: 'pie',
|
||||
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();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function togglePieDoughnut() {
|
||||
if (chart.options.cutoutPercentage) {
|
||||
chart.options.cutoutPercentage = 0;
|
||||
} else {
|
||||
chart.options.cutoutPercentage = 50;
|
||||
}
|
||||
chart.update();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
98
borrowed/chartjs/samples/scriptable/polar.html
Normal file
98
borrowed/chartjs/samples/scriptable/polar.html
Normal file
@ -0,0 +1,98 @@
|
||||
<!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 > Polar Area | Chart.js sample</title>
|
||||
<link rel="stylesheet" type="text/css" href="../style.css">
|
||||
<script src="../../Chart.min.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="wrapper"><canvas id="chart-0"></canvas></div>
|
||||
<div class="toolbar">
|
||||
<button onclick="randomize()">Randomize</button>
|
||||
<button onclick="addData()">Add Data</button>
|
||||
<button onclick="removeData()">Remove Data</button>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var DATA_COUNT = 7;
|
||||
|
||||
var utils = Samples.utils;
|
||||
|
||||
utils.srand(110);
|
||||
|
||||
function colorize(opaque, hover, ctx) {
|
||||
var v = ctx.dataset.data[ctx.dataIndex];
|
||||
var c = v < 35 ? '#D60000'
|
||||
: v < 55 ? '#F46300'
|
||||
: v < 75 ? '#0358B6'
|
||||
: '#44DE28';
|
||||
|
||||
var opacity = hover ? 1 - Math.abs(v / 150) - 0.2 : 1 - Math.abs(v / 150);
|
||||
|
||||
return opaque ? c : utils.transparentize(c, opacity);
|
||||
}
|
||||
|
||||
function hoverColorize(ctx) {
|
||||
return colorize(false, true, ctx);
|
||||
}
|
||||
|
||||
function generateData() {
|
||||
return utils.numbers({
|
||||
count: DATA_COUNT,
|
||||
min: 0,
|
||||
max: 100
|
||||
});
|
||||
}
|
||||
|
||||
var data = {
|
||||
datasets: [{
|
||||
data: generateData(),
|
||||
}]
|
||||
};
|
||||
|
||||
var options = {
|
||||
legend: false,
|
||||
tooltips: false,
|
||||
elements: {
|
||||
arc: {
|
||||
backgroundColor: colorize.bind(null, false, false),
|
||||
hoverBackgroundColor: hoverColorize
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new Chart('chart-0', {
|
||||
type: 'polarArea',
|
||||
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
|
||||
var addData = function() {
|
||||
var newData = Math.round(Math.random() * 100);
|
||||
chart.data.datasets[0].data.push(newData);
|
||||
chart.update();
|
||||
};
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function removeData() {
|
||||
chart.data.datasets[0].data.pop();
|
||||
chart.update();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
112
borrowed/chartjs/samples/scriptable/radar.html
Normal file
112
borrowed/chartjs/samples/scriptable/radar.html
Normal file
@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Scriptable > Radar | Chart.js sample</title>
|
||||
<link rel="stylesheet" type="text/css" href="../style.css">
|
||||
<script src="../../Chart.min.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="wrapper"><canvas id="chart-0"></canvas></div>
|
||||
<div class="toolbar">
|
||||
<button onclick="randomize(this)">Randomize</button>
|
||||
<button onclick="addDataset(this)">Add Dataset</button>
|
||||
<button onclick="removeDataset(this)">Remove Dataset</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var DATA_COUNT = 7;
|
||||
|
||||
var utils = Samples.utils;
|
||||
|
||||
utils.srand(110);
|
||||
|
||||
function alternatePointStyles(ctx) {
|
||||
var index = ctx.dataIndex;
|
||||
return index % 2 === 0 ? 'circle' : 'rect';
|
||||
}
|
||||
|
||||
function makeHalfAsOpaque(ctx) {
|
||||
var c = ctx.dataset.backgroundColor;
|
||||
return utils.transparentize(c);
|
||||
}
|
||||
|
||||
function adjustRadiusBasedOnData(ctx) {
|
||||
var v = ctx.dataset.data[ctx.dataIndex];
|
||||
return v < 10 ? 5
|
||||
: v < 25 ? 7
|
||||
: v < 50 ? 9
|
||||
: v < 75 ? 11
|
||||
: 15;
|
||||
}
|
||||
|
||||
function generateData() {
|
||||
return utils.numbers({
|
||||
count: DATA_COUNT,
|
||||
min: 0,
|
||||
max: 100
|
||||
});
|
||||
}
|
||||
|
||||
var data = {
|
||||
labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [{
|
||||
data: generateData(),
|
||||
backgroundColor: Chart.helpers.color('#4dc9f6').alpha(0.2).rgbString(),
|
||||
borderColor: '#4dc9f6',
|
||||
}]
|
||||
};
|
||||
|
||||
var options = {
|
||||
legend: false,
|
||||
tooltips: true,
|
||||
elements: {
|
||||
point: {
|
||||
hoverBackgroundColor: makeHalfAsOpaque,
|
||||
radius: adjustRadiusBasedOnData,
|
||||
pointStyle: alternatePointStyles,
|
||||
hoverRadius: 15,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new Chart('chart-0', {
|
||||
type: 'radar',
|
||||
data: data,
|
||||
options: options
|
||||
});
|
||||
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function addDataset() {
|
||||
var newColor = utils.color(chart.data.datasets.length);
|
||||
|
||||
chart.data.datasets.push({
|
||||
data: generateData(),
|
||||
backgroundColor: Chart.helpers.color(newColor).alpha(0.2).rgbString(),
|
||||
borderColor: newColor
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function randomize() {
|
||||
chart.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = generateData();
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function removeDataset() {
|
||||
chart.data.datasets.shift();
|
||||
chart.update();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
191
borrowed/chartjs/samples/style.css
Normal file
191
borrowed/chartjs/samples/style.css
Normal file
@ -0,0 +1,191 @@
|
||||
@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
borrowed/chartjs/samples/tooltips/border.html
Normal file
85
borrowed/chartjs/samples/tooltips/border.html
Normal file
@ -0,0 +1,85 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Tooltip Border</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/tooltips/callbacks.html
Normal file
107
borrowed/chartjs/samples/tooltips/callbacks.html
Normal file
@ -0,0 +1,107 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Tooltip Hooks</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/tooltips/custom-line.html
Normal file
166
borrowed/chartjs/samples/tooltips/custom-line.html
Normal file
@ -0,0 +1,166 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart with Custom Tooltips</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/tooltips/custom-pie.html
Normal file
146
borrowed/chartjs/samples/tooltips/custom-pie.html
Normal file
@ -0,0 +1,146 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Pie Chart with Custom Tooltips</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/tooltips/custom-points.html
Normal file
128
borrowed/chartjs/samples/tooltips/custom-points.html
Normal file
@ -0,0 +1,128 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Custom Tooltips using Data Points</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
<script src="../../Chart.min.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);
|
||||
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
borrowed/chartjs/samples/tooltips/interactions.html
Normal file
125
borrowed/chartjs/samples/tooltips/interactions.html
Normal file
@ -0,0 +1,125 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Tooltip Interaction Modes</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/tooltips/positioning.html
Normal file
86
borrowed/chartjs/samples/tooltips/positioning.html
Normal file
@ -0,0 +1,86 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Tooltip Interaction Modes</title>
|
||||
<script src="../../Chart.min.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
borrowed/chartjs/samples/utils.js
Normal file
147
borrowed/chartjs/samples/utils.js
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));
|
||||
Loading…
Reference in New Issue
Block a user