Samples are supposed to show good practices and in most cases we don't use the time scale but require `Chart.bundle.js`, which is not correct. Instead, we should require the non-bundled version in its minified version (`Chart.min.js`). Paradoxically, time based examples don't use `Chart.bundle.js` but require moment manually side to `Chart.min.js`, which IMO is also the correct way since it allows users to configure and use moment globally (TZ, locales, etc.) and doesn't enforce a specific moment version.
Also remove the `data-labelling.html` example because we now have an [official plugin](https://github.com/chartjs/chartjs-plugin-datalabels) that implements this feature and don't want to deal with user custom code anymore.
+++ /dev/null
-
-<!doctype html>
-<html>
-
-<head>
- <title>Labelling Data Points</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width: 75%">
- <canvas id="canvas"></canvas>
- </div>
- <button id="randomizeData">Randomize Data</button>
- <script>
- var color = Chart.helpers.color;
- var barChartData = {
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [{
- type: 'bar',
- label: 'Dataset 1',
- backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
- borderColor: window.chartColors.red,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- type: 'line',
- label: 'Dataset 2',
- backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
- borderColor: window.chartColors.blue,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- type: 'bar',
- label: 'Dataset 3',
- backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
- borderColor: window.chartColors.green,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }]
- };
-
- // Define a plugin to provide data labels
- Chart.plugins.register({
- afterDatasetsDraw: function(chart) {
- var ctx = chart.ctx;
-
- chart.data.datasets.forEach(function(dataset, i) {
- var meta = chart.getDatasetMeta(i);
- if (!meta.hidden) {
- meta.data.forEach(function(element, index) {
- // Draw the text in black, with the specified font
- ctx.fillStyle = 'rgb(0, 0, 0)';
-
- var fontSize = 16;
- var fontStyle = 'normal';
- var fontFamily = 'Helvetica Neue';
- ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
-
- // Just naively convert to string for now
- var dataString = dataset.data[index].toString();
-
- // Make sure alignment settings are correct
- ctx.textAlign = 'center';
- ctx.textBaseline = 'middle';
-
- var padding = 5;
- var position = element.tooltipPosition();
- ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
- });
- }
- });
- }
- });
-
- window.onload = function() {
- var ctx = document.getElementById('canvas').getContext('2d');
- window.myBar = new Chart(ctx, {
- type: 'bar',
- data: barChartData,
- options: {
- responsive: true,
- title: {
- display: true,
- text: 'Chart.js Combo Bar Line Chart'
- },
- }
- });
- };
-
- document.getElementById('randomizeData').addEventListener('click', function() {
- barChartData.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
- });
- window.myBar.update();
- });
- </script>
-</body>
-
-</html>
<html>
<head>
<title> Animation Callbacks </title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > boundaries | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../../style.css">
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<script src="analyser.js"></script>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > datasets | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../../style.css">
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<script src="analyser.js"></script>
</head>
<head>
<title>Line Chart</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > radar | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../../style.css">
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<script src="analyser.js"></script>
</head>
<head>
<title>Horizontal Bar Chart</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Bar Chart Multi Axis</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Stacked Bar Chart with Groups</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Stacked Bar Chart</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Bar Chart</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Bubble Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style type="text/css">
canvas{
<head>
<title>Combo Bar-Line Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Doughnut Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Line Chart</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{
<head>
<title>Line Chart - Cubic interpolation mode</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{
<head>
<title>Line Styles</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{
<head>
<title>Line Chart Multiple Axes</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Different Point Sizes</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Line Chart</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{
<head>
<title>Line Chart</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Stepped Line Chart</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Pie Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<head>
<title>Polar Area Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Radar Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Radar Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Scatter Chart</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Scatter Chart Multi Axis</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Legend Point Style</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Legend Positions</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
items: [{
title: 'Progress bar',
path: 'advanced/progress-bar.html'
- }, {
- title: 'Data labelling (plugin)',
- path: 'advanced/data-labelling.html'
}]
}];
<head>
<title>Chart with xAxis Filtering</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Grid Lines Display Settings</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
<head>
<title>Grid Lines Style Settings</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
<head>
<title>Suggested Min/Max Settings</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{
<head>
<title>Min/Max Settings</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{
<head>
<title>Line Chart</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{
<head>
<title>Logarithmic Line Chart</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Scatter Chart</title>
- <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Line Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
<head>
<title>Line Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
<head>
<title>Line Chart - Combo Time Scale</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
- <script src="../../../dist/Chart.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Line Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
- <script src="../../../dist/Chart.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Time Scale Point Data</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
- <script src="../../../dist/Chart.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Line Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
- <script src="../../../dist/Chart.js"></script>
+ <script src="../../../dist/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Toggle Scale Type</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scriptable > Bar | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../style.css">
- <script src="../../dist/Chart.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scriptable > Bubble | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../style.css">
- <script src="../../dist/Chart.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
<head>
<title>Tooltip Border</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Tooltip Hooks</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Line Chart with Custom Tooltips</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
<head>
<title>Pie Chart with Custom Tooltips</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
<head>
<title>Custom Tooltips using Data Points</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
<head>
<title>Tooltip Interaction Modes</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Tooltip Interaction Modes</title>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
projects / thirdparty / Chart.js.git / commitdiff
