}, {
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',
--- /dev/null
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Scriptable > Line | Chart.js sample</title>
+ <link rel="stylesheet" type="text/css" href="../style.css">
+ <script src="../../dist/Chart.min.js"></script>
+ <script src="../utils.js"></script>
+</head>
+<body>
+ <div class="content">
+ <div class="wrapper"><canvas id="chart-0"></canvas></div>
+ <div class="toolbar">
+ <button onclick="randomize(this)">Randomize</button>
+ <button onclick="addDataset(this)">Add Dataset</button>
+ <button onclick="removeDataset(this)">Remove Dataset</button>
+ </div>
+ </div>
+
+ <script>
+ var DATA_COUNT = 12;
+
+ var utils = Samples.utils;
+
+ utils.srand(110);
+
+ function 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>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Scriptable > Pie | Chart.js sample</title>
+ <link rel="stylesheet" type="text/css" href="../style.css">
+ <script src="../../dist/Chart.min.js"></script>
+ <script src="../utils.js"></script>
+</head>
+<body>
+ <div class="content">
+ <div class="wrapper"><canvas id="chart-0"></canvas></div>
+ <div class="toolbar">
+ <button onclick="randomize()">Randomize</button>
+ <button onclick="addDataset()">Add Dataset</button>
+ <button onclick="removeDataset()">Remove Dataset</button>
+ <button onclick="togglePieDoughnut()">Toggle Doughnut View</button>
+ </div>
+ </div>
+ <script>
+ var DATA_COUNT = 5;
+
+ var utils = Samples.utils;
+
+ utils.srand(110);
+
+ function colorize(opaque, hover, ctx) {
+ var v = ctx.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>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Scriptable > Polar Area | Chart.js sample</title>
+ <link rel="stylesheet" type="text/css" href="../style.css">
+ <script src="../../dist/Chart.min.js"></script>
+ <script src="../utils.js"></script>
+</head>
+<body>
+ <div class="content">
+ <div class="wrapper"><canvas id="chart-0"></canvas></div>
+ <div class="toolbar">
+ <button onclick="randomize()">Randomize</button>
+ <button onclick="addData()">Add Data</button>
+ <button onclick="removeData()">Remove Data</button>
+ </div>
+ </div>
+ <script>
+ var DATA_COUNT = 7;
+
+ var utils = Samples.utils;
+
+ utils.srand(110);
+
+ function colorize(opaque, hover, ctx) {
+ var v = ctx.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>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Scriptable > Radar | Chart.js sample</title>
+ <link rel="stylesheet" type="text/css" href="../style.css">
+ <script src="../../dist/Chart.min.js"></script>
+ <script src="../utils.js"></script>
+</head>
+<body>
+ <div class="content">
+ <div class="wrapper"><canvas id="chart-0"></canvas></div>
+ <div class="toolbar">
+ <button onclick="randomize(this)">Randomize</button>
+ <button onclick="addDataset(this)">Add Dataset</button>
+ <button onclick="removeDataset(this)">Remove Dataset</button>
+ </div>
+ </div>
+
+ <script>
+ var DATA_COUNT = 7;
+
+ var utils = Samples.utils;
+
+ utils.srand(110);
+
+ function alternatePointStyles(ctx) {
+ var index = ctx.dataIndex;
+ return index % 2 === 0 ? 'circle' : 'rect';
+ }
+
+ function makeHalfAsOpaque(ctx) {
+ var c = ctx.dataset.backgroundColor;
+ return utils.transparentize(c);
+ }
+
+ function adjustRadiusBasedOnData(ctx) {
+ var v = ctx.dataset.data[ctx.dataIndex];
+ return v < 10 ? 5
+ : v < 25 ? 7
+ : v < 50 ? 9
+ : v < 75 ? 11
+ : 15;
+ }
+
+ function generateData() {
+ return utils.numbers({
+ count: DATA_COUNT,
+ min: 0,
+ max: 100
+ });
+ }
+
+ var data = {
+ labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
+ datasets: [{
+ data: generateData(),
+ backgroundColor: Chart.helpers.color('#4dc9f6').alpha(0.2).rgbString(),
+ borderColor: '#4dc9f6',
+ }]
+ };
+
+ var options = {
+ legend: false,
+ tooltips: true,
+ elements: {
+ point: {
+ hoverBackgroundColor: makeHalfAsOpaque,
+ radius: adjustRadiusBasedOnData,
+ pointStyle: alternatePointStyles,
+ hoverRadius: 15,
+ }
+ }
+ };
+
+ var chart = new Chart('chart-0', {
+ type: 'radar',
+ data: data,
+ options: options
+ });
+
+
+ // eslint-disable-next-line no-unused-vars
+ function addDataset() {
+ var newColor = utils.color(chart.data.datasets.length);
+
+ chart.data.datasets.push({
+ data: generateData(),
+ backgroundColor: Chart.helpers.color(newColor).alpha(0.2).rgbString(),
+ borderColor: newColor
+ });
+ chart.update();
+ }
+
+ // eslint-disable-next-line no-unused-vars
+ function randomize() {
+ chart.data.datasets.forEach(function(dataset) {
+ dataset.data = generateData();
+ });
+ chart.update();
+ }
+
+ // eslint-disable-next-line no-unused-vars
+ function removeDataset() {
+ chart.data.datasets.shift();
+ chart.update();
+ }
+ </script>
+</body>
+</html>
projects / thirdparty / Chart.js.git / commitdiff
