Màj de la lib en version 3.0.0-alpha.2. Les noms des fichiers passent en minuscule (Chart.js → chart.js), cf. https://www.chartjs.org/docs/next/getting-started/v3-migration/#setup-and-installation

master
tcharlss 3 years ago
parent 78afa00e45
commit 4dfee1f9db

@ -44,7 +44,7 @@ function chartjs_insert_head($flux, $espace = 'public') {
if ($charger and in_array($espace, $charger)) {
# Todo: moment.js est nécessaire pour gérer correctement les graphiques avec des dates.
#$flux .= "<script type='text/javascript' src='" . find_in_path('lib/moment/moment-with-locales.min.js') . "'></script>";
$flux .= "<script type='text/javascript' src='" . find_in_path('lib/chartjs/Chart.js') . "'></script>";
$flux .= "<script type='text/javascript' src='" . find_in_path('lib/chartjs/chart.js') . "'></script>";
}
return $flux;
}

File diff suppressed because one or more lines are too long

13178
lib/chartjs/Chart.js vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

@ -2,7 +2,7 @@
<html>
<head>
<title>Linear Gradient</title>
<script src="../../Chart.js"></script>
<script src="../../dist/chart.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -2,7 +2,7 @@
<html>
<head>
<title> Animation Callbacks </title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -2,7 +2,7 @@
<html>
<head>
<title>Radial Gradient</title>
<script src="../../Chart.js"></script>
<script src="../../dist/chart.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Stacked Bar Chart</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Line Chart</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{

