├── README.md
├── chartjs
    ├── Chart.bundle.js
    ├── Chart.bundle.min.js
    ├── Chart.js
    ├── Chart.min.js
    ├── LICENSE.md
    └── samples
    │   ├── advanced
    │       ├── data-labelling.html
    │       └── progress-bar.html
    │   ├── charts
    │       ├── area
    │       │   ├── analyser.js
    │       │   ├── line-boundaries.html
    │       │   ├── line-datasets.html
    │       │   ├── line-stacked.html
    │       │   └── radar.html
    │       ├── bar
    │       │   ├── horizontal.html
    │       │   ├── multi-axis.html
    │       │   ├── stacked-group.html
    │       │   ├── stacked.html
    │       │   └── vertical.html
    │       ├── bubble.html
    │       ├── combo-bar-line.html
    │       ├── doughnut.html
    │       ├── line
    │       │   ├── basic.html
    │       │   ├── interpolation-modes.html
    │       │   ├── line-styles.html
    │       │   ├── multi-axis.html
    │       │   ├── point-sizes.html
    │       │   ├── point-styles.html
    │       │   ├── skip-points.html
    │       │   └── stepped.html
    │       ├── pie.html
    │       ├── polar-area.html
    │       ├── radar-skip-points.html
    │       ├── radar.html
    │       └── scatter
    │       │   ├── basic.html
    │       │   └── multi-axis.html
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── legend
    │       ├── point-style.html
    │       └── positioning.html
    │   ├── logo.svg
    │   ├── samples.js
    │   ├── scales
    │       ├── filtering-labels.html
    │       ├── gridlines-display.html
    │       ├── gridlines-style.html
    │       ├── linear
    │       │   ├── min-max-suggested.html
    │       │   ├── min-max.html
    │       │   └── step-size.html
    │       ├── logarithmic
    │       │   ├── line.html
    │       │   └── scatter.html
    │       ├── multiline-labels.html
    │       ├── non-numeric-y.html
    │       ├── time
    │       │   ├── combo.html
    │       │   ├── financial.html
    │       │   ├── line-point-data.html
    │       │   └── line.html
    │       └── toggle-scale-type.html
    │   ├── scriptable
    │       └── bubble.html
    │   ├── style.css
    │   ├── tooltips
    │       ├── border.html
    │       ├── callbacks.html
    │       ├── custom-line.html
    │       ├── custom-pie.html
    │       ├── custom-points.html
    │       ├── interactions.html
    │       └── positioning.html
    │   └── utils.js
├── index.php
└── koneksi.php


/README.md:
--------------------------------------------------------------------------------
1 | # grafik-dari-database-php-dan-mysqli
2 | Tutorial menampilkan data dalam grafik chart.js dengan PHP dan MySQLi
3 | <br/>
4 | Tutorial https://www.malasngoding.com/membuat-grafik-dari-database-mysql-dan-php-dengan-chart-js/
5 | 


--------------------------------------------------------------------------------
/chartjs/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 Chart.js Contributors
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 


--------------------------------------------------------------------------------
/chartjs/samples/advanced/data-labelling.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!doctype html>
  3 | <html>
  4 | 
  5 | <head>
  6 | 	<title>Labelling Data Points</title>
  7 | 	<script src="../../Chart.bundle.js"></script>
  8 | 	<script src="../utils.js"></script>
  9 | 	<style>
 10 | 		canvas {
 11 | 			-moz-user-select: none;
 12 | 			-webkit-user-select: none;
 13 | 			-ms-user-select: none;
 14 | 		}
 15 | 	</style>
 16 | </head>
 17 | 
 18 | <body>
 19 | 	<div style="width: 75%">
 20 | 		<canvas id="canvas"></canvas>
 21 | 	</div>
 22 | 	<button id="randomizeData">Randomize Data</button>
 23 | 	<script>
 24 | 		var color = Chart.helpers.color;
 25 | 		var barChartData = {
 26 | 			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 27 | 			datasets: [{
 28 | 				type: 'bar',
 29 | 				label: 'Dataset 1',
 30 | 				backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
 31 | 				borderColor: window.chartColors.red,
 32 | 				data: [
 33 | 					randomScalingFactor(),
 34 | 					randomScalingFactor(),
 35 | 					randomScalingFactor(),
 36 | 					randomScalingFactor(),
 37 | 					randomScalingFactor(),
 38 | 					randomScalingFactor(),
 39 | 					randomScalingFactor()
 40 | 				]
 41 | 			}, {
 42 | 				type: 'line',
 43 | 				label: 'Dataset 2',
 44 | 				backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
 45 | 				borderColor: window.chartColors.blue,
 46 | 				data: [
 47 | 					randomScalingFactor(),
 48 | 					randomScalingFactor(),
 49 | 					randomScalingFactor(),
 50 | 					randomScalingFactor(),
 51 | 					randomScalingFactor(),
 52 | 					randomScalingFactor(),
 53 | 					randomScalingFactor()
 54 | 				]
 55 | 			}, {
 56 | 				type: 'bar',
 57 | 				label: 'Dataset 3',
 58 | 				backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
 59 | 				borderColor: window.chartColors.green,
 60 | 				data: [
 61 | 					randomScalingFactor(),
 62 | 					randomScalingFactor(),
 63 | 					randomScalingFactor(),
 64 | 					randomScalingFactor(),
 65 | 					randomScalingFactor(),
 66 | 					randomScalingFactor(),
 67 | 					randomScalingFactor()
 68 | 				]
 69 | 			}]
 70 | 		};
 71 | 
 72 | 		// Define a plugin to provide data labels
 73 | 		Chart.plugins.register({
 74 | 			afterDatasetsDraw: function(chart) {
 75 | 				var ctx = chart.ctx;
 76 | 
 77 | 				chart.data.datasets.forEach(function(dataset, i) {
 78 | 					var meta = chart.getDatasetMeta(i);
 79 | 					if (!meta.hidden) {
 80 | 						meta.data.forEach(function(element, index) {
 81 | 							// Draw the text in black, with the specified font
 82 | 							ctx.fillStyle = 'rgb(0, 0, 0)';
 83 | 
 84 | 							var fontSize = 16;
 85 | 							var fontStyle = 'normal';
 86 | 							var fontFamily = 'Helvetica Neue';
 87 | 							ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
 88 | 
 89 | 							// Just naively convert to string for now
 90 | 							var dataString = dataset.data[index].toString();
 91 | 
 92 | 							// Make sure alignment settings are correct
 93 | 							ctx.textAlign = 'center';
 94 | 							ctx.textBaseline = 'middle';
 95 | 
 96 | 							var padding = 5;
 97 | 							var position = element.tooltipPosition();
 98 | 							ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
 99 | 						});
100 | 					}
101 | 				});
102 | 			}
103 | 		});
104 | 
105 | 		window.onload = function() {
106 | 			var ctx = document.getElementById('canvas').getContext('2d');
107 | 			window.myBar = new Chart(ctx, {
108 | 				type: 'bar',
109 | 				data: barChartData,
110 | 				options: {
111 | 					responsive: true,
112 | 					title: {
113 | 						display: true,
114 | 						text: 'Chart.js Combo Bar Line Chart'
115 | 					},
116 | 				}
117 | 			});
118 | 		};
119 | 
120 | 		document.getElementById('randomizeData').addEventListener('click', function() {
121 | 			barChartData.datasets.forEach(function(dataset) {
122 | 				dataset.data = dataset.data.map(function() {
123 | 					return randomScalingFactor();
124 | 				});
125 | 			});
126 | 			window.myBar.update();
127 | 		});
128 | 	</script>
129 | </body>
130 | 
131 | </html>
132 | 


