Add examples of scriptable charts (#6042)

* Add example of scriptable pie chart * Add example of scriptable line chart * Add example of scriptable polar area chart * Add example of scriptable radar chart
chartjs · Feb 14, 2019 · 8db8a26 · 8db8a26
1 parent 3612c27
commit 8db8a26
Show file tree

Hide file tree

Showing 5 changed files with 447 additions and 0 deletions.
diff --git a/samples/samples.js b/samples/samples.js
@@ -184,6 +184,18 @@
 		}, {
 			title: 'Bubble Chart',
 			path: 'scriptable/bubble.html'
+		}, {
+			title: 'Pie Chart',
+			path: 'scriptable/pie.html'
+		}, {
+			title: 'Line Chart',
+			path: 'scriptable/line.html'
+		}, {
+			title: 'Polar Area Chart',
+			path: 'scriptable/polar.html'
+		}, {
+			title: 'Radar Chart',
+			path: 'scriptable/radar.html'
 		}]
 	}, {
 		title: 'Advanced',

diff --git a/samples/scriptable/line.html b/samples/scriptable/line.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Scriptable > Line | Chart.js sample</title>
+	<link rel="stylesheet" type="text/css" href="../style.css">
+	<script src="../../dist/Chart.min.js"></script>
+	<script src="../utils.js"></script>
+</head>
+<body>
+	<div class="content">
+		<div class="wrapper"><canvas id="chart-0"></canvas></div>
+		<div class="toolbar">
+			<button onclick="randomize(this)">Randomize</button>
+			<button onclick="addDataset(this)">Add Dataset</button>
+			<button onclick="removeDataset(this)">Remove Dataset</button>
+		</div>
+	</div>
+
+	<script>
+		var DATA_COUNT = 12;
+
+		var utils = Samples.utils;
+
+		utils.srand(110);
+
+		function alternatePointStyles(ctx) {
+			var index = ctx.dataIndex;
+			return index % 2 === 0 ? 'circle' : 'rect';
+		}
+
+		function makeHalfAsOpaque(ctx) {
+			var c = ctx.dataset.backgroundColor;
+			return utils.transparentize(c);
+		}
+
+		function adjustRadiusBasedOnData(ctx) {
+			var v = ctx.dataset.data[ctx.dataIndex];
+			return v < 10 ? 5
+				: v < 25 ? 7
+				: v < 50 ? 9
+				: v < 75 ? 11
+				: 15;
+		}
+
+		function generateData() {
+			return utils.numbers({
+				count: DATA_COUNT,
+				min: 0,
+				max: 100
+			});
+		}
+
+		var data = {
+			labels: utils.months({count: DATA_COUNT}),
+			datasets: [{
+				data: generateData(),
+				backgroundColor: '#4dc9f6',
+				borderColor: '#4dc9f6',
+			}]
+		};
+
+		var options = {
+			legend: false,
+			tooltips: true,
+			elements: {
+				line: {
+					fill: false,
+				},
+				point: {
+					hoverBackgroundColor: makeHalfAsOpaque,
+					radius: adjustRadiusBasedOnData,
+					pointStyle: alternatePointStyles,
+					hoverRadius: 15,
+				}
+			}
+		};
+
+		var chart = new Chart('chart-0', {
+			type: 'line',
+			data: data,
+			options: options
+		});
+
+
+		// eslint-disable-next-line no-unused-vars
+		function addDataset() {
+			var newColor = utils.color(chart.data.datasets.length);
+
+			chart.data.datasets.push({
+				data: generateData(),
+				backgroundColor: newColor,
+				borderColor: newColor
+			});
+			chart.update();
+		}
+
+		// eslint-disable-next-line no-unused-vars
+		function randomize() {
+			chart.data.datasets.forEach(function(dataset) {
+				dataset.data = generateData();
+			});
+			chart.update();
+		}
+
+		// eslint-disable-next-line no-unused-vars
+		function removeDataset() {
+			chart.data.datasets.shift();
+			chart.update();
+		}
+	</script>
+</body>
+</html>
diff --git a/samples/scriptable/pie.html b/samples/scriptable/pie.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Scriptable > Pie | Chart.js sample</title>
+	<link rel="stylesheet" type="text/css" href="../style.css">
+	<script src="../../dist/Chart.min.js"></script>
+	<script src="../utils.js"></script>
+</head>
+<body>
+	<div class="content">
+		<div class="wrapper"><canvas id="chart-0"></canvas></div>
+		<div class="toolbar">
+			<button onclick="randomize()">Randomize</button>
+			<button onclick="addDataset()">Add Dataset</button>
+			<button onclick="removeDataset()">Remove Dataset</button>
+			<button onclick="togglePieDoughnut()">Toggle Doughnut View</button>
+		</div>
+	</div>
+	<script>
+		var DATA_COUNT = 5;
+
+		var utils = Samples.utils;
+
+		utils.srand(110);
+
+		function colorize(opaque, hover, ctx) {
+			var v = ctx.dataset.data[ctx.dataIndex];
+			var c = v < -50 ? '#D60000'
+				: v < 0 ? '#F46300'
+				: v < 50 ? '#0358B6'
+				: '#44DE28';
+
+			var opacity = hover ? 1 - Math.abs(v / 150) - 0.2 : 1 - Math.abs(v / 150);
+
+			return opaque ? c : utils.transparentize(c, opacity);
+		}
+
+		function hoverColorize(ctx) {
+			return colorize(false, true, ctx);
+		}
+
+		function generateData() {
+			return utils.numbers({
+				count: DATA_COUNT,
+				min: -100,
+				max: 100
+			});
+		}
+
+		var data = {
+			datasets: [{
+				data: generateData(),
+			}]
+		};
+
+		var options = {
+			legend: false,
+			tooltips: false,
+			elements: {
+				arc: {
+					backgroundColor: colorize.bind(null, false, false),
+					hoverBackgroundColor: hoverColorize
+				}
+			}
+		};
+
+		var chart = new Chart('chart-0', {
+			type: 'pie',
+			data: data,
+			options: options
+		});
+
+		// eslint-disable-next-line no-unused-vars
+		function randomize() {
+			chart.data.datasets.forEach(function(dataset) {
+				dataset.data = generateData();
+			});
+			chart.update();
+		}
+
+		// eslint-disable-next-line no-unused-vars
+		function addDataset() {
+			chart.data.datasets.push({
+				data: generateData()
+			});
+			chart.update();
+		}
+
+		// eslint-disable-next-line no-unused-vars
+		function removeDataset() {
+			chart.data.datasets.shift();
+			chart.update();
+		}
+
+		// eslint-disable-next-line no-unused-vars
+		function togglePieDoughnut() {
+			if (chart.options.cutoutPercentage) {
+				chart.options.cutoutPercentage = 0;
+			} else {
+				chart.options.cutoutPercentage = 50;
+			}
+			chart.update();
+		}
+
+	</script>
+</body>
+</html>
diff --git a/samples/scriptable/polar.html b/samples/scriptable/polar.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Scriptable > Polar Area | Chart.js sample</title>
+	<link rel="stylesheet" type="text/css" href="../style.css">
+	<script src="../../dist/Chart.min.js"></script>
+	<script src="../utils.js"></script>
+</head>
+<body>
+	<div class="content">
+		<div class="wrapper"><canvas id="chart-0"></canvas></div>
+		<div class="toolbar">
+			<button onclick="randomize()">Randomize</button>
+			<button onclick="addData()">Add Data</button>
+			<button onclick="removeData()">Remove Data</button>
+		</div>
+	</div>
+	<script>
+		var DATA_COUNT = 7;
+
+		var utils = Samples.utils;
+
+		utils.srand(110);
+
+		function colorize(opaque, hover, ctx) {
+			var v = ctx.dataset.data[ctx.dataIndex];
+			var c = v < 35 ? '#D60000'
+				: v < 55 ? '#F46300'
+				: v < 75 ? '#0358B6'
+				: '#44DE28';
+
+			var opacity = hover ? 1 - Math.abs(v / 150) - 0.2 : 1 - Math.abs(v / 150);
+
+			return opaque ? c : utils.transparentize(c, opacity);
+		}
+
+		function hoverColorize(ctx) {
+			return colorize(false, true, ctx);
+		}
+
+		function generateData() {
+			return utils.numbers({
+				count: DATA_COUNT,
+				min: 0,
+				max: 100
+			});
+		}
+
+		var data = {
+			datasets: [{
+				data: generateData(),
+			}]
+		};
+
+		var options = {
+			legend: false,
+			tooltips: false,
+			elements: {
+				arc: {
+					backgroundColor: colorize.bind(null, false, false),
+					hoverBackgroundColor: hoverColorize
+				}
+			}
+		};
+
+		var chart = new Chart('chart-0', {
+			type: 'polarArea',
+			data: data,
+			options: options
+		});
+
+		// eslint-disable-next-line no-unused-vars
+		function randomize() {
+			chart.data.datasets.forEach(function(dataset) {
+				dataset.data = generateData();
+			});
+			chart.update();
+		}
+
+		// eslint-disable-next-line no-unused-vars
+		var addData = function() {
+			var newData = Math.round(Math.random() * 100);
+			chart.data.datasets[0].data.push(newData);
+			chart.update();
+		};
+
+		// eslint-disable-next-line no-unused-vars
+		function removeData() {
+			chart.data.datasets[0].data.pop();
+			chart.update();
+		}
+
+	</script>
+</body>
+</html>