@ -3,7 +3,7 @@
<head>
<title>Line Chart</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
@ -62,17 +62,16 @@
}]
},
options: {
animation: (context) => {
if (context.active) {
return {
radius: {
duration: 400,
loop: true
}
};
animation: (context) => Object.assign({},
Chart.defaults.animation,
{
radius: {
duration: 400,
easing: 'linear',
loop: context.active
}
}
return Chart.defaults.animation;
},
),
elements: {
point: {
hoverRadius: 6

@ -6,7 +6,7 @@
<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="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<script src="analyser.js"></script>
</head>

@ -6,7 +6,7 @@
<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="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<script src="analyser.js"></script>
</head>

@ -3,7 +3,7 @@
<head>
<title>Line Chart</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

@ -6,7 +6,7 @@
<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="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<script src="analyser.js"></script>
</head>

@ -3,7 +3,7 @@
<head>
<title>Bar Chart</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Horizontal Bar Chart</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
@ -62,9 +62,10 @@
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myHorizontalBar = new Chart(ctx, {
type: 'horizontalBar',
type: 'bar',
data: horizontalBarChartData,
options: {
indexAxis: 'y',
// 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: {

@ -3,7 +3,7 @@
<head>
<title>Bar Chart Multi Axis</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Stacked Bar Chart with Groups</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Stacked Bar Chart</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Bar Chart</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Bubble Chart</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style type="text/css">
canvas{

@ -3,7 +3,7 @@
<head>
<title>Combo Bar-Line Chart</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Doughnut Chart</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Line Chart</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{

@ -3,7 +3,7 @@
<head>
<title>Line Chart - Cubic interpolation mode</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{

@ -3,7 +3,7 @@
<head>
<title>Line Styles</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{

@ -3,7 +3,7 @@
<head>
<title>Line Chart Multiple Axes</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Different Point Sizes</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Line Chart</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{

@ -3,7 +3,7 @@
<head>
<title>Line Chart</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Stepped Line Chart</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Multi Series Pie Chart</title>
<script src="../../Chart.js"></script>
<script src="../../dist/chart.js"></script>
<script src="../utils.js"></script>
</head>
@ -71,19 +71,19 @@
return labels;
}
},
onClick: function(mouseEvent, legendItem) {
onClick: function(mouseEvent, legendItem, legend) {
// toggle the visibility of the dataset from what it currently is
this.chart.getDatasetMeta(
legend.chart.getDatasetMeta(
legendItem.datasetIndex
).hidden = this.chart.isDatasetVisible(legendItem.datasetIndex);
this.chart.update();
).hidden = legend.chart.isDatasetVisible(legendItem.datasetIndex);
legend.chart.update();
}
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var labelIndex = (tooltipItem.datasetIndex * 2) + tooltipItem.index;
return data.labels[labelIndex] + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
label: function(context) {
var labelIndex = (context.datasetIndex * 2) + context.dataIndex;
return context.chart.data.labels[labelIndex] + ': ' + context.dataset.data[context.dataIndex];
}
}
}

@ -3,7 +3,7 @@
<head>
<title>Pie Chart</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
</head>
@ -75,7 +75,7 @@
label: 'New dataset ' + config.data.datasets.length,
};
for (var index = 0; index < config.data.labels.length; ++index) {
for (var index = 0; index < 10; ++index) {
newDataset.data.push(randomScalingFactor());
var colorName = colorNames[index % colorNames.length];

@ -3,7 +3,7 @@
<head>
<title>Polar Area Chart</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Radar Chart</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Radar Chart</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Scatter Chart</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Scatter Chart Multi Axis</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

@ -14,7 +14,7 @@
<div class="content">
<div class="header">
<div class="chartjs-title">Samples</div>
<div class="chartjs-caption">Simple yet flexible JavaScript charting for designers &amp; developers</div>
<div class="chartjs-caption">Simple, yet flexible, JavaScript charting library for designers &amp; 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>

@ -2,7 +2,7 @@
<html>
<head>
<title>Legend Callbacks</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
body, html {

@ -3,7 +3,7 @@
<head>
<title>Legend Point Style</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Legend Positions</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Legend Title Positions</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Line Chart</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
@ -81,11 +81,13 @@
scaleLabel: {
display: true,
labelString: 'Month',
lineHeight: 1.2,
fontColor: '#911',
fontFamily: 'Comic Sans MS',
fontSize: 20,
fontStyle: 'bold',
font: {
color: '#911',
family: 'Comic Sans MS',
size: 20,
style: 'bold',
lineHeight: 1.2,
},
padding: {top: 20, left: 0, right: 0, bottom: 0}
}
},
@ -94,11 +96,13 @@
scaleLabel: {
display: true,
labelString: 'Value',
lineHeight: 1.2,
fontColor: '#191',
fontFamily: 'Times',
fontSize: 20,
fontStyle: 'normal',
font: {
color: '#191',
family: 'Times',
size: 20,
style: 'normal',
lineHeight: 1.2,
},
padding: {top: 30, left: 0, right: 0, bottom: 0}
}
}

@ -3,7 +3,7 @@
<head>
<title>Scatter Chart</title>
<script src="../../Chart.js"></script>
<script src="../../dist/chart.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Chart with xAxis Filtering</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -3,9 +3,9 @@
<head>
<title>Line Chart</title>
<script src="../../Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@1.15.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@0.2.0"></script>
<script src="../../dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@1.24.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@0.2.1"></script>
<script src="../utils.js"></script>
<style>
canvas {
@ -39,18 +39,7 @@
</select>
<button id="update">update</button>
<script>
function isFirstUnitOfPeriod(date, unit, period) {
let first = date.startOf(period);
while (first.weekday > 5) {
first = first.plus({day: 1});
}
if (unit === 'second' || unit === 'minute' || unit === 'hour') {
first = first.set({hour: 9, minute: 30});
}
return date === first;
}
// Generate data between the stock market hours of 9:30am - 5pm.
// Generate data between the stock market hours of 9:30am - 4pm.
// This method is slow and unoptimized, but in real life we'd be fetching it from the server.
function generateData() {
const unit = document.getElementById('unit').value;
@ -65,7 +54,7 @@
function after4pm(date) {
return date.hour > 16 || (date.hour === 16 && date.minute > 0);
return date.hour >= 16;
}
// Returns true if outside 9:30am-4pm on a weekday
@ -138,15 +127,14 @@
},
scales: {
x: {
type: 'time',
distribution: 'series',
type: 'timeseries',
offset: true,
ticks: {
major: {
enabled: true,
},
fontStyle: function(context) {
return context.tick.major ? 'bold' : undefined;
font: function(context) {
return context.tick && context.tick.major ? {style: 'bold'} : undefined;
},
source: 'data',
autoSkip: true,
@ -157,17 +145,28 @@
// Custom logic that chooses major ticks by first timestamp in time period
// E.g. if March 1 & 2 are missing from dataset because they're weekends, we pick March 3 to be beginning of month
afterBuildTicks: function(scale) {
const units = ['second', 'minute', 'hour', 'day', 'month', 'year'];
const unit = document.getElementById('unit').value;
let majorUnit;
if (units.indexOf(unit) !== units.length - 1) {
majorUnit = units[units.indexOf(unit) + 1];
}
// major ticks
const majorUnit = scale._majorUnit;
const ticks = scale.ticks;
for (let i = 0; i < ticks.length; i++) {
ticks[i].major = !majorUnit || isFirstUnitOfPeriod(luxon.DateTime.fromMillis(ticks[i].value), unit, majorUnit);
const firstTick = ticks[0];
let val = luxon.DateTime.fromMillis(ticks[0].value);
if ((majorUnit === 'minute' && val.second === 0)
|| (majorUnit === 'hour' && val.minute === 0)
|| (majorUnit === 'day' && val.hour === 9)
|| (majorUnit === 'month' && val.day <= 3 && val.weekday === 1)
|| (majorUnit === 'year' && val.month === 1)) {
firstTick.major = true;
} else {
firstTick.major = false;
}
let lastMajor = val.get(majorUnit);
for (let i = 1; i < ticks.length; i++) {
const tick = ticks[i];
val = luxon.DateTime.fromMillis(tick.value);
const currMajor = val.get(majorUnit);
tick.major = currMajor !== lastMajor;
lastMajor = currMajor;
}
scale.ticks = ticks;
}
@ -187,12 +186,12 @@
intersect: false,
mode: 'index',
callbacks: {
label: function(tooltipItem, myData) {
let label = myData.datasets[tooltipItem.datasetIndex].label || '';
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
label += parseFloat(tooltipItem.value).toFixed(2);
label += context.dataPoint.y.toFixed(2);
return label;
}
}

@ -3,7 +3,7 @@
<head>
<title>Grid Lines Display Settings</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{

@ -3,7 +3,7 @@
<head>
<title>Grid Lines Scriptable Settings</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{

@ -3,7 +3,7 @@
<head>
<title>Grid Lines Style Settings</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{

@ -3,7 +3,7 @@
<head>
<title>Suggested Min/Max Settings</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{

@ -3,7 +3,7 @@
<head>
<title>Min/Max Settings</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{

@ -3,7 +3,7 @@
<head>
<title>Line Chart</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{

@ -3,7 +3,7 @@
<head>
<title>Logarithmic Line Chart</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Scatter Chart</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Line Chart</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{

@ -3,7 +3,7 @@
<head>
<title>Line Chart</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{

@ -3,7 +3,7 @@
<head>
<title>Line Chart - Combo Time Scale</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@1.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="../../utils.js"></script>
<style>

@ -3,7 +3,7 @@
<head>
<title>Time Scale Point Data</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1"></script>
<script src="../../utils.js"></script>
@ -97,11 +97,13 @@
major: {
enabled: true
},
fontStyle: function(context) {
return context.tick && context.tick.major ? 'bold' : undefined;
},
fontColor: function(context) {
return context.tick && context.tick.major ? '#FF0000' : undefined;
font: function(context) {
if (context.tick && context.tick.major) {
return {
style: 'bold',
color: '#FF0000'
};
}
}
}
},

@ -3,7 +3,7 @@
<head>
<title>Time Scale Point Data</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1"></script>
<script src="../../utils.js"></script>
@ -94,11 +94,14 @@
major: {
enabled: true
},
fontStyle: function(context) {
return context.tick && context.tick.major ? 'bold' : undefined;
},
fontColor: function(context) {
return context.tick && context.tick.major ? '#FF0000' : undefined;
font: function(context) {
if (context.tick && context.tick.major) {
return {
style: 'bold',
color: '#FF0000'
};
}
}
}
},

@ -3,7 +3,7 @@
<head>
<title>Line Chart</title>
<script src="../../../Chart.min.js"></script>
<script src="../../../dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1"></script>
<script src="../../utils.js"></script>

@ -3,7 +3,7 @@
<head>
<title>Toggle Scale Type</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -6,7 +6,7 @@
<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="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
@ -27,7 +27,7 @@
utils.srand(110);
function colorize(opaque, ctx) {
var v = ctx.dataset.data[ctx.dataIndex];
var v = ctx.dataPoint.y;
var c = v < -50 ? '#D60000'
: v < 0 ? '#F46300'
: v < 50 ? '#0358B6'

@ -6,7 +6,7 @@
<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="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
@ -28,13 +28,17 @@
utils.srand(110);
function channelValue(x, y, values) {
return x < 0 && y < 0 ? values[0] : x < 0 ? values[1] : y < 0 ? values[2] : values[3];
}
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 r = channelValue(x, y, [250, 150, 50, 0]);
var g = channelValue(x, y, [0, 50, 150, 250]);
var b = channelValue(x, y, [0, 150, 150, 250]);
var a = opaque ? 1 : 0.5 * value.v / 1000;
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';

@ -6,7 +6,7 @@
<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="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
@ -40,7 +40,7 @@
}
function adjustRadiusBasedOnData(ctx) {
var v = ctx.dataset.data[ctx.dataIndex];
var v = ctx.dataPoint.y;
return v < 10 ? 5
: v < 25 ? 7
: v < 50 ? 9

@ -6,7 +6,7 @@
<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="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
@ -27,7 +27,7 @@
utils.srand(110);
function colorize(opaque, hover, ctx) {
var v = ctx.dataset.data[ctx.dataIndex];
var v = ctx.dataPoint;
var c = v < -50 ? '#D60000'
: v < 0 ? '#F46300'
: v < 50 ? '#0358B6'

@ -6,7 +6,7 @@
<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="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>

@ -6,7 +6,7 @@
<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="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
@ -44,7 +44,7 @@
}
function adjustRadiusBasedOnData(ctx) {
var v = ctx.dataset.data[ctx.dataIndex];
var v = ctx.dataPoint.y;
return v < 10 ? 5
: v < 25 ? 7
: v < 50 ? 9

@ -3,7 +3,7 @@
<head>
<title>Title Positions & Alignment</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Tooltip Border</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {

@ -3,7 +3,7 @@
<head>
<title>Tooltip Hooks</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
@ -63,11 +63,11 @@
mode: 'index',
callbacks: {
// Use the footer callback to display the sum of the items showing in the tooltip
footer: function(tooltipItems, data) {
footer: function(tooltipItems) {
var sum = 0;
tooltipItems.forEach(function(tooltipItem) {
sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
sum += tooltipItem.dataPoint.y;
});
return 'Sum: ' + sum;
},

@ -3,7 +3,7 @@
<head>
<title>Line Chart with Custom Tooltips</title>
<script src="../../Chart.min.js"></script>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
@ -40,18 +40,26 @@
<script>
Chart.defaults.pointHitDetectionRadius = 1;