exclude_patterns:
- "dist/"
- "docs/"
- - "samples/"
- "scripts/"
- "test/"
- "*.js"
* [Migration guide](https://www.chartjs.org/docs/next/getting-started/v3-migration)
* [Docs](https://www.chartjs.org/docs/next/)
* [API](https://www.chartjs.org/docs/next/api/)
- * [Samples](https://www.chartjs.org/samples/next/)
+ * [Samples](https://www.chartjs.org/docs/next/samples/)
$CHANGES
"dev:ff": "karma start --auto-watch --no-single-run --browsers firefox --grep",
"docs": "npm run build && vuepress build docs --no-cache",
"docs:dev": "npm run build && vuepress dev docs --no-cache",
- "lint-js": "eslint \"samples/**/*.html\" \"samples/**/*.js\" \"src/**/*.js\" \"test/**/*.js\"",
+ "lint-js": "eslint \"src/**/*.js\" \"test/**/*.js\" \"docs/**/*.js\"",
"lint-md": "eslint \"**/*.md\"",
"lint-tsc": "tsc",
"lint-types": "eslint \"types/**/*.ts\" && tsc -p types/tests/",
+++ /dev/null
-globals:
- $: true
- Chart: true
- Samples: true
- moment: true
- luxon: true
- randomScalingFactor: true
-
-rules:
- indent: ["error", "tab", {flatTernaryExpressions: true}]
- no-new: "off"
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Logarithmic Line Chart</title>
- <script src="../../dist/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.pow(2, Math.ceil(Math.random() * 10));
- };
-
- class Log2Axis extends Chart.Scale {
- constructor(cfg) {
- super(cfg);
- this._startValue = undefined;
- this._valueRange = 0;
- }
-
- parse(raw, index) {
- const value = Chart.registry.getScale('linear').prototype.parse.apply(this, [raw, index]);
- return isFinite(value) && value > 0 ? value : null;
- }
-
- determineDataLimits() {
- const {min, max} = this.getMinMax(true);
- this.min = isFinite(min) ? Math.max(0, min) : null;
- this.max = isFinite(max) ? Math.max(0, max) : null;
- }
-
- buildTicks() {
- const ticks = [];
-
- let power = Math.floor(Math.log2(this.min));
- let maxPower = Math.ceil(Math.log2(this.max));
- while (power <= maxPower) {
- ticks.push({value: Math.pow(2, power)});
- power += 1;
- }
-
- this.min = ticks[0].value;
- this.max = ticks[ticks.length - 1].value;
- return ticks;
- }
-
- /**
- * @protected
- */
- configure() {
- const start = this.min;
-
- super.configure();
-
- this._startValue = Math.log2(start);
- this._valueRange = Math.log2(this.max) - Math.log2(start);
- }
-
- getPixelForValue(value) {
- if (value === undefined || value === 0) {
- value = this.min;
- }
-
- return this.getPixelForDecimal(value === this.min ? 0 : (Math.log2(value) - this._startValue) / this._valueRange);
- }
-
- getValueForPixel(pixel) {
- const decimal = this.getDecimalForPixel(pixel);
- return Math.pow(2, this._startValue + decimal * this._valueRange);
- }
- }
-
- Log2Axis.id = 'log2';
- Log2Axis.defaults = {};
- Chart.register(Log2Axis);
-
- 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()
- ],
- }]
- },
- options: {
- responsive: true,
- plugins: {
- title: {
- display: true,
- text: 'Derived Axis Type - Log2'
- }
- },
- scales: {
- x: {
- display: true,
- },
- y: {
- display: true,
- type: 'log2',
- }
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById('canvas').getContext('2d');
- window.myLine = new Chart(ctx, config);
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Derived Chart Type</title>
- <script src="../../dist/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>
- <script>
- class Custom extends Chart.controllers.bubble {
- draw() {
- // Call bubble controller method to draw all the points
- super.draw(arguments);
-
- // Now we can do some custom drawing for this dataset. Here we'll draw a box around the first point in each dataset, using `boxStrokeStyle` dataset option for color
- var meta = this.getMeta();
- var pt0 = meta.data[0];
-
- const {x, y} = pt0.getProps(['x', 'y']);
- const {radius} = pt0.options;
-
- var ctx = this.chart.ctx;
- ctx.save();
- ctx.strokeStyle = this.options.boxStrokeStyle;
- ctx.lineWidth = 1;
- ctx.strokeRect(x - radius, y - radius, 2 * radius, 2 * radius);
- ctx.restore();
- }
- }
- Custom.id = 'derivedBubble';
- Custom.defaults = {
- // Custom defaults. Bubble defaults are inherited.
- boxStrokeStyle: 'red'
- };
- // Overrides are only inherited, but not merged if defined
- // Custom.overrides = Chart.overrides.bubble;
-
- // Stores the controller so that the chart initialization routine can look it up
- Chart.register(Custom);
-
- var color = Chart.helpers.color;
- var bubbleChartData = {
- datasets: [{
- label: 'My First dataset',
- backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
- borderColor: window.chartColors.blue,
- 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: 'derivedBubble',
- data: bubbleChartData,
- options: {
- responsive: true,
- plugins: {
- title: {
- display: true,
- text: 'Derived Chart Type'
- },
- }
- }
- });
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-<head>
-<title>Linear Gradient</title>
- <script src="../../dist/chart.js"></script>
- <script src="../utils.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width: 75%;">
- <canvas id="canvas"></canvas>
- </div>
- <br>
- <br>
- <button id="randomizeData">Randomize Data</button>
- <script>
- var chartColors = window.chartColors;
- var gradient = null;
- var width = null;
- var height = null;
- var config = {
- type: 'line',
- data: {
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [{
- label: 'My First dataset',
- borderColor: function(context) {
- var chartArea = context.chart.chartArea;
-
- if (!chartArea) {
- // This case happens on initial chart load
- return null;
- }
-
- var chartWidth = chartArea.right - chartArea.left;
- var chartHeight = chartArea.bottom - chartArea.top;
- if (gradient === null || width !== chartWidth || height !== chartHeight) {
- // Create the gradient because this is either the first render
- // or the size of the chart has changed
- width = chartWidth;
- height = chartHeight;
- var ctx = context.chart.ctx;
- gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
- gradient.addColorStop(0, chartColors.blue);
- gradient.addColorStop(0.5, chartColors.yellow);
- gradient.addColorStop(1, chartColors.red);
- }
-
- return gradient;
- },
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- fill: false,
- }]
- },
- options: {
- responsive: true,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart'
- },
- tooltip: {
- mode: 'index',
- intersect: false,
- },
- },
- hover: {
- mode: 'nearest',
- intersect: true
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: 'Value'
- }
- }
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById('canvas');
- window.myPolarArea = new Chart(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();
- });
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Programmatic Event Triggers</title>
- <script src="../../dist/chart.js"></script>
- <script src="../utils.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div id="container" style="width: 75%;">
- <canvas id="canvas"></canvas>
- </div>
- <button id="hover">Trigger Hover</button>
- <button id="tooltip">Trigger Tooltip</button>
- <script>
- 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,
- hoverBorderWidth: 5,
- hoverBorderColor: 'green',
- 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,
- hoverBorderWidth: 5,
- hoverBorderColor: '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: {
- responsive: true,
- }
- });
-
- };
-
- document.getElementById('hover').addEventListener('click', function() {
- if (window.myBar.getActiveElements().length > 0) {
- window.myBar.setActiveElements([]);
- } else {
- window.myBar.setActiveElements(
- [
- {
- datasetIndex: 0,
- index: 0,
- }, {
- datasetIndex: 1,
- index: 0,
- }
- ]);
- }
- window.myBar.update();
- });
-
- document.getElementById('tooltip').addEventListener('click', function() {
- const tooltip = window.myBar.tooltip;
- if (tooltip.getActiveElements().length > 0) {
- tooltip.setActiveElements([], {x: 0, y: 0});
- } else {
- const chartArea = window.myBar.chartArea;
- tooltip.setActiveElements(
- [
- {
- datasetIndex: 0,
- index: 2,
- }, {
- datasetIndex: 1,
- index: 2,
- }
- ],
- {
- x: (chartArea.left + chartArea.right) / 2,
- y: (chartArea.top + chartArea.bottom) / 2,
- }
- );
- }
-
- window.myBar.update();
- });
- </script>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-<head>
-<title> Animation Callbacks </title>
- <script src="../../dist/chart.min.js"></script>
- <script src="../utils.js"></script>
- <style>
- canvas {
- 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: {
- animation: {
- duration: 2000,
- onProgress: function(animation) {
- progress.value = animation.currentStep / animation.numSteps;
- },
- onComplete: function() {
- //
- }
- },
- interaction: {
- mode: 'nearest',
- axis: 'x',
- intersect: false
- },
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart - Animation Progress Bar'
- }
- },
- }
- };
-
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-<head>
-<title>Radial Gradient</title>
- <script src="../../dist/chart.js"></script>
- <script src="../utils.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width: 75%;">
- <canvas id="canvas"></canvas>
- </div>
- <br>
- <br>
- <button id="randomizeData">Randomize Data</button>
- <script>
- var cache = new Map();
- var width = null;
- var height = null;
-
- function createRadialGradient3(context, c1, c2, c3) {
- var chartArea = context.chart.chartArea;
- if (!chartArea) {
- // This case happens on initial chart load
- return null;
- }
-
- var chartWidth = chartArea.right - chartArea.left;
- var chartHeight = chartArea.bottom - chartArea.top;
- if (width !== chartWidth || height !== chartHeight) {
- cache.clear();
- }
- var gradient = cache.get(c1 + c2 + c3);
- if (!gradient) {
- // Create the gradient because this is either the first render
- // or the size of the chart has changed
- width = chartWidth;
- height = chartHeight;
- var centerX = (chartArea.left + chartArea.right) / 2;
- var centerY = (chartArea.top + chartArea.bottom) / 2;
- var r = Math.min(
- (chartArea.right - chartArea.left) / 2,
- (chartArea.bottom - chartArea.top) / 2
- );
- var ctx = context.chart.ctx;
- gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, r);
- gradient.addColorStop(0, c1);
- gradient.addColorStop(0.5, c2);
- gradient.addColorStop(1, c3);
- cache.set(c1 + c2 + c3, gradient);
- }
-
- return gradient;
- }
-
- var chartColors = window.chartColors;
- var colors = [chartColors.red, chartColors.orange, chartColors.yellow, chartColors.green, chartColors.blue];
- var config = {
- type: 'polarArea',
- data: {
- datasets: [{
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- ],
- backgroundColor: function(context) {
- var c = colors[context.dataIndex];
- if (context.active) {
- c = Chart.helpers.getHoverColor(c);
- }
- var mid = Chart.helpers.color(c).desaturate(0.2).darken(0.2).rgbString();
- var start = Chart.helpers.color(c).lighten(0.2).rotate(270).rgbString();
- var end = Chart.helpers.color(c).lighten(0.1).rgbString();
- return createRadialGradient3(context, start, mid, end);
- },
- label: 'My dataset' // for legend
- }],
- labels: [
- 'Red',
- 'Orange',
- 'Yellow',
- 'Green',
- 'Blue'
- ]
- },
- options: {
- responsive: true,
- plugins: {
- legend: {
- position: 'right',
- },
- title: {
- display: true,
- text: 'Chart.js Polar Area Chart'
- },
- },
- scales: {
- r: {
- ticks: {
- beginAtZero: true
- },
- reverse: false
- }
- },
- animation: {
- animateRotate: false,
- animateScale: true
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById('canvas');
- window.myPolarArea = new Chart(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();
- });
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Stacked Bar Chart</title>
- <script src="../../dist/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 delayed = false;
- var ctx = document.getElementById('canvas').getContext('2d');
- window.myBar = new Chart(ctx, {
- type: 'bar',
- data: barChartData,
- options: {
- animation: {
- onComplete: () => {
- delayed = true;
- },
- delay: (context) => {
- let delay = 0;
- if (context.type === 'data' && context.mode === 'default' && !delayed) {
- delay = context.dataIndex * 300 + context.datasetIndex * 100;
- }
- return delay;
- },
- },
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Bar Chart - Stacked'
- },
- tooltip: {
- mode: 'index',
- intersect: false
- }
- },
- responsive: true,
- scales: {
- x: {
- stacked: true,
- },
- y: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../../dist/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',
- animations: {
- y: {
- duration: 2000,
- delay: 500
- }
- },
- backgroundColor: 'rgba(170,0,0,0.1)',
- borderColor: window.chartColors.red,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- fill: 1,
- tension: 0.5
- }, {
- label: 'My Second dataset',
- fill: false,
- backgroundColor: window.chartColors.blue,
- borderColor: window.chartColors.blue,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- }]
- },
- options: {
- animations: {
- y: {
- easing: 'easeInOutElastic',
- from: (ctx) => {
- if (ctx.type === 'data') {
- if (ctx.mode === 'default' && !ctx.dropped) {
- ctx.dropped = true;
- return 0;
- }
- }
- }
- }
- },
- responsive: true,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart'
- },
- tooltip: {
- mode: 'index',
- intersect: false,
- }
- },
- hover: {
- mode: 'nearest',
- intersect: true
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: '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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../../dist/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',
- fill: false,
- backgroundColor: window.chartColors.red,
- borderColor: window.chartColors.red,
- data: [
- 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()
- ],
- }]
- },
- options: {
- animations: {
- radius: {
- duration: 400,
- easing: 'linear',
- loop: (context) => context.active
- }
- },
- elements: {
- point: {
- hoverRadius: 6
- }
- },
- interaction: {
- mode: 'nearest',
- axis: 'x',
- intersect: false
- },
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart'
- },
- },
- responsive: true,
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: '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>
+++ /dev/null
-'use strict';
-
-(function() {
- Chart.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 (typeof target !== 'object' && isFinite(target)) {
- target = 'dataset ' + target;
- } else {
- target = 'boundary "' + (typeof target === 'object' ? JSON.stringify(target) : target) + '"';
- }
-
- if (stat.visible) {
- row += '<td>' + target + '</td>';
- } else {
- row += '<td>(hidden)</td>';
- }
-
- return '<tr>' + row + '</tr>';
- }).join('') + '</table>';
- }
- });
-}());
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=Edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>area > boundaries | Chart.js sample</title>
- <link rel="stylesheet" type="text/css" href="../../style.css">
- <script src="../../../dist/chart.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: {
- x: {
- 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, {
- plugins: {
- 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>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=Edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>area > datasets | Chart.js sample</title>
- <link rel="stylesheet" type="text/css" href="../../style.css">
- <script src="../../../dist/chart.min.js"></script>
- <script src="../../utils.js"></script>
- <script src="analyser.js"></script>
-</head>
-<body>
- <div class="content">
- <div class="wrapper">
- <canvas id="chart-0"></canvas>
- </div>
- <div class="toolbar">
- <button onclick="togglePropagate(this)">Propagate</button>
- <button onclick="toggleSmooth(this)">Smooth</button>
- <button onclick="randomize(this)">Randomize</button>
- </div>
- <div id="chart-analyser" class="analyser"></div>
- </div>
-
- <script>
- var presets = window.chartColors;
- var utils = Samples.utils;
- var inputs = {
- min: 20,
- max: 80,
- count: 8,
- decimals: 2,
- continuity: 1
- };
-
- function generateData() {
- return utils.numbers(inputs);
- }
-
- function generateLabels() {
- return utils.months({count: inputs.count});
- }
-
- utils.srand(42);
-
- var data = {
- labels: generateLabels(),
- datasets: [{
- backgroundColor: utils.transparentize(presets.red),
- borderColor: presets.red,
- data: generateData(),
- hidden: true,
- label: 'D0'
- }, {
- backgroundColor: utils.transparentize(presets.orange),
- borderColor: presets.orange,
- data: generateData(),
- label: 'D1',
- fill: '-1'
- }, {
- backgroundColor: utils.transparentize(presets.yellow),
- borderColor: presets.yellow,
- data: generateData(),
- hidden: true,
- label: 'D2',
- fill: 1
- }, {
- backgroundColor: utils.transparentize(presets.green),
- borderColor: presets.green,
- data: generateData(),
- label: 'D3',
- fill: '-1'
- }, {
- backgroundColor: utils.transparentize(presets.blue),
- borderColor: presets.blue,
- data: generateData(),
- label: 'D4',
- fill: '-1'
- }, {
- backgroundColor: utils.transparentize(presets.grey),
- borderColor: presets.grey,
- data: generateData(),
- label: 'D5',
- fill: '+2'
- }, {
- backgroundColor: utils.transparentize(presets.purple),
- borderColor: presets.purple,
- data: generateData(),
- label: 'D6',
- fill: false
- }, {
- backgroundColor: utils.transparentize(presets.red),
- borderColor: presets.red,
- data: generateData(),
- label: 'D7',
- fill: 8
- }, {
- backgroundColor: utils.transparentize(presets.orange),
- borderColor: presets.orange,
- data: generateData(),
- hidden: true,
- label: 'D8',
- fill: 'end'
- }, {
- backgroundColor: utils.transparentize(presets.yellow),
- borderColor: presets.yellow,
- data: generateData(),
- label: 'D9',
- fill: {above: 'blue', below: 'red', target: {value: 350}}
- }]
- };
-
- var options = {
- maintainAspectRatio: false,
- spanGaps: false,
- elements: {
- line: {
- tension: 0.000001
- }
- },
- scales: {
- y: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../../../dist/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>
- <div style="width:75%;">
- <canvas id="single"></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 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: true
- }, {
- label: 'My Second dataset',
- borderColor: window.chartColors.blue,
- backgroundColor: window.chartColors.blue,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- fill: true
- }, {
- label: 'My Third dataset',
- borderColor: window.chartColors.green,
- backgroundColor: window.chartColors.green,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- fill: true
- }, {
- label: 'My Fourth dataset',
- borderColor: window.chartColors.yellow,
- backgroundColor: window.chartColors.yellow,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- fill: true
- }]
- };
- var config = (stacked) => ({
- type: 'line',
- data,
- options: {
- responsive: true,
- plugins: {
- title: {
- display: true,
- text: stacked === true ? 'Chart.js Line Chart - Stacked Area' : 'Same data, stacked=\'single\'',
- },
- tooltip: {
- mode: 'index',
- }
- },
- interaction: {
- mode: 'nearest',
- axis: 'x',
- intersect: false
- },
- scales: {
- x: {
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- stacked,
- title: {
- display: true,
- text: 'Value'
- }
- }
- }
- }
- });
-
- window.onload = function() {
- window.myLine = new Chart('canvas', config(true));
- window.myLine2 = new Chart('single', config('single'));
- };
-
- document.getElementById('randomizeData').addEventListener('click', function() {
- data.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
-
- });
-
- window.myLine.update();
- window.myLine2.update();
- });
-
- var colorNames = Object.keys(window.chartColors);
- document.getElementById('addDataset').addEventListener('click', function() {
- var colorName = colorNames[data.datasets.length % colorNames.length];
- var newColor = window.chartColors[colorName];
- var newDataset = {
- label: 'Dataset ' + data.datasets.length,
- borderColor: newColor,
- backgroundColor: newColor,
- data: [],
- };
-
- for (var index = 0; index < data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- data.datasets.push(newDataset);
- window.myLine.update();
- window.myLine2.update();
- });
-
- document.getElementById('addData').addEventListener('click', function() {
- if (data.datasets.length > 0) {
- var month = MONTHS[data.labels.length % MONTHS.length];
- data.labels.push(month);
-
- data.datasets.forEach(function(dataset) {
- dataset.data.push(randomScalingFactor());
- });
-
- window.myLine.update();
- window.myLine2.update();
- }
- });
-
- document.getElementById('removeDataset').addEventListener('click', function() {
- data.datasets.splice(0, 1);
- window.myLine.update();
- window.myLine2.update();
- });
-
- document.getElementById('removeData').addEventListener('click', function() {
- data.labels.splice(-1, 1); // remove the label first
-
- data.datasets.forEach(function(dataset) {
- dataset.data.pop();
- });
-
- window.myLine.update();
- window.myLine2.update();
- });
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=Edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>area > radar | Chart.js sample</title>
- <link rel="stylesheet" type="text/css" href="../../style.css">
- <script src="../../../dist/chart.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'
- }, {
- backgroundColor: utils.transparentize(presets.grey),
- borderColor: presets.grey,
- data: generateData(),
- label: 'D6',
- fill: {value: 85},
- }]
- };
-
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Bar Chart</title>
- <script src="../../../dist/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: 'Fully Rounded',
- backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
- borderColor: window.chartColors.red,
- borderWidth: 2,
- borderRadius: Number.MAX_VALUE,
- borderSkipped: false,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- label: 'Small Radius',
- backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
- borderColor: window.chartColors.blue,
- borderWidth: 2,
- borderRadius: 5,
- 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,
- plugins: {
- 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: 2,
- borderRadius: Math.floor(Math.random() * 20),
- 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) {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Bar Chart</title>
- <script src="../../../dist/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(), 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(), 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,
- plugins: {
- 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(), 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(), 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) {
- barChartData.datasets[index].data.push([randomScalingFactor(), 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Horizontal Bar Chart</title>
- <script src="../../../dist/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: '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: {
- bar: {
- borderWidth: 2,
- }
- },
- responsive: true,
- plugins: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Bar Chart Multi Axis</title>
- <script src="../../../dist/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',
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- label: 'Dataset 2',
- backgroundColor: window.chartColors.grey,
- yAxisID: 'y1',
- 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,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Bar Chart - Multi Axis'
- },
- tooltip: {
- mode: 'index',
- intersect: true
- }
- },
- scales: {
- y: {
- type: 'linear',
- display: true,
- position: 'left',
- },
- y1: {
- type: 'linear',
- display: true,
- position: 'right',
- grid: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Stacked Bar Chart with Groups</title>
- <script src="../../../dist/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: {
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Bar Chart - Stacked'
- },
- tooltip: {
- mode: 'index',
- intersect: false
- }
- },
- responsive: true,
- scales: {
- x: {
- stacked: true,
- },
- y: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Stacked Bar Chart</title>
- <script src="../../../dist/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: {
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Bar Chart - Stacked'
- },
- tooltip: {
- mode: 'index',
- intersect: false
- },
- },
- responsive: true,
- scales: {
- x: {
- stacked: true,
- },
- y: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Bar Chart</title>
- <script src="../../../dist/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,
- plugins: {
- 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) {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Bubble Chart</title>
- <script src="../../dist/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 = {
- 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,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Bubble Chart'
- },
- tooltip: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Combo Bar-Line Chart</title>
- <script src="../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Combo Bar Line Chart'
- },
- tooltip: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Doughnut Chart</title>
- <script src="../../dist/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,
- plugins: {
- 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 === 180) {
- window.myDoughnut.options.circumference = 360;
- window.myDoughnut.options.rotation = -45;
- } else {
- window.myDoughnut.options.circumference = 180;
- window.myDoughnut.options.rotation = -90;
- }
-
- window.myDoughnut.update();
- });
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart'
- },
- tooltip: {
- mode: 'index',
- intersect: false,
- }
- },
- hover: {
- mode: 'nearest',
- intersect: true
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: '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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart - Cubic interpolation mode</title>
- <script src="../../../dist/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',
- tension: 0.4
- }, {
- label: 'Cubic interpolation',
- data: datapoints,
- borderColor: window.chartColors.blue,
- backgroundColor: 'rgba(0, 0, 0, 0)',
- fill: false,
- tension: 0.4
- }, {
- label: 'Linear interpolation (default)',
- data: datapoints,
- borderColor: window.chartColors.green,
- backgroundColor: 'rgba(0, 0, 0, 0)',
- fill: false
- }]
- },
- options: {
- responsive: true,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart - Cubic interpolation mode'
- },
- tooltip: {
- mode: 'index'
- }
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: 'Value'
- },
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Styles</title>
- <script src="../../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart'
- },
- tooltip: {
- mode: 'index',
- intersect: false,
- }
- },
- hover: {
- mode: 'nearest',
- intersect: true
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: 'Value'
- }
- }
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById('canvas').getContext('2d');
- window.myLine = new Chart(ctx, config);
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart Multiple Axes</title>
- <script src="../../../dist/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',
- }, {
- label: 'My Second dataset',
- borderColor: window.chartColors.blue,
- backgroundColor: window.chartColors.blue,
- fill: false,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- yAxisID: 'y1'
- }]
- };
-
- window.onload = function() {
- var ctx = document.getElementById('canvas').getContext('2d');
- window.myLine = new Chart(ctx, {
- type: 'line',
- data: lineChartData,
- options: {
- responsive: true,
- interaction: {
- mode: 'index'
- },
- stacked: false,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart - Multi Axis'
- }
- },
- scales: {
- y: {
- type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
- display: true,
- position: 'left',
- },
- y1: {
- type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
- display: true,
- position: 'right',
-
- // grid line settings
- grid: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Different Point Sizes</title>
- <script src="../../../dist/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,
- plugins: {
- legend: {
- position: 'bottom',
- },
- title: {
- display: true,
- text: 'Chart.js Line Chart - Different point sizes'
- }
- },
- hover: {
- mode: 'index'
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: 'Value'
- }
- }
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById('canvas').getContext('2d');
- window.myLine = new Chart(ctx, config);
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../../../dist/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,
- plugins: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart - Skip Points'
- },
- tooltip: {
- mode: 'index',
- }
- },
- hover: {
- mode: 'index'
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: 'Value'
- },
- }
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById('canvas').getContext('2d');
- window.myLine = new Chart(ctx, config);
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Stepped Line Chart</title>
- <script src="../../../dist/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: 'stepped: ' + details.stepped,
- stepped: details.stepped,
- data: data,
- borderColor: details.color,
- fill: false,
- }]
- },
- options: {
- responsive: true,
- plugins: {
- title: {
- display: true,
- text: details.label,
- }
- }
- }
- };
- }
-
-
- window.onload = function() {
- var container = document.querySelector('.container');
-
- var data = [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ];
-
- var steppedSettings = [{
- stepped: false,
- label: 'No Step Interpolation',
- color: window.chartColors.red
- }, {
- stepped: true,
- label: 'Step Before Interpolation',
- color: window.chartColors.green
- }, {
- stepped: 'before',
- label: 'Step Before Interpolation',
- color: window.chartColors.green
- }, {
- stepped: 'after',
- label: 'Step After Interpolation',
- color: window.chartColors.purple
- }, {
- stepped: 'middle',
- label: 'Step Middle Interpolation',
- color: window.chartColors.blue
- }];
-
- steppedSettings.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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Multi Series Pie Chart</title>
- <script src="../../dist/chart.js"></script>
- <script src="../utils.js"></script>
-</head>
-
-<body>
- <div id="canvas-holder" style="width:40%">
- <canvas id="chart-area"></canvas>
- </div>
- <script>
- var ctx = document.getElementById('chart-area');
- new Chart(ctx, {
- type: 'pie',
- data: {
- labels: [
- 'Overall Yay',
- 'Overall Nay',
- 'Group A Yay',
- 'Group A Nay',
- 'Group B Yay',
- 'Group B Nay',
- 'Group C Yay',
- 'Group C Nay'
- ],
- datasets: [
- {backgroundColor: ['#AAA', '#777'], data: [21, 79]},
- {
- backgroundColor: ['hsl(0, 100%, 60%)', 'hsl(0, 100%, 35%)'],
- data: [33, 67]
- },
- {
- backgroundColor: ['hsl(100, 100%, 60%)', 'hsl(100, 100%, 35%)'],
- data: [20, 80]
- },
- {
- backgroundColor: ['hsl(180, 100%, 60%)', 'hsl(180, 100%, 35%)'],
- data: [10, 90]
- }
- ]
- },
- options: {
- plugins: {
- legend: {
- labels: {
- generateLabels: function(chart) {
- // Get the default label list
- var original = Chart.overrides.pie.plugins.legend.labels.generateLabels;
- var labels = original.call(this, chart);
-
- // Build an array of colors used in the datasets of the chart
- var datasetColors = chart.data.datasets.map(function(e) {
- return e.backgroundColor;
- });
- datasetColors = datasetColors.flat();
-
- // Modify the color and hide state of each label
- labels.forEach(label => {
- // There are twice as many labels as there are datasets. This converts the label index into the corresponding dataset index
- label.datasetIndex = (label.index - label.index % 2) / 2;
-
- // The hidden state must match the dataset's hidden state
- label.hidden = !chart.isDatasetVisible(label.datasetIndex);
-
- // Change the color to match the dataset
- label.fillStyle = datasetColors[label.index];
- });
-
- return labels;
- }
- },
- onClick: function(mouseEvent, legendItem, legend) {
- // toggle the visibility of the dataset from what it currently is
- legend.chart.getDatasetMeta(
- legendItem.datasetIndex
- ).hidden = legend.chart.isDatasetVisible(legendItem.datasetIndex);
- legend.chart.update();
- }
- },
- tooltip: {
- callbacks: {
- label: function(context) {
- var labelIndex = (context.datasetIndex * 2) + context.dataIndex;
- return context.chart.data.labels[labelIndex] + ': ' + context.formattedValue;
- }
- }
- }
- }
- }
- });
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Pie Chart</title>
- <script src="../../dist/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 < 10; ++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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Polar Area Chart</title>
- <script src="../../dist/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 = {
- type: 'polarArea',
- 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,
- plugins: {
- legend: {
- position: 'right',
- },
- title: {
- display: true,
- text: 'Chart.js Polar Area Chart'
- },
- },
- scales: {
- r: {
- ticks: {
- beginAtZero: true
- },
- reverse: false
- }
- },
- animation: {
- animateRotate: false,
- animateScale: true
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById('chart-area');
- window.myPolarArea = new Chart(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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Radar Chart</title>
- <script src="../../dist/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: {
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Radar Chart - Skip Points'
- }
- },
- elements: {
- line: {
- tension: 0.0,
- }
- },
- scales: {
- r: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Radar Chart</title>
- <script src="../../dist/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: {
- plugins: {
- legend: {
- position: 'top',
- },
- title: {
- display: true,
- text: 'Chart.js Radar Chart'
- },
- },
- scales: {
- r: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Scatter Chart</title>
- <script src="../../../dist/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 = new Chart(ctx, {
- type: 'scatter',
- data: scatterChartData,
- options: {
- plugins: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Scatter Chart Multi Axis</title>
- <script src="../../../dist/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',
- yAxisID: 'y',
- 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',
- yAxisID: 'y2',
- 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 = new Chart(ctx, {
- type: 'scatter',
- data: scatterChartData,
- options: {
- responsive: true,
- interaction: {
- intersect: true,
- mode: 'nearest'
- },
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Scatter Chart - Multi Axis'
- }
- },
- scales: {
- x: {
- position: 'bottom',
- },
- y: {
- type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
- display: true,
- position: 'left',
-
- ticks: {
- font: {
- color: window.chartColors.red
- }
- }
- },
- y2: {
- 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,
-
- ticks: {
- font: {
- color: window.chartColors.blue
- }
- },
-
- grid: {
- 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>
+++ /dev/null
-<!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="../dist/chart.min.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 library 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>
+++ /dev/null
-<!doctype html>
-<html>
-<head>
- <title>Legend Callbacks</title>
- <script src="../../dist/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: {
- plugins: {
- 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: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: 'Value'
- }
- }
- }
- }
- };
-
- new Chart(document.getElementById('canvas'), config);
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Legend Point Style</title>
- <script src="../../dist/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,
- plugins: {
- legend: {
- labels: {
- usePointStyle: false
- }
- },
- title: {
- display: true,
- text: 'Normal Legend'
- }
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: 'Value'
- }
- }
- }
- }
- };
- }
-
- function createPointStyleConfig(colorName) {
- var config = createConfig(colorName);
- config.options.plugins.legend.labels.usePointStyle = true;
- config.options.plugins.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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Legend Positions</title>
- <script src="../../dist/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,
- plugins: {
- legend: {
- position: legendPosition,
- },
- title: {
- display: true,
- text: 'Legend Position: ' + legendPosition
- }
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: 'Value'
- }
- }
- }
- }
- };
- }
-
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Legend Title Positions</title>
- <script src="../../dist/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-start"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-legend-top-center"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-legend-top-end"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-legend-left-start"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-legend-left-center"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-legend-left-end"></canvas>
- </div>
- </div>
- <script>
- var color = Chart.helpers.color;
- function createConfig(legendPosition, titlePosition, align, 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,
- plugins: {
- legend: {
- align: align,
- position: legendPosition,
- title: {
- display: true,
- text: 'Legend Title',
- position: titlePosition,
- }
- },
- title: {
- display: true,
- text: 'Legend Title Position: ' + titlePosition
- }
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: 'Value'
- }
- }
- }
- }
- };
- }
-
- window.onload = function() {
- [{
- id: 'chart-legend-top-start',
- align: 'start',
- legendPosition: 'top',
- titlePosition: 'start',
- color: 'red'
- }, {
- id: 'chart-legend-top-center',
- align: 'center',
- legendPosition: 'top',
- titlePosition: 'center',
- color: 'orange'
- }, {
- id: 'chart-legend-top-end',
- align: 'end',
- legendPosition: 'top',
- titlePosition: 'end',
- color: 'yellow'
- }, {
- id: 'chart-legend-left-start',
- align: 'start',
- legendPosition: 'left',
- titlePosition: 'start',
- color: 'green'
- }, {
- id: 'chart-legend-left-center',
- align: 'center',
- legendPosition: 'left',
- titlePosition: 'center',
- color: 'blue'
- }, {
- id: 'chart-legend-left-end',
- align: 'end',
- legendPosition: 'left',
- titlePosition: 'end',
- color: 'purple'
- }].forEach(function(details) {
- var ctx = document.getElementById(details.id).getContext('2d');
- var config = createConfig(details.legendPosition, details.titlePosition, details.align, details.color);
- new Chart(ctx, config);
- });
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<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>
\ No newline at end of file
+++ /dev/null
-(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: 'Floating',
- path: 'charts/bar/float.html'
- }, {
- title: 'Border Radius',
- path: 'charts/bar/border-radius.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: 'Bubble',
- path: 'charts/bubble.html'
- }, {
- 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: 'Multi Series Pie',
- path: 'charts/multi-series-pie.html'
- }, {
- title: 'Polar area',
- path: 'charts/polar-area.html'
- }, {
- title: 'Radar',
- path: 'charts/radar.html'
- }, {
- title: 'Radar skip points',
- path: 'charts/radar-skip-points.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: 'Line (break on 2 day gap)',
- path: 'scales/time/line-max-span.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: 'Scriptable Grid lines',
- path: 'scales/gridlines-scriptable.html'
- }, {
- title: 'Multiline labels',
- path: 'scales/multiline-labels.html'
- }, {
- title: 'Filtering Labels',
- path: 'scales/filtering-labels.html'
- }, {
- title: 'Label Text Alignment',
- path: 'scales/label-text-alignment.html'
- }, {
- title: 'Non numeric Y Axis',
- path: 'scales/non-numeric-y.html'
- }, {
- title: 'Toggle Scale Type',
- path: 'scales/toggle-scale-type.html'
- }, {
- title: 'Axes Labels',
- path: 'scales/axes-labels.html'
- }, {
- title: 'Center Positioning',
- path: 'scales/axis-center-position.html'
- }, {
- title: 'Custom major ticks',
- path: 'scales/financial.html'
- }]
- }, {
- title: 'Legend',
- items: [{
- title: 'Positioning',
- path: 'legend/positioning.html'
- }, {
- title: 'Legend Title',
- path: 'legend/title.html'
- }, {
- title: 'Point style',
- path: 'legend/point-style.html'
- }, {
- title: 'Callbacks',
- path: 'legend/callbacks.html'
- }]
- }, {
- title: 'Title',
- items: [{
- title: 'Alignment',
- path: 'title/alignment.html'
- }]
- }, {
- title: 'Tooltip',
- items: [{
- title: 'Positioning',
- path: 'tooltips/positioning.html'
- }, {
- title: 'Custom Positioning',
- path: 'tooltips/positioning-custom.html'
- }, {
- title: 'Interactions',
- path: 'tooltips/interactions.html'
- }, {
- title: 'Callbacks',
- path: 'tooltips/callbacks.html'
- }, {
- title: 'Border',
- path: 'tooltips/border.html'
- }, {
- title: 'Point style',
- path: 'tooltips/point-style.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: 'Animations',
- items: [{
- title: 'Delay',
- path: 'animations/delay.html'
- }, {
- title: 'Drop',
- path: 'animations/drop.html'
- }, {
- title: 'Loop',
- path: 'animations/loop.html'
- }]
- }, {
- title: 'Advanced',
- items: [{
- title: 'Progress bar',
- path: 'advanced/progress-bar.html'
- }, {
- title: 'Polar Area Radial Gradient',
- path: 'advanced/radial-gradient.html'
- }, {
- title: 'Line Gradient',
- path: 'advanced/line-gradient.html'
- }, {
- title: 'Programmatic Event Triggers',
- path: 'advanced/programmatic-events.html'
- }, {
- title: 'Derived Chart Type',
- path: 'advanced/derived-chart-type.html'
- }, {
- title: 'Derived Axis Type',
- path: 'advanced/derived-axis-type.html'
- }]
- }];
-
-}(this));
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart'
- },
- tooltip: {
- mode: 'index',
- intersect: false,
- }
- },
- hover: {
- mode: 'nearest',
- intersect: true
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month',
- font: {
- color: '#911',
- family: 'Comic Sans MS',
- size: 20,
- style: 'bold',
- lineHeight: 1.2,
- },
- padding: {top: 20, left: 0, right: 0, bottom: 0}
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: 'Value',
- font: {
- color: '#191',
- family: 'Times',
- size: 20,
- style: 'normal',
- lineHeight: 1.2,
- },
- padding: {top: 30, left: 0, right: 0, bottom: 0}
- }
- }
- }
- }
- };
-
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Scatter Chart</title>
- <script src="../../dist/chart.js"></script>
- <script src="../utils.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- .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>
- var color = Chart.helpers.color;
- function generateData() {
- var data = [];
- for (var i = 0; i < 7; i++) {
- data.push({
- x: randomScalingFactor(),
- y: randomScalingFactor()
- });
- }
- return data;
- }
-
- function createConfig(xPosition, yPosition, title) {
- 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()
- }]
- };
-
- return {
- type: 'scatter',
- data: scatterChartData,
- options: {
- responsive: true,
- plugins: {
- title: {
- display: true,
- text: title
- }
- },
-
- scales: {
- x: {
- position: xPosition,
- axis: 'x',
- min: -100,
- max: 100,
- },
- y: {
- position: yPosition,
- axis: 'y',
- min: -100,
- max: 100,
- }
- }
- }
- };
- }
-
- window.onload = function() {
- var container = document.querySelector('.container');
-
- [{
- title: 'Position: Vertical: left, Horizontal: bottom',
- xPosition: 'bottom',
- yPosition: 'left'
- }, {
- title: 'Position: Vertical: center, Horizontal: center',
- xPosition: 'center',
- yPosition: 'center'
- }, {
- title: 'Position: Vertical: x=-60, Horizontal: y=30',
- xPosition: {y: 30},
- yPosition: {x: -60}
- }].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.xPosition, details.yPosition, details.title);
- new Chart(ctx, config);
- });
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Chart with xAxis Filtering</title>
- <script src="../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart - X-Axis Filter'
- }
- },
- scales: {
- x: {
- 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 : '';
- }
- }
- },
- y: {
- display: true,
- beginAtZero: false
- }
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById('canvas').getContext('2d');
- window.myLine = new Chart(ctx, config);
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <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 {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width:1000px">
- <p>This example demonstrates a time series scale with custom logic for generating minor and major ticks. Major ticks are bolded</p>
- <p>For more specific functionality for financial charts, please see <a href="https://github.com/chartjs/chartjs-chart-financial">chartjs-chart-financial</a></p>
- <canvas id="chart1"></canvas>
- </div>
- <br>
- <br>
- Chart Type:
- <select id="type">
- <option value="line">Line</option>
- <option value="bar">Bar</option>
- </select>
- <select id="unit">
- <option value="second">Second</option>
- <option value="minute">Minute</option>
- <option value="hour">Hour</option>
- <option value="day" selected>Day</option>
- <option value="month">Month</option>
- <option value="year">Year</option>
- </select>
- <button id="update">update</button>
- <script>
- // 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;
-
- function unitLessThanDay() {
- return unit === 'second' || unit === 'minute' || unit === 'hour';
- }
-
- function beforeNineThirty(date) {
- return date.hour < 9 || (date.hour === 9 && date.minute < 30);
- }
-
-
- function after4pm(date) {
- return date.hour >= 16;
- }
-
- // Returns true if outside 9:30am-4pm on a weekday
- function outsideMarketHours(date) {
- if (date.weekday > 5) {
- return true;
- }
- if (unitLessThanDay() && (beforeNineThirty(date) || after4pm(date))) {
- return true;
- }
- return false;
- }
-
- function randomNumber(min, max) {
- return Math.random() * (max - min) + min;
- }
-
- function randomBar(date, lastClose) {
- const open = randomNumber(lastClose * 0.95, lastClose * 1.05).toFixed(2);
- const close = randomNumber(open * 0.95, open * 1.05).toFixed(2);
- return {
- x: date.valueOf(),
- y: close
- };
- }
-
- let date = luxon.DateTime.fromFormat('Jan 01 1990', 'LLL dd yyyy');
- const now = luxon.DateTime.local();
- const data = [];
- const lessThanDay = unitLessThanDay();
- const plus = {};
- plus[unit] = 1;
- for (; data.length < 600 && date < now; date = date.plus(plus).startOf(unit)) {
- if (outsideMarketHours(date)) {
- if (!lessThanDay || !beforeNineThirty(date)) {
- date = date.plus({day: date.weekday >= 5 ? 8 - date.weekday : 1});
- }
- if (lessThanDay) {
- date = date.set({hour: 9, minute: 30});
- }
- }
- data.push(randomBar(date, data.length > 0 ? data[data.length - 1].y : 30));
- }
-
- return data;
- }
-
- const ctx = document.getElementById('chart1').getContext('2d');
- ctx.canvas.width = 1000;
- ctx.canvas.height = 300;
-
- const color = Chart.helpers.color;
- const cfg = {
- data: {
- datasets: [{
- label: 'CHRT - Chart.js Corporation',
- backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
- borderColor: window.chartColors.red,
- data: generateData(),
- type: 'line',
- pointRadius: 0,
- fill: false,
- tension: 0,
- borderWidth: 2
- }]
- },
- options: {
- animation: {
- duration: 0
- },
- scales: {
- x: {
- type: 'timeseries',
- offset: true,
- ticks: {
- major: {
- enabled: true,
- },
- font: function(context) {
- return context.tick && context.tick.major ? {style: 'bold'} : undefined;
- },
- source: 'data',
- autoSkip: true,
- autoSkipPadding: 75,
- maxRotation: 0,
- sampleSize: 100
- },
- // 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 majorUnit = scale._majorUnit;
- const ticks = scale.ticks;
- 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;
- }
- },
- y: {
- type: 'linear',
- grid: {
- drawBorder: false
- },
- title: {
- display: true,
- text: 'Closing price ($)'
- }
- }
- },
- plugins: {
- tooltip: {
- intersect: false,
- mode: 'index',
- callbacks: {
- label: function(context) {
- let label = context.dataset.label || '';
- if (label) {
- label += ': ';
- }
- label += context.parsed.y.toFixed(2);
- return label;
- }
- }
- }
- }
- }
- };
-
- const chart = new Chart(ctx, cfg);
-
- document.getElementById('update').addEventListener('click', function() {
- const type = document.getElementById('type').value;
- const dataset = chart.config.data.datasets[0];
- dataset.type = type;
- dataset.data = generateData();
- chart.update();
- });
-
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Grid Lines Display Settings</title>
- <script src="../../dist/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(grid, 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,
- plugins: {
- title: {
- display: true,
- text: title
- }
- },
- scales: {
- x: {
- grid: grid
- },
- y: {
- grid: grid,
- min: 0,
- max: 100,
- ticks: {
- stepSize: 10
- }
- }
- }
- }
- };
- }
-
- window.onload = function() {
- var container = document.querySelector('.container');
-
- [{
- title: 'Display: true',
- grid: {
- display: true
- }
- }, {
- title: 'Display: false',
- grid: {
- display: false
- }
- }, {
- title: 'Display: false, no border',
- grid: {
- display: false,
- drawBorder: false
- }
- }, {
- title: 'DrawOnChartArea: false',
- grid: {
- display: true,
- drawBorder: true,
- drawOnChartArea: false,
- }
- }, {
- title: 'DrawTicks: false',
- grid: {
- 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.grid, details.title);
- new Chart(ctx, config);
- });
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Grid Lines Scriptable Settings</title>
- <script src="../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Grid Line Settings'
- }
- },
- scales: {
- y: {
- grid: {
- drawBorder: false,
- color: function(context) {
- if (context.tick.value > 0) {
- return window.chartColors.green;
- } else if (context.tick.value < 0) {
- return window.chartColors.red;
- }
-
- return '#000000';
- },
- },
- }
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById('canvas').getContext('2d');
- window.myLine = new Chart(ctx, config);
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Grid Lines Style Settings</title>
- <script src="../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Grid Line Settings'
- }
- },
- scales: {
- y: {
- grid: {
- drawBorder: false,
- color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
- },
- min: 0,
- max: 100,
- ticks: {
- stepSize: 10
- }
- }
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById('canvas').getContext('2d');
- window.myLine = new Chart(ctx, config);
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Label Text Alignment</title>
- <script src="../../dist/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-start-start"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-start-center"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-start-end"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-center-start"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-center-center"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-center-end"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-end-start"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-end-center"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-end-end"></canvas>
- </div>
- </div>
- <script>
- var color = Chart.helpers.color;
- function createConfig(xAlign, yAlign, 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,
- plugins: {
- legend: {
- display: false,
- },
- title: {
- display: true,
- text: 'X Tick Alignment: ' + xAlign + ', Y Tick Alignment ' + yAlign
- }
- },
- scales: {
- x: {
- display: true,
- ticks: {
- align: xAlign,
- }
- },
- y: {
- display: true,
- ticks: {
- align: yAlign
- }
- }
- }
- }
- };
- }
-
- window.onload = function() {
- [{
- id: 'chart-start-start',
- xAlign: 'start',
- yAlign: 'start',
- color: 'red'
- }, {
- id: 'chart-start-center',
- xAlign: 'start',
- yAlign: 'center',
- color: 'orange'
- }, {
- id: 'chart-start-end',
- xAlign: 'start',
- yAlign: 'end',
- color: 'yellow'
- }, {
- id: 'chart-center-start',
- xAlign: 'center',
- yAlign: 'start',
- color: 'green'
- }, {
- id: 'chart-center-center',
- xAlign: 'center',
- yAlign: 'center',
- color: 'blue'
- }, {
- id: 'chart-center-end',
- xAlign: 'center',
- yAlign: 'end',
- color: 'purple'
- }, {
- id: 'chart-end-start',
- xAlign: 'end',
- yAlign: 'start',
- color: 'grey'
- }, {
- id: 'chart-end-center',
- xAlign: 'end',
- yAlign: 'center',
- color: 'red'
- }, {
- id: 'chart-end-end',
- xAlign: 'end',
- yAlign: 'end',
- color: 'orange'
- }].forEach(function(details) {
- var ctx = document.getElementById(details.id).getContext('2d');
- var config = createConfig(details.xAlign, details.yAlign, details.color);
- new Chart(ctx, config);
- });
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Suggested Min/Max Settings</title>
- <script src="../../../dist/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: {
- y: {
- // 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Min/Max Settings</title>
- <script src="../../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Min and Max Settings'
- }
- },
- scales: {
- y: {
- min: 10,
- max: 50
- }
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById('canvas').getContext('2d');
- window.myLine = new Chart(ctx, config);
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart'
- },
- tooltip: {
- mode: 'index',
- intersect: false,
- }
- },
- hover: {
- mode: 'nearest',
- intersect: true
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: 'Value'
- },
- min: 0,
- max: 100,
- ticks: {
- // 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Logarithmic Line Chart</title>
- <script src="../../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart - Logarithmic'
- }
- },
- scales: {
- x: {
- display: true,
- },
- y: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Scatter Chart</title>
- <script src="../../../dist/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 = new Chart(ctx, {
- type: 'scatter',
- data: scatterChartData,
- options: {
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
- }
- },
- scales: {
- x: {
- type: 'logarithmic',
- position: 'bottom',
- ticks: {
- callback: 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 '';
- },
- },
- title: {
- text: 'Frequency',
- display: true,
- }
- },
- y: {
- type: 'linear',
- ticks: {
- callback: function(tick) {
- return tick.toString() + 'dB';
- }
- },
- title: {
- text: 'Voltage',
- display: true
- }
- }
- }
- }
- });
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../../dist/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,
- plugins: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Chart with Non Numeric Y Axis'
- }
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- type: 'category',
- position: 'left',
- display: true,
- title: {
- display: true,
- text: 'Request State'
- },
- reverse: true
- }
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById('canvas').getContext('2d');
- window.myLine = new Chart(ctx, config);
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart - Combo Time Scale</title>
- <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>
- 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>
- function newDate(days) {
- var date = new Date();
- date.setHours(0, 0, 0, 0);
- date.setDate(date.getDate() + days);
- return date.valueOf();
- }
-
- var labels = [];
- var data1 = [];
- var data2 = [];
- var data3 = [];
- for (var i = 0; i < 7; i++) {
- labels.push(newDate(i));
- data1.push(randomScalingFactor());
- data2.push(randomScalingFactor());
- data3.push(randomScalingFactor());
- }
-
- var color = Chart.helpers.color;
- var config = {
- type: 'bar',
- data: {
- labels: labels,
- datasets: [{
- type: 'bar',
- label: 'Dataset 1',
- backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
- borderColor: window.chartColors.red,
- data: data1,
- }, {
- type: 'bar',
- label: 'Dataset 2',
- backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
- borderColor: window.chartColors.blue,
- data: data2,
- }, {
- type: 'line',
- label: 'Dataset 3',
- backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
- borderColor: window.chartColors.green,
- fill: false,
- data: data3,
- }]
- },
- options: {
- plugins: {
- title: {
- text: 'Chart.js Combo Time Scale',
- display: true
- }
- },
- scales: {
- x: {
- type: 'time',
- display: true,
- offset: true,
- time: {
- unit: '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(newDate(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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Time Scale Point Data</title>
- <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>
- <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(6),
- 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(5),
- y: randomScalingFactor()
- }, {
- x: newDate(6),
- y: randomScalingFactor()
- }]
- }]
- },
- options: {
- spanGaps: 1000 * 60 * 60 * 24 * 2, // 2 days
- responsive: true,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Time - spanGaps: 172800000 (2 days in ms)'
- }
- },
- scales: {
- x: {
- type: 'time',
- display: true,
- title: {
- display: true,
- text: 'Date'
- },
- ticks: {
- autoSkip: false,
- maxRotation: 0,
- major: {
- enabled: true
- },
- font: function(context) {
- if (context.tick && context.tick.major) {
- return {
- style: 'bold',
- color: '#FF0000'
- };
- }
- }
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: '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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Time Scale Point Data</title>
- <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>
- <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,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Time Point Data'
- }
- },
- scales: {
- x: {
- type: 'time',
- display: true,
- title: {
- display: true,
- text: 'Date'
- },
- ticks: {
- major: {
- enabled: true
- },
- font: function(context) {
- if (context.tick && context.tick.major) {
- return {
- style: 'bold',
- color: '#FF0000'
- };
- }
-
- }
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: '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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <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>
- <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: {
- plugins: {
- title: {
- text: 'Chart.js Time Scale',
- display: true
- }
- },
- scales: {
- x: {
- type: 'time',
- time: {
- parser: timeFormat,
- // round: 'day'
- tooltipFormat: 'll HH:mm'
- },
- title: {
- display: true,
- text: 'Date'
- }
- },
- y: {
- title: {
- display: true,
- text: '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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Toggle Scale Type</title>
- <script src="../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart - ' + type
- }
- },
- scales: {
- x: {
- display: true,
- },
- y: {
- 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.plugins.title.text = 'Chart.js Line Chart - ' + type;
- window.myLine.options.scales.y = {
- display: true,
- type: type
- };
-
- window.myLine.update();
- });
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!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="../../dist/chart.min.js"></script>
- <script src="../utils.js"></script>
-</head>
-<body>
- <div class="content">
- <div class="wrapper"><canvas id="chart-0"></canvas></div>
- <div class="toolbar">
- <button onclick="randomize(this)">Randomize</button>
- <button onclick="addDataset(this)">Add Dataset</button>
- <button onclick="removeDataset(this)">Remove Dataset</button>
- </div>
- </div>
-
- <script>
- var DATA_COUNT = 16;
-
- var utils = Samples.utils;
-
- utils.srand(110);
-
- function colorize(opaque, ctx) {
- var v = ctx.parsed.y;
- 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 = {
- plugins: {
- legend: false,
- tooltip: false,
- },
- elements: {
- bar: {
- 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>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=Edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Scriptable > Bubble | Chart.js sample</title>
- <link rel="stylesheet" type="text/css" href="../style.css">
- <script src="../../dist/chart.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 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.raw;
- var x = value.x / 100;
- var y = value.y / 100;
- 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 + ')';
- }
-
- 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,
- plugins: {
- legend: false,
- tooltip: 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) {
- return Math.round(8 * context.raw.v / 1000);
- },
-
- radius: function(context) {
- var size = context.chart.width;
- var base = Math.abs(context.raw.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>
+++ /dev/null
-<!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="../../dist/chart.min.js"></script>
- <script src="../utils.js"></script>
-</head>
-<body>
- <div class="content">
- <div class="wrapper"><canvas id="chart-0"></canvas></div>
- <div class="toolbar">
- <button onclick="randomize(this)">Randomize</button>
- <button onclick="addDataset(this)">Add Dataset</button>
- <button onclick="removeDataset(this)">Remove Dataset</button>
- </div>
- </div>
-
- <script>
- var DATA_COUNT = 12;
-
- var utils = Samples.utils;
-
- utils.srand(110);
-
- function getLineColor(ctx) {
- return utils.color(ctx.datasetIndex);
- }
-
- function alternatePointStyles(ctx) {
- var index = ctx.dataIndex;
- return index % 2 === 0 ? 'circle' : 'rect';
- }
-
- function makeHalfAsOpaque(ctx) {
- return utils.transparentize(getLineColor(ctx));
- }
-
- function adjustRadiusBasedOnData(ctx) {
- var v = ctx.parsed.y;
- 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()
- }]
- };
-
- var options = {
- plugins: {
- legend: false,
- tooltip: true,
- },
- elements: {
- line: {
- fill: false,
- backgroundColor: getLineColor,
- borderColor: getLineColor,
- },
- point: {
- backgroundColor: getLineColor,
- 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() {
- chart.data.datasets.push({
- data: generateData()
- });
- 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>
+++ /dev/null
-<!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="../../dist/chart.min.js"></script>
- <script src="../utils.js"></script>
-</head>
-<body>
- <div class="content">
- <div class="wrapper"><canvas id="chart-0"></canvas></div>
- <div class="toolbar">
- <button onclick="randomize()">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.parsed;
- 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 = {
- plugins: {
- legend: false,
- tooltip: 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.cutout) {
- chart.options.cutout = 0;
- } else {
- chart.options.cutout = '50%';
- }
- chart.update();
- }
-
- </script>
-</body>
-</html>
+++ /dev/null
-<!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="../../dist/chart.min.js"></script>
- <script src="../utils.js"></script>
-</head>
-<body>
- <div class="content">
- <div class="wrapper"><canvas id="chart-0"></canvas></div>
- <div class="toolbar">
- <button onclick="randomize()">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.raw;
- 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 = {
- plugins: {
- legend: false,
- tooltip: 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>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=Edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Scriptable > Radar | Chart.js sample</title>
- <link rel="stylesheet" type="text/css" href="../style.css">
- <script src="../../dist/chart.min.js"></script>
- <script src="../utils.js"></script>
-</head>
-<body>
- <div class="content">
- <div class="wrapper"><canvas id="chart-0"></canvas></div>
- <div class="toolbar">
- <button onclick="randomize(this)">Randomize</button>
- <button onclick="addDataset(this)">Add Dataset</button>
- <button onclick="removeDataset(this)">Remove Dataset</button>
- </div>
- </div>
-
- <script>
- var DATA_COUNT = 7;
-
- var utils = Samples.utils;
-
- utils.srand(110);
-
- function getLineColor(ctx) {
- return utils.color(ctx.datasetIndex);
- }
-
- function alternatePointStyles(ctx) {
- var index = ctx.dataIndex;
- return index % 2 === 0 ? 'circle' : 'rect';
- }
-
- function makeHalfAsOpaque(ctx) {
- return utils.transparentize(getLineColor(ctx));
- }
-
- function make20PercentOpaque(ctx) {
- return utils.transparentize(getLineColor(ctx), 0.8);
- }
-
- function adjustRadiusBasedOnData(ctx) {
- var v = ctx.parsed.y;
- 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()
- }]
- };
-
- var options = {
- plugins: {
- legend: false,
- tooltip: false,
- },
- elements: {
- line: {
- backgroundColor: make20PercentOpaque,
- borderColor: getLineColor,
- },
- point: {
- backgroundColor: getLineColor,
- 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() {
- chart.data.datasets.push({
- data: generateData()
- });
- 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>
+++ /dev/null
-@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;
-}
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Title Positions & Alignment</title>
- <script src="../../dist/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;
- box-sizing: content-box;
- border: 1px solid rgb(240, 240, 240);
- border-radius: 4px;
- margin: 4px;
- }
- .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-title-top-start"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-title-top-center"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-title-top-end"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-title-left-start"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-title-left-center"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-title-left-end"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-title-bottom-start"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-title-bottom-center"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-title-bottom-end"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-title-right-start"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-title-right-center"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-title-right-end"></canvas>
- </div>
- </div>
- <script>
- var color = Chart.helpers.color;
- function createConfig(titlePosition, titleAlignment, 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,
- plugins: {
- legend: {
- display: false
- },
- title: {
- align: titleAlignment,
- display: true,
- position: titlePosition,
- text: 'Title Position: ' + titlePosition + ', Align: ' + titleAlignment
- }
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: 'Value'
- }
- }
- }
- }
- };
- }
-
- window.onload = function() {
- [{
- id: 'chart-title-top-start',
- titleAlignment: 'start',
- titlePosition: 'top',
- color: 'red'
- }, {
- id: 'chart-title-top-center',
- titleAlignment: 'center',
- titlePosition: 'top',
- color: 'orange'
- }, {
- id: 'chart-title-top-end',
- titleAlignment: 'end',
- titlePosition: 'top',
- color: 'yellow'
- }, {
- id: 'chart-title-left-start',
- titleAlignment: 'start',
- titlePosition: 'left',
- color: 'green'
- }, {
- id: 'chart-title-left-center',
- titleAlignment: 'center',
- titlePosition: 'left',
- color: 'blue'
- }, {
- id: 'chart-title-left-end',
- titleAlignment: 'end',
- titlePosition: 'left',
- color: 'purple'
- }, {
- id: 'chart-title-bottom-start',
- titleAlignment: 'start',
- titlePosition: 'bottom',
- color: 'red'
- }, {
- id: 'chart-title-bottom-center',
- titleAlignment: 'center',
- titlePosition: 'bottom',
- color: 'orange'
- }, {
- id: 'chart-title-bottom-end',
- titleAlignment: 'end',
- titlePosition: 'bottom',
- color: 'yellow'
- }, {
- id: 'chart-title-right-start',
- titleAlignment: 'start',
- titlePosition: 'right',
- color: 'green'
- }, {
- id: 'chart-title-right-center',
- titleAlignment: 'center',
- titlePosition: 'right',
- color: 'blue'
- }, {
- id: 'chart-title-right-end',
- titleAlignment: 'end',
- titlePosition: 'right',
- color: 'purple'
- }].forEach(function(details) {
- var ctx = document.getElementById(details.id).getContext('2d');
- var config = createConfig(details.titlePosition, details.titleAlignment, details.color);
- new Chart(ctx, config);
- });
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Tooltip Border</title>
- <script src="../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Sample tooltip with border'
- },
- tooltip: {
- position: 'nearest',
- mode: 'index',
- intersect: false,
- padding: 10,
- caretSize: 8,
- backgroundColor: 'rgba(72, 241, 12, 1)',
- titleFont: {
- color: window.chartColors.black
- },
- bodyFont: {
- color: 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Tooltip Hooks</title>
- <script src="../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart - Custom Information in Tooltip'
- },
- tooltip: {
- mode: 'index',
- callbacks: {
- // Use the footer callback to display the sum of the items showing in the tooltip
- footer: function(tooltipItems) {
- var sum = 0;
-
- tooltipItems.forEach(function(tooltipItem) {
- sum += tooltipItem.parsed.y;
- });
- return 'Sum: ' + sum;
- },
- },
- footerFontStyle: 'normal'
- }
- },
- hover: {
- mode: 'index',
- intersect: true
- },
- scales: {
- x: {
- display: true,
- title: {
- show: true,
- text: 'Month'
- }
- },
- y: {
- display: true,
- title: {
- show: true,
- text: 'Value'
- }
- }
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById('canvas').getContext('2d');
- window.myLine = new Chart(ctx, config);
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart with external Tooltips</title>
- <script src="../../dist/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.pointHitDetectionRadius = 1;
-
- var getOrCreateTooltip = function(chart) {
- var tooltipEl = chart.canvas.parentNode.querySelector('div');
-
- if (!tooltipEl) {
- tooltipEl = document.createElement('div');
- tooltipEl.classList.add('chartjs-tooltip');
- tooltipEl.innerHTML = '<table></table>';
- chart.canvas.parentNode.appendChild(tooltipEl);
- }
-
- return tooltipEl;
- };
-
- var externalTooltips = function(context) {
- // Tooltip Element
- var chart = context.chart;
- var tooltipEl = getOrCreateTooltip(chart);
-
- // Hide if no tooltip
- var tooltip = context.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 = chart.canvas.offsetTop;
- var positionX = 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.font = tooltip.options.bodyFont.string;
- tooltipEl.style.padding = tooltip.padding + 'px ' + tooltip.padding + '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: {
- plugins: {
- title: {
- display: true,
- text: 'Chart.js Line Chart - External Tooltips'
- },
- tooltip: {
- enabled: false,
- mode: 'index',
- intersect: false,
- position: 'nearest',
- external: externalTooltips
- }
- }
- }
- });
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Pie Chart with Custom Tooltips</title>
- <script src="../../dist/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>
-
- <script>
- var getOrCreateTooltip = function(chart) {
- var tooltipEl = chart.canvas.parentNode.querySelector('div');
-
- if (!tooltipEl) {
- tooltipEl = document.createElement('div');
- tooltipEl.classList.add('chartjs-tooltip');
- tooltipEl.innerHTML = '<table></table>';
- chart.canvas.parentNode.appendChild(tooltipEl);
- }
-
- return tooltipEl;
- };
-
- Chart.defaults.plugins.tooltip.external = function(context) {
- // Tooltip Element
- var tooltip = context.tooltip;
- var tooltipEl = getOrCreateTooltip(context.chart);
-
- // 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 chart = context.chart;
- var positionY = chart.canvas.offsetTop;
- var positionX = 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.font = tooltip.options.bodyFont.string;
- tooltipEl.style.padding = tooltip.padding + 'px ' + tooltip.padding + '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,
- plugins: {
- legend: false,
- tooltip: {
- enabled: false
- }
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById('chart-area').getContext('2d');
- window.myPie = new Chart(ctx, config);
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!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="../../dist/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 externalTooltips = function(context) {
- var chart = context.chart;
- $(chart.canvas).css('cursor', 'pointer');
-
- var positionY = chart.canvas.offsetTop;
- var positionX = chart.canvas.offsetLeft;
-
- $('.chartjs-tooltip').css({
- opacity: 0,
- });
-
- var tooltip = context.tooltip;
- if (!tooltip || !tooltip.opacity) {
- return;
- }
-
- if (tooltip.dataPoints.length > 0) {
- tooltip.dataPoints.forEach(function(dataPoint) {
- var content = [dataPoint.label, dataPoint.formattedValue].join(': ');
- var $tooltip = $('#tooltip-' + dataPoint.datasetIndex);
- var pos = dataPoint.element.tooltipPosition();
-
- $tooltip.html(content);
- $tooltip.css({
- opacity: 1,
- top: positionY + pos.y + 'px',
- left: positionX + pos.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: {
- plugins: {
- title: {
- display: true,
- text: 'Chart.js - External Tooltips using Data Points'
- },
- tooltip: {
- enabled: false,
- mode: 'index',
- intersect: false,
- external: externalTooltips
- }
- }
- }
- });
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Tooltip Interaction Modes</title>
- <script src="../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Mode: ' + mode + ', intersect = ' + intersect
- },
- tooltip: {
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Tooltip Point Style</title>
- <script src="../../dist/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: 'Triangles',
- backgroundColor: window.chartColors.red,
- borderColor: window.chartColors.red,
- pointStyle: 'triangle',
- pointRadius: 6,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- fill: false,
- }, {
- label: 'Circles',
- fill: false,
- backgroundColor: window.chartColors.blue,
- borderColor: window.chartColors.blue,
- pointStyle: 'circle',
- pointRadius: 6,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- }, {
- label: 'Stars',
- fill: false,
- backgroundColor: window.chartColors.green,
- borderColor: window.chartColors.green,
- pointStyle: 'star',
- pointRadius: 6,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- }]
- },
- options: {
- responsive: true,
- plugins: {
- title: {
- display: true,
- text: 'Tooltip Point Styles'
- },
- tooltip: {
- mode: 'index',
- intersect: false,
- usePointStyle: true,
- },
- legend: {
- labels: {
- usePointStyle: true
- }
- },
- },
- hover: {
- mode: 'nearest',
- intersect: true
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: 'Month'
- }
- },
- y: {
- display: true,
- title: {
- display: true,
- text: '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);
- var pointStyles = ['circle', 'triangle', 'rectRounded', 'rect', 'rectRot', 'cross', 'star', 'line', 'dash'];
- document.getElementById('addDataset').addEventListener('click', function() {
- var colorName = colorNames[config.data.datasets.length % colorNames.length];
- var newColor = window.chartColors[colorName];
- var newPointStyle = pointStyles[Math.floor(Math.random() * pointStyles.length)];
- var newDataset = {
- label: 'Dataset ' + config.data.datasets.length,
- backgroundColor: newColor,
- borderColor: newColor,
- pointStyle: newPointStyle,
- pointRadius: 6,
- 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>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Tooltip Interaction Modes</title>
- <script src="../../dist/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 id="container" style="width: 75%;">
- <canvas id="chart"></canvas>
- </div>
- <script>
- window.onload = function() {
- Chart.Tooltip.positioners.middle = (items) => {
- if (items.length !== 1) {
- // For more than 1 item, just show at the nearest
- return Chart.Tooltip.positioners.average(items);
- }
-
- const el = items[0].element;
- let xPos = 0;
- let yPos = 0;
-
- if (el && el.hasValue()) {
- const {
- base,
- horizontal,
- x,
- y
- } = el.getProps();
- if (horizontal) {
- xPos = (base + x) / 2;
- yPos = y;
- } else {
- xPos = x;
- yPos = (base + y) / 2;
- }
- }
-
- return {
- x: xPos,
- y: yPos
- };
- };
-
- var canvas = document.getElementById('chart');
- new Chart(canvas, {
- type: 'bar',
- data: {
- labels: ['January', 'February', 'March', 'April'],
- datasets: [{
- label: 'My First dataset',
- borderColor: window.chartColors.red,
- backgroundColor: window.chartColors.red,
- data: [1, 1, 1, 1],
- }, {
- label: 'My Second dataset',
- borderColor: window.chartColors.blue,
- backgroundColor: window.chartColors.blue,
- data: [2, 4, 6, 8],
- }]
- },
- options: {
- responsive: true,
- plugins: {
- tooltip: {
- position: 'middle',
- intersect: false,
- }
- }
- }
- });
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Tooltip Interaction Modes</title>
- <script src="../../dist/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,
- plugins: {
- title: {
- display: true,
- text: 'Tooltip Position: ' + position
- },
- tooltip: {
- 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>
+++ /dev/null
-'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 = Chart.helpers.color;
-
- function applyDefaultNumbers(config) {
- var cfg = config || {};
- cfg.min = cfg.min || 0;
- cfg.max = cfg.max || 1;
- cfg.from = cfg.from || [];
- cfg.count = cfg.count || 8;
- cfg.decimals = cfg.decimals || 8;
- cfg.continuity = cfg.continuity || 1;
-
- return cfg;
- }
-
- 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 = applyDefaultNumbers(config);
- var dfactor = Math.pow(10, cfg.decimals) || 0;
- var data = [];
- var i, value;
-
- for (i = 0; i < cfg.count; ++i) {
- value = (cfg.from[i] || 0) + this.rand(cfg.min, cfg.max);
- if (this.rand() <= cfg.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));
VERSION=$1
-function move_sample_scripts {
- local subdirectory=$1
- for f in $(find ./samples/$subdirectory -name '*.html'); do
- sed -i -E "s/((\.\.\/)+dist\/)/..\/\1$subdirectory\//" $f
- done
+function move_sample_redirect {
+ local tag=$1
+
+ cp ../scripts/sample-redirect-template.html samples/$tag/index.html
+ sed -i -E "s/TAG/$tag/g" samples/$tag/index.html
}
function update_with_tag {
rm -rf "docs/$tag"
cp -r ../dist/docs docs/$tag
rm -rf "samples/$tag"
- cp -r ../samples samples/$tag
+ mkdir "samples/$tag"
- move_sample_scripts $tag
+ move_sample_redirect $tag
deploy_versioned_files $tag
}
# Note: this code also exists in docs-config.sh
# tag is next|latest|master
# https://www.chartjs.org/docs/$tag/
-# https://www.chartjs.org/samples/$tag/
# https://www.chartjs.org/dist/$tag/chart.*js
function update_tagged_files {
if [ "$VERSION" == "master" ]; then
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Chart.js | Samples</title>
+
+ <link rel="canonical" href="/docs/TAG/samples/" />
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="refresh" content="0;url=/docs/TAG/samples/" />
+
+ <link rel="icon" href="../favicon.ico" />
+ <link rel="stylesheet" type="text/css" href="../styles.css">
+ <script>
+ (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');
+ </script>
+</head>
+
+
+<body>
+ <script>location = '/docs/TAG/samples/'</script>
+</body>
+
+
+</html>
\ No newline at end of file
projects / thirdparty / Chart.js.git / commitdiff