--------------------------------------------------------------------------------
/chartjs/samples/advanced/progress-bar.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <title> Animation Callbacks </title>
 5 | 	<script src="../../Chart.bundle.js"></script>
 6 | 	<script src="../utils.js"></script>
 7 | 	<style>
 8 | 		canvas {
 9 | 			-moz-user-select: none;
10 | 			-webkit-user-select: none;
11 | 			-ms-user-select: none;
12 | 		}
13 | 	</style>
14 | </head>
15 | 
16 | <body>
17 | 	<div style="width: 75%;">
18 | 		<canvas id="canvas"></canvas>
19 | 		<progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>
20 | 	</div>
21 | 	<br>
22 | 	<br>
23 | 	<button id="randomizeData">Randomize Data</button>
24 | 	<script>
25 | 		var progress = document.getElementById('animationProgress');
26 | 		var config = {
27 | 			type: 'line',
28 | 			data: {
29 | 				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
30 | 				datasets: [{
31 | 					fill: false,
32 | 					borderColor: window.chartColors.red,
33 | 					backgroundColor: window.chartColors.red,
34 | 					data: [
35 | 						randomScalingFactor(),
36 | 						randomScalingFactor(),
37 | 						randomScalingFactor(),
38 | 						randomScalingFactor(),
39 | 						randomScalingFactor(),
40 | 						randomScalingFactor(),
41 | 						randomScalingFactor()
42 | 					]
43 | 				}, {
44 | 					label: 'My Second dataset ',
45 | 					fill: false,
46 | 					borderColor: window.chartColors.blue,
47 | 					backgroundColor: window.chartColors.blue,
48 | 					data: [
49 | 						randomScalingFactor(),
50 | 						randomScalingFactor(),
51 | 						randomScalingFactor(),
52 | 						randomScalingFactor(),
53 | 						randomScalingFactor(),
54 | 						randomScalingFactor(),
55 | 						randomScalingFactor()
56 | 					]
57 | 				}]
58 | 			},
59 | 			options: {
60 | 				title: {
61 | 					display: true,
62 | 					text: 'Chart.js Line Chart - Animation Progress Bar'
63 | 				},
64 | 				animation: {
65 | 					duration: 2000,
66 | 					onProgress: function(animation) {
67 | 						progress.value = animation.currentStep / animation.numSteps;
68 | 					},
69 | 					onComplete: function() {
70 | 						window.setTimeout(function() {
71 | 							progress.value = 0;
72 | 						}, 2000);
73 | 					}
74 | 				}
75 | 			}
76 | 		};
77 | 
78 | 		window.onload = function() {
79 | 			var ctx = document.getElementById('canvas').getContext('2d');
80 | 			window.myLine = new Chart(ctx, config);
81 | 		};
82 | 
83 | 		document.getElementById('randomizeData').addEventListener('click', function() {
84 | 			config.data.datasets.forEach(function(dataset) {
85 | 				dataset.data = dataset.data.map(function() {
86 | 					return randomScalingFactor();
87 | 				});
88 | 			});
89 | 
90 | 			window.myLine.update();
91 | 		});
92 | 	</script>
93 | </body>
94 | 
95 | </html>
96 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/area/analyser.js:
--------------------------------------------------------------------------------
 1 | /* global Chart */
 2 | 
 3 | 'use strict';
 4 | 
 5 | (function() {
 6 | 	Chart.plugins.register({
 7 | 		id: 'samples-filler-analyser',
 8 | 
 9 | 		beforeInit: function(chart, options) {
10 | 			this.element = document.getElementById(options.target);
11 | 		},
12 | 
13 | 		afterUpdate: function(chart) {
14 | 			var datasets = chart.data.datasets;
15 | 			var element = this.element;
16 | 			var stats = [];
17 | 			var meta, i, ilen, dataset;
18 | 
19 | 			if (!element) {
20 | 				return;
21 | 			}
22 | 
23 | 			for (i = 0, ilen = datasets.length; i < ilen; ++i) {
24 | 				meta = chart.getDatasetMeta(i).$filler;
25 | 				if (meta) {
26 | 					dataset = datasets[i];
27 | 					stats.push({
28 | 						fill: dataset.fill,
29 | 						target: meta.fill,
30 | 						visible: meta.visible,
31 | 						index: i
32 | 					});
33 | 				}
34 | 			}
35 | 
36 | 			this.element.innerHTML = '<table>' +
37 | 				'<tr>' +
38 | 					'<th>Dataset</th>' +
39 | 					'<th>Fill</th>' +
40 | 					'<th>Target (visibility)</th>' +
41 | 				'</tr>' +
42 | 				stats.map(function(stat) {
43 | 					var target = stat.target;
44 | 					var row =
45 | 						'<td><b>' + stat.index + '</b></td>' +
46 | 						'<td>' + JSON.stringify(stat.fill) + '</td>';
47 | 
48 | 					if (target === false) {
49 | 						target = 'none';
50 | 					} else if (isFinite(target)) {
51 | 						target = 'dataset ' + target;
52 | 					} else {
53 | 						target = 'boundary "' + target + '"';
54 | 					}
55 | 
56 | 					if (stat.visible) {
57 | 						row += '<td>' + target + '</td>';
58 | 					} else {
59 | 						row += '<td>(hidden)</td>';
60 | 					}
61 | 
62 | 					return '<tr>' + row + '</tr>';
63 | 				}).join('') + '</table>';
64 | 		}
65 | 	});
66 | }());
67 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/area/line-boundaries.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-US">
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
  6 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 	<title>area > boundaries | Chart.js sample</title>
  8 | 	<link rel="stylesheet" type="text/css" href="../../style.css">
  9 | 	<script src="../../../Chart.bundle.js"></script>
 10 | 	<script src="../../utils.js"></script>
 11 | 	<script src="analyser.js"></script>
 12 | </head>
 13 | <body>
 14 | 	<div class="content">
 15 | 		<div class="wrapper col-2"><canvas id="chart-0"></canvas></div>
 16 | 		<div class="wrapper col-2"><canvas id="chart-1"></canvas></div>
 17 | 		<div class="wrapper col-2"><canvas id="chart-2"></canvas></div>
 18 | 		<div class="wrapper col-2"><canvas id="chart-3"></canvas></div>
 19 | 
 20 | 		<div class="toolbar">
 21 | 			<button onclick="toggleSmooth(this)">Smooth</button>
 22 | 			<button onclick="randomize(this)">Randomize</button>
 23 | 		</div>
 24 | 	</div>
 25 | 
 26 | 	<script>
 27 | 		var presets = window.chartColors;
 28 | 		var utils = Samples.utils;
 29 | 		var inputs = {
 30 | 			min: -100,
 31 | 			max: 100,
 32 | 			count: 8,
 33 | 			decimals: 2,
 34 | 			continuity: 1
 35 | 		};
 36 | 
 37 | 		function generateData(config) {
 38 | 			return utils.numbers(Chart.helpers.merge(inputs, config || {}));
 39 | 		}
 40 | 
 41 | 		function generateLabels(config) {
 42 | 			return utils.months(Chart.helpers.merge({
 43 | 				count: inputs.count,
 44 | 				section: 3
 45 | 			}, config || {}));
 46 | 		}
 47 | 
 48 | 		var options = {
 49 | 			maintainAspectRatio: false,
 50 | 			spanGaps: false,
 51 | 			elements: {
 52 | 				line: {
 53 | 					tension: 0.000001
 54 | 				}
 55 | 			},
 56 | 			plugins: {
 57 | 				filler: {
 58 | 					propagate: false
 59 | 				}
 60 | 			},
 61 | 			scales: {
 62 | 				xAxes: [{
 63 | 					ticks: {
 64 | 						autoSkip: false,
 65 | 						maxRotation: 0
 66 | 					}
 67 | 				}]
 68 | 			}
 69 | 		};
 70 | 
 71 | 		[false, 'origin', 'start', 'end'].forEach(function(boundary, index) {
 72 | 
 73 | 			// reset the random seed to generate the same data for all charts
 74 | 			utils.srand(8);
 75 | 
 76 | 			new Chart('chart-' + index, {
 77 | 				type: 'line',
 78 | 				data: {
 79 | 					labels: generateLabels(),
 80 | 					datasets: [{
 81 | 						backgroundColor: utils.transparentize(presets.red),
 82 | 						borderColor: presets.red,
 83 | 						data: generateData(),
 84 | 						label: 'Dataset',
 85 | 						fill: boundary
 86 | 					}]
 87 | 				},
 88 | 				options: Chart.helpers.merge(options, {
 89 | 					title: {
 90 | 						text: 'fill: ' + boundary,
 91 | 						display: true
 92 | 					}
 93 | 				})
 94 | 			});
 95 | 		});
 96 | 
 97 | 		// eslint-disable-next-line no-unused-vars
 98 | 		function toggleSmooth(btn) {
 99 | 			var value = btn.classList.toggle('btn-on');
100 | 			Chart.helpers.each(Chart.instances, function(chart) {
101 | 				chart.options.elements.line.tension = value ? 0.4 : 0.000001;
102 | 				chart.update();
103 | 			});
104 | 		}
105 | 
106 | 		// eslint-disable-next-line no-unused-vars
107 | 		function randomize() {
108 | 			var seed = utils.rand();
109 | 			Chart.helpers.each(Chart.instances, function(chart) {
110 | 				utils.srand(seed);
111 | 
112 | 				chart.data.datasets.forEach(function(dataset) {
113 | 					dataset.data = generateData();
114 | 				});
115 | 
116 | 				chart.update();
117 | 			});
118 | 		}
119 | 	</script>
120 | </body>
121 | </html>
122 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/area/line-datasets.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-US">
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
  6 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 	<title>area > datasets | Chart.js sample</title>
  8 | 	<link rel="stylesheet" type="text/css" href="../../style.css">
  9 | 	<script src="../../../Chart.bundle.js"></script>
 10 | 	<script src="../../utils.js"></script>
 11 | 	<script src="analyser.js"></script>
 12 | </head>
 13 | <body>
 14 | 	<div class="content">
 15 | 		<div class="wrapper">
 16 | 			<canvas id="chart-0"></canvas>
 17 | 		</div>
 18 | 		<div class="toolbar">
 19 | 			<button onclick="togglePropagate(this)">Propagate</button>
 20 | 			<button onclick="toggleSmooth(this)">Smooth</button>
 21 | 			<button onclick="randomize(this)">Randomize</button>
 22 | 		</div>
 23 | 		<div id="chart-analyser" class="analyser"></div>
 24 | 	</div>
 25 | 
 26 | 	<script>
 27 | 		var presets = window.chartColors;
 28 | 		var utils = Samples.utils;
 29 | 		var inputs = {
 30 | 			min: 20,
 31 | 			max: 80,
 32 | 			count: 8,
 33 | 			decimals: 2,
 34 | 			continuity: 1
 35 | 		};
 36 | 
 37 | 		function generateData() {
 38 | 			return utils.numbers(inputs);
 39 | 		}
 40 | 
 41 | 		function generateLabels() {
 42 | 			return utils.months({count: inputs.count});
 43 | 		}
 44 | 
 45 | 		utils.srand(42);
 46 | 
 47 | 		var data = {
 48 | 			labels: generateLabels(),
 49 | 			datasets: [{
 50 | 				backgroundColor: utils.transparentize(presets.red),
 51 | 				borderColor: presets.red,
 52 | 				data: generateData(),
 53 | 				hidden: true,
 54 | 				label: 'D0'
 55 | 			}, {
 56 | 				backgroundColor: utils.transparentize(presets.orange),
 57 | 				borderColor: presets.orange,
 58 | 				data: generateData(),
 59 | 				label: 'D1',
 60 | 				fill: '-1'
 61 | 			}, {
 62 | 				backgroundColor: utils.transparentize(presets.yellow),
 63 | 				borderColor: presets.yellow,
 64 | 				data: generateData(),
 65 | 				hidden: true,
 66 | 				label: 'D2',
 67 | 				fill: 1
 68 | 			}, {
 69 | 				backgroundColor: utils.transparentize(presets.green),
 70 | 				borderColor: presets.green,
 71 | 				data: generateData(),
 72 | 				label: 'D3',
 73 | 				fill: '-1'
 74 | 			}, {
 75 | 				backgroundColor: utils.transparentize(presets.blue),
 76 | 				borderColor: presets.blue,
 77 | 				data: generateData(),
 78 | 				label: 'D4',
 79 | 				fill: '-1'
 80 | 			}, {
 81 | 				backgroundColor: utils.transparentize(presets.grey),
 82 | 				borderColor: presets.grey,
 83 | 				data: generateData(),
 84 | 				label: 'D5',
 85 | 				fill: '+2'
 86 | 			}, {
 87 | 				backgroundColor: utils.transparentize(presets.purple),
 88 | 				borderColor: presets.purple,
 89 | 				data: generateData(),
 90 | 				label: 'D6',
 91 | 				fill: false
 92 | 			}, {
 93 | 				backgroundColor: utils.transparentize(presets.red),
 94 | 				borderColor: presets.red,
 95 | 				data: generateData(),
 96 | 				label: 'D7',
 97 | 				fill: 8
 98 | 			}, {
 99 | 				backgroundColor: utils.transparentize(presets.orange),
100 | 				borderColor: presets.orange,
101 | 				data: generateData(),
102 | 				hidden: true,
103 | 				label: 'D8',
104 | 				fill: 'end'
105 | 			}]
106 | 		};
107 | 
108 | 		var options = {
109 | 			maintainAspectRatio: false,
110 | 			spanGaps: false,
111 | 			elements: {
112 | 				line: {
113 | 					tension: 0.000001
114 | 				}
115 | 			},
116 | 			scales: {
117 | 				yAxes: [{
118 | 					stacked: true
119 | 				}]
120 | 			},
121 | 			plugins: {
122 | 				filler: {
123 | 					propagate: false
124 | 				},
125 | 				'samples-filler-analyser': {
126 | 					target: 'chart-analyser'
127 | 				}
128 | 			}
129 | 		};
130 | 
131 | 		var chart = new Chart('chart-0', {
132 | 			type: 'line',
133 | 			data: data,
134 | 			options: options
135 | 		});
136 | 
137 | 		// eslint-disable-next-line no-unused-vars
138 | 		function togglePropagate(btn) {
139 | 			var value = btn.classList.toggle('btn-on');
140 | 			chart.options.plugins.filler.propagate = value;
141 | 			chart.update();
142 | 		}
143 | 
144 | 		// eslint-disable-next-line no-unused-vars
145 | 		function toggleSmooth(btn) {
146 | 			var value = btn.classList.toggle('btn-on');
147 | 			chart.options.elements.line.tension = value ? 0.4 : 0.000001;
148 | 			chart.update();
149 | 		}
150 | 
151 | 		// eslint-disable-next-line no-unused-vars
152 | 		function randomize() {
153 | 			chart.data.datasets.forEach(function(dataset) {
154 | 				dataset.data = generateData();
155 | 			});
156 | 			chart.update();
157 | 		}
158 | 	</script>
159 | </body>
160 | </html>
161 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/area/line-stacked.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Line Chart</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 		canvas {
 10 | 			-moz-user-select: none;
 11 | 			-webkit-user-select: none;
 12 | 			-ms-user-select: none;
 13 | 		}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width:75%;">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<br>
 22 | 	<br>
 23 | 	<button id="randomizeData">Randomize Data</button>
 24 | 	<button id="addDataset">Add Dataset</button>
 25 | 	<button id="removeDataset">Remove Dataset</button>
 26 | 	<button id="addData">Add Data</button>
 27 | 	<button id="removeData">Remove Data</button>
 28 | 	<script>
 29 | 		var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 30 | 		var config = {
 31 | 			type: 'line',
 32 | 			data: {
 33 | 				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 34 | 				datasets: [{
 35 | 					label: 'My First dataset',
 36 | 					borderColor: window.chartColors.red,
 37 | 					backgroundColor: window.chartColors.red,
 38 | 					data: [
 39 | 						randomScalingFactor(),
 40 | 						randomScalingFactor(),
 41 | 						randomScalingFactor(),
 42 | 						randomScalingFactor(),
 43 | 						randomScalingFactor(),
 44 | 						randomScalingFactor(),
 45 | 						randomScalingFactor()
 46 | 					],
 47 | 				}, {
 48 | 					label: 'My Second dataset',
 49 | 					borderColor: window.chartColors.blue,
 50 | 					backgroundColor: window.chartColors.blue,
 51 | 					data: [
 52 | 						randomScalingFactor(),
 53 | 						randomScalingFactor(),
 54 | 						randomScalingFactor(),
 55 | 						randomScalingFactor(),
 56 | 						randomScalingFactor(),
 57 | 						randomScalingFactor(),
 58 | 						randomScalingFactor()
 59 | 					],
 60 | 				}, {
 61 | 					label: 'My Third dataset',
 62 | 					borderColor: window.chartColors.green,
 63 | 					backgroundColor: window.chartColors.green,
 64 | 					data: [
 65 | 						randomScalingFactor(),
 66 | 						randomScalingFactor(),
 67 | 						randomScalingFactor(),
 68 | 						randomScalingFactor(),
 69 | 						randomScalingFactor(),
 70 | 						randomScalingFactor(),
 71 | 						randomScalingFactor()
 72 | 					],
 73 | 				}, {
 74 | 					label: 'My Third dataset',
 75 | 					borderColor: window.chartColors.yellow,
 76 | 					backgroundColor: window.chartColors.yellow,
 77 | 					data: [
 78 | 						randomScalingFactor(),
 79 | 						randomScalingFactor(),
 80 | 						randomScalingFactor(),
 81 | 						randomScalingFactor(),
 82 | 						randomScalingFactor(),
 83 | 						randomScalingFactor(),
 84 | 						randomScalingFactor()
 85 | 					],
 86 | 				}]
 87 | 			},
 88 | 			options: {
 89 | 				responsive: true,
 90 | 				title: {
 91 | 					display: true,
 92 | 					text: 'Chart.js Line Chart - Stacked Area'
 93 | 				},
 94 | 				tooltips: {
 95 | 					mode: 'index',
 96 | 				},
 97 | 				hover: {
 98 | 					mode: 'index'
 99 | 				},
100 | 				scales: {
101 | 					xAxes: [{
102 | 						scaleLabel: {
103 | 							display: true,
104 | 							labelString: 'Month'
105 | 						}
106 | 					}],
107 | 					yAxes: [{
108 | 						stacked: true,
109 | 						scaleLabel: {
110 | 							display: true,
111 | 							labelString: 'Value'
112 | 						}
113 | 					}]
114 | 				}
115 | 			}
116 | 		};
117 | 
118 | 		window.onload = function() {
119 | 			var ctx = document.getElementById('canvas').getContext('2d');
120 | 			window.myLine = new Chart(ctx, config);
121 | 		};
122 | 
123 | 		document.getElementById('randomizeData').addEventListener('click', function() {
124 | 			config.data.datasets.forEach(function(dataset) {
125 | 				dataset.data = dataset.data.map(function() {
126 | 					return randomScalingFactor();
127 | 				});
128 | 
129 | 			});
130 | 
131 | 			window.myLine.update();
132 | 		});
133 | 
134 | 		var colorNames = Object.keys(window.chartColors);
135 | 		document.getElementById('addDataset').addEventListener('click', function() {
136 | 			var colorName = colorNames[config.data.datasets.length % colorNames.length];
137 | 			var newColor = window.chartColors[colorName];
138 | 			var newDataset = {
139 | 				label: 'Dataset ' + config.data.datasets.length,
140 | 				borderColor: newColor,
141 | 				backgroundColor: newColor,
142 | 				data: [],
143 | 			};
144 | 
145 | 			for (var index = 0; index < config.data.labels.length; ++index) {
146 | 				newDataset.data.push(randomScalingFactor());
147 | 			}
148 | 
149 | 			config.data.datasets.push(newDataset);
150 | 			window.myLine.update();
151 | 		});
152 | 
153 | 		document.getElementById('addData').addEventListener('click', function() {
154 | 			if (config.data.datasets.length > 0) {
155 | 				var month = MONTHS[config.data.labels.length % MONTHS.length];
156 | 				config.data.labels.push(month);
157 | 
158 | 				config.data.datasets.forEach(function(dataset) {
159 | 					dataset.data.push(randomScalingFactor());
160 | 				});
161 | 
162 | 				window.myLine.update();
163 | 			}
164 | 		});
165 | 
166 | 		document.getElementById('removeDataset').addEventListener('click', function() {
167 | 			config.data.datasets.splice(0, 1);
168 | 			window.myLine.update();
169 | 		});
170 | 
171 | 		document.getElementById('removeData').addEventListener('click', function() {
172 | 			config.data.labels.splice(-1, 1); // remove the label first
173 | 
174 | 			config.data.datasets.forEach(function(dataset) {
175 | 				dataset.data.pop();
176 | 			});
177 | 
178 | 			window.myLine.update();
179 | 		});
180 | 	</script>
181 | </body>
182 | 
183 | </html>
184 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/area/radar.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-US">
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
  6 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 	<title>area > radar | Chart.js sample</title>
  8 | 	<link rel="stylesheet" type="text/css" href="../../style.css">
  9 | 	<script src="../../../Chart.bundle.js"></script>
 10 | 	<script src="../../utils.js"></script>
 11 | 	<script src="analyser.js"></script>
 12 | </head>
 13 | <body>
 14 | 	<div class="content">
 15 | 		<div class="wrapper" style="max-width: 512px; margin: auto">
 16 | 			<canvas id="chart-0"></canvas>
 17 | 		</div>
 18 | 		<div class="toolbar">
 19 | 			<button onclick="togglePropagate(this)">Propagate</button>
 20 | 			<button onclick="toggleSmooth(this)">Smooth</button>
 21 | 			<button onclick="randomize(this)">Randomize</button>
 22 | 		</div>
 23 | 		<div id="chart-analyser" class="analyser"></div>
 24 | 	</div>
 25 | 
 26 | 	<script>
 27 | 		var presets = window.chartColors;
 28 | 		var utils = Samples.utils;
 29 | 		var inputs = {
 30 | 			min: 8,
 31 | 			max: 16,
 32 | 			count: 8,
 33 | 			decimals: 2,
 34 | 			continuity: 1
 35 | 		};
 36 | 
 37 | 		function generateData() {
 38 | 			// radar chart doesn't support stacked values, let's do it manually
 39 | 			var values = utils.numbers(inputs);
 40 | 			inputs.from = values;
 41 | 			return values;
 42 | 		}
 43 | 
 44 | 		function generateLabels() {
 45 | 			return utils.months({count: inputs.count});
 46 | 		}
 47 | 
 48 | 		utils.srand(42);
 49 | 
 50 | 		var data = {
 51 | 			labels: generateLabels(),
 52 | 			datasets: [{
 53 | 				backgroundColor: utils.transparentize(presets.red),
 54 | 				borderColor: presets.red,
 55 | 				data: generateData(),
 56 | 				label: 'D0'
 57 | 			}, {
 58 | 				backgroundColor: utils.transparentize(presets.orange),
 59 | 				borderColor: presets.orange,
 60 | 				data: generateData(),
 61 | 				hidden: true,
 62 | 				label: 'D1',
 63 | 				fill: '-1'
 64 | 			}, {
 65 | 				backgroundColor: utils.transparentize(presets.yellow),
 66 | 				borderColor: presets.yellow,
 67 | 				data: generateData(),
 68 | 				label: 'D2',
 69 | 				fill: 1
 70 | 			}, {
 71 | 				backgroundColor: utils.transparentize(presets.green),
 72 | 				borderColor: presets.green,
 73 | 				data: generateData(),
 74 | 				label: 'D3',
 75 | 				fill: false
 76 | 			}, {
 77 | 				backgroundColor: utils.transparentize(presets.blue),
 78 | 				borderColor: presets.blue,
 79 | 				data: generateData(),
 80 | 				label: 'D4',
 81 | 				fill: '-1'
 82 | 			}, {
 83 | 				backgroundColor: utils.transparentize(presets.purple),
 84 | 				borderColor: presets.purple,
 85 | 				data: generateData(),
 86 | 				label: 'D5',
 87 | 				fill: '-1'
 88 | 			}]
 89 | 		};
 90 | 
 91 | 		var options = {
 92 | 			maintainAspectRatio: true,
 93 | 			spanGaps: false,
 94 | 			elements: {
 95 | 				line: {
 96 | 					tension: 0.000001
 97 | 				}
 98 | 			},
 99 | 			plugins: {
100 | 				filler: {
101 | 					propagate: false
102 | 				},
103 | 				'samples-filler-analyser': {
104 | 					target: 'chart-analyser'
105 | 				}
106 | 			}
107 | 		};
108 | 
109 | 		var chart = new Chart('chart-0', {
110 | 			type: 'radar',
111 | 			data: data,
112 | 			options: options
113 | 		});
114 | 
115 | 		// eslint-disable-next-line no-unused-vars
116 | 		function togglePropagate(btn) {
117 | 			var value = btn.classList.toggle('btn-on');
118 | 			chart.options.plugins.filler.propagate = value;
119 | 			chart.update();
120 | 		}
121 | 
122 | 		// eslint-disable-next-line no-unused-vars
123 | 		function toggleSmooth(btn) {
124 | 			var value = btn.classList.toggle('btn-on');
125 | 			chart.options.elements.line.tension = value ? 0.4 : 0.000001;
126 | 			chart.update();
127 | 		}
128 | 
129 | 		// eslint-disable-next-line no-unused-vars
130 | 		function randomize() {
131 | 			inputs.from = [];
132 | 			chart.data.datasets.forEach(function(dataset) {
133 | 				dataset.data = generateData();
134 | 			});
135 | 			chart.update();
136 | 		}
137 | 	</script>
138 | </body>
139 | </html>
140 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/bar/horizontal.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Horizontal Bar Chart</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 	canvas {
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div id="container" style="width: 75%;">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<button id="randomizeData">Randomize Data</button>
 22 | 	<button id="addDataset">Add Dataset</button>
 23 | 	<button id="removeDataset">Remove Dataset</button>
 24 | 	<button id="addData">Add Data</button>
 25 | 	<button id="removeData">Remove Data</button>
 26 | 	<script>
 27 | 		var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 28 | 		var color = Chart.helpers.color;
 29 | 		var horizontalBarChartData = {
 30 | 			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 31 | 			datasets: [{
 32 | 				label: 'Dataset 1',
 33 | 				backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
 34 | 				borderColor: window.chartColors.red,
 35 | 				borderWidth: 1,
 36 | 				data: [
 37 | 					randomScalingFactor(),
 38 | 					randomScalingFactor(),
 39 | 					randomScalingFactor(),
 40 | 					randomScalingFactor(),
 41 | 					randomScalingFactor(),
 42 | 					randomScalingFactor(),
 43 | 					randomScalingFactor()
 44 | 				]
 45 | 			}, {
 46 | 				label: 'Dataset 2',
 47 | 				backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
 48 | 				borderColor: window.chartColors.blue,
 49 | 				data: [
 50 | 					randomScalingFactor(),
 51 | 					randomScalingFactor(),
 52 | 					randomScalingFactor(),
 53 | 					randomScalingFactor(),
 54 | 					randomScalingFactor(),
 55 | 					randomScalingFactor(),
 56 | 					randomScalingFactor()
 57 | 				]
 58 | 			}]
 59 | 
 60 | 		};
 61 | 
 62 | 		window.onload = function() {
 63 | 			var ctx = document.getElementById('canvas').getContext('2d');
 64 | 			window.myHorizontalBar = new Chart(ctx, {
 65 | 				type: 'horizontalBar',
 66 | 				data: horizontalBarChartData,
 67 | 				options: {
 68 | 					// Elements options apply to all of the options unless overridden in a dataset
 69 | 					// In this case, we are setting the border of each horizontal bar to be 2px wide
 70 | 					elements: {
 71 | 						rectangle: {
 72 | 							borderWidth: 2,
 73 | 						}
 74 | 					},
 75 | 					responsive: true,
 76 | 					legend: {
 77 | 						position: 'right',
 78 | 					},
 79 | 					title: {
 80 | 						display: true,
 81 | 						text: 'Chart.js Horizontal Bar Chart'
 82 | 					}
 83 | 				}
 84 | 			});
 85 | 
 86 | 		};
 87 | 
 88 | 		document.getElementById('randomizeData').addEventListener('click', function() {
 89 | 			var zero = Math.random() < 0.2 ? true : false;
 90 | 			horizontalBarChartData.datasets.forEach(function(dataset) {
 91 | 				dataset.data = dataset.data.map(function() {
 92 | 					return zero ? 0.0 : randomScalingFactor();
 93 | 				});
 94 | 
 95 | 			});
 96 | 			window.myHorizontalBar.update();
 97 | 		});
 98 | 
 99 | 		var colorNames = Object.keys(window.chartColors);
100 | 
101 | 		document.getElementById('addDataset').addEventListener('click', function() {
102 | 			var colorName = colorNames[horizontalBarChartData.datasets.length % colorNames.length];
103 | 			var dsColor = window.chartColors[colorName];
104 | 			var newDataset = {
105 | 				label: 'Dataset ' + horizontalBarChartData.datasets.length,
106 | 				backgroundColor: color(dsColor).alpha(0.5).rgbString(),
107 | 				borderColor: dsColor,
108 | 				data: []
109 | 			};
110 | 
111 | 			for (var index = 0; index < horizontalBarChartData.labels.length; ++index) {
112 | 				newDataset.data.push(randomScalingFactor());
113 | 			}
114 | 
115 | 			horizontalBarChartData.datasets.push(newDataset);
116 | 			window.myHorizontalBar.update();
117 | 		});
118 | 
119 | 		document.getElementById('addData').addEventListener('click', function() {
120 | 			if (horizontalBarChartData.datasets.length > 0) {
121 | 				var month = MONTHS[horizontalBarChartData.labels.length % MONTHS.length];
122 | 				horizontalBarChartData.labels.push(month);
123 | 
124 | 				for (var index = 0; index < horizontalBarChartData.datasets.length; ++index) {
125 | 					horizontalBarChartData.datasets[index].data.push(randomScalingFactor());
126 | 				}
127 | 
128 | 				window.myHorizontalBar.update();
129 | 			}
130 | 		});
131 | 
132 | 		document.getElementById('removeDataset').addEventListener('click', function() {
133 | 			horizontalBarChartData.datasets.splice(0, 1);
134 | 			window.myHorizontalBar.update();
135 | 		});
136 | 
137 | 		document.getElementById('removeData').addEventListener('click', function() {
138 | 			horizontalBarChartData.labels.splice(-1, 1); // remove the label first
139 | 
140 | 			horizontalBarChartData.datasets.forEach(function(dataset) {
141 | 				dataset.data.pop();
142 | 			});
143 | 
144 | 			window.myHorizontalBar.update();
145 | 		});
146 | 	</script>
147 | </body>
148 | 
149 | </html>
150 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/bar/multi-axis.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Bar Chart Multi Axis</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 	canvas {
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width: 75%">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<button id="randomizeData">Randomize Data</button>
 22 | 	<script>
 23 | 		var barChartData = {
 24 | 			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 25 | 			datasets: [{
 26 | 				label: 'Dataset 1',
 27 | 				backgroundColor: [
 28 | 					window.chartColors.red,
 29 | 					window.chartColors.orange,
 30 | 					window.chartColors.yellow,
 31 | 					window.chartColors.green,
 32 | 					window.chartColors.blue,
 33 | 					window.chartColors.purple,
 34 | 					window.chartColors.red
 35 | 				],
 36 | 				yAxisID: 'y-axis-1',
 37 | 				data: [
 38 | 					randomScalingFactor(),
 39 | 					randomScalingFactor(),
 40 | 					randomScalingFactor(),
 41 | 					randomScalingFactor(),
 42 | 					randomScalingFactor(),
 43 | 					randomScalingFactor(),
 44 | 					randomScalingFactor()
 45 | 				]
 46 | 			}, {
 47 | 				label: 'Dataset 2',
 48 | 				backgroundColor: window.chartColors.grey,
 49 | 				yAxisID: 'y-axis-2',
 50 | 				data: [
 51 | 					randomScalingFactor(),
 52 | 					randomScalingFactor(),
 53 | 					randomScalingFactor(),
 54 | 					randomScalingFactor(),
 55 | 					randomScalingFactor(),
 56 | 					randomScalingFactor(),
 57 | 					randomScalingFactor()
 58 | 				]
 59 | 			}]
 60 | 
 61 | 		};
 62 | 		window.onload = function() {
 63 | 			var ctx = document.getElementById('canvas').getContext('2d');
 64 | 			window.myBar = new Chart(ctx, {
 65 | 				type: 'bar',
 66 | 				data: barChartData,
 67 | 				options: {
 68 | 					responsive: true,
 69 | 					title: {
 70 | 						display: true,
 71 | 						text: 'Chart.js Bar Chart - Multi Axis'
 72 | 					},
 73 | 					tooltips: {
 74 | 						mode: 'index',
 75 | 						intersect: true
 76 | 					},
 77 | 					scales: {
 78 | 						yAxes: [{
 79 | 							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
 80 | 							display: true,
 81 | 							position: 'left',
 82 | 							id: 'y-axis-1',
 83 | 						}, {
 84 | 							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
 85 | 							display: true,
 86 | 							position: 'right',
 87 | 							id: 'y-axis-2',
 88 | 							gridLines: {
 89 | 								drawOnChartArea: false
 90 | 							}
 91 | 						}],
 92 | 					}
 93 | 				}
 94 | 			});
 95 | 		};
 96 | 
 97 | 		document.getElementById('randomizeData').addEventListener('click', function() {
 98 | 			barChartData.datasets.forEach(function(dataset) {
 99 | 				dataset.data = dataset.data.map(function() {
100 | 					return randomScalingFactor();
101 | 				});
102 | 			});
103 | 			window.myBar.update();
104 | 		});
105 | 	</script>
106 | </body>
107 | 
108 | </html>
109 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/bar/stacked-group.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Stacked Bar Chart with Groups</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 	canvas {
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width: 75%">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<button id="randomizeData">Randomize Data</button>
 22 | 	<script>
 23 | 		var barChartData = {
 24 | 			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 25 | 			datasets: [{
 26 | 				label: 'Dataset 1',
 27 | 				backgroundColor: window.chartColors.red,
 28 | 				stack: 'Stack 0',
 29 | 				data: [
 30 | 					randomScalingFactor(),
 31 | 					randomScalingFactor(),
 32 | 					randomScalingFactor(),
 33 | 					randomScalingFactor(),
 34 | 					randomScalingFactor(),
 35 | 					randomScalingFactor(),
 36 | 					randomScalingFactor()
 37 | 				]
 38 | 			}, {
 39 | 				label: 'Dataset 2',
 40 | 				backgroundColor: window.chartColors.blue,
 41 | 				stack: 'Stack 0',
 42 | 				data: [
 43 | 					randomScalingFactor(),
 44 | 					randomScalingFactor(),
 45 | 					randomScalingFactor(),
 46 | 					randomScalingFactor(),
 47 | 					randomScalingFactor(),
 48 | 					randomScalingFactor(),
 49 | 					randomScalingFactor()
 50 | 				]
 51 | 			}, {
 52 | 				label: 'Dataset 3',
 53 | 				backgroundColor: window.chartColors.green,
 54 | 				stack: 'Stack 1',
 55 | 				data: [
 56 | 					randomScalingFactor(),
 57 | 					randomScalingFactor(),
 58 | 					randomScalingFactor(),
 59 | 					randomScalingFactor(),
 60 | 					randomScalingFactor(),
 61 | 					randomScalingFactor(),
 62 | 					randomScalingFactor()
 63 | 				]
 64 | 			}]
 65 | 
 66 | 		};
 67 | 		window.onload = function() {
 68 | 			var ctx = document.getElementById('canvas').getContext('2d');
 69 | 			window.myBar = new Chart(ctx, {
 70 | 				type: 'bar',
 71 | 				data: barChartData,
 72 | 				options: {
 73 | 					title: {
 74 | 						display: true,
 75 | 						text: 'Chart.js Bar Chart - Stacked'
 76 | 					},
 77 | 					tooltips: {
 78 | 						mode: 'index',
 79 | 						intersect: false
 80 | 					},
 81 | 					responsive: true,
 82 | 					scales: {
 83 | 						xAxes: [{
 84 | 							stacked: true,
 85 | 						}],
 86 | 						yAxes: [{
 87 | 							stacked: true
 88 | 						}]
 89 | 					}
 90 | 				}
 91 | 			});
 92 | 		};
 93 | 
 94 | 		document.getElementById('randomizeData').addEventListener('click', function() {
 95 | 			barChartData.datasets.forEach(function(dataset) {
 96 | 				dataset.data = dataset.data.map(function() {
 97 | 					return randomScalingFactor();
 98 | 				});
 99 | 			});
100 | 			window.myBar.update();
101 | 		});
102 | 	</script>
103 | </body>
104 | 
105 | </html>
106 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/bar/stacked.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Stacked Bar Chart</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 	canvas {
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width: 75%">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<button id="randomizeData">Randomize Data</button>
 22 | 	<script>
 23 | 		var barChartData = {
 24 | 			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 25 | 			datasets: [{
 26 | 				label: 'Dataset 1',
 27 | 				backgroundColor: window.chartColors.red,
 28 | 				data: [
 29 | 					randomScalingFactor(),
 30 | 					randomScalingFactor(),
 31 | 					randomScalingFactor(),
 32 | 					randomScalingFactor(),
 33 | 					randomScalingFactor(),
 34 | 					randomScalingFactor(),
 35 | 					randomScalingFactor()
 36 | 				]
 37 | 			}, {
 38 | 				label: 'Dataset 2',
 39 | 				backgroundColor: window.chartColors.blue,
 40 | 				data: [
 41 | 					randomScalingFactor(),
 42 | 					randomScalingFactor(),
 43 | 					randomScalingFactor(),
 44 | 					randomScalingFactor(),
 45 | 					randomScalingFactor(),
 46 | 					randomScalingFactor(),
 47 | 					randomScalingFactor()
 48 | 				]
 49 | 			}, {
 50 | 				label: 'Dataset 3',
 51 | 				backgroundColor: window.chartColors.green,
 52 | 				data: [
 53 | 					randomScalingFactor(),
 54 | 					randomScalingFactor(),
 55 | 					randomScalingFactor(),
 56 | 					randomScalingFactor(),
 57 | 					randomScalingFactor(),
 58 | 					randomScalingFactor(),
 59 | 					randomScalingFactor()
 60 | 				]
 61 | 			}]
 62 | 
 63 | 		};
 64 | 		window.onload = function() {
 65 | 			var ctx = document.getElementById('canvas').getContext('2d');
 66 | 			window.myBar = new Chart(ctx, {
 67 | 				type: 'bar',
 68 | 				data: barChartData,
 69 | 				options: {
 70 | 					title: {
 71 | 						display: true,
 72 | 						text: 'Chart.js Bar Chart - Stacked'
 73 | 					},
 74 | 					tooltips: {
 75 | 						mode: 'index',
 76 | 						intersect: false
 77 | 					},
 78 | 					responsive: true,
 79 | 					scales: {
 80 | 						xAxes: [{
 81 | 							stacked: true,
 82 | 						}],
 83 | 						yAxes: [{
 84 | 							stacked: true
 85 | 						}]
 86 | 					}
 87 | 				}
 88 | 			});
 89 | 		};
 90 | 
 91 | 		document.getElementById('randomizeData').addEventListener('click', function() {
 92 | 			barChartData.datasets.forEach(function(dataset) {
 93 | 				dataset.data = dataset.data.map(function() {
 94 | 					return randomScalingFactor();
 95 | 				});
 96 | 			});
 97 | 			window.myBar.update();
 98 | 		});
 99 | 	</script>
100 | </body>
101 | 
102 | </html>
103 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/bar/vertical.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Bar Chart</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 	canvas {
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div id="container" style="width: 75%;">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<button id="randomizeData">Randomize Data</button>
 22 | 	<button id="addDataset">Add Dataset</button>
 23 | 	<button id="removeDataset">Remove Dataset</button>
 24 | 	<button id="addData">Add Data</button>
 25 | 	<button id="removeData">Remove Data</button>
 26 | 	<script>
 27 | 		var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 28 | 		var color = Chart.helpers.color;
 29 | 		var barChartData = {
 30 | 			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 31 | 			datasets: [{
 32 | 				label: 'Dataset 1',
 33 | 				backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
 34 | 				borderColor: window.chartColors.red,
 35 | 				borderWidth: 1,
 36 | 				data: [
 37 | 					randomScalingFactor(),
 38 | 					randomScalingFactor(),
 39 | 					randomScalingFactor(),
 40 | 					randomScalingFactor(),
 41 | 					randomScalingFactor(),
 42 | 					randomScalingFactor(),
 43 | 					randomScalingFactor()
 44 | 				]
 45 | 			}, {
 46 | 				label: 'Dataset 2',
 47 | 				backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
 48 | 				borderColor: window.chartColors.blue,
 49 | 				borderWidth: 1,
 50 | 				data: [
 51 | 					randomScalingFactor(),
 52 | 					randomScalingFactor(),
 53 | 					randomScalingFactor(),
 54 | 					randomScalingFactor(),
 55 | 					randomScalingFactor(),
 56 | 					randomScalingFactor(),
 57 | 					randomScalingFactor()
 58 | 				]
 59 | 			}]
 60 | 
 61 | 		};
 62 | 
 63 | 		window.onload = function() {
 64 | 			var ctx = document.getElementById('canvas').getContext('2d');
 65 | 			window.myBar = new Chart(ctx, {
 66 | 				type: 'bar',
 67 | 				data: barChartData,
 68 | 				options: {
 69 | 					responsive: true,
 70 | 					legend: {
 71 | 						position: 'top',
 72 | 					},
 73 | 					title: {
 74 | 						display: true,
 75 | 						text: 'Chart.js Bar Chart'
 76 | 					}
 77 | 				}
 78 | 			});
 79 | 
 80 | 		};
 81 | 
 82 | 		document.getElementById('randomizeData').addEventListener('click', function() {
 83 | 			var zero = Math.random() < 0.2 ? true : false;
 84 | 			barChartData.datasets.forEach(function(dataset) {
 85 | 				dataset.data = dataset.data.map(function() {
 86 | 					return zero ? 0.0 : randomScalingFactor();
 87 | 				});
 88 | 
 89 | 			});
 90 | 			window.myBar.update();
 91 | 		});
 92 | 
 93 | 		var colorNames = Object.keys(window.chartColors);
 94 | 		document.getElementById('addDataset').addEventListener('click', function() {
 95 | 			var colorName = colorNames[barChartData.datasets.length % colorNames.length];
 96 | 			var dsColor = window.chartColors[colorName];
 97 | 			var newDataset = {
 98 | 				label: 'Dataset ' + barChartData.datasets.length,
 99 | 				backgroundColor: color(dsColor).alpha(0.5).rgbString(),
100 | 				borderColor: dsColor,
101 | 				borderWidth: 1,
102 | 				data: []
103 | 			};
104 | 
105 | 			for (var index = 0; index < barChartData.labels.length; ++index) {
106 | 				newDataset.data.push(randomScalingFactor());
107 | 			}
108 | 
109 | 			barChartData.datasets.push(newDataset);
110 | 			window.myBar.update();
111 | 		});
112 | 
113 | 		document.getElementById('addData').addEventListener('click', function() {
114 | 			if (barChartData.datasets.length > 0) {
115 | 				var month = MONTHS[barChartData.labels.length % MONTHS.length];
116 | 				barChartData.labels.push(month);
117 | 
118 | 				for (var index = 0; index < barChartData.datasets.length; ++index) {
119 | 					// window.myBar.addData(randomScalingFactor(), index);
120 | 					barChartData.datasets[index].data.push(randomScalingFactor());
121 | 				}
122 | 
123 | 				window.myBar.update();
124 | 			}
125 | 		});
126 | 
127 | 		document.getElementById('removeDataset').addEventListener('click', function() {
128 | 			barChartData.datasets.splice(0, 1);
129 | 			window.myBar.update();
130 | 		});
131 | 
132 | 		document.getElementById('removeData').addEventListener('click', function() {
133 | 			barChartData.labels.splice(-1, 1); // remove the label first
134 | 
135 | 			barChartData.datasets.forEach(function(dataset) {
136 | 				dataset.data.pop();
137 | 			});
138 | 
139 | 			window.myBar.update();
140 | 		});
141 | 	</script>
142 | </body>
143 | 
144 | </html>
145 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/bubble.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Bubble Chart</title>
  6 | 	<script src="../../Chart.bundle.js"></script>
  7 | 	<script src="../utils.js"></script>
  8 | 	<style type="text/css">
  9 | 		canvas{
 10 | 			-moz-user-select: none;
 11 | 			-webkit-user-select: none;
 12 | 			-ms-user-select: none;
 13 | 		}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div id="container" style="width: 75%;">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<button id="randomizeData">Randomize Data</button>
 22 | 	<button id="addDataset">Add Dataset</button>
 23 | 	<button id="removeDataset">Remove Dataset</button>
 24 | 	<button id="addData">Add Data</button>
 25 | 	<button id="removeData">Remove Data</button>
 26 | 	<script>
 27 | 		var DEFAULT_DATASET_SIZE = 7;
 28 | 
 29 | 		var addedCount = 0;
 30 | 		var color = Chart.helpers.color;
 31 | 		var bubbleChartData = {
 32 | 			animation: {
 33 | 				duration: 10000
 34 | 			},
 35 | 			datasets: [{
 36 | 				label: 'My First dataset',
 37 | 				backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
 38 | 				borderColor: window.chartColors.red,
 39 | 				borderWidth: 1,
 40 | 				data: [{
 41 | 					x: randomScalingFactor(),
 42 | 					y: randomScalingFactor(),
 43 | 					r: Math.abs(randomScalingFactor()) / 5,
 44 | 				}, {
 45 | 					x: randomScalingFactor(),
 46 | 					y: randomScalingFactor(),
 47 | 					r: Math.abs(randomScalingFactor()) / 5,
 48 | 				}, {
 49 | 					x: randomScalingFactor(),
 50 | 					y: randomScalingFactor(),
 51 | 					r: Math.abs(randomScalingFactor()) / 5,
 52 | 				}, {
 53 | 					x: randomScalingFactor(),
 54 | 					y: randomScalingFactor(),
 55 | 					r: Math.abs(randomScalingFactor()) / 5,
 56 | 				}, {
 57 | 					x: randomScalingFactor(),
 58 | 					y: randomScalingFactor(),
 59 | 					r: Math.abs(randomScalingFactor()) / 5,
 60 | 				}, {
 61 | 					x: randomScalingFactor(),
 62 | 					y: randomScalingFactor(),
 63 | 					r: Math.abs(randomScalingFactor()) / 5,
 64 | 				}, {
 65 | 					x: randomScalingFactor(),
 66 | 					y: randomScalingFactor(),
 67 | 					r: Math.abs(randomScalingFactor()) / 5,
 68 | 				}]
 69 | 			}, {
 70 | 				label: 'My Second dataset',
 71 | 				backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
 72 | 				borderColor: window.chartColors.orange,
 73 | 				borderWidth: 1,
 74 | 				data: [{
 75 | 					x: randomScalingFactor(),
 76 | 					y: randomScalingFactor(),
 77 | 					r: Math.abs(randomScalingFactor()) / 5,
 78 | 				}, {
 79 | 					x: randomScalingFactor(),
 80 | 					y: randomScalingFactor(),
 81 | 					r: Math.abs(randomScalingFactor()) / 5,
 82 | 				}, {
 83 | 					x: randomScalingFactor(),
 84 | 					y: randomScalingFactor(),
 85 | 					r: Math.abs(randomScalingFactor()) / 5,
 86 | 				}, {
 87 | 					x: randomScalingFactor(),
 88 | 					y: randomScalingFactor(),
 89 | 					r: Math.abs(randomScalingFactor()) / 5,
 90 | 				}, {
 91 | 					x: randomScalingFactor(),
 92 | 					y: randomScalingFactor(),
 93 | 					r: Math.abs(randomScalingFactor()) / 5,
 94 | 				}, {
 95 | 					x: randomScalingFactor(),
 96 | 					y: randomScalingFactor(),
 97 | 					r: Math.abs(randomScalingFactor()) / 5,
 98 | 				}, {
 99 | 					x: randomScalingFactor(),
100 | 					y: randomScalingFactor(),
101 | 					r: Math.abs(randomScalingFactor()) / 5,
102 | 				}]
103 | 			}]
104 | 		};
105 | 
106 | 		window.onload = function() {
107 | 			var ctx = document.getElementById('canvas').getContext('2d');
108 | 			window.myChart = new Chart(ctx, {
109 | 				type: 'bubble',
110 | 				data: bubbleChartData,
111 | 				options: {
112 | 					responsive: true,
113 | 					title: {
114 | 						display: true,
115 | 						text: 'Chart.js Bubble Chart'
116 | 					},
117 | 					tooltips: {
118 | 						mode: 'point'
119 | 					}
120 | 				}
121 | 			});
122 | 		};
123 | 
124 | 		document.getElementById('randomizeData').addEventListener('click', function() {
125 | 			bubbleChartData.datasets.forEach(function(dataset) {
126 | 				dataset.data = dataset.data.map(function() {
127 | 					return {
128 | 						x: randomScalingFactor(),
129 | 						y: randomScalingFactor(),
130 | 						r: Math.abs(randomScalingFactor()) / 5,
131 | 					};
132 | 				});
133 | 			});
134 | 			window.myChart.update();
135 | 		});
136 | 
137 | 		var colorNames = Object.keys(window.chartColors);
138 | 		document.getElementById('addDataset').addEventListener('click', function() {
139 | 			++addedCount;
140 | 			var colorName = colorNames[bubbleChartData.datasets.length % colorNames.length];
141 | 			var dsColor = window.chartColors[colorName];
142 | 			var newDataset = {
143 | 				label: 'My added dataset ' + addedCount,
144 | 				backgroundColor: color(dsColor).alpha(0.5).rgbString(),
145 | 				borderColor: dsColor,
146 | 				borderWidth: 1,
147 | 				data: []
148 | 			};
149 | 
150 | 			for (var index = 0; index < DEFAULT_DATASET_SIZE; ++index) {
151 | 				newDataset.data.push({
152 | 					x: randomScalingFactor(),
153 | 					y: randomScalingFactor(),
154 | 					r: Math.abs(randomScalingFactor()) / 5,
155 | 				});
156 | 			}
157 | 
158 | 			bubbleChartData.datasets.push(newDataset);
159 | 			window.myChart.update();
160 | 		});
161 | 
162 | 		document.getElementById('addData').addEventListener('click', function() {
163 | 			if (bubbleChartData.datasets.length > 0) {
164 | 				for (var index = 0; index < bubbleChartData.datasets.length; ++index) {
165 | 					bubbleChartData.datasets[index].data.push({
166 | 						x: randomScalingFactor(),
167 | 						y: randomScalingFactor(),
168 | 						r: Math.abs(randomScalingFactor()) / 5,
169 | 					});
170 | 				}
171 | 
172 | 				window.myChart.update();
173 | 			}
174 | 		});
175 | 
176 | 		document.getElementById('removeDataset').addEventListener('click', function() {
177 | 			bubbleChartData.datasets.splice(0, 1);
178 | 			window.myChart.update();
179 | 		});
180 | 
181 | 		document.getElementById('removeData').addEventListener('click', function() {
182 | 			bubbleChartData.datasets.forEach(function(dataset) {
183 | 				dataset.data.pop();
184 | 			});
185 | 
186 | 			window.myChart.update();
187 | 		});
188 | 	</script>
189 | </body>
190 | 
191 | </html>
192 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/combo-bar-line.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Combo Bar-Line Chart</title>
  6 | 	<script src="../../Chart.bundle.js"></script>
  7 | 	<script src="../utils.js"></script>
  8 | 	<style>
  9 | 	canvas {
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width: 75%">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<button id="randomizeData">Randomize Data</button>
 22 | 	<script>
 23 | 		var chartData = {
 24 | 			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 25 | 			datasets: [{
 26 | 				type: 'line',
 27 | 				label: 'Dataset 1',
 28 | 				borderColor: window.chartColors.blue,
 29 | 				borderWidth: 2,
 30 | 				fill: false,
 31 | 				data: [
 32 | 					randomScalingFactor(),
 33 | 					randomScalingFactor(),
 34 | 					randomScalingFactor(),
 35 | 					randomScalingFactor(),
 36 | 					randomScalingFactor(),
 37 | 					randomScalingFactor(),
 38 | 					randomScalingFactor()
 39 | 				]
 40 | 			}, {
 41 | 				type: 'bar',
 42 | 				label: 'Dataset 2',
 43 | 				backgroundColor: window.chartColors.red,
 44 | 				data: [
 45 | 					randomScalingFactor(),
 46 | 					randomScalingFactor(),
 47 | 					randomScalingFactor(),
 48 | 					randomScalingFactor(),
 49 | 					randomScalingFactor(),
 50 | 					randomScalingFactor(),
 51 | 					randomScalingFactor()
 52 | 				],
 53 | 				borderColor: 'white',
 54 | 				borderWidth: 2
 55 | 			}, {
 56 | 				type: 'bar',
 57 | 				label: 'Dataset 3',
 58 | 				backgroundColor: window.chartColors.green,
 59 | 				data: [
 60 | 					randomScalingFactor(),
 61 | 					randomScalingFactor(),
 62 | 					randomScalingFactor(),
 63 | 					randomScalingFactor(),
 64 | 					randomScalingFactor(),
 65 | 					randomScalingFactor(),
 66 | 					randomScalingFactor()
 67 | 				]
 68 | 			}]
 69 | 
 70 | 		};
 71 | 		window.onload = function() {
 72 | 			var ctx = document.getElementById('canvas').getContext('2d');
 73 | 			window.myMixedChart = new Chart(ctx, {
 74 | 				type: 'bar',
 75 | 				data: chartData,
 76 | 				options: {
 77 | 					responsive: true,
 78 | 					title: {
 79 | 						display: true,
 80 | 						text: 'Chart.js Combo Bar Line Chart'
 81 | 					},
 82 | 					tooltips: {
 83 | 						mode: 'index',
 84 | 						intersect: true
 85 | 					}
 86 | 				}
 87 | 			});
 88 | 		};
 89 | 
 90 | 		document.getElementById('randomizeData').addEventListener('click', function() {
 91 | 			chartData.datasets.forEach(function(dataset) {
 92 | 				dataset.data = dataset.data.map(function() {
 93 | 					return randomScalingFactor();
 94 | 				});
 95 | 			});
 96 | 			window.myMixedChart.update();
 97 | 		});
 98 | 	</script>
 99 | </body>
100 | 
101 | </html>
102 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/doughnut.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Doughnut Chart</title>
  6 | 	<script src="../../Chart.bundle.js"></script>
  7 | 	<script src="../utils.js"></script>
  8 | 	<style>
  9 | 	canvas {
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div id="canvas-holder" style="width:40%">
 19 | 		<canvas id="chart-area"></canvas>
 20 | 	</div>
 21 | 	<button id="randomizeData">Randomize Data</button>
 22 | 	<button id="addDataset">Add Dataset</button>
 23 | 	<button id="removeDataset">Remove Dataset</button>
 24 | 	<button id="addData">Add Data</button>
 25 | 	<button id="removeData">Remove Data</button>
 26 | 	<script>
 27 | 		var randomScalingFactor = function() {
 28 | 			return Math.round(Math.random() * 100);
 29 | 		};
 30 | 
 31 | 		var config = {
 32 | 			type: 'doughnut',
 33 | 			data: {
 34 | 				datasets: [{
 35 | 					data: [
 36 | 						randomScalingFactor(),
 37 | 						randomScalingFactor(),
 38 | 						randomScalingFactor(),
 39 | 						randomScalingFactor(),
 40 | 						randomScalingFactor(),
 41 | 					],
 42 | 					backgroundColor: [
 43 | 						window.chartColors.red,
 44 | 						window.chartColors.orange,
 45 | 						window.chartColors.yellow,
 46 | 						window.chartColors.green,
 47 | 						window.chartColors.blue,
 48 | 					],
 49 | 					label: 'Dataset 1'
 50 | 				}],
 51 | 				labels: [
 52 | 					'Red',
 53 | 					'Orange',
 54 | 					'Yellow',
 55 | 					'Green',
 56 | 					'Blue'
 57 | 				]
 58 | 			},
 59 | 			options: {
 60 | 				responsive: true,
 61 | 				legend: {
 62 | 					position: 'top',
 63 | 				},
 64 | 				title: {
 65 | 					display: true,
 66 | 					text: 'Chart.js Doughnut Chart'
 67 | 				},
 68 | 				animation: {
 69 | 					animateScale: true,
 70 | 					animateRotate: true
 71 | 				}
 72 | 			}
 73 | 		};
 74 | 
 75 | 		window.onload = function() {
 76 | 			var ctx = document.getElementById('chart-area').getContext('2d');
 77 | 			window.myDoughnut = new Chart(ctx, config);
 78 | 		};
 79 | 
 80 | 		document.getElementById('randomizeData').addEventListener('click', function() {
 81 | 			config.data.datasets.forEach(function(dataset) {
 82 | 				dataset.data = dataset.data.map(function() {
 83 | 					return randomScalingFactor();
 84 | 				});
 85 | 			});
 86 | 
 87 | 			window.myDoughnut.update();
 88 | 		});
 89 | 
 90 | 		var colorNames = Object.keys(window.chartColors);
 91 | 		document.getElementById('addDataset').addEventListener('click', function() {
 92 | 			var newDataset = {
 93 | 				backgroundColor: [],
 94 | 				data: [],
 95 | 				label: 'New dataset ' + config.data.datasets.length,
 96 | 			};
 97 | 
 98 | 			for (var index = 0; index < config.data.labels.length; ++index) {
 99 | 				newDataset.data.push(randomScalingFactor());
100 | 
101 | 				var colorName = colorNames[index % colorNames.length];
102 | 				var newColor = window.chartColors[colorName];
103 | 				newDataset.backgroundColor.push(newColor);
104 | 			}
105 | 
106 | 			config.data.datasets.push(newDataset);
107 | 			window.myDoughnut.update();
108 | 		});
109 | 
110 | 		document.getElementById('addData').addEventListener('click', function() {
111 | 			if (config.data.datasets.length > 0) {
112 | 				config.data.labels.push('data #' + config.data.labels.length);
113 | 
114 | 				var colorName = colorNames[config.data.datasets[0].data.length % colorNames.length];
115 | 				var newColor = window.chartColors[colorName];
116 | 
117 | 				config.data.datasets.forEach(function(dataset) {
118 | 					dataset.data.push(randomScalingFactor());
119 | 					dataset.backgroundColor.push(newColor);
120 | 				});
121 | 
122 | 				window.myDoughnut.update();
123 | 			}
124 | 		});
125 | 
126 | 		document.getElementById('removeDataset').addEventListener('click', function() {
127 | 			config.data.datasets.splice(0, 1);
128 | 			window.myDoughnut.update();
129 | 		});
130 | 
131 | 		document.getElementById('removeData').addEventListener('click', function() {
132 | 			config.data.labels.splice(-1, 1); // remove the label first
133 | 
134 | 			config.data.datasets.forEach(function(dataset) {
135 | 				dataset.data.pop();
136 | 				dataset.backgroundColor.pop();
137 | 			});
138 | 
139 | 			window.myDoughnut.update();
140 | 		});
141 | 	</script>
142 | </body>
143 | 
144 | </html>
145 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/line/basic.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Line Chart</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 	canvas{
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width:75%;">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<br>
 22 | 	<br>
 23 | 	<button id="randomizeData">Randomize Data</button>
 24 | 	<button id="addDataset">Add Dataset</button>
 25 | 	<button id="removeDataset">Remove Dataset</button>
 26 | 	<button id="addData">Add Data</button>
 27 | 	<button id="removeData">Remove Data</button>
 28 | 	<script>
 29 | 		var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 30 | 		var config = {
 31 | 			type: 'line',
 32 | 			data: {
 33 | 				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 34 | 				datasets: [{
 35 | 					label: 'My First dataset',
 36 | 					backgroundColor: window.chartColors.red,
 37 | 					borderColor: window.chartColors.red,
 38 | 					data: [
 39 | 						randomScalingFactor(),
 40 | 						randomScalingFactor(),
 41 | 						randomScalingFactor(),
 42 | 						randomScalingFactor(),
 43 | 						randomScalingFactor(),
 44 | 						randomScalingFactor(),
 45 | 						randomScalingFactor()
 46 | 					],
 47 | 					fill: false,
 48 | 				}, {
 49 | 					label: 'My Second dataset',
 50 | 					fill: false,
 51 | 					backgroundColor: window.chartColors.blue,
 52 | 					borderColor: window.chartColors.blue,
 53 | 					data: [
 54 | 						randomScalingFactor(),
 55 | 						randomScalingFactor(),
 56 | 						randomScalingFactor(),
 57 | 						randomScalingFactor(),
 58 | 						randomScalingFactor(),
 59 | 						randomScalingFactor(),
 60 | 						randomScalingFactor()
 61 | 					],
 62 | 				}]
 63 | 			},
 64 | 			options: {
 65 | 				responsive: true,
 66 | 				title: {
 67 | 					display: true,
 68 | 					text: 'Chart.js Line Chart'
 69 | 				},
 70 | 				tooltips: {
 71 | 					mode: 'index',
 72 | 					intersect: false,
 73 | 				},
 74 | 				hover: {
 75 | 					mode: 'nearest',
 76 | 					intersect: true
 77 | 				},
 78 | 				scales: {
 79 | 					xAxes: [{
 80 | 						display: true,
 81 | 						scaleLabel: {
 82 | 							display: true,
 83 | 							labelString: 'Month'
 84 | 						}
 85 | 					}],
 86 | 					yAxes: [{
 87 | 						display: true,
 88 | 						scaleLabel: {
 89 | 							display: true,
 90 | 							labelString: 'Value'
 91 | 						}
 92 | 					}]
 93 | 				}
 94 | 			}
 95 | 		};
 96 | 
 97 | 		window.onload = function() {
 98 | 			var ctx = document.getElementById('canvas').getContext('2d');
 99 | 			window.myLine = new Chart(ctx, config);
100 | 		};
101 | 
102 | 		document.getElementById('randomizeData').addEventListener('click', function() {
103 | 			config.data.datasets.forEach(function(dataset) {
104 | 				dataset.data = dataset.data.map(function() {
105 | 					return randomScalingFactor();
106 | 				});
107 | 
108 | 			});
109 | 
110 | 			window.myLine.update();
111 | 		});
112 | 
113 | 		var colorNames = Object.keys(window.chartColors);
114 | 		document.getElementById('addDataset').addEventListener('click', function() {
115 | 			var colorName = colorNames[config.data.datasets.length % colorNames.length];
116 | 			var newColor = window.chartColors[colorName];
117 | 			var newDataset = {
118 | 				label: 'Dataset ' + config.data.datasets.length,
119 | 				backgroundColor: newColor,
120 | 				borderColor: newColor,
121 | 				data: [],
122 | 				fill: false
123 | 			};
124 | 
125 | 			for (var index = 0; index < config.data.labels.length; ++index) {
126 | 				newDataset.data.push(randomScalingFactor());
127 | 			}
128 | 
129 | 			config.data.datasets.push(newDataset);
130 | 			window.myLine.update();
131 | 		});
132 | 
133 | 		document.getElementById('addData').addEventListener('click', function() {
134 | 			if (config.data.datasets.length > 0) {
135 | 				var month = MONTHS[config.data.labels.length % MONTHS.length];
136 | 				config.data.labels.push(month);
137 | 
138 | 				config.data.datasets.forEach(function(dataset) {
139 | 					dataset.data.push(randomScalingFactor());
140 | 				});
141 | 
142 | 				window.myLine.update();
143 | 			}
144 | 		});
145 | 
146 | 		document.getElementById('removeDataset').addEventListener('click', function() {
147 | 			config.data.datasets.splice(0, 1);
148 | 			window.myLine.update();
149 | 		});
150 | 
151 | 		document.getElementById('removeData').addEventListener('click', function() {
152 | 			config.data.labels.splice(-1, 1); // remove the label first
153 | 
154 | 			config.data.datasets.forEach(function(dataset) {
155 | 				dataset.data.pop();
156 | 			});
157 | 
158 | 			window.myLine.update();
159 | 		});
160 | 	</script>
161 | </body>
162 | 
163 | </html>
164 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/line/interpolation-modes.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Line Chart - Cubic interpolation mode</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 	canvas{
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width:75%;">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<br>
 22 | 	<br>
 23 | 	<button id="randomizeData">Randomize Data</button>
 24 | 	<script>
 25 | 
 26 | 		var randomScalingFactor = function() {
 27 | 			return Math.round(Math.random() * 100);
 28 | 		};
 29 | 
 30 | 		var datapoints = [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170];
 31 | 		var config = {
 32 | 			type: 'line',
 33 | 			data: {
 34 | 				labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
 35 | 				datasets: [{
 36 | 					label: 'Cubic interpolation (monotone)',
 37 | 					data: datapoints,
 38 | 					borderColor: window.chartColors.red,
 39 | 					backgroundColor: 'rgba(0, 0, 0, 0)',
 40 | 					fill: false,
 41 | 					cubicInterpolationMode: 'monotone'
 42 | 				}, {
 43 | 					label: 'Cubic interpolation (default)',
 44 | 					data: datapoints,
 45 | 					borderColor: window.chartColors.blue,
 46 | 					backgroundColor: 'rgba(0, 0, 0, 0)',
 47 | 					fill: false,
 48 | 				}, {
 49 | 					label: 'Linear interpolation',
 50 | 					data: datapoints,
 51 | 					borderColor: window.chartColors.green,
 52 | 					backgroundColor: 'rgba(0, 0, 0, 0)',
 53 | 					fill: false,
 54 | 					lineTension: 0
 55 | 				}]
 56 | 			},
 57 | 			options: {
 58 | 				responsive: true,
 59 | 				title: {
 60 | 					display: true,
 61 | 					text: 'Chart.js Line Chart - Cubic interpolation mode'
 62 | 				},
 63 | 				tooltips: {
 64 | 					mode: 'index'
 65 | 				},
 66 | 				scales: {
 67 | 					xAxes: [{
 68 | 						display: true,
 69 | 						scaleLabel: {
 70 | 							display: true
 71 | 						}
 72 | 					}],
 73 | 					yAxes: [{
 74 | 						display: true,
 75 | 						scaleLabel: {
 76 | 							display: true,
 77 | 							labelString: 'Value'
 78 | 						},
 79 | 						ticks: {
 80 | 							suggestedMin: -10,
 81 | 							suggestedMax: 200,
 82 | 						}
 83 | 					}]
 84 | 				}
 85 | 			}
 86 | 		};
 87 | 
 88 | 		window.onload = function() {
 89 | 			var ctx = document.getElementById('canvas').getContext('2d');
 90 | 			window.myLine = new Chart(ctx, config);
 91 | 		};
 92 | 
 93 | 		document.getElementById('randomizeData').addEventListener('click', function() {
 94 | 			for (var i = 0, len = datapoints.length; i < len; ++i) {
 95 | 				datapoints[i] = Math.random() < 0.05 ? NaN : randomScalingFactor();
 96 | 			}
 97 | 			window.myLine.update();
 98 | 		});
 99 | 
100 | 	</script>
101 | </body>
102 | 
103 | </html>
104 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/line/line-styles.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Line Styles</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 	canvas{
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width:75%;">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<script>
 22 | 		var config = {
 23 | 			type: 'line',
 24 | 			data: {
 25 | 				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 26 | 				datasets: [{
 27 | 					label: 'Unfilled',
 28 | 					fill: false,
 29 | 					backgroundColor: window.chartColors.blue,
 30 | 					borderColor: window.chartColors.blue,
 31 | 					data: [
 32 | 						randomScalingFactor(),
 33 | 						randomScalingFactor(),
 34 | 						randomScalingFactor(),
 35 | 						randomScalingFactor(),
 36 | 						randomScalingFactor(),
 37 | 						randomScalingFactor(),
 38 | 						randomScalingFactor()
 39 | 					],
 40 | 				}, {
 41 | 					label: 'Dashed',
 42 | 					fill: false,
 43 | 					backgroundColor: window.chartColors.green,
 44 | 					borderColor: window.chartColors.green,
 45 | 					borderDash: [5, 5],
 46 | 					data: [
 47 | 						randomScalingFactor(),
 48 | 						randomScalingFactor(),
 49 | 						randomScalingFactor(),
 50 | 						randomScalingFactor(),
 51 | 						randomScalingFactor(),
 52 | 						randomScalingFactor(),
 53 | 						randomScalingFactor()
 54 | 					],
 55 | 				}, {
 56 | 					label: 'Filled',
 57 | 					backgroundColor: window.chartColors.red,
 58 | 					borderColor: window.chartColors.red,
 59 | 					data: [
 60 | 						randomScalingFactor(),
 61 | 						randomScalingFactor(),
 62 | 						randomScalingFactor(),
 63 | 						randomScalingFactor(),
 64 | 						randomScalingFactor(),
 65 | 						randomScalingFactor(),
 66 | 						randomScalingFactor()
 67 | 					],
 68 | 					fill: true,
 69 | 				}]
 70 | 			},
 71 | 			options: {
 72 | 				responsive: true,
 73 | 				title: {
 74 | 					display: true,
 75 | 					text: 'Chart.js Line Chart'
 76 | 				},
 77 | 				tooltips: {
 78 | 					mode: 'index',
 79 | 					intersect: false,
 80 | 				},
 81 | 				hover: {
 82 | 					mode: 'nearest',
 83 | 					intersect: true
 84 | 				},
 85 | 				scales: {
 86 | 					xAxes: [{
 87 | 						display: true,
 88 | 						scaleLabel: {
 89 | 							display: true,
 90 | 							labelString: 'Month'
 91 | 						}
 92 | 					}],
 93 | 					yAxes: [{
 94 | 						display: true,
 95 | 						scaleLabel: {
 96 | 							display: true,
 97 | 							labelString: 'Value'
 98 | 						}
 99 | 					}]
100 | 				}
101 | 			}
102 | 		};
103 | 
104 | 		window.onload = function() {
105 | 			var ctx = document.getElementById('canvas').getContext('2d');
106 | 			window.myLine = new Chart(ctx, config);
107 | 		};
108 | 	</script>
109 | </body>
110 | 
111 | </html>
112 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/line/multi-axis.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Line Chart Multiple Axes</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 	canvas {
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width:75%;">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<button id="randomizeData">Randomize Data</button>
 22 | 	<script>
 23 | 		var lineChartData = {
 24 | 			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 25 | 			datasets: [{
 26 | 				label: 'My First dataset',
 27 | 				borderColor: window.chartColors.red,
 28 | 				backgroundColor: window.chartColors.red,
 29 | 				fill: false,
 30 | 				data: [
 31 | 					randomScalingFactor(),
 32 | 					randomScalingFactor(),
 33 | 					randomScalingFactor(),
 34 | 					randomScalingFactor(),
 35 | 					randomScalingFactor(),
 36 | 					randomScalingFactor(),
 37 | 					randomScalingFactor()
 38 | 				],
 39 | 				yAxisID: 'y-axis-1',
 40 | 			}, {
 41 | 				label: 'My Second dataset',
 42 | 				borderColor: window.chartColors.blue,
 43 | 				backgroundColor: window.chartColors.blue,
 44 | 				fill: false,
 45 | 				data: [
 46 | 					randomScalingFactor(),
 47 | 					randomScalingFactor(),
 48 | 					randomScalingFactor(),
 49 | 					randomScalingFactor(),
 50 | 					randomScalingFactor(),
 51 | 					randomScalingFactor(),
 52 | 					randomScalingFactor()
 53 | 				],
 54 | 				yAxisID: 'y-axis-2'
 55 | 			}]
 56 | 		};
 57 | 
 58 | 		window.onload = function() {
 59 | 			var ctx = document.getElementById('canvas').getContext('2d');
 60 | 			window.myLine = Chart.Line(ctx, {
 61 | 				data: lineChartData,
 62 | 				options: {
 63 | 					responsive: true,
 64 | 					hoverMode: 'index',
 65 | 					stacked: false,
 66 | 					title: {
 67 | 						display: true,
 68 | 						text: 'Chart.js Line Chart - Multi Axis'
 69 | 					},
 70 | 					scales: {
 71 | 						yAxes: [{
 72 | 							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
 73 | 							display: true,
 74 | 							position: 'left',
 75 | 							id: 'y-axis-1',
 76 | 						}, {
 77 | 							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
 78 | 							display: true,
 79 | 							position: 'right',
 80 | 							id: 'y-axis-2',
 81 | 
 82 | 							// grid line settings
 83 | 							gridLines: {
 84 | 								drawOnChartArea: false, // only want the grid lines for one axis to show up
 85 | 							},
 86 | 						}],
 87 | 					}
 88 | 				}
 89 | 			});
 90 | 		};
 91 | 
 92 | 		document.getElementById('randomizeData').addEventListener('click', function() {
 93 | 			lineChartData.datasets.forEach(function(dataset) {
 94 | 				dataset.data = dataset.data.map(function() {
 95 | 					return randomScalingFactor();
 96 | 				});
 97 | 			});
 98 | 
 99 | 			window.myLine.update();
100 | 		});
101 | 	</script>
102 | </body>
103 | 
104 | </html>
105 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/line/point-sizes.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Different Point Sizes</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 		canvas {
 10 | 			-moz-user-select: none;
 11 | 			-webkit-user-select: none;
 12 | 			-ms-user-select: none;
 13 | 		}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width:75%;">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<script>
 22 | 		var config = {
 23 | 			type: 'line',
 24 | 			data: {
 25 | 				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 26 | 				datasets: [{
 27 | 					label: 'dataset - big points',
 28 | 					data: [
 29 | 						randomScalingFactor(),
 30 | 						randomScalingFactor(),
 31 | 						randomScalingFactor(),
 32 | 						randomScalingFactor(),
 33 | 						randomScalingFactor(),
 34 | 						randomScalingFactor(),
 35 | 						randomScalingFactor()
 36 | 					],
 37 | 					backgroundColor: window.chartColors.red,
 38 | 					borderColor: window.chartColors.red,
 39 | 					fill: false,
 40 | 					borderDash: [5, 5],
 41 | 					pointRadius: 15,
 42 | 					pointHoverRadius: 10,
 43 | 				}, {
 44 | 					label: 'dataset - individual point sizes',
 45 | 					data: [
 46 | 						randomScalingFactor(),
 47 | 						randomScalingFactor(),
 48 | 						randomScalingFactor(),
 49 | 						randomScalingFactor(),
 50 | 						randomScalingFactor(),
 51 | 						randomScalingFactor(),
 52 | 						randomScalingFactor()
 53 | 					],
 54 | 					backgroundColor: window.chartColors.blue,
 55 | 					borderColor: window.chartColors.blue,
 56 | 					fill: false,
 57 | 					borderDash: [5, 5],
 58 | 					pointRadius: [2, 4, 6, 18, 0, 12, 20],
 59 | 				}, {
 60 | 					label: 'dataset - large pointHoverRadius',
 61 | 					data: [
 62 | 						randomScalingFactor(),
 63 | 						randomScalingFactor(),
 64 | 						randomScalingFactor(),
 65 | 						randomScalingFactor(),
 66 | 						randomScalingFactor(),
 67 | 						randomScalingFactor(),
 68 | 						randomScalingFactor()
 69 | 					],
 70 | 					backgroundColor: window.chartColors.green,
 71 | 					borderColor: window.chartColors.green,
 72 | 					fill: false,
 73 | 					pointHoverRadius: 30,
 74 | 				}, {
 75 | 					label: 'dataset - large pointHitRadius',
 76 | 					data: [
 77 | 						randomScalingFactor(),
 78 | 						randomScalingFactor(),
 79 | 						randomScalingFactor(),
 80 | 						randomScalingFactor(),
 81 | 						randomScalingFactor(),
 82 | 						randomScalingFactor(),
 83 | 						randomScalingFactor()
 84 | 					],
 85 | 					backgroundColor: window.chartColors.yellow,
 86 | 					borderColor: window.chartColors.yellow,
 87 | 					fill: false,
 88 | 					pointHitRadius: 20,
 89 | 				}]
 90 | 			},
 91 | 			options: {
 92 | 				responsive: true,
 93 | 				legend: {
 94 | 					position: 'bottom',
 95 | 				},
 96 | 				hover: {
 97 | 					mode: 'index'
 98 | 				},
 99 | 				scales: {
100 | 					xAxes: [{
101 | 						display: true,
102 | 						scaleLabel: {
103 | 							display: true,
104 | 							labelString: 'Month'
105 | 						}
106 | 					}],
107 | 					yAxes: [{
108 | 						display: true,
109 | 						scaleLabel: {
110 | 							display: true,
111 | 							labelString: 'Value'
112 | 						}
113 | 					}]
114 | 				},
115 | 				title: {
116 | 					display: true,
117 | 					text: 'Chart.js Line Chart - Different point sizes'
118 | 				}
119 | 			}
120 | 		};
121 | 
122 | 		window.onload = function() {
123 | 			var ctx = document.getElementById('canvas').getContext('2d');
124 | 			window.myLine = new Chart(ctx, config);
125 | 		};
126 | 	</script>
127 | </body>
128 | 
129 | </html>
130 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/line/point-styles.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<title>Line Chart</title>
 6 | 	<script src="../../../Chart.bundle.js"></script>
 7 | 	<script src="../../utils.js"></script>
 8 | 	<style>
 9 | 	canvas{
10 | 		-moz-user-select: none;
11 | 		-webkit-user-select: none;
12 | 		-ms-user-select: none;
13 | 	}
14 | 	.chart-container {
15 | 		width: 500px;
16 | 		margin-left: 40px;
17 | 		margin-right: 40px;
18 | 		margin-bottom: 40px;
19 | 	}
20 | 	.container {
21 | 		display: flex;
22 | 		flex-direction: row;
23 | 		flex-wrap: wrap;
24 | 		justify-content: center;
25 | 	}
26 | 	</style>
27 | </head>
28 | 
29 | <body>
30 | 	<div class="container">
31 | 	</div>
32 | 	<script>
33 | 		function createConfig(pointStyle) {
34 | 			return {
35 | 				type: 'line',
36 | 				data: {
37 | 					labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
38 | 					datasets: [{
39 | 						label: 'My First dataset',
40 | 						backgroundColor: window.chartColors.red,
41 | 						borderColor: window.chartColors.red,
42 | 						data: [10, 23, 5, 99, 67, 43, 0],
43 | 						fill: false,
44 | 						pointRadius: 10,
45 | 						pointHoverRadius: 15,
46 | 						showLine: false // no line shown
47 | 					}]
48 | 				},
49 | 				options: {
50 | 					responsive: true,
51 | 					title: {
52 | 						display: true,
53 | 						text: 'Point Style: ' + pointStyle
54 | 					},
55 | 					legend: {
56 | 						display: false
57 | 					},
58 | 					elements: {
59 | 						point: {
60 | 							pointStyle: pointStyle
61 | 						}
62 | 					}
63 | 				}
64 | 			};
65 | 		}
66 | 
67 | 		window.onload = function() {
68 | 			var container = document.querySelector('.container');
69 | 			[
70 | 				'circle',
71 | 				'triangle',
72 | 				'rect',
73 | 				'rectRounded',
74 | 				'rectRot',
75 | 				'cross',
76 | 				'crossRot',
77 | 				'star',
78 | 				'line',
79 | 				'dash'
80 | 			].forEach(function(pointStyle) {
81 | 				var div = document.createElement('div');
82 | 				div.classList.add('chart-container');
83 | 
84 | 				var canvas = document.createElement('canvas');
85 | 				div.appendChild(canvas);
86 | 				container.appendChild(div);
87 | 
88 | 				var ctx = canvas.getContext('2d');
89 | 				var config = createConfig(pointStyle);
90 | 				new Chart(ctx, config);
91 | 			});
92 | 		};
93 | 	</script>
94 | </body>
95 | 
96 | </html>
97 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/line/skip-points.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<title>Line Chart</title>
 6 | 	<script src="../../../Chart.bundle.js"></script>
 7 | 	<script src="../../utils.js"></script>
 8 | 	<style>
 9 | 	canvas {
10 | 		-moz-user-select: none;
11 | 		-webkit-user-select: none;
12 | 		-ms-user-select: none;
13 | 	}
14 | 	</style>
15 | </head>
16 | 
17 | <body>
18 | 	<div style="width:75%;">
19 | 		<canvas id="canvas"></canvas>
20 | 	</div>
21 | 	<script>
22 | 		var config = {
23 | 			type: 'line',
24 | 			data: {
25 | 				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
26 | 				datasets: [{
27 | 					label: 'My First dataset',
28 | 					borderColor: window.chartColors.red,
29 | 					fill: false,
30 | 					// Skip a point in the middle
31 | 					data: [
32 | 						randomScalingFactor(),
33 | 						randomScalingFactor(),
34 | 						NaN,
35 | 						randomScalingFactor(),
36 | 						randomScalingFactor(),
37 | 						randomScalingFactor(),
38 | 						randomScalingFactor()
39 | 					],
40 | 
41 | 				}, {
42 | 					label: 'My Second dataset',
43 | 					borderColor: window.chartColors.blue,
44 | 					fill: false,
45 | 					// Skip first and last points
46 | 					data: [
47 | 						NaN,
48 | 						randomScalingFactor(),
49 | 						randomScalingFactor(),
50 | 						randomScalingFactor(),
51 | 						randomScalingFactor(),
52 | 						randomScalingFactor(),
53 | 						NaN
54 | 					],
55 | 				}]
56 | 			},
57 | 			options: {
58 | 				responsive: true,
59 | 				title: {
60 | 					display: true,
61 | 					text: 'Chart.js Line Chart - Skip Points'
62 | 				},
63 | 				tooltips: {
64 | 					mode: 'index',
65 | 				},
66 | 				hover: {
67 | 					mode: 'index'
68 | 				},
69 | 				scales: {
70 | 					xAxes: [{
71 | 						display: true,
72 | 						scaleLabel: {
73 | 							display: true,
74 | 							labelString: 'Month'
75 | 						}
76 | 					}],
77 | 					yAxes: [{
78 | 						display: true,
79 | 						scaleLabel: {
80 | 							display: true,
81 | 							labelString: 'Value'
82 | 						},
83 | 					}]
84 | 				}
85 | 			}
86 | 		};
87 | 
88 | 		window.onload = function() {
89 | 			var ctx = document.getElementById('canvas').getContext('2d');
90 | 			window.myLine = new Chart(ctx, config);
91 | 		};
92 | 	</script>
93 | </body>
94 | 
95 | </html>
96 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/line/stepped.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Stepped Line Chart</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 	canvas {
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	.chart-container {
 15 | 		width: 500px;
 16 | 		margin-left: 40px;
 17 | 		margin-right: 40px;
 18 | 		margin-bottom: 40px;
 19 | 	}
 20 | 	.container {
 21 | 		display: flex;
 22 | 		flex-direction: row;
 23 | 		flex-wrap: wrap;
 24 | 		justify-content: center;
 25 | 	}
 26 | 	</style>
 27 | </head>
 28 | 
 29 | <body>
 30 | 	<div class="container">
 31 | 	</div>
 32 | 	<script>
 33 | 		function createConfig(details, data) {
 34 | 			return {
 35 | 				type: 'line',
 36 | 				data: {
 37 | 					labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
 38 | 					datasets: [{
 39 | 						label: 'steppedLine: ' + details.steppedLine,
 40 | 						steppedLine: details.steppedLine,
 41 | 						data: data,
 42 | 						borderColor: details.color,
 43 | 						fill: false,
 44 | 					}]
 45 | 				},
 46 | 				options: {
 47 | 					responsive: true,
 48 | 					title: {
 49 | 						display: true,
 50 | 						text: details.label,
 51 | 					}
 52 | 				}
 53 | 			};
 54 | 		}
 55 | 
 56 | 
 57 | 		window.onload = function() {
 58 | 			var container = document.querySelector('.container');
 59 | 
 60 | 			var data = [
 61 | 				randomScalingFactor(),
 62 | 				randomScalingFactor(),
 63 | 				randomScalingFactor(),
 64 | 				randomScalingFactor(),
 65 | 				randomScalingFactor(),
 66 | 				randomScalingFactor()
 67 | 			];
 68 | 
 69 | 			var steppedLineSettings = [{
 70 | 				steppedLine: false,
 71 | 				label: 'No Step Interpolation',
 72 | 				color: window.chartColors.red
 73 | 			}, {
 74 | 				steppedLine: true,
 75 | 				label: 'Step Before Interpolation',
 76 | 				color: window.chartColors.green
 77 | 			}, {
 78 | 				steppedLine: 'before',
 79 | 				label: 'Step Before Interpolation',
 80 | 				color: window.chartColors.green
 81 | 			}, {
 82 | 				steppedLine: 'after',
 83 | 				label: 'Step After Interpolation',
 84 | 				color: window.chartColors.purple
 85 | 			}];
 86 | 
 87 | 			steppedLineSettings.forEach(function(details) {
 88 | 				var div = document.createElement('div');
 89 | 				div.classList.add('chart-container');
 90 | 
 91 | 				var canvas = document.createElement('canvas');
 92 | 				div.appendChild(canvas);
 93 | 				container.appendChild(div);
 94 | 
 95 | 				var ctx = canvas.getContext('2d');
 96 | 				var config = createConfig(details, data);
 97 | 				new Chart(ctx, config);
 98 | 			});
 99 | 		};
100 | 	</script>
101 | </body>
102 | 
103 | </html>
104 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/pie.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<title>Pie Chart</title>
 6 | 	<script src="../../Chart.bundle.js"></script>
 7 | 	<script src="../utils.js"></script>
 8 | </head>
 9 | 
10 | <body>
11 | 	<div id="canvas-holder" style="width:40%">
12 | 		<canvas id="chart-area"></canvas>
13 | 	</div>
14 | 	<button id="randomizeData">Randomize Data</button>
15 | 	<button id="addDataset">Add Dataset</button>
16 | 	<button id="removeDataset">Remove Dataset</button>
17 | 	<script>
18 | 		var randomScalingFactor = function() {
19 | 			return Math.round(Math.random() * 100);
20 | 		};
21 | 
22 | 		var config = {
23 | 			type: 'pie',
24 | 			data: {
25 | 				datasets: [{
26 | 					data: [
27 | 						randomScalingFactor(),
28 | 						randomScalingFactor(),
29 | 						randomScalingFactor(),
30 | 						randomScalingFactor(),
31 | 						randomScalingFactor(),
32 | 					],
33 | 					backgroundColor: [
34 | 						window.chartColors.red,
35 | 						window.chartColors.orange,
36 | 						window.chartColors.yellow,
37 | 						window.chartColors.green,
38 | 						window.chartColors.blue,
39 | 					],
40 | 					label: 'Dataset 1'
41 | 				}],
42 | 				labels: [
43 | 					'Red',
44 | 					'Orange',
45 | 					'Yellow',
46 | 					'Green',
47 | 					'Blue'
48 | 				]
49 | 			},
50 | 			options: {
51 | 				responsive: true
52 | 			}
53 | 		};
54 | 
55 | 		window.onload = function() {
56 | 			var ctx = document.getElementById('chart-area').getContext('2d');
57 | 			window.myPie = new Chart(ctx, config);
58 | 		};
59 | 
60 | 		document.getElementById('randomizeData').addEventListener('click', function() {
61 | 			config.data.datasets.forEach(function(dataset) {
62 | 				dataset.data = dataset.data.map(function() {
63 | 					return randomScalingFactor();
64 | 				});
65 | 			});
66 | 
67 | 			window.myPie.update();
68 | 		});
69 | 
70 | 		var colorNames = Object.keys(window.chartColors);
71 | 		document.getElementById('addDataset').addEventListener('click', function() {
72 | 			var newDataset = {
73 | 				backgroundColor: [],
74 | 				data: [],
75 | 				label: 'New dataset ' + config.data.datasets.length,
76 | 			};
77 | 
78 | 			for (var index = 0; index < config.data.labels.length; ++index) {
79 | 				newDataset.data.push(randomScalingFactor());
80 | 
81 | 				var colorName = colorNames[index % colorNames.length];
82 | 				var newColor = window.chartColors[colorName];
83 | 				newDataset.backgroundColor.push(newColor);
84 | 			}
85 | 
86 | 			config.data.datasets.push(newDataset);
87 | 			window.myPie.update();
88 | 		});
89 | 
90 | 		document.getElementById('removeDataset').addEventListener('click', function() {
91 | 			config.data.datasets.splice(0, 1);
92 | 			window.myPie.update();
93 | 		});
94 | 	</script>
95 | </body>
96 | 
97 | </html>
98 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/polar-area.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Polar Area Chart</title>
  6 | 	<script src="../../Chart.bundle.js"></script>
  7 | 	<script src="../utils.js"></script>
  8 | 	<style>
  9 | 		canvas {
 10 | 			-moz-user-select: none;
 11 | 			-webkit-user-select: none;
 12 | 			-ms-user-select: none;
 13 | 		}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div id="canvas-holder" style="width:50%">
 19 | 		<canvas id="chart-area"></canvas>
 20 | 	</div>
 21 | 	<button id="randomizeData">Randomize Data</button>
 22 | 	<button id="addData">Add Data</button>
 23 | 	<button id="removeData">Remove Data</button>
 24 | 	<script>
 25 | 		var randomScalingFactor = function() {
 26 | 			return Math.round(Math.random() * 100);
 27 | 		};
 28 | 
 29 | 		var chartColors = window.chartColors;
 30 | 		var color = Chart.helpers.color;
 31 | 		var config = {
 32 | 			data: {
 33 | 				datasets: [{
 34 | 					data: [
 35 | 						randomScalingFactor(),
 36 | 						randomScalingFactor(),
 37 | 						randomScalingFactor(),
 38 | 						randomScalingFactor(),
 39 | 						randomScalingFactor(),
 40 | 					],
 41 | 					backgroundColor: [
 42 | 						color(chartColors.red).alpha(0.5).rgbString(),
 43 | 						color(chartColors.orange).alpha(0.5).rgbString(),
 44 | 						color(chartColors.yellow).alpha(0.5).rgbString(),
 45 | 						color(chartColors.green).alpha(0.5).rgbString(),
 46 | 						color(chartColors.blue).alpha(0.5).rgbString(),
 47 | 					],
 48 | 					label: 'My dataset' // for legend
 49 | 				}],
 50 | 				labels: [
 51 | 					'Red',
 52 | 					'Orange',
 53 | 					'Yellow',
 54 | 					'Green',
 55 | 					'Blue'
 56 | 				]
 57 | 			},
 58 | 			options: {
 59 | 				responsive: true,
 60 | 				legend: {
 61 | 					position: 'right',
 62 | 				},
 63 | 				title: {
 64 | 					display: true,
 65 | 					text: 'Chart.js Polar Area Chart'
 66 | 				},
 67 | 				scale: {
 68 | 					ticks: {
 69 | 						beginAtZero: true
 70 | 					},
 71 | 					reverse: false
 72 | 				},
 73 | 				animation: {
 74 | 					animateRotate: false,
 75 | 					animateScale: true
 76 | 				}
 77 | 			}
 78 | 		};
 79 | 
 80 | 		window.onload = function() {
 81 | 			var ctx = document.getElementById('chart-area');
 82 | 			window.myPolarArea = Chart.PolarArea(ctx, config);
 83 | 		};
 84 | 
 85 | 		document.getElementById('randomizeData').addEventListener('click', function() {
 86 | 			config.data.datasets.forEach(function(piece, i) {
 87 | 				piece.data.forEach(function(value, j) {
 88 | 					config.data.datasets[i].data[j] = randomScalingFactor();
 89 | 				});
 90 | 			});
 91 | 			window.myPolarArea.update();
 92 | 		});
 93 | 
 94 | 		var colorNames = Object.keys(window.chartColors);
 95 | 		document.getElementById('addData').addEventListener('click', function() {
 96 | 			if (config.data.datasets.length > 0) {
 97 | 				config.data.labels.push('data #' + config.data.labels.length);
 98 | 				config.data.datasets.forEach(function(dataset) {
 99 | 					var colorName = colorNames[config.data.labels.length % colorNames.length];
100 | 					dataset.backgroundColor.push(window.chartColors[colorName]);
101 | 					dataset.data.push(randomScalingFactor());
102 | 				});
103 | 				window.myPolarArea.update();
104 | 			}
105 | 		});
106 | 		document.getElementById('removeData').addEventListener('click', function() {
107 | 			config.data.labels.pop(); // remove the label first
108 | 			config.data.datasets.forEach(function(dataset) {
109 | 				dataset.backgroundColor.pop();
110 | 				dataset.data.pop();
111 | 			});
112 | 			window.myPolarArea.update();
113 | 		});
114 | 	</script>
115 | </body>
116 | 
117 | </html>
118 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/radar-skip-points.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Radar Chart</title>
  6 | 	<script src="../../Chart.bundle.js"></script>
  7 | 	<script src="../utils.js"></script>
  8 | 	<style>
  9 | 		canvas {
 10 | 			-moz-user-select: none;
 11 | 			-webkit-user-select: none;
 12 | 			-ms-user-select: none;
 13 | 		}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width:40%">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<button id="randomizeData">Randomize Data</button>
 22 | 	<script>
 23 | 		var randomScalingFactor = function() {
 24 | 			return Math.round(Math.random() * 100);
 25 | 		};
 26 | 
 27 | 		var color = Chart.helpers.color;
 28 | 		var config = {
 29 | 			type: 'radar',
 30 | 			data: {
 31 | 				labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
 32 | 				datasets: [{
 33 | 					label: 'Skip first dataset',
 34 | 					borderColor: window.chartColors.red,
 35 | 					backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
 36 | 					pointBackgroundColor: window.chartColors.red,
 37 | 					data: [
 38 | 						NaN,
 39 | 						randomScalingFactor(),
 40 | 						randomScalingFactor(),
 41 | 						randomScalingFactor(),
 42 | 						randomScalingFactor(),
 43 | 						randomScalingFactor(),
 44 | 						randomScalingFactor()
 45 | 					]
 46 | 				}, {
 47 | 					label: 'Skip mid dataset',
 48 | 					borderColor: window.chartColors.blue,
 49 | 					backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
 50 | 					pointBackgroundColor: window.chartColors.blue,
 51 | 					data: [
 52 | 						randomScalingFactor(),
 53 | 						randomScalingFactor(),
 54 | 						NaN,
 55 | 						randomScalingFactor(),
 56 | 						randomScalingFactor(),
 57 | 						randomScalingFactor(),
 58 | 						randomScalingFactor()
 59 | 					]
 60 | 				}, {
 61 | 					label: 'Skip last dataset',
 62 | 					borderColor: window.chartColors.green,
 63 | 					backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
 64 | 					pointBackgroundColor: window.chartColors.green,
 65 | 					data: [
 66 | 						randomScalingFactor(),
 67 | 						randomScalingFactor(),
 68 | 						randomScalingFactor(),
 69 | 						randomScalingFactor(),
 70 | 						randomScalingFactor(),
 71 | 						randomScalingFactor(),
 72 | 						NaN
 73 | 					]
 74 | 				}]
 75 | 			},
 76 | 			options: {
 77 | 				title: {
 78 | 					display: true,
 79 | 					text: 'Chart.js Radar Chart - Skip Points'
 80 | 				},
 81 | 				elements: {
 82 | 					line: {
 83 | 						tension: 0.0,
 84 | 					}
 85 | 				},
 86 | 				scale: {
 87 | 					beginAtZero: true,
 88 | 				}
 89 | 			}
 90 | 		};
 91 | 
 92 | 		window.onload = function() {
 93 | 			window.myRadar = new Chart(document.getElementById('canvas'), config);
 94 | 		};
 95 | 
 96 | 		document.getElementById('randomizeData').addEventListener('click', function() {
 97 | 			config.data.datasets.forEach(function(dataset) {
 98 | 				dataset.data = dataset.data.map(function() {
 99 | 					return randomScalingFactor();
100 | 				});
101 | 
102 | 			});
103 | 
104 | 			window.myRadar.update();
105 | 		});
106 | 	</script>
107 | </body>
108 | 
109 | </html>
110 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/radar.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Radar Chart</title>
  6 | 	<script src="../../Chart.bundle.js"></script>
  7 | 	<script src="../utils.js"></script>
  8 | 	<style>
  9 | 		canvas {
 10 | 			-moz-user-select: none;
 11 | 			-webkit-user-select: none;
 12 | 			-ms-user-select: none;
 13 | 		}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width:40%">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<button id="randomizeData">Randomize Data</button>
 22 | 	<button id="addDataset">Add Dataset</button>
 23 | 	<button id="removeDataset">Remove Dataset</button>
 24 | 	<button id="addData">Add Data</button>
 25 | 	<button id="removeData">Remove Data</button>
 26 | 	<script>
 27 | 		var randomScalingFactor = function() {
 28 | 			return Math.round(Math.random() * 100);
 29 | 		};
 30 | 
 31 | 		var color = Chart.helpers.color;
 32 | 		var config = {
 33 | 			type: 'radar',
 34 | 			data: {
 35 | 				labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
 36 | 				datasets: [{
 37 | 					label: 'My First dataset',
 38 | 					backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
 39 | 					borderColor: window.chartColors.red,
 40 | 					pointBackgroundColor: window.chartColors.red,
 41 | 					data: [
 42 | 						randomScalingFactor(),
 43 | 						randomScalingFactor(),
 44 | 						randomScalingFactor(),
 45 | 						randomScalingFactor(),
 46 | 						randomScalingFactor(),
 47 | 						randomScalingFactor(),
 48 | 						randomScalingFactor()
 49 | 					]
 50 | 				}, {
 51 | 					label: 'My Second dataset',
 52 | 					backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
 53 | 					borderColor: window.chartColors.blue,
 54 | 					pointBackgroundColor: window.chartColors.blue,
 55 | 					data: [
 56 | 						randomScalingFactor(),
 57 | 						randomScalingFactor(),
 58 | 						randomScalingFactor(),
 59 | 						randomScalingFactor(),
 60 | 						randomScalingFactor(),
 61 | 						randomScalingFactor(),
 62 | 						randomScalingFactor()
 63 | 					]
 64 | 				}]
 65 | 			},
 66 | 			options: {
 67 | 				legend: {
 68 | 					position: 'top',
 69 | 				},
 70 | 				title: {
 71 | 					display: true,
 72 | 					text: 'Chart.js Radar Chart'
 73 | 				},
 74 | 				scale: {
 75 | 					ticks: {
 76 | 						beginAtZero: true
 77 | 					}
 78 | 				}
 79 | 			}
 80 | 		};
 81 | 
 82 | 		window.onload = function() {
 83 | 			window.myRadar = new Chart(document.getElementById('canvas'), config);
 84 | 		};
 85 | 
 86 | 		document.getElementById('randomizeData').addEventListener('click', function() {
 87 | 			config.data.datasets.forEach(function(dataset) {
 88 | 				dataset.data = dataset.data.map(function() {
 89 | 					return randomScalingFactor();
 90 | 				});
 91 | 			});
 92 | 
 93 | 			window.myRadar.update();
 94 | 		});
 95 | 
 96 | 		var colorNames = Object.keys(window.chartColors);
 97 | 		document.getElementById('addDataset').addEventListener('click', function() {
 98 | 			var colorName = colorNames[config.data.datasets.length % colorNames.length];
 99 | 			var newColor = window.chartColors[colorName];
100 | 
101 | 			var newDataset = {
102 | 				label: 'Dataset ' + config.data.datasets.length,
103 | 				borderColor: newColor,
104 | 				backgroundColor: color(newColor).alpha(0.2).rgbString(),
105 | 				pointBorderColor: newColor,
106 | 				data: [],
107 | 			};
108 | 
109 | 			for (var index = 0; index < config.data.labels.length; ++index) {
110 | 				newDataset.data.push(randomScalingFactor());
111 | 			}
112 | 
113 | 			config.data.datasets.push(newDataset);
114 | 			window.myRadar.update();
115 | 		});
116 | 
117 | 		document.getElementById('addData').addEventListener('click', function() {
118 | 			if (config.data.datasets.length > 0) {
119 | 				config.data.labels.push('dataset #' + config.data.labels.length);
120 | 
121 | 				config.data.datasets.forEach(function(dataset) {
122 | 					dataset.data.push(randomScalingFactor());
123 | 				});
124 | 
125 | 				window.myRadar.update();
126 | 			}
127 | 		});
128 | 
129 | 		document.getElementById('removeDataset').addEventListener('click', function() {
130 | 			config.data.datasets.splice(0, 1);
131 | 			window.myRadar.update();
132 | 		});
133 | 
134 | 		document.getElementById('removeData').addEventListener('click', function() {
135 | 			config.data.labels.pop(); // remove the label first
136 | 
137 | 			config.data.datasets.forEach(function(dataset) {
138 | 				dataset.data.pop();
139 | 			});
140 | 
141 | 			window.myRadar.update();
142 | 		});
143 | 	</script>
144 | </body>
145 | 
146 | </html>
147 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/scatter/basic.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Scatter Chart</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 	canvas {
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width:75%">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<button id="randomizeData">Randomize Data</button>
 22 | 	<script>
 23 | 		var color = Chart.helpers.color;
 24 | 		var scatterChartData = {
 25 | 			datasets: [{
 26 | 				label: 'My First dataset',
 27 | 				borderColor: window.chartColors.red,
 28 | 				backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
 29 | 				data: [{
 30 | 					x: randomScalingFactor(),
 31 | 					y: randomScalingFactor(),
 32 | 				}, {
 33 | 					x: randomScalingFactor(),
 34 | 					y: randomScalingFactor(),
 35 | 				}, {
 36 | 					x: randomScalingFactor(),
 37 | 					y: randomScalingFactor(),
 38 | 				}, {
 39 | 					x: randomScalingFactor(),
 40 | 					y: randomScalingFactor(),
 41 | 				}, {
 42 | 					x: randomScalingFactor(),
 43 | 					y: randomScalingFactor(),
 44 | 				}, {
 45 | 					x: randomScalingFactor(),
 46 | 					y: randomScalingFactor(),
 47 | 				}, {
 48 | 					x: randomScalingFactor(),
 49 | 					y: randomScalingFactor(),
 50 | 				}]
 51 | 			}, {
 52 | 				label: 'My Second dataset',
 53 | 				borderColor: window.chartColors.blue,
 54 | 				backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
 55 | 				data: [{
 56 | 					x: randomScalingFactor(),
 57 | 					y: randomScalingFactor(),
 58 | 				}, {
 59 | 					x: randomScalingFactor(),
 60 | 					y: randomScalingFactor(),
 61 | 				}, {
 62 | 					x: randomScalingFactor(),
 63 | 					y: randomScalingFactor(),
 64 | 				}, {
 65 | 					x: randomScalingFactor(),
 66 | 					y: randomScalingFactor(),
 67 | 				}, {
 68 | 					x: randomScalingFactor(),
 69 | 					y: randomScalingFactor(),
 70 | 				}, {
 71 | 					x: randomScalingFactor(),
 72 | 					y: randomScalingFactor(),
 73 | 				}, {
 74 | 					x: randomScalingFactor(),
 75 | 					y: randomScalingFactor(),
 76 | 				}]
 77 | 			}]
 78 | 		};
 79 | 
 80 | 		window.onload = function() {
 81 | 			var ctx = document.getElementById('canvas').getContext('2d');
 82 | 			window.myScatter = Chart.Scatter(ctx, {
 83 | 				data: scatterChartData,
 84 | 				options: {
 85 | 					title: {
 86 | 						display: true,
 87 | 						text: 'Chart.js Scatter Chart'
 88 | 					},
 89 | 				}
 90 | 			});
 91 | 		};
 92 | 
 93 | 		document.getElementById('randomizeData').addEventListener('click', function() {
 94 | 			scatterChartData.datasets.forEach(function(dataset) {
 95 | 				dataset.data = dataset.data.map(function() {
 96 | 					return {
 97 | 						x: randomScalingFactor(),
 98 | 						y: randomScalingFactor()
 99 | 					};
100 | 				});
101 | 			});
102 | 			window.myScatter.update();
103 | 		});
104 | 	</script>
105 | </body>
106 | 
107 | </html>
108 | 


--------------------------------------------------------------------------------
/chartjs/samples/charts/scatter/multi-axis.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Scatter Chart Multi Axis</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 	canvas {
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width:75%">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<button id="randomizeData">Randomize Data</button>
 22 | 	<script>
 23 | 	var color = Chart.helpers.color;
 24 | 	var scatterChartData = {
 25 | 		datasets: [{
 26 | 			label: 'My First dataset',
 27 | 			xAxisID: 'x-axis-1',
 28 | 			yAxisID: 'y-axis-1',
 29 | 			borderColor: window.chartColors.red,
 30 | 			backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
 31 | 			data: [{
 32 | 				x: randomScalingFactor(),
 33 | 				y: randomScalingFactor(),
 34 | 			}, {
 35 | 				x: randomScalingFactor(),
 36 | 				y: randomScalingFactor(),
 37 | 			}, {
 38 | 				x: randomScalingFactor(),
 39 | 				y: randomScalingFactor(),
 40 | 			}, {
 41 | 				x: randomScalingFactor(),
 42 | 				y: randomScalingFactor(),
 43 | 			}, {
 44 | 				x: randomScalingFactor(),
 45 | 				y: randomScalingFactor(),
 46 | 			}, {
 47 | 				x: randomScalingFactor(),
 48 | 				y: randomScalingFactor(),
 49 | 			}, {
 50 | 				x: randomScalingFactor(),
 51 | 				y: randomScalingFactor(),
 52 | 			}]
 53 | 		}, {
 54 | 			label: 'My Second dataset',
 55 | 			xAxisID: 'x-axis-1',
 56 | 			yAxisID: 'y-axis-2',
 57 | 			borderColor: window.chartColors.blue,
 58 | 			backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
 59 | 			data: [{
 60 | 				x: randomScalingFactor(),
 61 | 				y: randomScalingFactor(),
 62 | 			}, {
 63 | 				x: randomScalingFactor(),
 64 | 				y: randomScalingFactor(),
 65 | 			}, {
 66 | 				x: randomScalingFactor(),
 67 | 				y: randomScalingFactor(),
 68 | 			}, {
 69 | 				x: randomScalingFactor(),
 70 | 				y: randomScalingFactor(),
 71 | 			}, {
 72 | 				x: randomScalingFactor(),
 73 | 				y: randomScalingFactor(),
 74 | 			}, {
 75 | 				x: randomScalingFactor(),
 76 | 				y: randomScalingFactor(),
 77 | 			}, {
 78 | 				x: randomScalingFactor(),
 79 | 				y: randomScalingFactor(),
 80 | 			}]
 81 | 		}]
 82 | 	};
 83 | 
 84 | 	window.onload = function() {
 85 | 		var ctx = document.getElementById('canvas').getContext('2d');
 86 | 		window.myScatter = Chart.Scatter(ctx, {
 87 | 			data: scatterChartData,
 88 | 			options: {
 89 | 				responsive: true,
 90 | 				hoverMode: 'nearest',
 91 | 				intersect: true,
 92 | 				title: {
 93 | 					display: true,
 94 | 					text: 'Chart.js Scatter Chart - Multi Axis'
 95 | 				},
 96 | 				scales: {
 97 | 					xAxes: [{
 98 | 						position: 'bottom',
 99 | 						gridLines: {
100 | 							zeroLineColor: 'rgba(0,0,0,1)'
101 | 						}
102 | 					}],
103 | 					yAxes: [{
104 | 						type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
105 | 						display: true,
106 | 						position: 'left',
107 | 						id: 'y-axis-1',
108 | 					}, {
109 | 						type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
110 | 						display: true,
111 | 						position: 'right',
112 | 						reverse: true,
113 | 						id: 'y-axis-2',
114 | 
115 | 						// grid line settings
116 | 						gridLines: {
117 | 							drawOnChartArea: false, // only want the grid lines for one axis to show up
118 | 						},
119 | 					}],
120 | 				}
121 | 			}
122 | 		});
123 | 	};
124 | 
125 | 	document.getElementById('randomizeData').addEventListener('click', function() {
126 | 		scatterChartData.datasets.forEach(function(dataset) {
127 | 			dataset.data = dataset.data.map(function() {
128 | 				return {
129 | 					x: randomScalingFactor(),
130 | 					y: randomScalingFactor()
131 | 				};
132 | 			});
133 | 		});
134 | 		window.myScatter.update();
135 | 	});
136 | 	</script>
137 | </body>
138 | 
139 | </html>
140 | 


--------------------------------------------------------------------------------
/chartjs/samples/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-US">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 	<link rel="stylesheet" type="text/css" href="style.css">
 8 | 	<link rel="icon" href="favicon.ico">
 9 | 	<script src="samples.js"></script>
10 | 	<script src="utils.js"></script>
11 | 	<title>Chart.js samples</title>
12 | </head>
13 | <body>
14 | 	<div class="content">
15 | 		<div class="header">
16 | 			<div class="chartjs-title">Samples</div>
17 | 			<div class="chartjs-caption">Simple yet flexible JavaScript charting for designers &amp; developers</div>
18 | 			<div class="chartjs-links">
19 | 				<a class="btn btn-chartjs" href="http://www.chartjs.org">Website</a>
20 | 				<a class="btn btn-docs" href="http://www.chartjs.org/docs">Documentation</a>
21 | 				<a class="btn btn-gh" href="https://github.com/chartjs/Chart.js">GitHub</a>
22 | 			</div>
23 | 		</div>
24 | 
25 | 		<div id="categories" class="samples-categories"></div>
26 | 	</div>
27 | 
28 | 	<script>
29 | 		function createCategory(item) {
30 | 			var el = document.createElement('div');
31 | 			el.className = 'samples-category';
32 | 			el.innerHTML =
33 | 				'<div class="title">' + item.title + '</div>' +
34 | 				'<div class="items"></div>';
35 | 			return el;
36 | 		}
37 | 
38 | 		function createEntry(item) {
39 | 			var el = document.createElement('div');
40 | 			el.className = 'samples-entry';
41 | 			el.innerHTML = '<a class="title" href="' + item.path + '">' + item.title + '</a>';
42 | 			return el;
43 | 		}
44 | 
45 | 		var categories = document.getElementById('categories');
46 | 		Samples.items.forEach(function(item) {
47 | 			var category = createCategory(item);
48 | 			var children = category.getElementsByClassName('items')[0];
49 | 
50 | 			(item.items || []).forEach(function(item2) {
51 | 				children.appendChild(createEntry(item2));
52 | 			});
53 | 
54 | 			categories.appendChild(category);
55 | 		});
56 | 	</script>
57 | </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/chartjs/samples/legend/point-style.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Legend Point Style</title>
  6 | 	<script src="../../Chart.bundle.js"></script>
  7 | 	<script src="../utils.js"></script>
  8 | 	<style>
  9 | 		canvas {
 10 | 			-moz-user-select: none;
 11 | 			-webkit-user-select: none;
 12 | 			-ms-user-select: none;
 13 | 		}
 14 | 		.chart-container {
 15 | 			width: 500px;
 16 | 			margin-left: 40px;
 17 | 			margin-right: 40px;
 18 | 		}
 19 | 		.container {
 20 | 			display: flex;
 21 | 			flex-direction: row;
 22 | 			flex-wrap: wrap;
 23 | 			justify-content: center;
 24 | 		}
 25 | 	</style>
 26 | </head>
 27 | 
 28 | <body>
 29 | 	<div class="container">
 30 | 		<div class="chart-container">
 31 | 			<canvas id="chart-legend-normal"></canvas>
 32 | 		</div>
 33 | 		<div class="chart-container">
 34 | 			<canvas id="chart-legend-pointstyle"></canvas>
 35 | 		</div>
 36 | 	</div>
 37 | 	<script>
 38 | 		var color = Chart.helpers.color;
 39 | 		function createConfig(colorName) {
 40 | 			return {
 41 | 				type: 'line',
 42 | 				data: {
 43 | 					labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 44 | 					datasets: [{
 45 | 						label: 'My First dataset',
 46 | 						data: [
 47 | 							randomScalingFactor(),
 48 | 							randomScalingFactor(),
 49 | 							randomScalingFactor(),
 50 | 							randomScalingFactor(),
 51 | 							randomScalingFactor(),
 52 | 							randomScalingFactor(),
 53 | 							randomScalingFactor()
 54 | 						],
 55 | 						backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
 56 | 						borderColor: window.chartColors[colorName],
 57 | 						borderWidth: 1,
 58 | 						pointStyle: 'rectRot',
 59 | 						pointRadius: 5,
 60 | 						pointBorderColor: 'rgb(0, 0, 0)'
 61 | 					}]
 62 | 				},
 63 | 				options: {
 64 | 					responsive: true,
 65 | 					legend: {
 66 | 						labels: {
 67 | 							usePointStyle: false
 68 | 						}
 69 | 					},
 70 | 					scales: {
 71 | 						xAxes: [{
 72 | 							display: true,
 73 | 							scaleLabel: {
 74 | 								display: true,
 75 | 								labelString: 'Month'
 76 | 							}
 77 | 						}],
 78 | 						yAxes: [{
 79 | 							display: true,
 80 | 							scaleLabel: {
 81 | 								display: true,
 82 | 								labelString: 'Value'
 83 | 							}
 84 | 						}]
 85 | 					},
 86 | 					title: {
 87 | 						display: true,
 88 | 						text: 'Normal Legend'
 89 | 					}
 90 | 				}
 91 | 			};
 92 | 		}
 93 | 
 94 | 		function createPointStyleConfig(colorName) {
 95 | 			var config = createConfig(colorName);
 96 | 			config.options.legend.labels.usePointStyle = true;
 97 | 			config.options.title.text = 'Point Style Legend';
 98 | 			return config;
 99 | 		}
100 | 
101 | 		window.onload = function() {
102 | 			[{
103 | 				id: 'chart-legend-normal',
104 | 				config: createConfig('red')
105 | 			}, {
106 | 				id: 'chart-legend-pointstyle',
107 | 				config: createPointStyleConfig('blue')
108 | 			}].forEach(function(details) {
109 | 				var ctx = document.getElementById(details.id).getContext('2d');
110 | 				new Chart(ctx, details.config);
111 | 			});
112 | 		};
113 | 	</script>
114 | </body>
115 | 
116 | </html>
117 | 


--------------------------------------------------------------------------------
/chartjs/samples/legend/positioning.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Legend Positions</title>
  6 | 	<script src="../../Chart.bundle.js"></script>
  7 | 	<script src="../utils.js"></script>
  8 | 	<style>
  9 | 		canvas {
 10 | 			-moz-user-select: none;
 11 | 			-webkit-user-select: none;
 12 | 			-ms-user-select: none;
 13 | 		}
 14 | 		.chart-container {
 15 | 			width: 500px;
 16 | 			margin-left: 40px;
 17 | 			margin-right: 40px;
 18 | 		}
 19 | 		.container {
 20 | 			display: flex;
 21 | 			flex-direction: row;
 22 | 			flex-wrap: wrap;
 23 | 			justify-content: center;
 24 | 		}
 25 | 	</style>
 26 | </head>
 27 | 
 28 | <body>
 29 | 	<div class="container">
 30 | 		<div class="chart-container">
 31 | 			<canvas id="chart-legend-top"></canvas>
 32 | 		</div>
 33 | 		<div class="chart-container">
 34 | 			<canvas id="chart-legend-right"></canvas>
 35 | 		</div>
 36 | 		<div class="chart-container">
 37 | 			<canvas id="chart-legend-bottom"></canvas>
 38 | 		</div>
 39 | 		<div class="chart-container">
 40 | 			<canvas id="chart-legend-left"></canvas>
 41 | 		</div>
 42 | 	</div>
 43 | 	<script>
 44 | 		var color = Chart.helpers.color;
 45 | 		function createConfig(legendPosition, colorName) {
 46 | 			return {
 47 | 				type: 'line',
 48 | 				data: {
 49 | 					labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 50 | 					datasets: [{
 51 | 						label: 'My First dataset',
 52 | 						data: [
 53 | 							randomScalingFactor(),
 54 | 							randomScalingFactor(),
 55 | 							randomScalingFactor(),
 56 | 							randomScalingFactor(),
 57 | 							randomScalingFactor(),
 58 | 							randomScalingFactor(),
 59 | 							randomScalingFactor()
 60 | 						],
 61 | 						backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
 62 | 						borderColor: window.chartColors[colorName],
 63 | 						borderWidth: 1
 64 | 					}]
 65 | 				},
 66 | 				options: {
 67 | 					responsive: true,
 68 | 					legend: {
 69 | 						position: legendPosition,
 70 | 					},
 71 | 					scales: {
 72 | 						xAxes: [{
 73 | 							display: true,
 74 | 							scaleLabel: {
 75 | 								display: true,
 76 | 								labelString: 'Month'
 77 | 							}
 78 | 						}],
 79 | 						yAxes: [{
 80 | 							display: true,
 81 | 							scaleLabel: {
 82 | 								display: true,
 83 | 								labelString: 'Value'
 84 | 							}
 85 | 						}]
 86 | 					},
 87 | 					title: {
 88 | 						display: true,
 89 | 						text: 'Legend Position: ' + legendPosition
 90 | 					}
 91 | 				}
 92 | 			};
 93 | 		}
 94 | 
 95 | 		window.onload = function() {
 96 | 			[{
 97 | 				id: 'chart-legend-top',
 98 | 				legendPosition: 'top',
 99 | 				color: 'red'
100 | 			}, {
101 | 				id: 'chart-legend-right',
102 | 				legendPosition: 'right',
103 | 				color: 'blue'
104 | 			}, {
105 | 				id: 'chart-legend-bottom',
106 | 				legendPosition: 'bottom',
107 | 				color: 'green'
108 | 			}, {
109 | 				id: 'chart-legend-left',
110 | 				legendPosition: 'left',
111 | 				color: 'yellow'
112 | 			}].forEach(function(details) {
113 | 				var ctx = document.getElementById(details.id).getContext('2d');
114 | 				var config = createConfig(details.legendPosition, details.color);
115 | 				new Chart(ctx, config);
116 | 			});
117 | 		};
118 | 	</script>
119 | </body>
120 | 
121 | </html>
122 | 


--------------------------------------------------------------------------------
/chartjs/samples/logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="160" height="160" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg"><title>Artboard 6</title><g fill="none" fill-rule="evenodd"><path d="M144.086 80.568c-21.978.43-17.402 14.346-32.89 17.866C95.46 102.01 92.975 60 77.243 60c-15.733 0-19.216 40.806-38.918 68.823l-.56.794L80 154l64.086-37V80.568z" fill="#36A2EB"/><path d="M144.086 79.3C136.726 69.856 131.736 59 121 59c-19 0-14 31-35 31s-23.207-33.346-47-2c-7.58 9.988-13.682 21.124-18.475 31.662L80 154l64.086-37V79.3z" fill="#FFCE56"/><path d="M15.914 92.143C23.124 72.173 26.237 56 40 56c21 0 26 59 44 53s16-38 44-38c5.33 0 10.772 3.263 16.086 8.546V117L80 154l-64.086-37V92.143z" fill-opacity=".8" fill="#FE6184"/><path stroke="#E7E9ED" stroke-width="8" d="M80 6l64.086 37v74L80 154l-64.086-37V43z"/></g></svg>


--------------------------------------------------------------------------------
/chartjs/samples/samples.js:
--------------------------------------------------------------------------------
  1 | (function(global) {
  2 | 
  3 | 	var Samples = global.Samples || (global.Samples = {});
  4 | 
  5 | 	Samples.items = [{
  6 | 		title: 'Bar charts',
  7 | 		items: [{
  8 | 			title: 'Vertical',
  9 | 			path: 'charts/bar/vertical.html'
 10 | 		}, {
 11 | 			title: 'Horizontal',
 12 | 			path: 'charts/bar/horizontal.html'
 13 | 		}, {
 14 | 			title: 'Multi axis',
 15 | 			path: 'charts/bar/multi-axis.html'
 16 | 		}, {
 17 | 			title: 'Stacked',
 18 | 			path: 'charts/bar/stacked.html'
 19 | 		}, {
 20 | 			title: 'Stacked groups',
 21 | 			path: 'charts/bar/stacked-group.html'
 22 | 		}]
 23 | 	}, {
 24 | 		title: 'Line charts',
 25 | 		items: [{
 26 | 			title: 'Basic',
 27 | 			path: 'charts/line/basic.html'
 28 | 		}, {
 29 | 			title: 'Multi axis',
 30 | 			path: 'charts/line/multi-axis.html'
 31 | 		}, {
 32 | 			title: 'Stepped',
 33 | 			path: 'charts/line/stepped.html'
 34 | 		}, {
 35 | 			title: 'Interpolation',
 36 | 			path: 'charts/line/interpolation-modes.html'
 37 | 		}, {
 38 | 			title: 'Line styles',
 39 | 			path: 'charts/line/line-styles.html'
 40 | 		}, {
 41 | 			title: 'Point styles',
 42 | 			path: 'charts/line/point-styles.html'
 43 | 		}, {
 44 | 			title: 'Point sizes',
 45 | 			path: 'charts/line/point-sizes.html'
 46 | 		}]
 47 | 	}, {
 48 | 		title: 'Area charts',
 49 | 		items: [{
 50 | 			title: 'Boundaries (line)',
 51 | 			path: 'charts/area/line-boundaries.html'
 52 | 		}, {
 53 | 			title: 'Datasets (line)',
 54 | 			path: 'charts/area/line-datasets.html'
 55 | 		}, {
 56 | 			title: 'Stacked (line)',
 57 | 			path: 'charts/area/line-stacked.html'
 58 | 		}, {
 59 | 			title: 'Radar',
 60 | 			path: 'charts/area/radar.html'
 61 | 		}]
 62 | 	}, {
 63 | 		title: 'Other charts',
 64 | 		items: [{
 65 | 			title: 'Scatter',
 66 | 			path: 'charts/scatter/basic.html'
 67 | 		}, {
 68 | 			title: 'Scatter - Multi axis',
 69 | 			path: 'charts/scatter/multi-axis.html'
 70 | 		}, {
 71 | 			title: 'Doughnut',
 72 | 			path: 'charts/doughnut.html'
 73 | 		}, {
 74 | 			title: 'Pie',
 75 | 			path: 'charts/pie.html'
 76 | 		}, {
 77 | 			title: 'Polar area',
 78 | 			path: 'charts/polar-area.html'
 79 | 		}, {
 80 | 			title: 'Radar',
 81 | 			path: 'charts/radar.html'
 82 | 		}, {
 83 | 			title: 'Combo bar/line',
 84 | 			path: 'charts/combo-bar-line.html'
 85 | 		}]
 86 | 	}, {
 87 | 		title: 'Linear scale',
 88 | 		items: [{
 89 | 			title: 'Step size',
 90 | 			path: 'scales/linear/step-size.html'
 91 | 		}, {
 92 | 			title: 'Min & max',
 93 | 			path: 'scales/linear/min-max.html'
 94 | 		}, {
 95 | 			title: 'Min & max (suggested)',
 96 | 			path: 'scales/linear/min-max-suggested.html'
 97 | 		}]
 98 | 	}, {
 99 | 		title: 'Logarithmic scale',
100 | 		items: [{
101 | 			title: 'Line',
102 | 			path: 'scales/logarithmic/line.html'
103 | 		}, {
104 | 			title: 'Scatter',
105 | 			path: 'scales/logarithmic/scatter.html'
106 | 		}]
107 | 	}, {
108 | 		title: 'Time scale',
109 | 		items: [{
110 | 			title: 'Line',
111 | 			path: 'scales/time/line.html'
112 | 		}, {
113 | 			title: 'Line (point data)',
114 | 			path: 'scales/time/line-point-data.html'
115 | 		}, {
116 | 			title: 'Time Series',
117 | 			path: 'scales/time/financial.html'
118 | 		}, {
119 | 			title: 'Combo',
120 | 			path: 'scales/time/combo.html'
121 | 		}]
122 | 	}, {
123 | 		title: 'Scale options',
124 | 		items: [{
125 | 			title: 'Grid lines display',
126 | 			path: 'scales/gridlines-display.html'
127 | 		}, {
128 | 			title: 'Grid lines style',
129 | 			path: 'scales/gridlines-style.html'
130 | 		}, {
131 | 			title: 'Multiline labels',
132 | 			path: 'scales/multiline-labels.html'
133 | 		}, {
134 | 			title: 'Filtering Labels',
135 | 			path: 'scales/filtering-labels.html'
136 | 		}, {
137 | 			title: 'Non numeric Y Axis',
138 | 			path: 'scales/non-numeric-y.html'
139 | 		}, {
140 | 			title: 'Toggle Scale Type',
141 | 			path: 'scales/toggle-scale-type.html'
142 | 		}]
143 | 	}, {
144 | 		title: 'Legend',
145 | 		items: [{
146 | 			title: 'Positioning',
147 | 			path: 'legend/positioning.html'
148 | 		}, {
149 | 			title: 'Point style',
150 | 			path: 'legend/point-style.html'
151 | 		}]
152 | 	}, {
153 | 		title: 'Tooltip',
154 | 		items: [{
155 | 			title: 'Positioning',
156 | 			path: 'tooltips/positioning.html'
157 | 		}, {
158 | 			title: 'Interactions',
159 | 			path: 'tooltips/interactions.html'
160 | 		}, {
161 | 			title: 'Callbacks',
162 | 			path: 'tooltips/callbacks.html'
163 | 		}, {
164 | 			title: 'Border',
165 | 			path: 'tooltips/border.html'
166 | 		}, {
167 | 			title: 'HTML tooltips (line)',
168 | 			path: 'tooltips/custom-line.html'
169 | 		}, {
170 | 			title: 'HTML tooltips (pie)',
171 | 			path: 'tooltips/custom-pie.html'
172 | 		}, {
173 | 			title: 'HTML tooltips (points)',
174 | 			path: 'tooltips/custom-points.html'
175 | 		}]
176 | 	}, {
177 | 		title: 'Scriptable',
178 | 		items: [{
179 | 			title: 'Bubble Chart',
180 | 			path: 'scriptable/bubble.html'
181 | 		}]
182 | 	}, {
183 | 		title: 'Advanced',
184 | 		items: [{
185 | 			title: 'Progress bar',
186 | 			path: 'advanced/progress-bar.html'
187 | 		}, {
188 | 			title: 'Data labelling (plugin)',
189 | 			path: 'advanced/data-labelling.html'
190 | 		}]
191 | 	}];
192 | 
193 | }(this));
194 | 


--------------------------------------------------------------------------------
/chartjs/samples/scales/filtering-labels.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<title>Chart with xAxis Filtering</title>
 6 | 	<script src="../../Chart.bundle.js"></script>
 7 | 	<script src="../utils.js"></script>
 8 | 	<style>
 9 | 		canvas {
10 | 			-moz-user-select: none;
11 | 			-webkit-user-select: none;
12 | 			-ms-user-select: none;
13 | 		}
14 | 	</style>
15 | </head>
16 | 
17 | <body>
18 | 	<div style="width:75%;">
19 | 		<canvas id="canvas"></canvas>
20 | 	</div>
21 | 	<script>
22 | 		var randomScalingFactor = function() {
23 | 			return Math.round(Math.random() * 50 * (Math.random() > 0.5 ? 1 : 1)) + 50;
24 | 		};
25 | 
26 | 		var config = {
27 | 			type: 'line',
28 | 			data: {
29 | 				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
30 | 				datasets: [{
31 | 					label: 'My First dataset',
32 | 					fill: false,
33 | 					borderColor: window.chartColors.red,
34 | 					backgroundColor: window.chartColors.red,
35 | 					data: [
36 | 						randomScalingFactor(),
37 | 						randomScalingFactor(),
38 | 						randomScalingFactor(),
39 | 						randomScalingFactor(),
40 | 						randomScalingFactor(),
41 | 						randomScalingFactor(),
42 | 						randomScalingFactor()
43 | 					]
44 | 				}, {
45 | 					label: 'My Second dataset',
46 | 					fill: false,
47 | 					borderColor: window.chartColors.blue,
48 | 					backgroundColor: window.chartColors.blue,
49 | 					data: [
50 | 						randomScalingFactor(),
51 | 						randomScalingFactor(),
52 | 						randomScalingFactor(),
53 | 						randomScalingFactor(),
54 | 						randomScalingFactor(),
55 | 						randomScalingFactor(),
56 | 						randomScalingFactor()
57 | 					]
58 | 				}]
59 | 			},
60 | 			options: {
61 | 				responsive: true,
62 | 				title: {
63 | 					display: true,
64 | 					text: 'Chart.js Line Chart - X-Axis Filter'
65 | 				},
66 | 				scales: {
67 | 					xAxes: [{
68 | 						display: true,
69 | 						ticks: {
70 | 							callback: function(dataLabel, index) {
71 | 								// Hide the label of every 2nd dataset. return null to hide the grid line too
72 | 								return index % 2 === 0 ? dataLabel : '';
73 | 							}
74 | 						}
75 | 					}],
76 | 					yAxes: [{
77 | 						display: true,
78 | 						beginAtZero: false
79 | 					}]
80 | 				}
81 | 			}
82 | 		};
83 | 
84 | 		window.onload = function() {
85 | 			var ctx = document.getElementById('canvas').getContext('2d');
86 | 			window.myLine = new Chart(ctx, config);
87 | 		};
88 | 	</script>
89 | </body>
90 | 
91 | </html>
92 | 


--------------------------------------------------------------------------------
/chartjs/samples/scales/gridlines-display.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Grid Lines Display Settings</title>
  6 | 	<script src="../../Chart.bundle.js"></script>
  7 | 	<script src="../utils.js"></script>
  8 | 	<style>
  9 | 		canvas{
 10 | 			-moz-user-select: none;
 11 | 			-webkit-user-select: none;
 12 | 			-ms-user-select: none;
 13 | 		}
 14 | 		.chart-container {
 15 | 			width: 500px;
 16 | 			margin-left: 40px;
 17 | 			margin-right: 40px;
 18 | 			margin-bottom: 40px;
 19 | 		}
 20 | 		.container {
 21 | 			display: flex;
 22 | 			flex-direction: row;
 23 | 			flex-wrap: wrap;
 24 | 			justify-content: center;
 25 | 		}
 26 | 	</style>
 27 | </head>
 28 | 
 29 | <body>
 30 | 	<div class="container"></div>
 31 | 	<script>
 32 | 		function createConfig(gridlines, title) {
 33 | 			return {
 34 | 				type: 'line',
 35 | 				data: {
 36 | 					labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 37 | 					datasets: [{
 38 | 						label: 'My First dataset',
 39 | 						backgroundColor: window.chartColors.red,
 40 | 						borderColor: window.chartColors.red,
 41 | 						data: [10, 30, 39, 20, 25, 34, 0],
 42 | 						fill: false,
 43 | 					}, {
 44 | 						label: 'My Second dataset',
 45 | 						fill: false,
 46 | 						backgroundColor: window.chartColors.blue,
 47 | 						borderColor: window.chartColors.blue,
 48 | 						data: [18, 33, 22, 19, 11, 39, 30],
 49 | 					}]
 50 | 				},
 51 | 				options: {
 52 | 					responsive: true,
 53 | 					title: {
 54 | 						display: true,
 55 | 						text: title
 56 | 					},
 57 | 					scales: {
 58 | 						xAxes: [{
 59 | 							gridLines: gridlines
 60 | 						}],
 61 | 						yAxes: [{
 62 | 							gridLines: gridlines,
 63 | 							ticks: {
 64 | 								min: 0,
 65 | 								max: 100,
 66 | 								stepSize: 10
 67 | 							}
 68 | 						}]
 69 | 					}
 70 | 				}
 71 | 			};
 72 | 		}
 73 | 
 74 | 		window.onload = function() {
 75 | 			var container = document.querySelector('.container');
 76 | 
 77 | 			[{
 78 | 				title: 'Display: true',
 79 | 				gridLines: {
 80 | 					display: true
 81 | 				}
 82 | 			}, {
 83 | 				title: 'Display: false',
 84 | 				gridLines: {
 85 | 					display: false
 86 | 				}
 87 | 			}, {
 88 | 				title: 'Display: false, no border',
 89 | 				gridLines: {
 90 | 					display: false,
 91 | 					drawBorder: false
 92 | 				}
 93 | 			}, {
 94 | 				title: 'DrawOnChartArea: false',
 95 | 				gridLines: {
 96 | 					display: true,
 97 | 					drawBorder: true,
 98 | 					drawOnChartArea: false,
 99 | 				}
100 | 			}, {
101 | 				title: 'DrawTicks: false',
102 | 				gridLines: {
103 | 					display: true,
104 | 					drawBorder: true,
105 | 					drawOnChartArea: true,
106 | 					drawTicks: false,
107 | 				}
108 | 			}].forEach(function(details) {
109 | 				var div = document.createElement('div');
110 | 				div.classList.add('chart-container');
111 | 
112 | 				var canvas = document.createElement('canvas');
113 | 				div.appendChild(canvas);
114 | 				container.appendChild(div);
115 | 
116 | 				var ctx = canvas.getContext('2d');
117 | 				var config = createConfig(details.gridLines, details.title);
118 | 				new Chart(ctx, config);
119 | 			});
120 | 		};
121 | 	</script>
122 | </body>
123 | 
124 | </html>
125 | 


--------------------------------------------------------------------------------
/chartjs/samples/scales/gridlines-style.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<title>Grid Lines Style Settings</title>
 6 | 	<script src="../../Chart.bundle.js"></script>
 7 | 	<script src="../utils.js"></script>
 8 | 	<style>
 9 | 	canvas{
10 | 		-moz-user-select: none;
11 | 		-webkit-user-select: none;
12 | 		-ms-user-select: none;
13 | 	}
14 | 	</style>
15 | </head>
16 | 
17 | <body>
18 | 	<div style="width:75%;">
19 | 		<canvas id="canvas"></canvas>
20 | 	</div>
21 | 	<script>
22 | 		var config = {
23 | 			type: 'line',
24 | 			data: {
25 | 				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
26 | 				datasets: [{
27 | 					label: 'My First dataset',
28 | 					backgroundColor: window.chartColors.red,
29 | 					borderColor: window.chartColors.red,
30 | 					data: [10, 30, 39, 20, 25, 34, -10],
31 | 					fill: false,
32 | 				}, {
33 | 					label: 'My Second dataset',
34 | 					fill: false,
35 | 					backgroundColor: window.chartColors.blue,
36 | 					borderColor: window.chartColors.blue,
37 | 					data: [18, 33, 22, 19, 11, 39, 30],
38 | 				}]
39 | 			},
40 | 			options: {
41 | 				responsive: true,
42 | 				title: {
43 | 					display: true,
44 | 					text: 'Grid Line Settings'
45 | 				},
46 | 				scales: {
47 | 					yAxes: [{
48 | 						gridLines: {
49 | 							drawBorder: false,
50 | 							color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
51 | 						},
52 | 						ticks: {
53 | 							min: 0,
54 | 							max: 100,
55 | 							stepSize: 10
56 | 						}
57 | 					}]
58 | 				}
59 | 			}
60 | 		};
61 | 
62 | 		window.onload = function() {
63 | 			var ctx = document.getElementById('canvas').getContext('2d');
64 | 			window.myLine = new Chart(ctx, config);
65 | 		};
66 | 	</script>
67 | </body>
68 | 
69 | </html>
70 | 


--------------------------------------------------------------------------------
/chartjs/samples/scales/linear/min-max-suggested.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<title>Suggested Min/Max Settings</title>
 6 | 	<script src="../../../Chart.bundle.js"></script>
 7 | 	<script src="../../utils.js"></script>
 8 | 	<style>
 9 | 	canvas{
10 | 		-moz-user-select: none;
11 | 		-webkit-user-select: none;
12 | 		-ms-user-select: none;
13 | 	}
14 | 	</style>
15 | </head>
16 | 
17 | <body>
18 | 	<div style="width:75%;">
19 | 		<canvas id="canvas"></canvas>
20 | 	</div>
21 | 	<script>
22 | 		var config = {
23 | 			type: 'line',
24 | 			data: {
25 | 				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
26 | 				datasets: [{
27 | 					label: 'My First dataset',
28 | 					backgroundColor: window.chartColors.red,
29 | 					borderColor: window.chartColors.red,
30 | 					data: [10, 30, 39, 20, 25, 34, -10],
31 | 					fill: false,
32 | 				}, {
33 | 					label: 'My Second dataset',
34 | 					fill: false,
35 | 					backgroundColor: window.chartColors.blue,
36 | 					borderColor: window.chartColors.blue,
37 | 					data: [18, 33, 22, 19, 11, 39, 30],
38 | 				}]
39 | 			},
40 | 			options: {
41 | 				responsive: true,
42 | 				title: {
43 | 					display: true,
44 | 					text: 'Min and Max Settings'
45 | 				},
46 | 				scales: {
47 | 					yAxes: [{
48 | 						ticks: {
49 | 							// the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
50 | 							suggestedMin: 10,
51 | 
52 | 							// the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
53 | 							suggestedMax: 50
54 | 						}
55 | 					}]
56 | 				}
57 | 			}
58 | 		};
59 | 
60 | 		window.onload = function() {
61 | 			var ctx = document.getElementById('canvas').getContext('2d');
62 | 			window.myLine = new Chart(ctx, config);
63 | 		};
64 | 	</script>
65 | </body>
66 | 
67 | </html>
68 | 


--------------------------------------------------------------------------------
/chartjs/samples/scales/linear/min-max.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<title>Min/Max Settings</title>
 6 | 	<script src="../../../Chart.bundle.js"></script>
 7 | 	<script src="../../utils.js"></script>
 8 | 	<style>
 9 | 		canvas{
10 | 			-moz-user-select: none;
11 | 			-webkit-user-select: none;
12 | 			-ms-user-select: none;
13 | 		}
14 | 	</style>
15 | </head>
16 | 
17 | <body>
18 | 	<div style="width:75%;">
19 | 		<canvas id="canvas"></canvas>
20 | 	</div>
21 | 	<script>
22 | 		var config = {
23 | 			type: 'line',
24 | 			data: {
25 | 				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
26 | 				datasets: [{
27 | 					label: 'My First dataset',
28 | 					backgroundColor: window.chartColors.red,
29 | 					borderColor: window.chartColors.red,
30 | 					data: [10, 30, 50, 20, 25, 44, -10],
31 | 					fill: false,
32 | 				}, {
33 | 					label: 'My Second dataset',
34 | 					fill: false,
35 | 					backgroundColor: window.chartColors.blue,
36 | 					borderColor: window.chartColors.blue,
37 | 					data: [100, 33, 22, 19, 11, 49, 30],
38 | 				}]
39 | 			},
40 | 			options: {
41 | 				responsive: true,
42 | 				title: {
43 | 					display: true,
44 | 					text: 'Min and Max Settings'
45 | 				},
46 | 				scales: {
47 | 					yAxes: [{
48 | 						ticks: {
49 | 							min: 10,
50 | 							max: 50
51 | 						}
52 | 					}]
53 | 				}
54 | 			}
55 | 		};
56 | 
57 | 		window.onload = function() {
58 | 			var ctx = document.getElementById('canvas').getContext('2d');
59 | 			window.myLine = new Chart(ctx, config);
60 | 		};
61 | 	</script>
62 | </body>
63 | 
64 | </html>
65 | 


--------------------------------------------------------------------------------
/chartjs/samples/scales/linear/step-size.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Line Chart</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 	canvas{
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width:75%;">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<br>
 22 | 	<br>
 23 | 	<button id="randomizeData">Randomize Data</button>
 24 | 	<button id="addDataset">Add Dataset</button>
 25 | 	<button id="removeDataset">Remove Dataset</button>
 26 | 	<button id="addData">Add Data</button>
 27 | 	<button id="removeData">Remove Data</button>
 28 | 	<script>
 29 | 		var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 30 | 
 31 | 		var randomScalingFactor = function() {
 32 | 			return Math.round(Math.random() * 100);
 33 | 		};
 34 | 
 35 | 		var config = {
 36 | 			type: 'line',
 37 | 			data: {
 38 | 				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 39 | 				datasets: [{
 40 | 					label: 'My First dataset',
 41 | 					backgroundColor: window.chartColors.red,
 42 | 					borderColor: window.chartColors.red,
 43 | 					data: [
 44 | 						randomScalingFactor(),
 45 | 						randomScalingFactor(),
 46 | 						randomScalingFactor(),
 47 | 						randomScalingFactor(),
 48 | 						randomScalingFactor(),
 49 | 						randomScalingFactor(),
 50 | 						randomScalingFactor()
 51 | 					],
 52 | 					fill: false,
 53 | 				}, {
 54 | 					label: 'My Second dataset',
 55 | 					fill: false,
 56 | 					backgroundColor: window.chartColors.blue,
 57 | 					borderColor: window.chartColors.blue,
 58 | 					data: [
 59 | 						randomScalingFactor(),
 60 | 						randomScalingFactor(),
 61 | 						randomScalingFactor(),
 62 | 						randomScalingFactor(),
 63 | 						randomScalingFactor(),
 64 | 						randomScalingFactor(),
 65 | 						randomScalingFactor()
 66 | 					],
 67 | 				}]
 68 | 			},
 69 | 			options: {
 70 | 				responsive: true,
 71 | 				title: {
 72 | 					display: true,
 73 | 					text: 'Chart.js Line Chart'
 74 | 				},
 75 | 				tooltips: {
 76 | 					mode: 'index',
 77 | 					intersect: false,
 78 | 				},
 79 | 				hover: {
 80 | 					mode: 'nearest',
 81 | 					intersect: true
 82 | 				},
 83 | 				scales: {
 84 | 					xAxes: [{
 85 | 						display: true,
 86 | 						scaleLabel: {
 87 | 							display: true,
 88 | 							labelString: 'Month'
 89 | 						}
 90 | 					}],
 91 | 					yAxes: [{
 92 | 						display: true,
 93 | 						scaleLabel: {
 94 | 							display: true,
 95 | 							labelString: 'Value'
 96 | 						},
 97 | 						ticks: {
 98 | 							min: 0,
 99 | 							max: 100,
100 | 
101 | 							// forces step size to be 5 units
102 | 							stepSize: 5
103 | 						}
104 | 					}]
105 | 				}
106 | 			}
107 | 		};
108 | 
109 | 		window.onload = function() {
110 | 			var ctx = document.getElementById('canvas').getContext('2d');
111 | 			window.myLine = new Chart(ctx, config);
112 | 		};
113 | 
114 | 		document.getElementById('randomizeData').addEventListener('click', function() {
115 | 			config.data.datasets.forEach(function(dataset) {
116 | 				dataset.data = dataset.data.map(function() {
117 | 					return randomScalingFactor();
118 | 				});
119 | 			});
120 | 
121 | 			window.myLine.update();
122 | 		});
123 | 
124 | 		var colorNames = Object.keys(window.chartColors);
125 | 		document.getElementById('addDataset').addEventListener('click', function() {
126 | 			var colorName = colorNames[config.data.datasets.length % colorNames.length];
127 | 			var newColor = window.chartColors[colorName];
128 | 			var newDataset = {
129 | 				label: 'Dataset ' + config.data.datasets.length,
130 | 				backgroundColor: newColor,
131 | 				borderColor: newColor,
132 | 				data: [],
133 | 				fill: false
134 | 			};
135 | 
136 | 			for (var index = 0; index < config.data.labels.length; ++index) {
137 | 				newDataset.data.push(randomScalingFactor());
138 | 			}
139 | 
140 | 			config.data.datasets.push(newDataset);
141 | 			window.myLine.update();
142 | 		});
143 | 
144 | 		document.getElementById('addData').addEventListener('click', function() {
145 | 			if (config.data.datasets.length > 0) {
146 | 				var month = MONTHS[config.data.labels.length % MONTHS.length];
147 | 				config.data.labels.push(month);
148 | 
149 | 				config.data.datasets.forEach(function(dataset) {
150 | 					dataset.data.push(randomScalingFactor());
151 | 				});
152 | 
153 | 				window.myLine.update();
154 | 			}
155 | 		});
156 | 
157 | 		document.getElementById('removeDataset').addEventListener('click', function() {
158 | 			config.data.datasets.splice(0, 1);
159 | 			window.myLine.update();
160 | 		});
161 | 
162 | 		document.getElementById('removeData').addEventListener('click', function() {
163 | 			config.data.labels.splice(-1, 1); // remove the label first
164 | 
165 | 			config.data.datasets.forEach(function(dataset) {
166 | 				dataset.data.pop();
167 | 			});
168 | 
169 | 			window.myLine.update();
170 | 		});
171 | 
172 | 	</script>
173 | </body>
174 | 
175 | </html>
176 | 


--------------------------------------------------------------------------------
/chartjs/samples/scales/logarithmic/line.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<title>Logarithmic Line Chart</title>
 6 | 	<script src="../../../Chart.bundle.js"></script>
 7 | 	<script src="../../utils.js"></script>
 8 | 	<style>
 9 | 	canvas {
10 | 		-moz-user-select: none;
11 | 		-webkit-user-select: none;
12 | 		-ms-user-select: none;
13 | 	}
14 | 	</style>
15 | </head>
16 | 
17 | <body>
18 | 	<div style="width:75%;">
19 | 		<canvas id="canvas"></canvas>
20 | 	</div>
21 | 	<button id="randomizeData">Randomize Data</button>
22 | 	<script>
23 | 	var randomScalingFactor = function() {
24 | 		return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
25 | 	};
26 | 
27 | 	var config = {
28 | 		type: 'line',
29 | 		data: {
30 | 			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
31 | 			datasets: [{
32 | 				label: 'My First dataset',
33 | 				backgroundColor: window.chartColors.red,
34 | 				borderColor: window.chartColors.red,
35 | 				fill: false,
36 | 				data: [
37 | 					randomScalingFactor(),
38 | 					randomScalingFactor(),
39 | 					randomScalingFactor(),
40 | 					randomScalingFactor(),
41 | 					randomScalingFactor(),
42 | 					randomScalingFactor(),
43 | 					randomScalingFactor()
44 | 				],
45 | 			}, {
46 | 				label: 'My Second dataset',
47 | 				backgroundColor: window.chartColors.blue,
48 | 				borderColor: window.chartColors.blue,
49 | 				fill: false,
50 | 				data: [
51 | 					randomScalingFactor(),
52 | 					randomScalingFactor(),
53 | 					randomScalingFactor(),
54 | 					randomScalingFactor(),
55 | 					randomScalingFactor(),
56 | 					randomScalingFactor(),
57 | 					randomScalingFactor()
58 | 				],
59 | 			}]
60 | 		},
61 | 		options: {
62 | 			responsive: true,
63 | 			title: {
64 | 				display: true,
65 | 				text: 'Chart.js Line Chart - Logarithmic'
66 | 			},
67 | 			scales: {
68 | 				xAxes: [{
69 | 					display: true,
70 | 				}],
71 | 				yAxes: [{
72 | 					display: true,
73 | 					type: 'logarithmic',
74 | 				}]
75 | 			}
76 | 		}
77 | 	};
78 | 
79 | 	window.onload = function() {
80 | 		var ctx = document.getElementById('canvas').getContext('2d');
81 | 		window.myLine = new Chart(ctx, config);
82 | 	};
83 | 
84 | 	document.getElementById('randomizeData').addEventListener('click', function() {
85 | 		config.data.datasets.forEach(function(dataset) {
86 | 			dataset.data = dataset.data.map(function() {
87 | 				return randomScalingFactor();
88 | 			});
89 | 
90 | 		});
91 | 
92 | 		window.myLine.update();
93 | 	});
94 | 	</script>
95 | </body>
96 | 
97 | </html>
98 | 


--------------------------------------------------------------------------------
/chartjs/samples/scales/logarithmic/scatter.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Scatter Chart</title>
  6 | 	<script src="../../../Chart.bundle.js"></script>
  7 | 	<script src="../../utils.js"></script>
  8 | 	<style>
  9 | 	canvas {
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width:75%">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<script>
 22 | 	var color = Chart.helpers.color;
 23 | 	var scatterChartData = {
 24 | 		datasets: [{
 25 | 			borderColor: window.chartColors.red,
 26 | 			backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
 27 | 			label: 'V(node2)',
 28 | 			data: [{
 29 | 				x: 1,
 30 | 				y: -1.711e-2,
 31 | 			}, {
 32 | 				x: 1.26,
 33 | 				y: -2.708e-2,
 34 | 			}, {
 35 | 				x: 1.58,
 36 | 				y: -4.285e-2,
 37 | 			}, {
 38 | 				x: 2.0,
 39 | 				y: -6.772e-2,
 40 | 			}, {
 41 | 				x: 2.51,
 42 | 				y: -1.068e-1,
 43 | 			}, {
 44 | 				x: 3.16,
 45 | 				y: -1.681e-1,
 46 | 			}, {
 47 | 				x: 3.98,
 48 | 				y: -2.635e-1,
 49 | 			}, {
 50 | 				x: 5.01,
 51 | 				y: -4.106e-1,
 52 | 			}, {
 53 | 				x: 6.31,
 54 | 				y: -6.339e-1,
 55 | 			}, {
 56 | 				x: 7.94,
 57 | 				y: -9.659e-1,
 58 | 			}, {
 59 | 				x: 10.00,
 60 | 				y: -1.445,
 61 | 			}, {
 62 | 				x: 12.6,
 63 | 				y: -2.110,
 64 | 			}, {
 65 | 				x: 15.8,
 66 | 				y: -2.992,
 67 | 			}, {
 68 | 				x: 20.0,
 69 | 				y: -4.102,
 70 | 			}, {
 71 | 				x: 25.1,
 72 | 				y: -5.429,
 73 | 			}, {
 74 | 				x: 31.6,
 75 | 				y: -6.944,
 76 | 			}, {
 77 | 				x: 39.8,
 78 | 				y: -8.607,
 79 | 			}, {
 80 | 				x: 50.1,
 81 | 				y: -1.038e1,
 82 | 			}, {
 83 | 				x: 63.1,
 84 | 				y: -1.223e1,
 85 | 			}, {
 86 | 				x: 79.4,
 87 | 				y: -1.413e1,
 88 | 			}, {
 89 | 				x: 100.00,
 90 | 				y: -1.607e1,
 91 | 			}, {
 92 | 				x: 126,
 93 | 				y: -1.803e1,
 94 | 			}, {
 95 | 				x: 158,
 96 | 				y: -2e1,
 97 | 			}, {
 98 | 				x: 200,
 99 | 				y: -2.199e1,
100 | 			}, {
101 | 				x: 251,
102 | 				y: -2.398e1,
103 | 			}, {
104 | 				x: 316,
105 | 				y: -2.597e1,
106 | 			}, {
107 | 				x: 398,
108 | 				y: -2.797e1,
109 | 			}, {
110 | 				x: 501,
111 | 				y: -2.996e1,
112 | 			}, {
113 | 				x: 631,
114 | 				y: -3.196e1,
115 | 			}, {
116 | 				x: 794,
117 | 				y: -3.396e1,
118 | 			}, {
119 | 				x: 1000,
120 | 				y: -3.596e1,
121 | 			}]
122 | 		}]
123 | 	};
124 | 
125 | 	window.onload = function() {
126 | 		var ctx = document.getElementById('canvas').getContext('2d');
127 | 		window.myScatter = Chart.Scatter(ctx, {
128 | 			data: scatterChartData,
129 | 			options: {
130 | 				title: {
131 | 					display: true,
132 | 					text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
133 | 				},
134 | 				scales: {
135 | 					xAxes: [{
136 | 						type: 'logarithmic',
137 | 						position: 'bottom',
138 | 						ticks: {
139 | 							userCallback: function(tick) {
140 | 								var remain = tick / (Math.pow(10, Math.floor(Chart.helpers.log10(tick))));
141 | 								if (remain === 1 || remain === 2 || remain === 5) {
142 | 									return tick.toString() + 'Hz';
143 | 								}
144 | 								return '';
145 | 							},
146 | 						},
147 | 						scaleLabel: {
148 | 							labelString: 'Frequency',
149 | 							display: true,
150 | 						}
151 | 					}],
152 | 					yAxes: [{
153 | 						type: 'linear',
154 | 						ticks: {
155 | 							userCallback: function(tick) {
156 | 								return tick.toString() + 'dB';
157 | 							}
158 | 						},
159 | 						scaleLabel: {
160 | 							labelString: 'Voltage',
161 | 							display: true
162 | 						}
163 | 					}]
164 | 				}
165 | 			}
166 | 		});
167 | 	};
168 | 	</script>
169 | </body>
170 | 
171 | </html>
172 | 


--------------------------------------------------------------------------------
/chartjs/samples/scales/multiline-labels.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<title>Line Chart</title>
 6 | 	<script src="../../Chart.bundle.js"></script>
 7 | 	<script src="../utils.js"></script>
 8 | 	<style>
 9 | 	canvas{
10 | 		-moz-user-select: none;
11 | 		-webkit-user-select: none;
12 | 		-ms-user-select: none;
13 | 	}
14 | 	</style>
15 | </head>
16 | 
17 | <body>
18 | 	<div style="width:90%;">
19 | 		<canvas id="canvas"></canvas>
20 | 	</div>
21 | 	<script>
22 | 		var randomScalingFactor = function() {
23 | 			return Math.round(Math.random() * 100);
24 | 		};
25 | 
26 | 		var config = {
27 | 			type: 'line',
28 | 			data: {
29 | 				labels: [['June', '2015'], 'July', 'August', 'September', 'October', 'November', 'December', ['January', '2016'], 'February', 'March', 'April', 'May'],
30 | 				datasets: [{
31 | 					label: 'My First dataset',
32 | 					fill: false,
33 | 					backgroundColor: window.chartColors.red,
34 | 					borderColor: window.chartColors.red,
35 | 					data: [
36 | 						randomScalingFactor(),
37 | 						randomScalingFactor(),
38 | 						randomScalingFactor(),
39 | 						randomScalingFactor(),
40 | 						randomScalingFactor(),
41 | 						randomScalingFactor(),
42 | 						randomScalingFactor(),
43 | 						randomScalingFactor(),
44 | 						randomScalingFactor(),
45 | 						randomScalingFactor(),
46 | 						randomScalingFactor(),
47 | 						randomScalingFactor()
48 | 					]
49 | 				}, {
50 | 					label: 'My Second dataset',
51 | 					fill: false,
52 | 					backgroundColor: window.chartColors.blue,
53 | 					borderColor: window.chartColors.blue,
54 | 					data: [
55 | 						randomScalingFactor(),
56 | 						randomScalingFactor(),
57 | 						randomScalingFactor(),
58 | 						randomScalingFactor(),
59 | 						randomScalingFactor(),
60 | 						randomScalingFactor(),
61 | 						randomScalingFactor(),
62 | 						randomScalingFactor(),
63 | 						randomScalingFactor(),
64 | 						randomScalingFactor(),
65 | 						randomScalingFactor(),
66 | 						randomScalingFactor()
67 | 					],
68 | 				}]
69 | 			},
70 | 			options: {
71 | 				responsive: true,
72 | 				title: {
73 | 					display: true,
74 | 					text: 'Chart with Multiline Labels'
75 | 				},
76 | 			}
77 | 		};
78 | 
79 | 		window.onload = function() {
80 | 			var ctx = document.getElementById('canvas').getContext('2d');
81 | 			window.myLine = new Chart(ctx, config);
82 | 		};
83 | 	</script>
84 | </body>
85 | 
86 | </html>
87 | 


--------------------------------------------------------------------------------
/chartjs/samples/scales/non-numeric-y.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<title>Line Chart</title>
 6 | 	<script src="../../Chart.bundle.js"></script>
 7 | 	<script src="../utils.js"></script>
 8 | 	<style>
 9 | 	canvas{
10 | 		-moz-user-select: none;
11 | 		-webkit-user-select: none;
12 | 		-ms-user-select: none;
13 | 	}
14 | 	</style>
15 | </head>
16 | 
17 | <body>
18 | 	<div style="width:75%;">
19 | 		<canvas id="canvas"></canvas>
20 | 	</div>
21 | 	<script>
22 | 		var config = {
23 | 			type: 'line',
24 | 			data: {
25 | 				xLabels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
26 | 				yLabels: ['', 'Request Added', 'Request Viewed', 'Request Accepted', 'Request Solved', 'Solving Confirmed'],
27 | 				datasets: [{
28 | 					label: 'My First dataset',
29 | 					data: ['', 'Request Added', 'Request Added', 'Request Added', 'Request Viewed', 'Request Viewed', 'Request Viewed'],
30 | 					fill: false,
31 | 					borderColor: window.chartColors.red,
32 | 					backgroundColor: window.chartColors.red
33 | 				}]
34 | 			},
35 | 			options: {
36 | 				responsive: true,
37 | 				title: {
38 | 					display: true,
39 | 					text: 'Chart with Non Numeric Y Axis'
40 | 				},
41 | 				scales: {
42 | 					xAxes: [{
43 | 						display: true,
44 | 						scaleLabel: {
45 | 							display: true,
46 | 							labelString: 'Month'
47 | 						}
48 | 					}],
49 | 					yAxes: [{
50 | 						type: 'category',
51 | 						position: 'left',
52 | 						display: true,
53 | 						scaleLabel: {
54 | 							display: true,
55 | 							labelString: 'Request State'
56 | 						},
57 | 						ticks: {
58 | 							reverse: true
59 | 						}
60 | 					}]
61 | 				}
62 | 			}
63 | 		};
64 | 
65 | 		window.onload = function() {
66 | 			var ctx = document.getElementById('canvas').getContext('2d');
67 | 			window.myLine = new Chart(ctx, config);
68 | 		};
69 | 	</script>
70 | </body>
71 | 
72 | </html>
73 | 


--------------------------------------------------------------------------------
/chartjs/samples/scales/time/combo.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Line Chart - Combo Time Scale</title>
  6 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
  7 | 	<script src="../../../Chart.js"></script>
  8 | 	<script src="../../utils.js"></script>
  9 | 	<style>
 10 | 		canvas {
 11 | 			-moz-user-select: none;
 12 | 			-webkit-user-select: none;
 13 | 			-ms-user-select: none;
 14 | 		}
 15 | 	</style>
 16 | </head>
 17 | 
 18 | <body>
 19 | 	<div style="width:75%;">
 20 | 		<canvas id="canvas"></canvas>
 21 | 	</div>
 22 | 	<br>
 23 | 	<br>
 24 | 	<button id="randomizeData">Randomize Data</button>
 25 | 	<button id="addDataset">Add Dataset</button>
 26 | 	<button id="removeDataset">Remove Dataset</button>
 27 | 	<button id="addData">Add Data</button>
 28 | 	<button id="removeData">Remove Data</button>
 29 | 	<script>
 30 | 		var timeFormat = 'MM/DD/YYYY HH:mm';
 31 | 
 32 | 		function newDateString(days) {
 33 | 			return moment().add(days, 'd').format(timeFormat);
 34 | 		}
 35 | 
 36 | 		var color = Chart.helpers.color;
 37 | 		var config = {
 38 | 			type: 'bar',
 39 | 			data: {
 40 | 				labels: [
 41 | 					newDateString(0),
 42 | 					newDateString(1),
 43 | 					newDateString(2),
 44 | 					newDateString(3),
 45 | 					newDateString(4),
 46 | 					newDateString(5),
 47 | 					newDateString(6)
 48 | 				],
 49 | 				datasets: [{
 50 | 					type: 'bar',
 51 | 					label: 'Dataset 1',
 52 | 					backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
 53 | 					borderColor: window.chartColors.red,
 54 | 					data: [
 55 | 						randomScalingFactor(),
 56 | 						randomScalingFactor(),
 57 | 						randomScalingFactor(),
 58 | 						randomScalingFactor(),
 59 | 						randomScalingFactor(),
 60 | 						randomScalingFactor(),
 61 | 						randomScalingFactor()
 62 | 					],
 63 | 				}, {
 64 | 					type: 'bar',
 65 | 					label: 'Dataset 2',
 66 | 					backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
 67 | 					borderColor: window.chartColors.blue,
 68 | 					data: [
 69 | 						randomScalingFactor(),
 70 | 						randomScalingFactor(),
 71 | 						randomScalingFactor(),
 72 | 						randomScalingFactor(),
 73 | 						randomScalingFactor(),
 74 | 						randomScalingFactor(),
 75 | 						randomScalingFactor()
 76 | 					],
 77 | 				}, {
 78 | 					type: 'line',
 79 | 					label: 'Dataset 3',
 80 | 					backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
 81 | 					borderColor: window.chartColors.green,
 82 | 					fill: false,
 83 | 					data: [
 84 | 						randomScalingFactor(),
 85 | 						randomScalingFactor(),
 86 | 						randomScalingFactor(),
 87 | 						randomScalingFactor(),
 88 | 						randomScalingFactor(),
 89 | 						randomScalingFactor(),
 90 | 						randomScalingFactor()
 91 | 					],
 92 | 				}]
 93 | 			},
 94 | 			options: {
 95 | 				title: {
 96 | 					text: 'Chart.js Combo Time Scale'
 97 | 				},
 98 | 				scales: {
 99 | 					xAxes: [{
100 | 						type: 'time',
101 | 						display: true,
102 | 						time: {
103 | 							format: timeFormat,
104 | 							// round: 'day'
105 | 						}
106 | 					}],
107 | 				},
108 | 			}
109 | 		};
110 | 
111 | 		window.onload = function() {
112 | 			var ctx = document.getElementById('canvas').getContext('2d');
113 | 			window.myLine = new Chart(ctx, config);
114 | 
115 | 		};
116 | 
117 | 		document.getElementById('randomizeData').addEventListener('click', function() {
118 | 			config.data.datasets.forEach(function(dataset) {
119 | 				dataset.data = dataset.data.map(function() {
120 | 					return randomScalingFactor();
121 | 				});
122 | 			});
123 | 
124 | 			window.myLine.update();
125 | 		});
126 | 
127 | 		var colorNames = Object.keys(window.chartColors);
128 | 		document.getElementById('addDataset').addEventListener('click', function() {
129 | 			var colorName = colorNames[config.data.datasets.length % colorNames.length];
130 | 			var newColor = window.chartColors[colorName];
131 | 			var newDataset = {
132 | 				label: 'Dataset ' + config.data.datasets.length,
133 | 				borderColor: newColor,
134 | 				backgroundColor: color(newColor).alpha(0.5).rgbString(),
135 | 				data: [],
136 | 			};
137 | 
138 | 			for (var index = 0; index < config.data.labels.length; ++index) {
139 | 				newDataset.data.push(randomScalingFactor());
140 | 			}
141 | 
142 | 			config.data.datasets.push(newDataset);
143 | 			window.myLine.update();
144 | 		});
145 | 
146 | 		document.getElementById('addData').addEventListener('click', function() {
147 | 			if (config.data.datasets.length > 0) {
148 | 				config.data.labels.push(newDateString(config.data.labels.length));
149 | 
150 | 				for (var index = 0; index < config.data.datasets.length; ++index) {
151 | 					config.data.datasets[index].data.push(randomScalingFactor());
152 | 				}
153 | 
154 | 				window.myLine.update();
155 | 			}
156 | 		});
157 | 
158 | 		document.getElementById('removeDataset').addEventListener('click', function() {
159 | 			config.data.datasets.splice(0, 1);
160 | 			window.myLine.update();
161 | 		});
162 | 
163 | 		document.getElementById('removeData').addEventListener('click', function() {
164 | 			config.data.labels.splice(-1, 1); // remove the label first
165 | 
166 | 			config.data.datasets.forEach(function(dataset, datasetIndex) {
167 | 				config.data.datasets[datasetIndex].data.pop();
168 | 			});
169 | 
170 | 			window.myLine.update();
171 | 		});
172 | 	</script>
173 | </body>
174 | 
175 | </html>
176 | 


--------------------------------------------------------------------------------
/chartjs/samples/scales/time/financial.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Line Chart</title>
  6 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  7 | 	<script src="../../../Chart.js"></script>
  8 | 	<script src="../../utils.js"></script>
  9 | 	<style>
 10 | 		canvas {
 11 | 			-moz-user-select: none;
 12 | 			-webkit-user-select: none;
 13 | 			-ms-user-select: none;
 14 | 		}
 15 | 	</style>
 16 | </head>
 17 | 
 18 | <body>
 19 | 	<div style="width:1000px">
 20 | 		<canvas id="chart1"></canvas>
 21 | 	</div>
 22 | 	<br>
 23 | 	<br>
 24 | 	Chart Type:
 25 | 	<select id="type">
 26 | 		<option value="line">Line</option>
 27 | 		<option value="bar">Bar</option>
 28 | 	</select>
 29 | 	<button id="update">update</button>
 30 | 	<script>
 31 | 		function randomNumber(min, max) {
 32 | 			return Math.random() * (max - min) + min;
 33 | 		}
 34 | 
 35 | 		function randomBar(date, lastClose) {
 36 | 			var open = randomNumber(lastClose * 0.95, lastClose * 1.05);
 37 | 			var close = randomNumber(open * 0.95, open * 1.05);
 38 | 			return {
 39 | 				t: date.valueOf(),
 40 | 				y: close
 41 | 			};
 42 | 		}
 43 | 
 44 | 		var dateFormat = 'MMMM DD YYYY';
 45 | 		var date = moment('April 01 2017', dateFormat);
 46 | 		var data = [randomBar(date, 30)];
 47 | 		var labels = [date];
 48 | 		while (data.length < 60) {
 49 | 			date = date.clone().add(1, 'd');
 50 | 			if (date.isoWeekday() <= 5) {
 51 | 				data.push(randomBar(date, data[data.length - 1].y));
 52 | 				labels.push(date);
 53 | 			}
 54 | 		}
 55 | 
 56 | 		var ctx = document.getElementById('chart1').getContext('2d');
 57 | 		ctx.canvas.width = 1000;
 58 | 		ctx.canvas.height = 300;
 59 | 		var cfg = {
 60 | 			type: 'bar',
 61 | 			data: {
 62 | 				labels: labels,
 63 | 				datasets: [{
 64 | 					label: 'CHRT - Chart.js Corporation',
 65 | 					data: data,
 66 | 					type: 'line',
 67 | 					pointRadius: 0,
 68 | 					fill: false,
 69 | 					lineTension: 0,
 70 | 					borderWidth: 2
 71 | 				}]
 72 | 			},
 73 | 			options: {
 74 | 				scales: {
 75 | 					xAxes: [{
 76 | 						type: 'time',
 77 | 						distribution: 'series',
 78 | 						ticks: {
 79 | 							source: 'labels'
 80 | 						}
 81 | 					}],
 82 | 					yAxes: [{
 83 | 						scaleLabel: {
 84 | 							display: true,
 85 | 							labelString: 'Closing price ($)'
 86 | 						}
 87 | 					}]
 88 | 				}
 89 | 			}
 90 | 		};
 91 | 		var chart = new Chart(ctx, cfg);
 92 | 
 93 | 		document.getElementById('update').addEventListener('click', function() {
 94 | 			var type = document.getElementById('type').value;
 95 | 			chart.config.data.datasets[0].type = type;
 96 | 			chart.update();
 97 | 		});
 98 | 
 99 | 	</script>
100 | </body>
101 | 
102 | </html>
103 | 


--------------------------------------------------------------------------------
/chartjs/samples/scales/time/line-point-data.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Time Scale Point Data</title>
  6 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
  7 | 	<script src="../../../Chart.js"></script>
  8 | 	<script src="../../utils.js"></script>
  9 | 	<style>
 10 | 		canvas {
 11 | 			-moz-user-select: none;
 12 | 			-webkit-user-select: none;
 13 | 			-ms-user-select: none;
 14 | 		}
 15 | 	</style>
 16 | </head>
 17 | 
 18 | <body>
 19 | 	<div style="width:75%;">
 20 | 		<canvas id="canvas"></canvas>
 21 | 	</div>
 22 | 	<br>
 23 | 	<br>
 24 | 	<button id="randomizeData">Randomize Data</button>
 25 | 	<button id="addData">Add Data</button>
 26 | 	<button id="removeData">Remove Data</button>
 27 | 	<script>
 28 | 		function newDate(days) {
 29 | 			return moment().add(days, 'd').toDate();
 30 | 		}
 31 | 
 32 | 		function newDateString(days) {
 33 | 			return moment().add(days, 'd').format();
 34 | 		}
 35 | 
 36 | 		var color = Chart.helpers.color;
 37 | 		var config = {
 38 | 			type: 'line',
 39 | 			data: {
 40 | 				datasets: [{
 41 | 					label: 'Dataset with string point data',
 42 | 					backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
 43 | 					borderColor: window.chartColors.red,
 44 | 					fill: false,
 45 | 					data: [{
 46 | 						x: newDateString(0),
 47 | 						y: randomScalingFactor()
 48 | 					}, {
 49 | 						x: newDateString(2),
 50 | 						y: randomScalingFactor()
 51 | 					}, {
 52 | 						x: newDateString(4),
 53 | 						y: randomScalingFactor()
 54 | 					}, {
 55 | 						x: newDateString(5),
 56 | 						y: randomScalingFactor()
 57 | 					}],
 58 | 				}, {
 59 | 					label: 'Dataset with date object point data',
 60 | 					backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
 61 | 					borderColor: window.chartColors.blue,
 62 | 					fill: false,
 63 | 					data: [{
 64 | 						x: newDate(0),
 65 | 						y: randomScalingFactor()
 66 | 					}, {
 67 | 						x: newDate(2),
 68 | 						y: randomScalingFactor()
 69 | 					}, {
 70 | 						x: newDate(4),
 71 | 						y: randomScalingFactor()
 72 | 					}, {
 73 | 						x: newDate(5),
 74 | 						y: randomScalingFactor()
 75 | 					}]
 76 | 				}]
 77 | 			},
 78 | 			options: {
 79 | 				responsive: true,
 80 | 				title: {
 81 | 					display: true,
 82 | 					text: 'Chart.js Time Point Data'
 83 | 				},
 84 | 				scales: {
 85 | 					xAxes: [{
 86 | 						type: 'time',
 87 | 						display: true,
 88 | 						scaleLabel: {
 89 | 							display: true,
 90 | 							labelString: 'Date'
 91 | 						},
 92 | 						ticks: {
 93 | 							major: {
 94 | 								fontStyle: 'bold',
 95 | 								fontColor: '#FF0000'
 96 | 							}
 97 | 						}
 98 | 					}],
 99 | 					yAxes: [{
100 | 						display: true,
101 | 						scaleLabel: {
102 | 							display: true,
103 | 							labelString: 'value'
104 | 						}
105 | 					}]
106 | 				}
107 | 			}
108 | 		};
109 | 
110 | 		window.onload = function() {
111 | 			var ctx = document.getElementById('canvas').getContext('2d');
112 | 			window.myLine = new Chart(ctx, config);
113 | 		};
114 | 
115 | 		document.getElementById('randomizeData').addEventListener('click', function() {
116 | 			config.data.datasets.forEach(function(dataset) {
117 | 				dataset.data.forEach(function(dataObj) {
118 | 					dataObj.y = randomScalingFactor();
119 | 				});
120 | 			});
121 | 
122 | 			window.myLine.update();
123 | 		});
124 | 
125 | 		// TODO : fix issue with addData
126 | 		// See https://github.com/chartjs/Chart.js/issues/5197
127 | 		// The Add Data button for this sample has no effect.
128 | 		// An error is logged in the console.
129 | 		document.getElementById('addData').addEventListener('click', function() {
130 | 			if (config.data.datasets.length > 0) {
131 | 				var numTicks = window.myLine.scales['x-axis-0'].ticksAsTimestamps.length;
132 | 				var lastTime = numTicks ? moment(window.myLine.scales['x-axis-0'].ticksAsTimestamps[numTicks - 1]) : moment();
133 | 
134 | 				var newTime = lastTime
135 | 					.clone()
136 | 					.add(1, 'day')
137 | 					.format('MM/DD/YYYY HH:mm');
138 | 
139 | 				for (var index = 0; index < config.data.datasets.length; ++index) {
140 | 					config.data.datasets[index].data.push({
141 | 						x: newTime,
142 | 						y: randomScalingFactor()
143 | 					});
144 | 				}
145 | 
146 | 				window.myLine.update();
147 | 			}
148 | 		});
149 | 
150 | 		document.getElementById('removeData').addEventListener('click', function() {
151 | 			config.data.datasets.forEach(function(dataset) {
152 | 				dataset.data.pop();
153 | 			});
154 | 
155 | 			window.myLine.update();
156 | 		});
157 | 	</script>
158 | </body>
159 | 
160 | </html>
161 | 


--------------------------------------------------------------------------------
/chartjs/samples/scales/time/line.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Line Chart</title>
  6 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
  7 | 	<script src="../../../Chart.js"></script>
  8 | 	<script src="../../utils.js"></script>
  9 | 	<style>
 10 | 		canvas {
 11 | 			-moz-user-select: none;
 12 | 			-webkit-user-select: none;
 13 | 			-ms-user-select: none;
 14 | 		}
 15 | 	</style>
 16 | </head>
 17 | 
 18 | <body>
 19 | 	<div style="width:75%;">
 20 | 		<canvas id="canvas"></canvas>
 21 | 	</div>
 22 | 	<br>
 23 | 	<br>
 24 | 	<button id="randomizeData">Randomize Data</button>
 25 | 	<button id="addDataset">Add Dataset</button>
 26 | 	<button id="removeDataset">Remove Dataset</button>
 27 | 	<button id="addData">Add Data</button>
 28 | 	<button id="removeData">Remove Data</button>
 29 | 	<script>
 30 | 		var timeFormat = 'MM/DD/YYYY HH:mm';
 31 | 
 32 | 		function newDate(days) {
 33 | 			return moment().add(days, 'd').toDate();
 34 | 		}
 35 | 
 36 | 		function newDateString(days) {
 37 | 			return moment().add(days, 'd').format(timeFormat);
 38 | 		}
 39 | 
 40 | 		var color = Chart.helpers.color;
 41 | 		var config = {
 42 | 			type: 'line',
 43 | 			data: {
 44 | 				labels: [ // Date Objects
 45 | 					newDate(0),
 46 | 					newDate(1),
 47 | 					newDate(2),
 48 | 					newDate(3),
 49 | 					newDate(4),
 50 | 					newDate(5),
 51 | 					newDate(6)
 52 | 				],
 53 | 				datasets: [{
 54 | 					label: 'My First dataset',
 55 | 					backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
 56 | 					borderColor: window.chartColors.red,
 57 | 					fill: false,
 58 | 					data: [
 59 | 						randomScalingFactor(),
 60 | 						randomScalingFactor(),
 61 | 						randomScalingFactor(),
 62 | 						randomScalingFactor(),
 63 | 						randomScalingFactor(),
 64 | 						randomScalingFactor(),
 65 | 						randomScalingFactor()
 66 | 					],
 67 | 				}, {
 68 | 					label: 'My Second dataset',
 69 | 					backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
 70 | 					borderColor: window.chartColors.blue,
 71 | 					fill: false,
 72 | 					data: [
 73 | 						randomScalingFactor(),
 74 | 						randomScalingFactor(),
 75 | 						randomScalingFactor(),
 76 | 						randomScalingFactor(),
 77 | 						randomScalingFactor(),
 78 | 						randomScalingFactor(),
 79 | 						randomScalingFactor()
 80 | 					],
 81 | 				}, {
 82 | 					label: 'Dataset with point data',
 83 | 					backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
 84 | 					borderColor: window.chartColors.green,
 85 | 					fill: false,
 86 | 					data: [{
 87 | 						x: newDateString(0),
 88 | 						y: randomScalingFactor()
 89 | 					}, {
 90 | 						x: newDateString(5),
 91 | 						y: randomScalingFactor()
 92 | 					}, {
 93 | 						x: newDateString(7),
 94 | 						y: randomScalingFactor()
 95 | 					}, {
 96 | 						x: newDateString(15),
 97 | 						y: randomScalingFactor()
 98 | 					}],
 99 | 				}]
100 | 			},
101 | 			options: {
102 | 				title: {
103 | 					text: 'Chart.js Time Scale'
104 | 				},
105 | 				scales: {
106 | 					xAxes: [{
107 | 						type: 'time',
108 | 						time: {
109 | 							format: timeFormat,
110 | 							// round: 'day'
111 | 							tooltipFormat: 'll HH:mm'
112 | 						},
113 | 						scaleLabel: {
114 | 							display: true,
115 | 							labelString: 'Date'
116 | 						}
117 | 					}],
118 | 					yAxes: [{
119 | 						scaleLabel: {
120 | 							display: true,
121 | 							labelString: 'value'
122 | 						}
123 | 					}]
124 | 				},
125 | 			}
126 | 		};
127 | 
128 | 		window.onload = function() {
129 | 			var ctx = document.getElementById('canvas').getContext('2d');
130 | 			window.myLine = new Chart(ctx, config);
131 | 
132 | 		};
133 | 
134 | 		document.getElementById('randomizeData').addEventListener('click', function() {
135 | 			config.data.datasets.forEach(function(dataset) {
136 | 				dataset.data.forEach(function(dataObj, j) {
137 | 					if (typeof dataObj === 'object') {
138 | 						dataObj.y = randomScalingFactor();
139 | 					} else {
140 | 						dataset.data[j] = randomScalingFactor();
141 | 					}
142 | 				});
143 | 			});
144 | 
145 | 			window.myLine.update();
146 | 		});
147 | 
148 | 		var colorNames = Object.keys(window.chartColors);
149 | 		document.getElementById('addDataset').addEventListener('click', function() {
150 | 			var colorName = colorNames[config.data.datasets.length % colorNames.length];
151 | 			var newColor = window.chartColors[colorName];
152 | 			var newDataset = {
153 | 				label: 'Dataset ' + config.data.datasets.length,
154 | 				borderColor: newColor,
155 | 				backgroundColor: color(newColor).alpha(0.5).rgbString(),
156 | 				data: [],
157 | 			};
158 | 
159 | 			for (var index = 0; index < config.data.labels.length; ++index) {
160 | 				newDataset.data.push(randomScalingFactor());
161 | 			}
162 | 
163 | 			config.data.datasets.push(newDataset);
164 | 			window.myLine.update();
165 | 		});
166 | 
167 | 		document.getElementById('addData').addEventListener('click', function() {
168 | 			if (config.data.datasets.length > 0) {
169 | 				config.data.labels.push(newDate(config.data.labels.length));
170 | 
171 | 				for (var index = 0; index < config.data.datasets.length; ++index) {
172 | 					if (typeof config.data.datasets[index].data[0] === 'object') {
173 | 						config.data.datasets[index].data.push({
174 | 							x: newDate(config.data.datasets[index].data.length),
175 | 							y: randomScalingFactor(),
176 | 						});
177 | 					} else {
178 | 						config.data.datasets[index].data.push(randomScalingFactor());
179 | 					}
180 | 				}
181 | 
182 | 				window.myLine.update();
183 | 			}
184 | 		});
185 | 
186 | 		document.getElementById('removeDataset').addEventListener('click', function() {
187 | 			config.data.datasets.splice(0, 1);
188 | 			window.myLine.update();
189 | 		});
190 | 
191 | 		document.getElementById('removeData').addEventListener('click', function() {
192 | 			config.data.labels.splice(-1, 1); // remove the label first
193 | 
194 | 			config.data.datasets.forEach(function(dataset) {
195 | 				dataset.data.pop();
196 | 			});
197 | 
198 | 			window.myLine.update();
199 | 		});
200 | 	</script>
201 | </body>
202 | 
203 | </html>
204 | 


--------------------------------------------------------------------------------
/chartjs/samples/scales/toggle-scale-type.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Toggle Scale Type</title>
  6 | 	<script src="../../Chart.bundle.js"></script>
  7 | 	<script src="../utils.js"></script>
  8 | 	<style>
  9 | 	canvas {
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width:75%;">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<button id="toggleScale">Toggle Scale Type</button>
 22 | 	<script>
 23 | 		var randomScalingFactor = function() {
 24 | 			return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
 25 | 		};
 26 | 
 27 | 		var type = 'linear';
 28 | 
 29 | 		var config = {
 30 | 			type: 'line',
 31 | 			data: {
 32 | 				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 33 | 				datasets: [{
 34 | 					label: 'My First dataset',
 35 | 					backgroundColor: window.chartColors.red,
 36 | 					borderColor: window.chartColors.red,
 37 | 					fill: false,
 38 | 					data: [
 39 | 						randomScalingFactor(),
 40 | 						randomScalingFactor(),
 41 | 						randomScalingFactor(),
 42 | 						randomScalingFactor(),
 43 | 						randomScalingFactor(),
 44 | 						randomScalingFactor(),
 45 | 						randomScalingFactor()
 46 | 					],
 47 | 				}, {
 48 | 					label: 'My Second dataset',
 49 | 					backgroundColor: window.chartColors.blue,
 50 | 					borderColor: window.chartColors.blue,
 51 | 					fill: false,
 52 | 					data: [
 53 | 						randomScalingFactor(),
 54 | 						randomScalingFactor(),
 55 | 						randomScalingFactor(),
 56 | 						randomScalingFactor(),
 57 | 						randomScalingFactor(),
 58 | 						randomScalingFactor(),
 59 | 						randomScalingFactor()
 60 | 					],
 61 | 				}]
 62 | 			},
 63 | 			options: {
 64 | 				responsive: true,
 65 | 				title: {
 66 | 					display: true,
 67 | 					text: 'Chart.js Line Chart - ' + type
 68 | 				},
 69 | 				scales: {
 70 | 					xAxes: [{
 71 | 						display: true,
 72 | 					}],
 73 | 					yAxes: [{
 74 | 						display: true,
 75 | 						type: type
 76 | 					}]
 77 | 				}
 78 | 			}
 79 | 		};
 80 | 
 81 | 		window.onload = function() {
 82 | 			var ctx = document.getElementById('canvas').getContext('2d');
 83 | 			window.myLine = new Chart(ctx, config);
 84 | 		};
 85 | 
 86 | 		document.getElementById('toggleScale').addEventListener('click', function() {
 87 | 			type = type === 'linear' ? 'logarithmic' : 'linear';
 88 | 			window.myLine.options.title.text = 'Chart.js Line Chart - ' + type;
 89 | 			window.myLine.options.scales.yAxes[0] = {
 90 | 				display: true,
 91 | 				type: type
 92 | 			};
 93 | 
 94 | 			window.myLine.update();
 95 | 		});
 96 | 	</script>
 97 | </body>
 98 | 
 99 | </html>
100 | 


--------------------------------------------------------------------------------
/chartjs/samples/scriptable/bubble.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-US">
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
  6 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 	<title>Scriptable > Bubble | Chart.js sample</title>
  8 | 	<link rel="stylesheet" type="text/css" href="../style.css">
  9 | 	<script src="../../Chart.js"></script>
 10 | 	<script src="../utils.js"></script>
 11 | </head>
 12 | <body>
 13 | 	<div class="content">
 14 | 		<div class="wrapper"><canvas id="chart-0"></canvas></div>
 15 | 		<div class="toolbar">
 16 | 			<button onclick="randomize(this)">Randomize</button>
 17 | 			<button onclick="addDataset(this)">Add Dataset</button>
 18 | 			<button onclick="removeDataset(this)">Remove Dataset</button>
 19 | 		</div>
 20 | 	</div>
 21 | 
 22 | 	<script>
 23 | 		var DATA_COUNT = 16;
 24 | 		var MIN_XY = -150;
 25 | 		var MAX_XY = 100;
 26 | 
 27 | 		var utils = Samples.utils;
 28 | 
 29 | 		utils.srand(110);
 30 | 
 31 | 		function colorize(opaque, context) {
 32 | 			var value = context.dataset.data[context.dataIndex];
 33 | 			var x = value.x / 100;
 34 | 			var y = value.y / 100;
 35 | 			var r = x < 0 && y < 0 ? 250 : x < 0 ? 150 : y < 0 ? 50 : 0;
 36 | 			var g = x < 0 && y < 0 ? 0 : x < 0 ? 50 : y < 0 ? 150 : 250;
 37 | 			var b = x < 0 && y < 0 ? 0 : x > 0 && y > 0 ? 250 : 150;
 38 | 			var a = opaque ? 1 : 0.5 * value.v / 1000;
 39 | 
 40 | 			return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
 41 | 		}
 42 | 
 43 | 		function generateData() {
 44 | 			var data = [];
 45 | 			var i;
 46 | 
 47 | 			for (i = 0; i < DATA_COUNT; ++i) {
 48 | 				data.push({
 49 | 					x: utils.rand(MIN_XY, MAX_XY),
 50 | 					y: utils.rand(MIN_XY, MAX_XY),
 51 | 					v: utils.rand(0, 1000)
 52 | 				});
 53 | 			}
 54 | 
 55 | 			return data;
 56 | 		}
 57 | 
 58 | 		var data = {
 59 | 			datasets: [{
 60 | 				data: generateData()
 61 | 			}, {
 62 | 				data: generateData()
 63 | 			}]
 64 | 		};
 65 | 
 66 | 		var options = {
 67 | 			aspectRatio: 1,
 68 | 			legend: false,
 69 | 			tooltips: false,
 70 | 
 71 | 			elements: {
 72 | 				point: {
 73 | 					backgroundColor: colorize.bind(null, false),
 74 | 
 75 | 					borderColor: colorize.bind(null, true),
 76 | 
 77 | 					borderWidth: function(context) {
 78 | 						return Math.min(Math.max(1, context.datasetIndex + 1), 8);
 79 | 					},
 80 | 
 81 | 					hoverBackgroundColor: 'transparent',
 82 | 
 83 | 					hoverBorderColor: function(context) {
 84 | 						return utils.color(context.datasetIndex);
 85 | 					},
 86 | 
 87 | 					hoverBorderWidth: function(context) {
 88 | 						var value = context.dataset.data[context.dataIndex];
 89 | 						return Math.round(8 * value.v / 1000);
 90 | 					},
 91 | 
 92 | 					radius: function(context) {
 93 | 						var value = context.dataset.data[context.dataIndex];
 94 | 						var size = context.chart.width;
 95 | 						var base = Math.abs(value.v) / 1000;
 96 | 						return (size / 24) * base;
 97 | 					}
 98 | 				}
 99 | 			}
100 | 		};
101 | 
102 | 		var chart = new Chart('chart-0', {
103 | 			type: 'bubble',
104 | 			data: data,
105 | 			options: options
106 | 		});
107 | 
108 | 		// eslint-disable-next-line no-unused-vars
109 | 		function randomize() {
110 | 			chart.data.datasets.forEach(function(dataset) {
111 | 				dataset.data = generateData();
112 | 			});
113 | 			chart.update();
114 | 		}
115 | 
116 | 		// eslint-disable-next-line no-unused-vars
117 | 		function addDataset() {
118 | 			chart.data.datasets.push({
119 | 				data: generateData()
120 | 			});
121 | 			chart.update();
122 | 		}
123 | 
124 | 		// eslint-disable-next-line no-unused-vars
125 | 		function removeDataset() {
126 | 			chart.data.datasets.shift();
127 | 			chart.update();
128 | 		}
129 | 	</script>
130 | </body>
131 | </html>
132 | 


--------------------------------------------------------------------------------
/chartjs/samples/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
  2 | @import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');
  3 | 
  4 | body, html {
  5 | 	color: #333538;
  6 | 	font-family: 'Lato', sans-serif;
  7 | 	line-height: 1.6;
  8 | 	padding: 0;
  9 | 	margin: 0;
 10 | }
 11 | 
 12 | a {
 13 | 	color: #f27173;
 14 | 	text-decoration: none;
 15 | }
 16 | 
 17 | a:hover {
 18 | 	color: #e25f5f;
 19 | 	text-decoration: underline;
 20 | }
 21 | 
 22 | .content {
 23 | 	max-width: 800px;
 24 | 	margin: auto;
 25 | 	padding: 16px 32px;
 26 | }
 27 | 
 28 | .header {
 29 | 	text-align: center;
 30 | 	padding: 32px 0;
 31 | }
 32 | 
 33 | .wrapper {
 34 | 	min-height: 400px;
 35 | 	padding: 16px 0;
 36 | 	position: relative;
 37 | }
 38 | 
 39 | .wrapper.col-2 {
 40 | 	display: inline-block;
 41 | 	min-height: 256px;
 42 | 	width: 49%;
 43 | }
 44 | 
 45 | @media (max-width: 400px) {
 46 | 	.wrapper.col-2 {
 47 | 		width: 100%
 48 | 	}
 49 | }
 50 | 
 51 | .wrapper canvas {
 52 | 	-moz-user-select: none;
 53 | 	-webkit-user-select: none;
 54 | 	-ms-user-select: none;
 55 | }
 56 | 
 57 | .toolbar {
 58 | 	display: flex;
 59 | }
 60 | 
 61 | .toolbar > * {
 62 | 	margin: 0 8px 0 0;
 63 | }
 64 | 
 65 | .btn {
 66 | 	background-color: #aaa;
 67 | 	border-radius: 4px;
 68 | 	color: white;
 69 | 	padding: 0.25rem 0.75rem;
 70 | }
 71 | 
 72 | .btn .fa {
 73 | 	font-size: 1rem;
 74 | }
 75 | 
 76 | .btn:hover {
 77 | 	background-color: #888;
 78 | 	color: white;
 79 | 	text-decoration: none;
 80 | }
 81 | 
 82 | .btn-chartjs { background-color: #f27173; }
 83 | .btn-chartjs:hover { background-color: #e25f5f; }
 84 | .btn-docs:hover { background-color: #2793db; }
 85 | .btn-docs { background-color: #36A2EB; }
 86 | .btn-docs:hover { background-color: #2793db; }
 87 | .btn-gh { background-color: #444; }
 88 | .btn-gh:hover { background-color: #333; }
 89 | 
 90 | .btn-on {
 91 | 	border-style: inset;
 92 | }
 93 | 
 94 | .chartjs-title {
 95 | 	font-size: 2rem;
 96 | 	font-weight: 600;
 97 | 	white-space: nowrap;
 98 | }
 99 | 
100 | .chartjs-title::before {
101 | 	background-image: url(logo.svg);
102 | 	background-position: left center;
103 | 	background-repeat: no-repeat;
104 | 	background-size: 40px;
105 | 	content: 'Chart.js | ';
106 | 	color: #f27173;
107 | 	font-weight: 600;
108 | 	padding-left: 48px;
109 | }
110 | 
111 | .chartjs-caption {
112 | 	font-size: 1.2rem;
113 | }
114 | 
115 | .chartjs-links {
116 | 	display: flex;
117 | 	justify-content: center;
118 | 	padding: 8px 0;
119 | }
120 | 
121 | .chartjs-links a {
122 | 	align-items: center;
123 | 	display: flex;
124 | 	font-size: 0.9rem;
125 | 	margin: 0.2rem;
126 | }
127 | 
128 | .chartjs-links .fa:before {
129 | 	margin-right: 0.5em;
130 | }
131 | 
132 | .samples-category {
133 | 	display: inline-block;
134 | 	margin-bottom: 32px;
135 | 	vertical-align: top;
136 | 	width: 25%;
137 | }
138 | 
139 | .samples-category > .title {
140 | 	color: #aaa;
141 | 	font-weight: 300;
142 | 	font-size: 1.5rem;
143 | }
144 | 
145 | .samples-category:hover > .title {
146 | 	color: black;
147 | }
148 | 
149 | .samples-category > .items {
150 | 	padding: 8px 0;
151 | }
152 | 
153 | .samples-entry {
154 | 	padding: 0 0 4px 0;
155 | }
156 | 
157 | .samples-entry > .title {
158 | 	font-weight: 700;
159 | }
160 | 
161 | @media (max-width: 640px) {
162 | 	.samples-category { width: 33%; }
163 | }
164 | 
165 | @media (max-width: 512px) {
166 | 	.samples-category { width: 50%; }
167 | }
168 | 
169 | @media (max-width: 420px) {
170 | 	.chartjs-caption { font-size: 1.05rem; }
171 | 	.chartjs-title::before { content: ''; }
172 | 	.chartjs-links a { flex-direction: column; }
173 | 	.chartjs-links .fa { margin: 0 }
174 | 	.samples-category { width: 100%; }
175 | }
176 | 
177 | .analyser table {
178 | 	color: #333;
179 | 	font-size: 0.9rem;
180 | 	margin: 8px 0;
181 | 	width: 100%
182 | }
183 | 
184 | .analyser th {
185 | 	background-color: #f0f0f0;
186 | 	padding: 2px;
187 | }
188 | 
189 | .analyser td {
190 | 	padding: 2px;
191 | 	text-align: center;
192 | }
193 | 


--------------------------------------------------------------------------------
/chartjs/samples/tooltips/border.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<title>Tooltip Border</title>
 6 | 	<script src="../../Chart.bundle.js"></script>
 7 | 	<script src="../utils.js"></script>
 8 | 	<style>
 9 | 	canvas {
10 | 		-moz-user-select: none;
11 | 		-webkit-user-select: none;
12 | 		-ms-user-select: none;
13 | 	}
14 | 	.chart-container {
15 | 		width: 70%;
16 | 		margin-left: 40px;
17 | 		margin-right: 40px;
18 | 		margin-bottom: 40px;
19 | 	}
20 | 	.container {
21 | 		display: flex;
22 | 		flex-direction: row;
23 | 		flex-wrap: wrap;
24 | 		justify-content: center;
25 | 	}
26 | 	</style>
27 | </head>
28 | 
29 | <body>
30 | 	<div class="container">
31 | 	</div>
32 | 	<script>
33 | 		function createConfig() {
34 | 			return {
35 | 				type: 'line',
36 | 				data: {
37 | 					labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
38 | 					datasets: [{
39 | 						label: 'Dataset',
40 | 						borderColor: window.chartColors.red,
41 | 						backgroundColor: window.chartColors.red,
42 | 						data: [10, 30, 46, 2, 8, 50, 0],
43 | 						fill: false,
44 | 					}]
45 | 				},
46 | 				options: {
47 | 					responsive: true,
48 | 					title: {
49 | 						display: true,
50 | 						text: 'Sample tooltip with border'
51 | 					},
52 | 					tooltips: {
53 | 						position: 'nearest',
54 | 						mode: 'index',
55 | 						intersect: false,
56 | 						yPadding: 10,
57 | 						xPadding: 10,
58 | 						caretSize: 8,
59 | 						backgroundColor: 'rgba(72, 241, 12, 1)',
60 | 						titleFontColor: window.chartColors.black,
61 | 						bodyFontColor: window.chartColors.black,
62 | 						borderColor: 'rgba(0,0,0,1)',
63 | 						borderWidth: 4
64 | 					},
65 | 				}
66 | 			};
67 | 		}
68 | 
69 | 		window.onload = function() {
70 | 			var container = document.querySelector('.container');
71 | 			var div = document.createElement('div');
72 | 			div.classList.add('chart-container');
73 | 
74 | 			var canvas = document.createElement('canvas');
75 | 			div.appendChild(canvas);
76 | 			container.appendChild(div);
77 | 
78 | 			var ctx = canvas.getContext('2d');
79 | 			var config = createConfig();
80 | 			new Chart(ctx, config);
81 | 		};
82 | 	</script>
83 | </body>
84 | 
85 | </html>
86 | 


--------------------------------------------------------------------------------
/chartjs/samples/tooltips/callbacks.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Tooltip Hooks</title>
  6 | 	<script src="../../Chart.bundle.js"></script>
  7 | 	<script src="../utils.js"></script>
  8 | 	<style>
  9 | 	canvas {
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	</style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 	<div style="width:75%;">
 19 | 		<canvas id="canvas"></canvas>
 20 | 	</div>
 21 | 	<script>
 22 | 		var config = {
 23 | 			type: 'line',
 24 | 			data: {
 25 | 				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 26 | 				datasets: [{
 27 | 					label: 'My First dataset',
 28 | 					borderColor: window.chartColors.red,
 29 | 					backgroundColor: window.chartColors.red,
 30 | 					data: [
 31 | 						randomScalingFactor(),
 32 | 						randomScalingFactor(),
 33 | 						randomScalingFactor(),
 34 | 						randomScalingFactor(),
 35 | 						randomScalingFactor(),
 36 | 						randomScalingFactor(),
 37 | 						randomScalingFactor()
 38 | 					],
 39 | 					fill: false,
 40 | 				}, {
 41 | 					label: 'My Second dataset',
 42 | 					borderColor: window.chartColors.blue,
 43 | 					backgroundColor: window.chartColors.blue,
 44 | 					data: [
 45 | 						randomScalingFactor(),
 46 | 						randomScalingFactor(),
 47 | 						randomScalingFactor(),
 48 | 						randomScalingFactor(),
 49 | 						randomScalingFactor(),
 50 | 						randomScalingFactor(),
 51 | 						randomScalingFactor()
 52 | 					],
 53 | 					fill: false,
 54 | 				}]
 55 | 			},
 56 | 			options: {
 57 | 				responsive: true,
 58 | 				title: {
 59 | 					display: true,
 60 | 					text: 'Chart.js Line Chart - Custom Information in Tooltip'
 61 | 				},
 62 | 				tooltips: {
 63 | 					mode: 'index',
 64 | 					callbacks: {
 65 | 						// Use the footer callback to display the sum of the items showing in the tooltip
 66 | 						footer: function(tooltipItems, data) {
 67 | 							var sum = 0;
 68 | 
 69 | 							tooltipItems.forEach(function(tooltipItem) {
 70 | 								sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
 71 | 							});
 72 | 							return 'Sum: ' + sum;
 73 | 						},
 74 | 					},
 75 | 					footerFontStyle: 'normal'
 76 | 				},
 77 | 				hover: {
 78 | 					mode: 'index',
 79 | 					intersect: true
 80 | 				},
 81 | 				scales: {
 82 | 					xAxes: [{
 83 | 						display: true,
 84 | 						scaleLabel: {
 85 | 							show: true,
 86 | 							labelString: 'Month'
 87 | 						}
 88 | 					}],
 89 | 					yAxes: [{
 90 | 						display: true,
 91 | 						scaleLabel: {
 92 | 							show: true,
 93 | 							labelString: 'Value'
 94 | 						}
 95 | 					}]
 96 | 				}
 97 | 			}
 98 | 		};
 99 | 
100 | 		window.onload = function() {
101 | 			var ctx = document.getElementById('canvas').getContext('2d');
102 | 			window.myLine = new Chart(ctx, config);
103 | 		};
104 | 	</script>
105 | </body>
106 | 
107 | </html>
108 | 


--------------------------------------------------------------------------------
/chartjs/samples/tooltips/custom-line.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Line Chart with Custom Tooltips</title>
  6 | 	<script src="../../Chart.bundle.js"></script>
  7 | 	<script src="../utils.js"></script>
  8 | 	<style>
  9 | 		canvas{
 10 | 			-moz-user-select: none;
 11 | 			-webkit-user-select: none;
 12 | 			-ms-user-select: none;
 13 | 		}
 14 | 		#chartjs-tooltip {
 15 | 			opacity: 1;
 16 | 			position: absolute;
 17 | 			background: rgba(0, 0, 0, .7);
 18 | 			color: white;
 19 | 			border-radius: 3px;
 20 | 			-webkit-transition: all .1s ease;
 21 | 			transition: all .1s ease;
 22 | 			pointer-events: none;
 23 | 			-webkit-transform: translate(-50%, 0);
 24 | 			transform: translate(-50%, 0);
 25 | 		}
 26 | 
 27 | 		.chartjs-tooltip-key {
 28 | 			display: inline-block;
 29 | 			width: 10px;
 30 | 			height: 10px;
 31 | 			margin-right: 10px;
 32 | 		}
 33 | 	</style>
 34 | </head>
 35 | 
 36 | <body>
 37 | 	<div id="canvas-holder1" style="width:75%;">
 38 | 		<canvas id="chart"></canvas>
 39 | 	</div>
 40 | 	<script>
 41 | 		Chart.defaults.global.pointHitDetectionRadius = 1;
 42 | 
 43 | 		var customTooltips = function(tooltip) {
 44 | 			// Tooltip Element
 45 | 			var tooltipEl = document.getElementById('chartjs-tooltip');
 46 | 
 47 | 			if (!tooltipEl) {
 48 | 				tooltipEl = document.createElement('div');
 49 | 				tooltipEl.id = 'chartjs-tooltip';
 50 | 				tooltipEl.innerHTML = '<table></table>';
 51 | 				this._chart.canvas.parentNode.appendChild(tooltipEl);
 52 | 			}
 53 | 
 54 | 			// Hide if no tooltip
 55 | 			if (tooltip.opacity === 0) {
 56 | 				tooltipEl.style.opacity = 0;
 57 | 				return;
 58 | 			}
 59 | 
 60 | 			// Set caret Position
 61 | 			tooltipEl.classList.remove('above', 'below', 'no-transform');
 62 | 			if (tooltip.yAlign) {
 63 | 				tooltipEl.classList.add(tooltip.yAlign);
 64 | 			} else {
 65 | 				tooltipEl.classList.add('no-transform');
 66 | 			}
 67 | 
 68 | 			function getBody(bodyItem) {
 69 | 				return bodyItem.lines;
 70 | 			}
 71 | 
 72 | 			// Set Text
 73 | 			if (tooltip.body) {
 74 | 				var titleLines = tooltip.title || [];
 75 | 				var bodyLines = tooltip.body.map(getBody);
 76 | 
 77 | 				var innerHtml = '<thead>';
 78 | 
 79 | 				titleLines.forEach(function(title) {
 80 | 					innerHtml += '<tr><th>' + title + '</th></tr>';
 81 | 				});
 82 | 				innerHtml += '</thead><tbody>';
 83 | 
 84 | 				bodyLines.forEach(function(body, i) {
 85 | 					var colors = tooltip.labelColors[i];
 86 | 					var style = 'background:' + colors.backgroundColor;
 87 | 					style += '; border-color:' + colors.borderColor;
 88 | 					style += '; border-width: 2px';
 89 | 					var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
 90 | 					innerHtml += '<tr><td>' + span + body + '</td></tr>';
 91 | 				});
 92 | 				innerHtml += '</tbody>';
 93 | 
 94 | 				var tableRoot = tooltipEl.querySelector('table');
 95 | 				tableRoot.innerHTML = innerHtml;
 96 | 			}
 97 | 
 98 | 			var positionY = this._chart.canvas.offsetTop;
 99 | 			var positionX = this._chart.canvas.offsetLeft;
100 | 
101 | 			// Display, position, and set styles for font
102 | 			tooltipEl.style.opacity = 1;
103 | 			tooltipEl.style.left = positionX + tooltip.caretX + 'px';
104 | 			tooltipEl.style.top = positionY + tooltip.caretY + 'px';
105 | 			tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
106 | 			tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
107 | 			tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
108 | 			tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
109 | 		};
110 | 
111 | 		var lineChartData = {
112 | 			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
113 | 			datasets: [{
114 | 				label: 'My First dataset',
115 | 				borderColor: window.chartColors.red,
116 | 				pointBackgroundColor: window.chartColors.red,
117 | 				fill: false,
118 | 				data: [
119 | 					randomScalingFactor(),
120 | 					randomScalingFactor(),
121 | 					randomScalingFactor(),
122 | 					randomScalingFactor(),
123 | 					randomScalingFactor(),
124 | 					randomScalingFactor(),
125 | 					randomScalingFactor()
126 | 				]
127 | 			}, {
128 | 				label: 'My Second dataset',
129 | 				borderColor: window.chartColors.blue,
130 | 				pointBackgroundColor: window.chartColors.blue,
131 | 				fill: false,
132 | 				data: [
133 | 					randomScalingFactor(),
134 | 					randomScalingFactor(),
135 | 					randomScalingFactor(),
136 | 					randomScalingFactor(),
137 | 					randomScalingFactor(),
138 | 					randomScalingFactor(),
139 | 					randomScalingFactor()
140 | 				]
141 | 			}]
142 | 		};
143 | 
144 | 		window.onload = function() {
145 | 			var chartEl = document.getElementById('chart');
146 | 			window.myLine = new Chart(chartEl, {
147 | 				type: 'line',
148 | 				data: lineChartData,
149 | 				options: {
150 | 					title: {
151 | 						display: true,
152 | 						text: 'Chart.js Line Chart - Custom Tooltips'
153 | 					},
154 | 					tooltips: {
155 | 						enabled: false,
156 | 						mode: 'index',
157 | 						position: 'nearest',
158 | 						custom: customTooltips
159 | 					}
160 | 				}
161 | 			});
162 | 		};
163 | 	</script>
164 | </body>
165 | 
166 | </html>
167 | 


--------------------------------------------------------------------------------
/chartjs/samples/tooltips/custom-pie.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Pie Chart with Custom Tooltips</title>
  6 | 	<script src="../../Chart.bundle.js"></script>
  7 | 	<script src="../utils.js"></script>
  8 | 
  9 | 	<style>
 10 | 		#canvas-holder {
 11 | 			width: 100%;
 12 | 			margin-top: 50px;
 13 | 			text-align: center;
 14 | 		}
 15 | 		#chartjs-tooltip {
 16 | 			opacity: 1;
 17 | 			position: absolute;
 18 | 			background: rgba(0, 0, 0, .7);
 19 | 			color: white;
 20 | 			border-radius: 3px;
 21 | 			-webkit-transition: all .1s ease;
 22 | 			transition: all .1s ease;
 23 | 			pointer-events: none;
 24 | 			-webkit-transform: translate(-50%, 0);
 25 | 			transform: translate(-50%, 0);
 26 | 		}
 27 | 
 28 | 		.chartjs-tooltip-key {
 29 | 			display: inline-block;
 30 | 			width: 10px;
 31 | 			height: 10px;
 32 | 			margin-right: 10px;
 33 | 		}
 34 | 	</style>
 35 | </head>
 36 | 
 37 | <body>
 38 | 	<div id="canvas-holder" style="width: 300px;">
 39 | 		<canvas id="chart-area" width="300" height="300"></canvas>
 40 | 		<div id="chartjs-tooltip">
 41 | 			<table></table>
 42 | 		</div>
 43 | 	</div>
 44 | 
 45 | 	<script>
 46 | 		Chart.defaults.global.tooltips.custom = function(tooltip) {
 47 | 			// Tooltip Element
 48 | 			var tooltipEl = document.getElementById('chartjs-tooltip');
 49 | 
 50 | 			// Hide if no tooltip
 51 | 			if (tooltip.opacity === 0) {
 52 | 				tooltipEl.style.opacity = 0;
 53 | 				return;
 54 | 			}
 55 | 
 56 | 			// Set caret Position
 57 | 			tooltipEl.classList.remove('above', 'below', 'no-transform');
 58 | 			if (tooltip.yAlign) {
 59 | 				tooltipEl.classList.add(tooltip.yAlign);
 60 | 			} else {
 61 | 				tooltipEl.classList.add('no-transform');
 62 | 			}
 63 | 
 64 | 			function getBody(bodyItem) {
 65 | 				return bodyItem.lines;
 66 | 			}
 67 | 
 68 | 			// Set Text
 69 | 			if (tooltip.body) {
 70 | 				var titleLines = tooltip.title || [];
 71 | 				var bodyLines = tooltip.body.map(getBody);
 72 | 
 73 | 				var innerHtml = '<thead>';
 74 | 
 75 | 				titleLines.forEach(function(title) {
 76 | 					innerHtml += '<tr><th>' + title + '</th></tr>';
 77 | 				});
 78 | 				innerHtml += '</thead><tbody>';
 79 | 
 80 | 				bodyLines.forEach(function(body, i) {
 81 | 					var colors = tooltip.labelColors[i];
 82 | 					var style = 'background:' + colors.backgroundColor;
 83 | 					style += '; border-color:' + colors.borderColor;
 84 | 					style += '; border-width: 2px';
 85 | 					var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
 86 | 					innerHtml += '<tr><td>' + span + body + '</td></tr>';
 87 | 				});
 88 | 				innerHtml += '</tbody>';
 89 | 
 90 | 				var tableRoot = tooltipEl.querySelector('table');
 91 | 				tableRoot.innerHTML = innerHtml;
 92 | 			}
 93 | 
 94 | 			var positionY = this._chart.canvas.offsetTop;
 95 | 			var positionX = this._chart.canvas.offsetLeft;
 96 | 
 97 | 			// Display, position, and set styles for font
 98 | 			tooltipEl.style.opacity = 1;
 99 | 			tooltipEl.style.left = positionX + tooltip.caretX + 'px';
100 | 			tooltipEl.style.top = positionY + tooltip.caretY + 'px';
101 | 			tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
102 | 			tooltipEl.style.fontSize = tooltip.bodyFontSize;
103 | 			tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
104 | 			tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
105 | 		};
106 | 
107 | 		var config = {
108 | 			type: 'pie',
109 | 			data: {
110 | 				datasets: [{
111 | 					data: [300, 50, 100, 40, 10],
112 | 					backgroundColor: [
113 | 						window.chartColors.red,
114 | 						window.chartColors.orange,
115 | 						window.chartColors.yellow,
116 | 						window.chartColors.green,
117 | 						window.chartColors.blue,
118 | 					],
119 | 				}],
120 | 				labels: [
121 | 					'Red',
122 | 					'Orange',
123 | 					'Yellow',
124 | 					'Green',
125 | 					'Blue'
126 | 				]
127 | 			},
128 | 			options: {
129 | 				responsive: true,
130 | 				legend: {
131 | 					display: false
132 | 				},
133 | 				tooltips: {
134 | 					enabled: false,
135 | 				}
136 | 			}
137 | 		};
138 | 
139 | 		window.onload = function() {
140 | 			var ctx = document.getElementById('chart-area').getContext('2d');
141 | 			window.myPie = new Chart(ctx, config);
142 | 		};
143 | 	</script>
144 | </body>
145 | 
146 | </html>
147 | 


--------------------------------------------------------------------------------
/chartjs/samples/tooltips/custom-points.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Custom Tooltips using Data Points</title>
  6 | 	<script src="../../Chart.bundle.js"></script>
  7 | 	<script src="../utils.js"></script>
  8 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  9 | 	<style>
 10 | 		canvas{
 11 | 			-moz-user-select: none;
 12 | 			-webkit-user-select: none;
 13 | 			-ms-user-select: none;
 14 | 		}
 15 | 		.chartjs-tooltip {
 16 | 			opacity: 1;
 17 | 			position: absolute;
 18 | 			background: rgba(0, 0, 0, .7);
 19 | 			color: white;
 20 | 			border-radius: 3px;
 21 | 			-webkit-transition: all .1s ease;
 22 | 			transition: all .1s ease;
 23 | 			pointer-events: none;
 24 | 			-webkit-transform: translate(-50%, 0);
 25 | 			transform: translate(-50%, 0);
 26 | 			padding: 4px;
 27 | 		}
 28 | 
 29 | 		.chartjs-tooltip-key {
 30 | 			display: inline-block;
 31 | 			width: 10px;
 32 | 			height: 10px;
 33 | 		}
 34 | 	</style>
 35 | </head>
 36 | 
 37 | <body>
 38 | 	<div id="canvas-holder1" style="width:75%;">
 39 | 		<canvas id="chart1"></canvas>
 40 | 		<div class="chartjs-tooltip" id="tooltip-0"></div>
 41 | 		<div class="chartjs-tooltip" id="tooltip-1"></div>
 42 | 	</div>
 43 | 	<script>
 44 | 		var customTooltips = function(tooltip) {
 45 | 			$(this._chart.canvas).css('cursor', 'pointer');
 46 | 
 47 | 			var positionY = this._chart.canvas.offsetTop;
 48 | 			var positionX = this._chart.canvas.offsetLeft;
 49 | 
 50 | 			$('.chartjs-tooltip').css({
 51 | 				opacity: 0,
 52 | 			});
 53 | 
 54 | 			if (!tooltip || !tooltip.opacity) {
 55 | 				return;
 56 | 			}
 57 | 
 58 | 			if (tooltip.dataPoints.length > 0) {
 59 | 				tooltip.dataPoints.forEach(function(dataPoint) {
 60 | 					var content = [dataPoint.xLabel, dataPoint.yLabel].join(': ');
 61 | 					var $tooltip = $('#tooltip-' + dataPoint.datasetIndex);
 62 | 
 63 | 					$tooltip.html(content);
 64 | 					$tooltip.css({
 65 | 						opacity: 1,
 66 | 						top: positionY + dataPoint.y + 'px',
 67 | 						left: positionX + dataPoint.x + 'px',
 68 | 					});
 69 | 				});
 70 | 			}
 71 | 		};
 72 | 		var color = Chart.helpers.color;
 73 | 		var lineChartData = {
 74 | 			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 75 | 			datasets: [{
 76 | 				label: 'My First dataset',
 77 | 				backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
 78 | 				borderColor: window.chartColors.red,
 79 | 				pointBackgroundColor: window.chartColors.red,
 80 | 				data: [
 81 | 					randomScalingFactor(),
 82 | 					randomScalingFactor(),
 83 | 					randomScalingFactor(),
 84 | 					randomScalingFactor(),
 85 | 					randomScalingFactor(),
 86 | 					randomScalingFactor(),
 87 | 					randomScalingFactor()
 88 | 				]
 89 | 			}, {
 90 | 				label: 'My Second dataset',
 91 | 				backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
 92 | 				borderColor: window.chartColors.blue,
 93 | 				pointBackgroundColor: window.chartColors.blue,
 94 | 				data: [
 95 | 					randomScalingFactor(),
 96 | 					randomScalingFactor(),
 97 | 					randomScalingFactor(),
 98 | 					randomScalingFactor(),
 99 | 					randomScalingFactor(),
100 | 					randomScalingFactor(),
101 | 					randomScalingFactor()
102 | 				]
103 | 			}]
104 | 		};
105 | 
106 | 		window.onload = function() {
107 | 			var chartEl = document.getElementById('chart1');
108 | 			new Chart(chartEl, {
109 | 				type: 'line',
110 | 				data: lineChartData,
111 | 				options: {
112 | 					title: {
113 | 						display: true,
114 | 						text: 'Chart.js - Custom Tooltips using Data Points'
115 | 					},
116 | 					tooltips: {
117 | 						enabled: false,
118 | 						mode: 'index',
119 | 						intersect: false,
120 | 						custom: customTooltips
121 | 					}
122 | 				}
123 | 			});
124 | 		};
125 | 	</script>
126 | </body>
127 | 
128 | </html>
129 | 


--------------------------------------------------------------------------------
/chartjs/samples/tooltips/interactions.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Tooltip Interaction Modes</title>
  6 | 	<script src="../../Chart.bundle.js"></script>
  7 | 	<script src="../utils.js"></script>
  8 | 	<style>
  9 | 	canvas {
 10 | 		-moz-user-select: none;
 11 | 		-webkit-user-select: none;
 12 | 		-ms-user-select: none;
 13 | 	}
 14 | 	.chart-container {
 15 | 		width: 500px;
 16 | 		margin-left: 40px;
 17 | 		margin-right: 40px;
 18 | 		margin-bottom: 40px;
 19 | 	}
 20 | 	.container {
 21 | 		display: flex;
 22 | 		flex-direction: row;
 23 | 		flex-wrap: wrap;
 24 | 		justify-content: center;
 25 | 	}
 26 | 	</style>
 27 | </head>
 28 | 
 29 | <body>
 30 | 	<div class="container">
 31 | 	</div>
 32 | 	<script>
 33 | 		function createConfig(mode, intersect) {
 34 | 			return {
 35 | 				type: 'line',
 36 | 				data: {
 37 | 					labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 38 | 					datasets: [{
 39 | 						label: 'My First dataset',
 40 | 						borderColor: window.chartColors.red,
 41 | 						backgroundColor: window.chartColors.red,
 42 | 						data: [10, 30, 46, 2, 8, 50, 0],
 43 | 						fill: false,
 44 | 					}, {
 45 | 						label: 'My Second dataset',
 46 | 						borderColor: window.chartColors.blue,
 47 | 						backgroundColor: window.chartColors.blue,
 48 | 						data: [7, 49, 46, 13, 25, 30, 22],
 49 | 						fill: false,
 50 | 					}]
 51 | 				},
 52 | 				options: {
 53 | 					responsive: true,
 54 | 					title: {
 55 | 						display: true,
 56 | 						text: 'Mode: ' + mode + ', intersect = ' + intersect
 57 | 					},
 58 | 					tooltips: {
 59 | 						mode: mode,
 60 | 						intersect: intersect,
 61 | 					},
 62 | 					hover: {
 63 | 						mode: mode,
 64 | 						intersect: intersect
 65 | 					},
 66 | 				}
 67 | 			};
 68 | 		}
 69 | 
 70 | 		window.onload = function() {
 71 | 			var container = document.querySelector('.container');
 72 | 
 73 | 			[{
 74 | 				mode: 'index',
 75 | 				intersect: true,
 76 | 			}, {
 77 | 				mode: 'index',
 78 | 				intersect: false,
 79 | 			}, {
 80 | 				mode: 'dataset',
 81 | 				intersect: true,
 82 | 			}, {
 83 | 				mode: 'dataset',
 84 | 				intersect: false,
 85 | 			}, {
 86 | 				mode: 'point',
 87 | 				intersect: true,
 88 | 			}, {
 89 | 				mode: 'point',
 90 | 				intersect: false,
 91 | 			}, {
 92 | 				mode: 'nearest',
 93 | 				intersect: true,
 94 | 			}, {
 95 | 				mode: 'nearest',
 96 | 				intersect: false,
 97 | 			}, {
 98 | 				mode: 'x',
 99 | 				intersect: true
100 | 			}, {
101 | 				mode: 'x',
102 | 				intersect: false
103 | 			}, {
104 | 				mode: 'y',
105 | 				intersect: true
106 | 			}, {
107 | 				mode: 'y',
108 | 				intersect: false
109 | 			}].forEach(function(details) {
110 | 				var div = document.createElement('div');
111 | 				div.classList.add('chart-container');
112 | 
113 | 				var canvas = document.createElement('canvas');
114 | 				div.appendChild(canvas);
115 | 				container.appendChild(div);
116 | 
117 | 				var ctx = canvas.getContext('2d');
118 | 				var config = createConfig(details.mode, details.intersect);
119 | 				new Chart(ctx, config);
120 | 			});
121 | 		};
122 | 	</script>
123 | </body>
124 | 
125 | </html>
126 | 


--------------------------------------------------------------------------------
/chartjs/samples/tooltips/positioning.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<title>Tooltip Interaction Modes</title>
 6 | 	<script src="../../Chart.bundle.js"></script>
 7 | 	<script src="../utils.js"></script>
 8 | 	<style>
 9 | 	canvas {
10 | 		-moz-user-select: none;
11 | 		-webkit-user-select: none;
12 | 		-ms-user-select: none;
13 | 	}
14 | 	.chart-container {
15 | 		width: 500px;
16 | 		margin-left: 40px;
17 | 		margin-right: 40px;
18 | 		margin-bottom: 40px;
19 | 	}
20 | 	.container {
21 | 		display: flex;
22 | 		flex-direction: row;
23 | 		flex-wrap: wrap;
24 | 		justify-content: center;
25 | 	}
26 | 	</style>
27 | </head>
28 | 
29 | <body>
30 | 	<div class="container">
31 | 	</div>
32 | 	<script>
33 | 		function createConfig(position) {
34 | 			return {
35 | 				type: 'line',
36 | 				data: {
37 | 					labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
38 | 					datasets: [{
39 | 						label: 'My First dataset',
40 | 						borderColor: window.chartColors.red,
41 | 						backgroundColor: window.chartColors.red,
42 | 						data: [10, 30, 46, 2, 8, 50, 0],
43 | 						fill: false,
44 | 					}, {
45 | 						label: 'My Second dataset',
46 | 						borderColor: window.chartColors.blue,
47 | 						backgroundColor: window.chartColors.blue,
48 | 						data: [7, 49, 46, 13, 25, 30, 22],
49 | 						fill: false,
50 | 					}]
51 | 				},
52 | 				options: {
53 | 					responsive: true,
54 | 					title: {
55 | 						display: true,
56 | 						text: 'Tooltip Position: ' + position
57 | 					},
58 | 					tooltips: {
59 | 						position: position,
60 | 						mode: 'index',
61 | 						intersect: false,
62 | 					},
63 | 				}
64 | 			};
65 | 		}
66 | 
67 | 		window.onload = function() {
68 | 			var container = document.querySelector('.container');
69 | 
70 | 			['average', 'nearest'].forEach(function(position) {
71 | 				var div = document.createElement('div');
72 | 				div.classList.add('chart-container');
73 | 
74 | 				var canvas = document.createElement('canvas');
75 | 				div.appendChild(canvas);
76 | 				container.appendChild(div);
77 | 
78 | 				var ctx = canvas.getContext('2d');
79 | 				var config = createConfig(position);
80 | 				new Chart(ctx, config);
81 | 			});
82 | 		};
83 | 	</script>
84 | </body>
85 | 
86 | </html>
87 | 


--------------------------------------------------------------------------------
/chartjs/samples/utils.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | window.chartColors = {
  4 | 	red: 'rgb(255, 99, 132)',
  5 | 	orange: 'rgb(255, 159, 64)',
  6 | 	yellow: 'rgb(255, 205, 86)',
  7 | 	green: 'rgb(75, 192, 192)',
  8 | 	blue: 'rgb(54, 162, 235)',
  9 | 	purple: 'rgb(153, 102, 255)',
 10 | 	grey: 'rgb(201, 203, 207)'
 11 | };
 12 | 
 13 | (function(global) {
 14 | 	var Months = [
 15 | 		'January',
 16 | 		'February',
 17 | 		'March',
 18 | 		'April',
 19 | 		'May',
 20 | 		'June',
 21 | 		'July',
 22 | 		'August',
 23 | 		'September',
 24 | 		'October',
 25 | 		'November',
 26 | 		'December'
 27 | 	];
 28 | 
 29 | 	var COLORS = [
 30 | 		'#4dc9f6',
 31 | 		'#f67019',
 32 | 		'#f53794',
 33 | 		'#537bc4',
 34 | 		'#acc236',
 35 | 		'#166a8f',
 36 | 		'#00a950',
 37 | 		'#58595b',
 38 | 		'#8549ba'
 39 | 	];
 40 | 
 41 | 	var Samples = global.Samples || (global.Samples = {});
 42 | 	var Color = global.Color;
 43 | 
 44 | 	Samples.utils = {
 45 | 		// Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
 46 | 		srand: function(seed) {
 47 | 			this._seed = seed;
 48 | 		},
 49 | 
 50 | 		rand: function(min, max) {
 51 | 			var seed = this._seed;
 52 | 			min = min === undefined ? 0 : min;
 53 | 			max = max === undefined ? 1 : max;
 54 | 			this._seed = (seed * 9301 + 49297) % 233280;
 55 | 			return min + (this._seed / 233280) * (max - min);
 56 | 		},
 57 | 
 58 | 		numbers: function(config) {
 59 | 			var cfg = config || {};
 60 | 			var min = cfg.min || 0;
 61 | 			var max = cfg.max || 1;
 62 | 			var from = cfg.from || [];
 63 | 			var count = cfg.count || 8;
 64 | 			var decimals = cfg.decimals || 8;
 65 | 			var continuity = cfg.continuity || 1;
 66 | 			var dfactor = Math.pow(10, decimals) || 0;
 67 | 			var data = [];
 68 | 			var i, value;
 69 | 
 70 | 			for (i = 0; i < count; ++i) {
 71 | 				value = (from[i] || 0) + this.rand(min, max);
 72 | 				if (this.rand() <= continuity) {
 73 | 					data.push(Math.round(dfactor * value) / dfactor);
 74 | 				} else {
 75 | 					data.push(null);
 76 | 				}
 77 | 			}
 78 | 
 79 | 			return data;
 80 | 		},
 81 | 
 82 | 		labels: function(config) {
 83 | 			var cfg = config || {};
 84 | 			var min = cfg.min || 0;
 85 | 			var max = cfg.max || 100;
 86 | 			var count = cfg.count || 8;
 87 | 			var step = (max - min) / count;
 88 | 			var decimals = cfg.decimals || 8;
 89 | 			var dfactor = Math.pow(10, decimals) || 0;
 90 | 			var prefix = cfg.prefix || '';
 91 | 			var values = [];
 92 | 			var i;
 93 | 
 94 | 			for (i = min; i < max; i += step) {
 95 | 				values.push(prefix + Math.round(dfactor * i) / dfactor);
 96 | 			}
 97 | 
 98 | 			return values;
 99 | 		},
100 | 
101 | 		months: function(config) {
102 | 			var cfg = config || {};
103 | 			var count = cfg.count || 12;
104 | 			var section = cfg.section;
105 | 			var values = [];
106 | 			var i, value;
107 | 
108 | 			for (i = 0; i < count; ++i) {
109 | 				value = Months[Math.ceil(i) % 12];
110 | 				values.push(value.substring(0, section));
111 | 			}
112 | 
113 | 			return values;
114 | 		},
115 | 
116 | 		color: function(index) {
117 | 			return COLORS[index % COLORS.length];
118 | 		},
119 | 
120 | 		transparentize: function(color, opacity) {
121 | 			var alpha = opacity === undefined ? 0.5 : 1 - opacity;
122 | 			return Color(color).alpha(alpha).rgbString();
123 | 		}
124 | 	};
125 | 
126 | 	// DEPRECATED
127 | 	window.randomScalingFactor = function() {
128 | 		return Math.round(Samples.utils.rand(-100, 100));
129 | 	};
130 | 
131 | 	// INITIALIZATION
132 | 
133 | 	Samples.utils.srand(Date.now());
134 | 
135 | 	// Google Analytics
136 | 	/* eslint-disable */
137 | 	if (document.location.hostname.match(/^(www\.)?chartjs\.org$/)) {
138 | 		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
139 | 		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
140 | 		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
141 | 		})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
142 | 		ga('create', 'UA-28909194-3', 'auto');
143 | 		ga('send', 'pageview');
144 | 	}
145 | 	/* eslint-enable */
146 | 
147 | }(this));
148 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>MEMBUAT GRAFIK DARI DATABASE MYSQL DENGAN PHP DAN CHART.JS - www.malasngoding.com</title>
  5 | 	<script type="text/javascript" src="chartjs/Chart.js"></script>
  6 | </head>
  7 | <body>
  8 | 	<style type="text/css">
  9 | 	body{
 10 | 		font-family: roboto;
 11 | 	}
 12 | 
 13 | 	table{
 14 | 		margin: 0px auto;
 15 | 	}
 16 | 	</style>
 17 | 
 18 | 
 19 | 	<center>
 20 | 		<h2>MEMBUAT GRAFIK DARI DATABASE MYSQL DENGAN PHP DAN CHART.JS<br/>- www.malasngoding.com -</h2>
 21 | 	</center>
 22 | 
 23 | 
 24 | 	<?php 
 25 | 	include 'koneksi.php';
 26 | 	?>
 27 | 
 28 | 	<div style="width: 800px;margin: 0px auto;">
 29 | 		<canvas id="myChart"></canvas>
 30 | 	</div>
 31 | 
 32 | 	<br/>
 33 | 	<br/>
 34 | 
 35 | 	<table border="1">
 36 | 		<thead>
 37 | 			<tr>
 38 | 				<th>No</th>
 39 | 				<th>Nama Mahasiswa</th>
 40 | 				<th>NIM</th>
 41 | 				<th>Fakultas</th>
 42 | 			</tr>
 43 | 		</thead>
 44 | 		<tbody>
 45 | 			<?php 
 46 | 			$no = 1;
 47 | 			$data = mysqli_query($koneksi,"select * from mahasiswa");
 48 | 			while($d=mysqli_fetch_array($data)){
 49 | 				?>
 50 | 				<tr>
 51 | 					<td><?php echo $no++; ?></td>
 52 | 					<td><?php echo $d['nama']; ?></td>
 53 | 					<td><?php echo $d['nim']; ?></td>
 54 | 					<td><?php echo $d['fakultas']; ?></td>
 55 | 				</tr>
 56 | 				<?php 
 57 | 			}
 58 | 			?>
 59 | 		</tbody>
 60 | 	</table>
 61 | 
 62 | 
 63 | 	<script>
 64 | 		var ctx = document.getElementById("myChart").getContext('2d');
 65 | 		var myChart = new Chart(ctx, {
 66 | 			type: 'bar',
 67 | 			data: {
 68 | 				labels: ["Teknik", "Fisip", "Ekonomi", "Pertanian"],
 69 | 				datasets: [{
 70 | 					label: '',
 71 | 					data: [
 72 | 					<?php 
 73 | 					$jumlah_teknik = mysqli_query($koneksi,"select * from mahasiswa where fakultas='teknik'");
 74 | 					echo mysqli_num_rows($jumlah_teknik);
 75 | 					?>, 
 76 | 					<?php 
 77 | 					$jumlah_ekonomi = mysqli_query($koneksi,"select * from mahasiswa where fakultas='ekonomi'");
 78 | 					echo mysqli_num_rows($jumlah_ekonomi);
 79 | 					?>, 
 80 | 					<?php 
 81 | 					$jumlah_fisip = mysqli_query($koneksi,"select * from mahasiswa where fakultas='fisip'");
 82 | 					echo mysqli_num_rows($jumlah_fisip);
 83 | 					?>, 
 84 | 					<?php 
 85 | 					$jumlah_pertanian = mysqli_query($koneksi,"select * from mahasiswa where fakultas='pertanian'");
 86 | 					echo mysqli_num_rows($jumlah_pertanian);
 87 | 					?>
 88 | 					],
 89 | 					backgroundColor: [
 90 | 					'rgba(255, 99, 132, 0.2)',
 91 | 					'rgba(54, 162, 235, 0.2)',
 92 | 					'rgba(255, 206, 86, 0.2)',
 93 | 					'rgba(75, 192, 192, 0.2)'
 94 | 					],
 95 | 					borderColor: [
 96 | 					'rgba(255,99,132,1)',
 97 | 					'rgba(54, 162, 235, 1)',
 98 | 					'rgba(255, 206, 86, 1)',
 99 | 					'rgba(75, 192, 192, 1)'
100 | 					],
101 | 					borderWidth: 1
102 | 				}]
103 | 			},
104 | 			options: {
105 | 				scales: {
106 | 					yAxes: [{
107 | 						ticks: {
108 | 							beginAtZero:true
109 | 						}
110 | 					}]
111 | 				}
112 | 			}
113 | 		});
114 | 	</script>
115 | </body>
116 | </html>


--------------------------------------------------------------------------------
/koneksi.php:
--------------------------------------------------------------------------------
1 | <?php 
2 | $koneksi = mysqli_connect("localhost","root","","grafik_mahasiswa");
3 | ?>


--------------------------------------------------------------------------------