env:
browser: true
node: true
+
+plugins: ['html']
--- /dev/null
+{
+ "indent-style": "tabs",
+ "attr-quote-style": "double",
+ "spec-char-escape": false,
+ "attr-bans": [
+ "align",
+ "background",
+ "bgcolor",
+ "border",
+ "frameborder",
+ "longdesc",
+ "marginwidth",
+ "marginheight",
+ "scrolling"
+ ],
+ "tag-bans": [ "b", "i" ],
+ "id-class-style": false
+}
var connect = require('gulp-connect');
var eslint = require('gulp-eslint');
var file = require('gulp-file');
-var htmlv = require('gulp-html-validator');
var insert = require('gulp-insert');
var replace = require('gulp-replace');
var size = require('gulp-size');
var yargs = require('yargs');
var path = require('path');
var fs = require('fs');
+var htmllint = require('gulp-htmllint');
var package = require('./package.json');
var argv = yargs
gulp.task('build', buildTask);
gulp.task('package', packageTask);
gulp.task('watch', watchTask);
-gulp.task('lint', lintTask);
+gulp.task('lint', ['lint-html', 'lint-js']);
+gulp.task('lint-html', lintHtmlTask);
+gulp.task('lint-js', lintJsTask);
gulp.task('docs', docsTask);
-gulp.task('test', ['lint', 'validHTML', 'unittest']);
+gulp.task('test', ['lint', 'unittest']);
gulp.task('size', ['library-size', 'module-sizes']);
gulp.task('server', serverTask);
-gulp.task('validHTML', validHTMLTask);
gulp.task('unittest', unittestTask);
gulp.task('library-size', librarySizeTask);
gulp.task('module-sizes', moduleSizesTask);
.pipe(gulp.dest(outDir));
}
-function lintTask() {
+function lintJsTask() {
var files = [
+ 'samples/**/*.html',
'samples/**/*.js',
'src/**/*.js',
'test/**/*.js'
.pipe(eslint.failAfterError());
}
+function lintHtmlTask() {
+ return gulp.src('samples/**/*.html')
+ .pipe(htmllint({
+ failOnError: true,
+ }));
+}
+
function docsTask(done) {
const script = require.resolve('gitbook-cli/bin/gitbook.js');
const cmd = process.execPath;
});
}
-function validHTMLTask() {
- return gulp.src('samples/*.html')
- .pipe(htmlv());
-}
-
function startTest() {
return [
{pattern: './test/fixtures/**/*.json', included: false},
"coveralls": "^3.0.0",
"eslint": "^4.9.0",
"eslint-config-chartjs": "^0.1.0",
+ "eslint-plugin-html": "^4.0.2",
"gitbook-cli": "^2.3.2",
"gulp": "3.9.x",
"gulp-concat": "~2.6.x",
"gulp-connect": "~5.0.0",
"gulp-eslint": "^4.0.0",
"gulp-file": "^0.3.0",
- "gulp-html-validator": "^0.0.5",
+ "gulp-htmllint": "^0.0.15",
"gulp-insert": "~0.5.0",
"gulp-replace": "^0.6.1",
"gulp-size": "~2.1.0",
--- /dev/null
+globals:
+ $: true
+ Chart: true
+ Samples: true
+ moment: true
+ randomScalingFactor: true
+
+rules:
+ no-new: 0
<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>
+ <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()
- ]
- }]
- };
+ <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, easing) {
- // To only draw at the end of animation, check for easing === 1
- var ctx = chart.ctx;
+ // 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)';
+ 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);
+ 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();
+ // 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';
+ // 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);
- });
- }
- });
- }
- });
+ 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'
- },
- }
- });
- };
+ 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>
+ 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>
<!doctype html>
<html>
<head>
- <title> Animation Callbacks </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>
+<title> Animation Callbacks </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>
- <progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>
- </div>
- <br>
- <br>
- <button id="randomizeData">Randomize Data</button>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
- var progress = document.getElementById('animationProgress');
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- fill: false,
- borderColor: window.chartColors.red,
- backgroundColor: window.chartColors.red,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- label: "My Second dataset ",
- fill: false,
- borderColor: window.chartColors.blue,
- backgroundColor: window.chartColors.blue,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }]
- },
- options: {
- title:{
- display:true,
- text: "Chart.js Line Chart - Animation Progress Bar"
- },
- animation: {
- duration: 2000,
- onProgress: function(animation) {
- progress.value = animation.currentStep / animation.numSteps;
- },
- onComplete: function(animation) {
- window.setTimeout(function() {
- progress.value = 0;
- }, 2000);
- }
- }
- }
- };
+ <div style="width: 75%;">
+ <canvas id="canvas"></canvas>
+ <progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>
+ </div>
+ <br>
+ <br>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
+ var progress = document.getElementById('animationProgress');
+ var config = {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ fill: false,
+ borderColor: window.chartColors.red,
+ backgroundColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: 'My Second dataset ',
+ fill: false,
+ borderColor: window.chartColors.blue,
+ backgroundColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }]
+ },
+ options: {
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Animation Progress Bar'
+ },
+ animation: {
+ duration: 2000,
+ onProgress: function(animation) {
+ progress.value = animation.currentStep / animation.numSteps;
+ },
+ onComplete: function() {
+ window.setTimeout(function() {
+ progress.value = 0;
+ }, 2000);
+ }
+ }
+ }
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
- document.getElementById('randomizeData').addEventListener('click', function() {
- config.data.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
- });
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
+ });
- window.myLine.update();
- });
- </script>
+ window.myLine.update();
+ });
+ </script>
</body>
-</html>
\ No newline at end of file
+</html>
(function() {
Chart.plugins.register({
- id: 'samples_filler_analyser',
+ id: 'samples-filler-analyser',
beforeInit: function(chart, options) {
this.element = document.getElementById(options.target);
});
});
-
+ // eslint-disable-next-line no-unused-vars
function toggleSmooth(btn) {
var value = btn.classList.toggle('btn-on');
Chart.helpers.each(Chart.instances, function(chart) {
- chart.options.elements.line.tension = value? 0.4 : 0.000001;
+ chart.options.elements.line.tension = value ? 0.4 : 0.000001;
chart.update();
});
}
+ // eslint-disable-next-line no-unused-vars
function randomize() {
var seed = utils.rand();
Chart.helpers.each(Chart.instances, function(chart) {
return utils.numbers(inputs);
}
- function generateLabels(config) {
+ function generateLabels() {
return utils.months({count: inputs.count});
}
filler: {
propagate: false
},
- samples_filler_analyser: {
+ 'samples-filler-analyser': {
target: 'chart-analyser'
}
}
options: options
});
+ // eslint-disable-next-line no-unused-vars
function togglePropagate(btn) {
var value = btn.classList.toggle('btn-on');
chart.options.plugins.filler.propagate = value;
chart.update();
}
+ // eslint-disable-next-line no-unused-vars
function toggleSmooth(btn) {
var value = btn.classList.toggle('btn-on');
- chart.options.elements.line.tension = value? 0.4 : 0.000001;
+ chart.options.elements.line.tension = value ? 0.4 : 0.000001;
chart.update();
}
+ // eslint-disable-next-line no-unused-vars
function randomize() {
chart.data.datasets.forEach(function(dataset) {
dataset.data = generateData();
<script src="../../utils.js"></script>
<style>
canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
}
</style>
</head>
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
<script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+ var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var config = {
type: 'line',
data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
- label: "My First dataset",
+ label: 'My First dataset',
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.red,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
}, {
- label: "My Second dataset",
+ label: 'My Second dataset',
borderColor: window.chartColors.blue,
backgroundColor: window.chartColors.blue,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
}, {
- label: "My Third dataset",
+ label: 'My Third dataset',
borderColor: window.chartColors.green,
backgroundColor: window.chartColors.green,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
}, {
- label: "My Third dataset",
+ label: 'My Third dataset',
borderColor: window.chartColors.yellow,
backgroundColor: window.chartColors.yellow,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
}]
},
options: {
responsive: true,
- title:{
- display:true,
- text:"Chart.js Line Chart - Stacked Area"
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Stacked Area'
},
tooltips: {
mode: 'index',
};
window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
+ var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
document.getElementById('removeData').addEventListener('click', function() {
config.data.labels.splice(-1, 1); // remove the label first
- config.data.datasets.forEach(function(dataset, datasetIndex) {
+ config.data.datasets.forEach(function(dataset) {
dataset.data.pop();
});
return values;
}
- function generateLabels(config) {
+ function generateLabels() {
return utils.months({count: inputs.count});
}
filler: {
propagate: false
},
- samples_filler_analyser: {
+ 'samples-filler-analyser': {
target: 'chart-analyser'
}
}
options: options
});
+ // eslint-disable-next-line no-unused-vars
function togglePropagate(btn) {
var value = btn.classList.toggle('btn-on');
chart.options.plugins.filler.propagate = value;
chart.update();
}
+ // eslint-disable-next-line no-unused-vars
function toggleSmooth(btn) {
var value = btn.classList.toggle('btn-on');
- chart.options.elements.line.tension = value? 0.4 : 0.000001;
+ chart.options.elements.line.tension = value ? 0.4 : 0.000001;
chart.update();
}
+ // eslint-disable-next-line no-unused-vars
function randomize() {
inputs.from = [];
chart.data.datasets.forEach(function(dataset) {
<html>
<head>
- <title>Horizontal Bar Chart</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>
+ <title>Horizontal Bar Chart</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 id="container" style="width: 75%;">
- <canvas id="canvas"></canvas>
- </div>
- <button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
- var color = Chart.helpers.color;
- var horizontalBarChartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: 'Dataset 1',
- backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
- borderColor: window.chartColors.red,
- borderWidth: 1,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- label: 'Dataset 2',
- backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
- borderColor: window.chartColors.blue,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }]
-
- };
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myHorizontalBar = new Chart(ctx, {
- type: 'horizontalBar',
- data: horizontalBarChartData,
- options: {
- // Elements options apply to all of the options unless overridden in a dataset
- // In this case, we are setting the border of each horizontal bar to be 2px wide
- elements: {
- rectangle: {
- borderWidth: 2,
- }
- },
- responsive: true,
- legend: {
- position: 'right',
- },
- title: {
- display: true,
- text: 'Chart.js Horizontal Bar Chart'
- }
- }
- });
-
- };
-
- document.getElementById('randomizeData').addEventListener('click', function() {
- var zero = Math.random() < 0.2 ? true : false;
- horizontalBarChartData.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return zero ? 0.0 : randomScalingFactor();
- });
-
- });
- window.myHorizontalBar.update();
- });
-
- var colorNames = Object.keys(window.chartColors);
-
- document.getElementById('addDataset').addEventListener('click', function() {
- var colorName = colorNames[horizontalBarChartData.datasets.length % colorNames.length];;
- var dsColor = window.chartColors[colorName];
- var newDataset = {
- label: 'Dataset ' + horizontalBarChartData.datasets.length,
- backgroundColor: color(dsColor).alpha(0.5).rgbString(),
- borderColor: dsColor,
- data: []
- };
-
- for (var index = 0; index < horizontalBarChartData.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- horizontalBarChartData.datasets.push(newDataset);
- window.myHorizontalBar.update();
- });
-
- document.getElementById('addData').addEventListener('click', function() {
- if (horizontalBarChartData.datasets.length > 0) {
- var month = MONTHS[horizontalBarChartData.labels.length % MONTHS.length];
- horizontalBarChartData.labels.push(month);
-
- for (var index = 0; index < horizontalBarChartData.datasets.length; ++index) {
- horizontalBarChartData.datasets[index].data.push(randomScalingFactor());
- }
-
- window.myHorizontalBar.update();
- }
- });
-
- document.getElementById('removeDataset').addEventListener('click', function() {
- horizontalBarChartData.datasets.splice(0, 1);
- window.myHorizontalBar.update();
- });
-
- document.getElementById('removeData').addEventListener('click', function() {
- horizontalBarChartData.labels.splice(-1, 1); // remove the label first
-
- horizontalBarChartData.datasets.forEach(function (dataset, datasetIndex) {
- dataset.data.pop();
- });
-
- window.myHorizontalBar.update();
- });
- </script>
+ <div id="container" style="width: 75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <button id="addDataset">Add Dataset</button>
+ <button id="removeDataset">Remove Dataset</button>
+ <button id="addData">Add Data</button>
+ <button id="removeData">Remove Data</button>
+ <script>
+ var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+ var color = Chart.helpers.color;
+ var horizontalBarChartData = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'Dataset 1',
+ backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.red,
+ borderWidth: 1,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: 'Dataset 2',
+ backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }]
+
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myHorizontalBar = new Chart(ctx, {
+ type: 'horizontalBar',
+ data: horizontalBarChartData,
+ options: {
+ // Elements options apply to all of the options unless overridden in a dataset
+ // In this case, we are setting the border of each horizontal bar to be 2px wide
+ elements: {
+ rectangle: {
+ borderWidth: 2,
+ }
+ },
+ responsive: true,
+ legend: {
+ position: 'right',
+ },
+ title: {
+ display: true,
+ text: 'Chart.js Horizontal Bar Chart'
+ }
+ }
+ });
+
+ };
+
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ var zero = Math.random() < 0.2 ? true : false;
+ horizontalBarChartData.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return zero ? 0.0 : randomScalingFactor();
+ });
+
+ });
+ window.myHorizontalBar.update();
+ });
+
+ var colorNames = Object.keys(window.chartColors);
+
+ document.getElementById('addDataset').addEventListener('click', function() {
+ var colorName = colorNames[horizontalBarChartData.datasets.length % colorNames.length];
+ var dsColor = window.chartColors[colorName];
+ var newDataset = {
+ label: 'Dataset ' + horizontalBarChartData.datasets.length,
+ backgroundColor: color(dsColor).alpha(0.5).rgbString(),
+ borderColor: dsColor,
+ data: []
+ };
+
+ for (var index = 0; index < horizontalBarChartData.labels.length; ++index) {
+ newDataset.data.push(randomScalingFactor());
+ }
+
+ horizontalBarChartData.datasets.push(newDataset);
+ window.myHorizontalBar.update();
+ });
+
+ document.getElementById('addData').addEventListener('click', function() {
+ if (horizontalBarChartData.datasets.length > 0) {
+ var month = MONTHS[horizontalBarChartData.labels.length % MONTHS.length];
+ horizontalBarChartData.labels.push(month);
+
+ for (var index = 0; index < horizontalBarChartData.datasets.length; ++index) {
+ horizontalBarChartData.datasets[index].data.push(randomScalingFactor());
+ }
+
+ window.myHorizontalBar.update();
+ }
+ });
+
+ document.getElementById('removeDataset').addEventListener('click', function() {
+ horizontalBarChartData.datasets.splice(0, 1);
+ window.myHorizontalBar.update();
+ });
+
+ document.getElementById('removeData').addEventListener('click', function() {
+ horizontalBarChartData.labels.splice(-1, 1); // remove the label first
+
+ horizontalBarChartData.datasets.forEach(function(dataset) {
+ dataset.data.pop();
+ });
+
+ window.myHorizontalBar.update();
+ });
+ </script>
</body>
</html>
<html>
<head>
- <title>Bar Chart Multi Axis</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>
+ <title>Bar Chart Multi Axis</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 barChartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: 'Dataset 1',
- backgroundColor: [
- window.chartColors.red,
- window.chartColors.orange,
- window.chartColors.yellow,
- window.chartColors.green,
- window.chartColors.blue,
- window.chartColors.purple,
- window.chartColors.red
- ],
- yAxisID: "y-axis-1",
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- label: 'Dataset 2',
- backgroundColor: window.chartColors.grey,
- yAxisID: "y-axis-2",
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }]
+ <div style="width: 75%">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
+ var barChartData = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'Dataset 1',
+ backgroundColor: [
+ window.chartColors.red,
+ window.chartColors.orange,
+ window.chartColors.yellow,
+ window.chartColors.green,
+ window.chartColors.blue,
+ window.chartColors.purple,
+ window.chartColors.red
+ ],
+ yAxisID: 'y-axis-1',
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: 'Dataset 2',
+ backgroundColor: window.chartColors.grey,
+ yAxisID: 'y-axis-2',
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }]
- };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myBar = new Chart(ctx, {
- type: 'bar',
- data: barChartData,
- options: {
- responsive: true,
- title:{
- display:true,
- text:"Chart.js Bar Chart - Multi Axis"
- },
- tooltips: {
- mode: 'index',
- intersect: true
- },
- scales: {
- yAxes: [{
- type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
- display: true,
- position: "left",
- id: "y-axis-1",
- }, {
- type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
- display: true,
- position: "right",
- id: "y-axis-2",
- gridLines: {
- drawOnChartArea: false
- }
- }],
- }
- }
- });
- };
+ };
+ 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 Bar Chart - Multi Axis'
+ },
+ tooltips: {
+ mode: 'index',
+ intersect: true
+ },
+ scales: {
+ yAxes: [{
+ type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+ display: true,
+ position: 'left',
+ id: 'y-axis-1',
+ }, {
+ type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+ display: true,
+ position: 'right',
+ id: 'y-axis-2',
+ gridLines: {
+ drawOnChartArea: false
+ }
+ }],
+ }
+ }
+ });
+ };
- document.getElementById('randomizeData').addEventListener('click', function() {
- barChartData.datasets.forEach(function(dataset, i) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
- });
- window.myBar.update();
- });
- </script>
+ 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>Stacked Bar Chart with Groups</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>
+ <title>Stacked Bar Chart with Groups</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 barChartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: 'Dataset 1',
- backgroundColor: window.chartColors.red,
- stack: 'Stack 0',
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- label: 'Dataset 2',
- backgroundColor: window.chartColors.blue,
- stack: 'Stack 0',
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- label: 'Dataset 3',
- backgroundColor: window.chartColors.green,
- stack: 'Stack 1',
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }]
+ <div style="width: 75%">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
+ var barChartData = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'Dataset 1',
+ backgroundColor: window.chartColors.red,
+ stack: 'Stack 0',
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: 'Dataset 2',
+ backgroundColor: window.chartColors.blue,
+ stack: 'Stack 0',
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: 'Dataset 3',
+ backgroundColor: window.chartColors.green,
+ stack: 'Stack 1',
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }]
- };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myBar = new Chart(ctx, {
- type: 'bar',
- data: barChartData,
- options: {
- title:{
- display:true,
- text:"Chart.js Bar Chart - Stacked"
- },
- tooltips: {
- mode: 'index',
- intersect: false
- },
- responsive: true,
- scales: {
- xAxes: [{
- stacked: true,
- }],
- yAxes: [{
- stacked: true
- }]
- }
- }
- });
- };
+ };
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myBar = new Chart(ctx, {
+ type: 'bar',
+ data: barChartData,
+ options: {
+ title: {
+ display: true,
+ text: 'Chart.js Bar Chart - Stacked'
+ },
+ tooltips: {
+ mode: 'index',
+ intersect: false
+ },
+ responsive: true,
+ scales: {
+ xAxes: [{
+ stacked: true,
+ }],
+ yAxes: [{
+ stacked: true
+ }]
+ }
+ }
+ });
+ };
- document.getElementById('randomizeData').addEventListener('click', function() {
- barChartData.datasets.forEach(function(dataset, i) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
- });
- window.myBar.update();
- });
- </script>
+ 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>Stacked Bar Chart</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>
+ <title>Stacked Bar Chart</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 barChartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: 'Dataset 1',
- backgroundColor: window.chartColors.red,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- label: 'Dataset 2',
- backgroundColor: window.chartColors.blue,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- label: 'Dataset 3',
- backgroundColor: window.chartColors.green,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }]
+ <div style="width: 75%">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
+ var barChartData = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'Dataset 1',
+ backgroundColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: 'Dataset 2',
+ backgroundColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: 'Dataset 3',
+ backgroundColor: window.chartColors.green,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }]
- };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myBar = new Chart(ctx, {
- type: 'bar',
- data: barChartData,
- options: {
- title:{
- display:true,
- text:"Chart.js Bar Chart - Stacked"
- },
- tooltips: {
- mode: 'index',
- intersect: false
- },
- responsive: true,
- scales: {
- xAxes: [{
- stacked: true,
- }],
- yAxes: [{
- stacked: true
- }]
- }
- }
- });
- };
+ };
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myBar = new Chart(ctx, {
+ type: 'bar',
+ data: barChartData,
+ options: {
+ title: {
+ display: true,
+ text: 'Chart.js Bar Chart - Stacked'
+ },
+ tooltips: {
+ mode: 'index',
+ intersect: false
+ },
+ responsive: true,
+ scales: {
+ xAxes: [{
+ stacked: true,
+ }],
+ yAxes: [{
+ stacked: true
+ }]
+ }
+ }
+ });
+ };
- document.getElementById('randomizeData').addEventListener('click', function() {
- barChartData.datasets.forEach(function(dataset, i) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
- });
- window.myBar.update();
- });
- </script>
+ 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>Bar Chart</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>
+ <title>Bar Chart</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 id="container" style="width: 75%;">
- <canvas id="canvas"></canvas>
- </div>
- <button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
- var color = Chart.helpers.color;
- var barChartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: 'Dataset 1',
- backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
- borderColor: window.chartColors.red,
- borderWidth: 1,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- label: 'Dataset 2',
- backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
- borderColor: window.chartColors.blue,
- borderWidth: 1,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }]
-
- };
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myBar = new Chart(ctx, {
- type: 'bar',
- data: barChartData,
- options: {
- responsive: true,
- legend: {
- position: 'top',
- },
- title: {
- display: true,
- text: 'Chart.js Bar Chart'
- }
- }
- });
-
- };
-
- document.getElementById('randomizeData').addEventListener('click', function() {
- var zero = Math.random() < 0.2 ? true : false;
- barChartData.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return zero ? 0.0 : randomScalingFactor();
- });
-
- });
- window.myBar.update();
- });
-
- var colorNames = Object.keys(window.chartColors);
- document.getElementById('addDataset').addEventListener('click', function() {
- var colorName = colorNames[barChartData.datasets.length % colorNames.length];;
- var dsColor = window.chartColors[colorName];
- var newDataset = {
- label: 'Dataset ' + barChartData.datasets.length,
- backgroundColor: color(dsColor).alpha(0.5).rgbString(),
- borderColor: dsColor,
- borderWidth: 1,
- data: []
- };
-
- for (var index = 0; index < barChartData.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- barChartData.datasets.push(newDataset);
- window.myBar.update();
- });
-
- document.getElementById('addData').addEventListener('click', function() {
- if (barChartData.datasets.length > 0) {
- var month = MONTHS[barChartData.labels.length % MONTHS.length];
- barChartData.labels.push(month);
-
- for (var index = 0; index < barChartData.datasets.length; ++index) {
- //window.myBar.addData(randomScalingFactor(), index);
- barChartData.datasets[index].data.push(randomScalingFactor());
- }
-
- window.myBar.update();
- }
- });
-
- document.getElementById('removeDataset').addEventListener('click', function() {
- barChartData.datasets.splice(0, 1);
- window.myBar.update();
- });
-
- document.getElementById('removeData').addEventListener('click', function() {
- barChartData.labels.splice(-1, 1); // remove the label first
-
- barChartData.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- });
-
- window.myBar.update();
- });
- </script>
+ <div id="container" style="width: 75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <button id="addDataset">Add Dataset</button>
+ <button id="removeDataset">Remove Dataset</button>
+ <button id="addData">Add Data</button>
+ <button id="removeData">Remove Data</button>
+ <script>
+ var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+ var color = Chart.helpers.color;
+ var barChartData = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'Dataset 1',
+ backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.red,
+ borderWidth: 1,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: 'Dataset 2',
+ backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.blue,
+ borderWidth: 1,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }]
+
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myBar = new Chart(ctx, {
+ type: 'bar',
+ data: barChartData,
+ options: {
+ responsive: true,
+ legend: {
+ position: 'top',
+ },
+ title: {
+ display: true,
+ text: 'Chart.js Bar Chart'
+ }
+ }
+ });
+
+ };
+
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ var zero = Math.random() < 0.2 ? true : false;
+ barChartData.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return zero ? 0.0 : randomScalingFactor();
+ });
+
+ });
+ window.myBar.update();
+ });
+
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('click', function() {
+ var colorName = colorNames[barChartData.datasets.length % colorNames.length];
+ var dsColor = window.chartColors[colorName];
+ var newDataset = {
+ label: 'Dataset ' + barChartData.datasets.length,
+ backgroundColor: color(dsColor).alpha(0.5).rgbString(),
+ borderColor: dsColor,
+ borderWidth: 1,
+ data: []
+ };
+
+ for (var index = 0; index < barChartData.labels.length; ++index) {
+ newDataset.data.push(randomScalingFactor());
+ }
+
+ barChartData.datasets.push(newDataset);
+ window.myBar.update();
+ });
+
+ document.getElementById('addData').addEventListener('click', function() {
+ if (barChartData.datasets.length > 0) {
+ var month = MONTHS[barChartData.labels.length % MONTHS.length];
+ barChartData.labels.push(month);
+
+ for (var index = 0; index < barChartData.datasets.length; ++index) {
+ // window.myBar.addData(randomScalingFactor(), index);
+ barChartData.datasets[index].data.push(randomScalingFactor());
+ }
+
+ window.myBar.update();
+ }
+ });
+
+ document.getElementById('removeDataset').addEventListener('click', function() {
+ barChartData.datasets.splice(0, 1);
+ window.myBar.update();
+ });
+
+ document.getElementById('removeData').addEventListener('click', function() {
+ barChartData.labels.splice(-1, 1); // remove the label first
+
+ barChartData.datasets.forEach(function(dataset) {
+ dataset.data.pop();
+ });
+
+ window.myBar.update();
+ });
+ </script>
</body>
</html>
<html>
<head>
- <title>Bubble Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
- <style type="text/css">
- canvas{
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
+ <title>Bubble Chart</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../utils.js"></script>
+ <style type="text/css">
+ canvas{
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
</head>
<body>
- <div id="container" style="width: 75%;">
- <canvas id="canvas"></canvas>
- </div>
- <button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var DEFAULT_DATASET_SIZE = 7;
+ <div id="container" style="width: 75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <button id="addDataset">Add Dataset</button>
+ <button id="removeDataset">Remove Dataset</button>
+ <button id="addData">Add Data</button>
+ <button id="removeData">Remove Data</button>
+ <script>
+ var DEFAULT_DATASET_SIZE = 7;
- var addedCount = 0;
- var color = Chart.helpers.color;
- var bubbleChartData = {
- animation: {
- duration: 10000
- },
- datasets: [{
- label: "My First dataset",
- backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
- borderColor: window.chartColors.red,
- borderWidth: 1,
- data: [{
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- }]
- }, {
- label: "My Second dataset",
- backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
- borderColor: window.chartColors.orange,
- borderWidth: 1,
- data: [{
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- }]
- }]
- };
+ var addedCount = 0;
+ var color = Chart.helpers.color;
+ var bubbleChartData = {
+ animation: {
+ duration: 10000
+ },
+ datasets: [{
+ label: 'My First dataset',
+ backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.red,
+ borderWidth: 1,
+ data: [{
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ }]
+ }, {
+ label: 'My Second dataset',
+ backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.orange,
+ borderWidth: 1,
+ data: [{
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ }]
+ }]
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myChart = new Chart(ctx, {
- type: 'bubble',
- data: bubbleChartData,
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Chart.js Bubble Chart'
- },
- tooltips: {
- mode: 'point'
- }
- }
- });
- };
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myChart = new Chart(ctx, {
+ type: 'bubble',
+ data: bubbleChartData,
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Chart.js Bubble Chart'
+ },
+ tooltips: {
+ mode: 'point'
+ }
+ }
+ });
+ };
- document.getElementById('randomizeData').addEventListener('click', function() {
- bubbleChartData.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- };
- });
- });
- window.myChart.update();
- });
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ bubbleChartData.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ };
+ });
+ });
+ window.myChart.update();
+ });
- var colorNames = Object.keys(window.chartColors);
- document.getElementById('addDataset').addEventListener('click', function() {
- ++addedCount;
- var colorName = colorNames[bubbleChartData.datasets.length % colorNames.length];;
- var dsColor = window.chartColors[colorName];
- var newDataset = {
- label: "My added dataset " + addedCount,
- backgroundColor: color(dsColor).alpha(0.5).rgbString(),
- borderColor: dsColor,
- borderWidth: 1,
- data: []
- };
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('click', function() {
+ ++addedCount;
+ var colorName = colorNames[bubbleChartData.datasets.length % colorNames.length];
+ var dsColor = window.chartColors[colorName];
+ var newDataset = {
+ label: 'My added dataset ' + addedCount,
+ backgroundColor: color(dsColor).alpha(0.5).rgbString(),
+ borderColor: dsColor,
+ borderWidth: 1,
+ data: []
+ };
- for (var index = 0; index < DEFAULT_DATASET_SIZE; ++index) {
- newDataset.data.push({
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- });
- }
+ for (var index = 0; index < DEFAULT_DATASET_SIZE; ++index) {
+ newDataset.data.push({
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ });
+ }
- bubbleChartData.datasets.push(newDataset);
- window.myChart.update();
- });
+ bubbleChartData.datasets.push(newDataset);
+ window.myChart.update();
+ });
- document.getElementById('addData').addEventListener('click', function() {
- if (bubbleChartData.datasets.length > 0) {
- for (var index = 0; index < bubbleChartData.datasets.length; ++index) {
- bubbleChartData.datasets[index].data.push({
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- r: Math.abs(randomScalingFactor()) / 5,
- });
- }
+ document.getElementById('addData').addEventListener('click', function() {
+ if (bubbleChartData.datasets.length > 0) {
+ for (var index = 0; index < bubbleChartData.datasets.length; ++index) {
+ bubbleChartData.datasets[index].data.push({
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ r: Math.abs(randomScalingFactor()) / 5,
+ });
+ }
- window.myChart.update();
- }
- });
+ window.myChart.update();
+ }
+ });
- document.getElementById('removeDataset').addEventListener('click', function() {
- bubbleChartData.datasets.splice(0, 1);
- window.myChart.update();
- });
+ document.getElementById('removeDataset').addEventListener('click', function() {
+ bubbleChartData.datasets.splice(0, 1);
+ window.myChart.update();
+ });
- document.getElementById('removeData').addEventListener('click', function() {
- bubbleChartData.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- });
+ document.getElementById('removeData').addEventListener('click', function() {
+ bubbleChartData.datasets.forEach(function(dataset) {
+ dataset.data.pop();
+ });
- window.myChart.update();
- });
- </script>
+ window.myChart.update();
+ });
+ </script>
</body>
</html>
<html>
<head>
- <title>Combo Bar-Line Chart</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>
+ <title>Combo Bar-Line Chart</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 chartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- type: 'line',
- label: 'Dataset 1',
- borderColor: window.chartColors.blue,
- borderWidth: 2,
- fill: false,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- type: 'bar',
- label: 'Dataset 2',
- backgroundColor: window.chartColors.red,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- borderColor: 'white',
- borderWidth: 2
- }, {
- type: 'bar',
- label: 'Dataset 3',
- backgroundColor: window.chartColors.green,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }]
+ <div style="width: 75%">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
+ var chartData = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ type: 'line',
+ label: 'Dataset 1',
+ borderColor: window.chartColors.blue,
+ borderWidth: 2,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ type: 'bar',
+ label: 'Dataset 2',
+ backgroundColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ borderColor: 'white',
+ borderWidth: 2
+ }, {
+ type: 'bar',
+ label: 'Dataset 3',
+ backgroundColor: window.chartColors.green,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }]
- };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myMixedChart = new Chart(ctx, {
- type: 'bar',
- data: chartData,
- options: {
- responsive: true,
- title: {
- display: true,
- text: 'Chart.js Combo Bar Line Chart'
- },
- tooltips: {
- mode: 'index',
- intersect: true
- }
- }
- });
- };
+ };
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myMixedChart = new Chart(ctx, {
+ type: 'bar',
+ data: chartData,
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Chart.js Combo Bar Line Chart'
+ },
+ tooltips: {
+ mode: 'index',
+ intersect: true
+ }
+ }
+ });
+ };
- document.getElementById('randomizeData').addEventListener('click', function() {
- chartData.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
- });
- window.myMixedChart.update();
- });
- </script>
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ chartData.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
+ });
+ window.myMixedChart.update();
+ });
+ </script>
</body>
</html>
<html>
<head>
- <title>Doughnut Chart</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>
+ <title>Doughnut Chart</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 id="canvas-holder" style="width:40%">
- <canvas id="chart-area" />
- </div>
- <button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
-
- var config = {
- type: 'doughnut',
- data: {
- datasets: [{
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- ],
- backgroundColor: [
- window.chartColors.red,
- window.chartColors.orange,
- window.chartColors.yellow,
- window.chartColors.green,
- window.chartColors.blue,
- ],
- label: 'Dataset 1'
- }],
- labels: [
- "Red",
- "Orange",
- "Yellow",
- "Green",
- "Blue"
- ]
- },
- options: {
- responsive: true,
- legend: {
- position: 'top',
- },
- title: {
- display: true,
- text: 'Chart.js Doughnut Chart'
- },
- animation: {
- animateScale: true,
- animateRotate: true
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById("chart-area").getContext("2d");
- window.myDoughnut = new Chart(ctx, config);
- };
-
- document.getElementById('randomizeData').addEventListener('click', function() {
- config.data.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
- });
-
- window.myDoughnut.update();
- });
-
- var colorNames = Object.keys(window.chartColors);
- document.getElementById('addDataset').addEventListener('click', function() {
- var newDataset = {
- backgroundColor: [],
- data: [],
- label: 'New dataset ' + config.data.datasets.length,
- };
-
- for (var index = 0; index < config.data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
-
- var colorName = colorNames[index % colorNames.length];;
- var newColor = window.chartColors[colorName];
- newDataset.backgroundColor.push(newColor);
- }
-
- config.data.datasets.push(newDataset);
- window.myDoughnut.update();
- });
-
- document.getElementById('addData').addEventListener('click', function() {
- if (config.data.datasets.length > 0) {
- config.data.labels.push('data #' + config.data.labels.length);
-
- var colorName = colorNames[config.data.datasets[0].data.length % colorNames.length];;
- var newColor = window.chartColors[colorName];
-
- config.data.datasets.forEach(function(dataset) {
- dataset.data.push(randomScalingFactor());
- dataset.backgroundColor.push(newColor);
- });
-
- window.myDoughnut.update();
- }
- });
-
- document.getElementById('removeDataset').addEventListener('click', function() {
- config.data.datasets.splice(0, 1);
- window.myDoughnut.update();
- });
-
- document.getElementById('removeData').addEventListener('click', function() {
- config.data.labels.splice(-1, 1); // remove the label first
-
- config.data.datasets.forEach(function(dataset) {
- dataset.data.pop();
- dataset.backgroundColor.pop();
- });
-
- window.myDoughnut.update();
- });
- </script>
+ <div id="canvas-holder" style="width:40%">
+ <canvas id="chart-area"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <button id="addDataset">Add Dataset</button>
+ <button id="removeDataset">Remove Dataset</button>
+ <button id="addData">Add Data</button>
+ <button id="removeData">Remove Data</button>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
+
+ var config = {
+ type: 'doughnut',
+ data: {
+ datasets: [{
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ ],
+ backgroundColor: [
+ window.chartColors.red,
+ window.chartColors.orange,
+ window.chartColors.yellow,
+ window.chartColors.green,
+ window.chartColors.blue,
+ ],
+ label: 'Dataset 1'
+ }],
+ labels: [
+ 'Red',
+ 'Orange',
+ 'Yellow',
+ 'Green',
+ 'Blue'
+ ]
+ },
+ options: {
+ responsive: true,
+ legend: {
+ position: 'top',
+ },
+ title: {
+ display: true,
+ text: 'Chart.js Doughnut Chart'
+ },
+ animation: {
+ animateScale: true,
+ animateRotate: true
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById('chart-area').getContext('2d');
+ window.myDoughnut = new Chart(ctx, config);
+ };
+
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
+ });
+
+ window.myDoughnut.update();
+ });
+
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('click', function() {
+ var newDataset = {
+ backgroundColor: [],
+ data: [],
+ label: 'New dataset ' + config.data.datasets.length,
+ };
+
+ for (var index = 0; index < config.data.labels.length; ++index) {
+ newDataset.data.push(randomScalingFactor());
+
+ var colorName = colorNames[index % colorNames.length];
+ var newColor = window.chartColors[colorName];
+ newDataset.backgroundColor.push(newColor);
+ }
+
+ config.data.datasets.push(newDataset);
+ window.myDoughnut.update();
+ });
+
+ document.getElementById('addData').addEventListener('click', function() {
+ if (config.data.datasets.length > 0) {
+ config.data.labels.push('data #' + config.data.labels.length);
+
+ var colorName = colorNames[config.data.datasets[0].data.length % colorNames.length];
+ var newColor = window.chartColors[colorName];
+
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data.push(randomScalingFactor());
+ dataset.backgroundColor.push(newColor);
+ });
+
+ window.myDoughnut.update();
+ }
+ });
+
+ document.getElementById('removeDataset').addEventListener('click', function() {
+ config.data.datasets.splice(0, 1);
+ window.myDoughnut.update();
+ });
+
+ document.getElementById('removeData').addEventListener('click', function() {
+ config.data.labels.splice(-1, 1); // remove the label first
+
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data.pop();
+ dataset.backgroundColor.pop();
+ });
+
+ window.myDoughnut.update();
+ });
+ </script>
</body>
</html>
<html>
<head>
- <title>Line Chart</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>
+ <title>Line Chart</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>
- <br>
- <br>
- <button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- backgroundColor: window.chartColors.red,
- borderColor: window.chartColors.red,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- fill: false,
- }, {
- label: "My Second dataset",
- fill: false,
- backgroundColor: window.chartColors.blue,
- borderColor: window.chartColors.blue,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Chart.js Line Chart'
- },
- tooltips: {
- mode: 'index',
- intersect: false,
- },
- hover: {
- mode: 'nearest',
- intersect: true
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Value'
- }
- }]
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
-
- document.getElementById('randomizeData').addEventListener('click', function() {
- config.data.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
-
- });
-
- window.myLine.update();
- });
-
- var colorNames = Object.keys(window.chartColors);
- document.getElementById('addDataset').addEventListener('click', function() {
- var colorName = colorNames[config.data.datasets.length % colorNames.length];
- var newColor = window.chartColors[colorName];
- var newDataset = {
- label: 'Dataset ' + config.data.datasets.length,
- backgroundColor: newColor,
- borderColor: newColor,
- data: [],
- fill: false
- };
-
- for (var index = 0; index < config.data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- config.data.datasets.push(newDataset);
- window.myLine.update();
- });
-
- document.getElementById('addData').addEventListener('click', function() {
- if (config.data.datasets.length > 0) {
- var month = MONTHS[config.data.labels.length % MONTHS.length];
- config.data.labels.push(month);
-
- config.data.datasets.forEach(function(dataset) {
- dataset.data.push(randomScalingFactor());
- });
-
- window.myLine.update();
- }
- });
-
- document.getElementById('removeDataset').addEventListener('click', function() {
- config.data.datasets.splice(0, 1);
- window.myLine.update();
- });
-
- document.getElementById('removeData').addEventListener('click', function() {
- config.data.labels.splice(-1, 1); // remove the label first
-
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- });
-
- window.myLine.update();
- });
- </script>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <br>
+ <br>
+ <button id="randomizeData">Randomize Data</button>
+ <button id="addDataset">Add Dataset</button>
+ <button id="removeDataset">Remove Dataset</button>
+ <button id="addData">Add Data</button>
+ <button id="removeData">Remove Data</button>
+ <script>
+ var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+ var config = {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ fill: false,
+ }, {
+ label: 'My Second dataset',
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart'
+ },
+ tooltips: {
+ mode: 'index',
+ intersect: false,
+ },
+ hover: {
+ mode: 'nearest',
+ intersect: true
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ }
+ }]
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
+
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
+
+ });
+
+ window.myLine.update();
+ });
+
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('click', function() {
+ var colorName = colorNames[config.data.datasets.length % colorNames.length];
+ var newColor = window.chartColors[colorName];
+ var newDataset = {
+ label: 'Dataset ' + config.data.datasets.length,
+ backgroundColor: newColor,
+ borderColor: newColor,
+ data: [],
+ fill: false
+ };
+
+ for (var index = 0; index < config.data.labels.length; ++index) {
+ newDataset.data.push(randomScalingFactor());
+ }
+
+ config.data.datasets.push(newDataset);
+ window.myLine.update();
+ });
+
+ document.getElementById('addData').addEventListener('click', function() {
+ if (config.data.datasets.length > 0) {
+ var month = MONTHS[config.data.labels.length % MONTHS.length];
+ config.data.labels.push(month);
+
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data.push(randomScalingFactor());
+ });
+
+ window.myLine.update();
+ }
+ });
+
+ document.getElementById('removeDataset').addEventListener('click', function() {
+ config.data.datasets.splice(0, 1);
+ window.myLine.update();
+ });
+
+ document.getElementById('removeData').addEventListener('click', function() {
+ config.data.labels.splice(-1, 1); // remove the label first
+
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data.pop();
+ });
+
+ window.myLine.update();
+ });
+ </script>
</body>
</html>
<html>
<head>
- <title>Line Chart - Cubic interpolation mode</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>
+ <title>Line Chart - Cubic interpolation mode</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>
- <br>
- <br>
- <button id="randomizeData">Randomize Data</button>
- <script>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <br>
+ <br>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
- var datapoints = [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170];
+ var datapoints = [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170];
var config = {
- type: 'line',
- data: {
- labels: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
- datasets: [{
- label: "Cubic interpolation (monotone)",
- data: datapoints,
- borderColor: window.chartColors.red,
+ type: 'line',
+ data: {
+ labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+ datasets: [{
+ label: 'Cubic interpolation (monotone)',
+ data: datapoints,
+ borderColor: window.chartColors.red,
backgroundColor: 'rgba(0, 0, 0, 0)',
- fill: false,
+ fill: false,
cubicInterpolationMode: 'monotone'
- }, {
- label: "Cubic interpolation (default)",
- data: datapoints,
- borderColor: window.chartColors.blue,
+ }, {
+ label: 'Cubic interpolation (default)',
+ data: datapoints,
+ borderColor: window.chartColors.blue,
backgroundColor: 'rgba(0, 0, 0, 0)',
- fill: false,
- }, {
- label: "Linear interpolation",
- data: datapoints,
- borderColor: window.chartColors.green,
+ fill: false,
+ }, {
+ label: 'Linear interpolation',
+ data: datapoints,
+ borderColor: window.chartColors.green,
backgroundColor: 'rgba(0, 0, 0, 0)',
- fill: false,
+ fill: false,
lineTension: 0
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Chart.js Line Chart - Cubic interpolation mode'
- },
- tooltips: {
- mode: 'index'
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- display: true
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Value'
- },
- ticks: {
- suggestedMin: -10,
- suggestedMax: 200,
- }
- }]
- }
- }
- };
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Cubic interpolation mode'
+ },
+ tooltips: {
+ mode: 'index'
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ },
+ ticks: {
+ suggestedMin: -10,
+ suggestedMax: 200,
+ }
+ }]
+ }
+ }
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
- document.getElementById('randomizeData').addEventListener('click', function() {
+ document.getElementById('randomizeData').addEventListener('click', function() {
for (var i = 0, len = datapoints.length; i < len; ++i) {
datapoints[i] = Math.random() < 0.05 ? NaN : randomScalingFactor();
}
- window.myLine.update();
- });
+ window.myLine.update();
+ });
- </script>
+ </script>
</body>
</html>
<html>
<head>
- <title>Line Styles</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>
+ <title>Line Styles</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>
- <script>
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "Unfilled",
- fill: false,
- backgroundColor: window.chartColors.blue,
- borderColor: window.chartColors.blue,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- }, {
- label: "Dashed",
- fill: false,
- backgroundColor: window.chartColors.green,
- borderColor: window.chartColors.green,
- borderDash: [5, 5],
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- }, {
- label: "Filled",
- backgroundColor: window.chartColors.red,
- borderColor: window.chartColors.red,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- fill: true,
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Chart.js Line Chart'
- },
- tooltips: {
- mode: 'index',
- intersect: false,
- },
- hover: {
- mode: 'nearest',
- intersect: true
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Value'
- }
- }]
- }
- }
- };
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var config = {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'Unfilled',
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }, {
+ label: 'Dashed',
+ fill: false,
+ backgroundColor: window.chartColors.green,
+ borderColor: window.chartColors.green,
+ borderDash: [5, 5],
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }, {
+ label: 'Filled',
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ fill: true,
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart'
+ },
+ tooltips: {
+ mode: 'index',
+ intersect: false,
+ },
+ hover: {
+ mode: 'nearest',
+ intersect: true
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ }
+ }]
+ }
+ }
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
- </script>
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
</body>
</html>
<html>
<head>
- <title>Line Chart Multiple Axes</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>
+ <title>Line Chart Multiple Axes</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 lineChartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- borderColor: window.chartColors.red,
- backgroundColor: window.chartColors.red,
- fill: false,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- yAxisID: "y-axis-1",
- }, {
- label: "My Second dataset",
- borderColor: window.chartColors.blue,
- backgroundColor: window.chartColors.blue,
- fill: false,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- yAxisID: "y-axis-2"
- }]
- };
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
+ var lineChartData = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ borderColor: window.chartColors.red,
+ backgroundColor: window.chartColors.red,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ yAxisID: 'y-axis-1',
+ }, {
+ label: 'My Second dataset',
+ borderColor: window.chartColors.blue,
+ backgroundColor: window.chartColors.blue,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ yAxisID: 'y-axis-2'
+ }]
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = Chart.Line(ctx, {
- data: lineChartData,
- options: {
- responsive: true,
- hoverMode: 'index',
- stacked: false,
- title:{
- display: true,
- text:'Chart.js Line Chart - Multi Axis'
- },
- scales: {
- yAxes: [{
- type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
- display: true,
- position: "left",
- id: "y-axis-1",
- }, {
- type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
- display: true,
- position: "right",
- id: "y-axis-2",
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = Chart.Line(ctx, {
+ data: lineChartData,
+ options: {
+ responsive: true,
+ hoverMode: 'index',
+ stacked: false,
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Multi Axis'
+ },
+ scales: {
+ yAxes: [{
+ type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+ display: true,
+ position: 'left',
+ id: 'y-axis-1',
+ }, {
+ type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+ display: true,
+ position: 'right',
+ id: 'y-axis-2',
- // grid line settings
- gridLines: {
- drawOnChartArea: false, // only want the grid lines for one axis to show up
- },
- }],
- }
- }
- });
- };
+ // grid line settings
+ gridLines: {
+ drawOnChartArea: false, // only want the grid lines for one axis to show up
+ },
+ }],
+ }
+ }
+ });
+ };
- document.getElementById('randomizeData').addEventListener('click', function() {
- lineChartData.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
- });
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ lineChartData.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
+ });
- window.myLine.update();
- });
- </script>
+ window.myLine.update();
+ });
+ </script>
</body>
</html>
<html>
<head>
- <title>Different Point Sizes</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>
+ <title>Different Point Sizes</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>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "dataset - big points",
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- backgroundColor: window.chartColors.red,
- borderColor: window.chartColors.red,
- fill: false,
- borderDash: [5, 5],
- pointRadius: 15,
- pointHoverRadius: 10,
- }, {
- label: "dataset - individual point sizes",
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- backgroundColor: window.chartColors.blue,
- borderColor: window.chartColors.blue,
- fill: false,
- borderDash: [5, 5],
- pointRadius: [2, 4, 6, 18, 0, 12, 20],
- }, {
- label: "dataset - large pointHoverRadius",
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- backgroundColor: window.chartColors.green,
- borderColor: window.chartColors.green,
- fill: false,
- pointHoverRadius: 30,
- }, {
- label: "dataset - large pointHitRadius",
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- backgroundColor: window.chartColors.yellow,
- borderColor: window.chartColors.yellow,
- fill: false,
- pointHitRadius: 20,
- }]
- },
- options: {
- responsive: true,
- legend: {
- position: 'bottom',
- },
- hover: {
- mode: 'index'
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Value'
- }
- }]
- },
- title: {
- display: true,
- text: 'Chart.js Line Chart - Different point sizes'
- }
- }
- };
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var config = {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'dataset - big points',
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ fill: false,
+ borderDash: [5, 5],
+ pointRadius: 15,
+ pointHoverRadius: 10,
+ }, {
+ label: 'dataset - individual point sizes',
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ fill: false,
+ borderDash: [5, 5],
+ pointRadius: [2, 4, 6, 18, 0, 12, 20],
+ }, {
+ label: 'dataset - large pointHoverRadius',
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ backgroundColor: window.chartColors.green,
+ borderColor: window.chartColors.green,
+ fill: false,
+ pointHoverRadius: 30,
+ }, {
+ label: 'dataset - large pointHitRadius',
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ backgroundColor: window.chartColors.yellow,
+ borderColor: window.chartColors.yellow,
+ fill: false,
+ pointHitRadius: 20,
+ }]
+ },
+ options: {
+ responsive: true,
+ legend: {
+ position: 'bottom',
+ },
+ hover: {
+ mode: 'index'
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ }
+ }]
+ },
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Different point sizes'
+ }
+ }
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
- </script>
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
</body>
</html>
<html>
<head>
- <title>Line Chart</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;
- }
- .chart-container {
- width: 500px;
- margin-left: 40px;
- margin-right: 40px;
- margin-bottom: 40px;
- }
- .container {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- }
- </style>
+ <title>Line Chart</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;
+ }
+ .chart-container {
+ width: 500px;
+ margin-left: 40px;
+ margin-right: 40px;
+ margin-bottom: 40px;
+ }
+ .container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ </style>
</head>
<body>
- <div class="container">
- </div>
- <script>
- function createConfig(pointStyle) {
- return {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- backgroundColor: window.chartColors.red,
- borderColor: window.chartColors.red,
- data: [10, 23, 5, 99, 67, 43, 0],
- fill: false,
- pointRadius: 10,
- pointHoverRadius: 15,
- showLine: false // no line shown
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Point Style: ' + pointStyle
- },
- legend: {
- display: false
- },
- elements: {
- point: {
- pointStyle: pointStyle
- }
- }
- }
- };
- }
+ <div class="container">
+ </div>
+ <script>
+ function createConfig(pointStyle) {
+ return {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [10, 23, 5, 99, 67, 43, 0],
+ fill: false,
+ pointRadius: 10,
+ pointHoverRadius: 15,
+ showLine: false // no line shown
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Point Style: ' + pointStyle
+ },
+ legend: {
+ display: false
+ },
+ elements: {
+ point: {
+ pointStyle: pointStyle
+ }
+ }
+ }
+ };
+ }
- window.onload = function() {
- var container = document.querySelector('.container');
- [
- 'circle',
- 'triangle',
- 'rect',
- 'rectRounded',
- 'rectRot',
- 'cross',
- 'crossRot',
- 'star',
- 'line',
- 'dash'
- ].forEach(function(pointStyle) {
- var div = document.createElement('div');
- div.classList.add('chart-container');
+ window.onload = function() {
+ var container = document.querySelector('.container');
+ [
+ 'circle',
+ 'triangle',
+ 'rect',
+ 'rectRounded',
+ 'rectRot',
+ 'cross',
+ 'crossRot',
+ 'star',
+ 'line',
+ 'dash'
+ ].forEach(function(pointStyle) {
+ var div = document.createElement('div');
+ div.classList.add('chart-container');
- var canvas = document.createElement('canvas');
- div.appendChild(canvas);
- container.appendChild(div);
+ var canvas = document.createElement('canvas');
+ div.appendChild(canvas);
+ container.appendChild(div);
- var ctx = canvas.getContext('2d');
- var config = createConfig(pointStyle);
- new Chart(ctx, config);
- });
- };
- </script>
+ var ctx = canvas.getContext('2d');
+ var config = createConfig(pointStyle);
+ new Chart(ctx, config);
+ });
+ };
+ </script>
</body>
</html>
<html>
<head>
- <title>Line Chart</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>
+ <title>Line Chart</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>
- <script>
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- borderColor: window.chartColors.red,
- fill: false,
- // Skip a point in the middle
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- NaN,
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var config = {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ borderColor: window.chartColors.red,
+ fill: false,
+ // Skip a point in the middle
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ NaN,
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
- }, {
- label: "My Second dataset",
- borderColor: window.chartColors.blue,
- fill: false,
- // Skip first and last points
- data: [
- NaN,
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- NaN
- ],
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Chart.js Line Chart - Skip Points'
- },
- tooltips: {
- mode: 'index',
- },
- hover: {
- mode: 'index'
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Value'
- },
- }]
- }
- }
- };
+ }, {
+ label: 'My Second dataset',
+ borderColor: window.chartColors.blue,
+ fill: false,
+ // Skip first and last points
+ data: [
+ NaN,
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ NaN
+ ],
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Skip Points'
+ },
+ tooltips: {
+ mode: 'index',
+ },
+ hover: {
+ mode: 'index'
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ },
+ }]
+ }
+ }
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
- </script>
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
</body>
</html>
<html>
<head>
- <title>Stepped Line Chart</title>
- <script src="../../../dist/Chart.bundle.js"></script>
- <script src="../../utils.js"></script>
+ <title>Stepped Line Chart</title>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<body>
<div class="container">
</div>
- <script>
- function createConfig(details, data) {
- return {
- type: 'line',
- data: {
- labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
- datasets: [{
- label: 'steppedLine: ' + ((typeof(details.steppedLine) === 'boolean') ? details.steppedLine : `'${details.steppedLine}'`),
- steppedLine: details.steppedLine,
- data: data,
- borderColor: details.color,
- fill: false,
- }]
- },
- options: {
- responsive: true,
- title: {
- display: true,
- text: details.label,
+ <script>
+ function createConfig(details, data) {
+ return {
+ type: 'line',
+ data: {
+ labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
+ datasets: [{
+ label: 'steppedLine: ' + details.steppedLine,
+ steppedLine: details.steppedLine,
+ data: data,
+ borderColor: details.color,
+ fill: false,
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: details.label,
+ }
}
- }
- };
- }
+ };
+ }
- window.onload = function() {
- var container = document.querySelector('.container');
+ window.onload = function() {
+ var container = document.querySelector('.container');
- var data = [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ];
+ var data = [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ];
- var steppedLineSettings = [{
- steppedLine: false,
- label: 'No Step Interpolation',
- color: window.chartColors.red
- }, {
- steppedLine: true,
- label: 'Step Before Interpolation',
- color: window.chartColors.green
- }, {
- steppedLine: 'before',
- label: 'Step Before Interpolation',
- color: window.chartColors.green
- }, {
- steppedLine: 'after',
- label: 'Step After Interpolation',
- color: window.chartColors.purple
- }];
+ var steppedLineSettings = [{
+ steppedLine: false,
+ label: 'No Step Interpolation',
+ color: window.chartColors.red
+ }, {
+ steppedLine: true,
+ label: 'Step Before Interpolation',
+ color: window.chartColors.green
+ }, {
+ steppedLine: 'before',
+ label: 'Step Before Interpolation',
+ color: window.chartColors.green
+ }, {
+ steppedLine: 'after',
+ label: 'Step After Interpolation',
+ color: window.chartColors.purple
+ }];
- steppedLineSettings.forEach(function(details) {
- var div = document.createElement('div');
- div.classList.add('chart-container');
+ steppedLineSettings.forEach(function(details) {
+ var div = document.createElement('div');
+ div.classList.add('chart-container');
- var canvas = document.createElement('canvas');
- div.appendChild(canvas);
- container.appendChild(div);
+ var canvas = document.createElement('canvas');
+ div.appendChild(canvas);
+ container.appendChild(div);
- var ctx = canvas.getContext('2d');
- var config = createConfig(details, data);
- new Chart(ctx, config);
- });
- };
- </script>
+ var ctx = canvas.getContext('2d');
+ var config = createConfig(details, data);
+ new Chart(ctx, config);
+ });
+ };
+ </script>
</body>
</html>
<html>
<head>
- <title>Pie Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <title>Pie Chart</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../utils.js"></script>
</head>
<body>
- <div id="canvas-holder" style="width:40%">
- <canvas id="chart-area" />
- </div>
- <button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <script>
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
+ <div id="canvas-holder" style="width:40%">
+ <canvas id="chart-area"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <button id="addDataset">Add Dataset</button>
+ <button id="removeDataset">Remove Dataset</button>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
- var config = {
- type: 'pie',
- data: {
- datasets: [{
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- ],
- backgroundColor: [
- window.chartColors.red,
- window.chartColors.orange,
- window.chartColors.yellow,
- window.chartColors.green,
- window.chartColors.blue,
- ],
- label: 'Dataset 1'
- }],
- labels: [
- "Red",
- "Orange",
- "Yellow",
- "Green",
- "Blue"
- ]
- },
- options: {
- responsive: true
- }
- };
+ var config = {
+ type: 'pie',
+ data: {
+ datasets: [{
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ ],
+ backgroundColor: [
+ window.chartColors.red,
+ window.chartColors.orange,
+ window.chartColors.yellow,
+ window.chartColors.green,
+ window.chartColors.blue,
+ ],
+ label: 'Dataset 1'
+ }],
+ labels: [
+ 'Red',
+ 'Orange',
+ 'Yellow',
+ 'Green',
+ 'Blue'
+ ]
+ },
+ options: {
+ responsive: true
+ }
+ };
- window.onload = function() {
- var ctx = document.getElementById("chart-area").getContext("2d");
- window.myPie = new Chart(ctx, config);
- };
+ window.onload = function() {
+ var ctx = document.getElementById('chart-area').getContext('2d');
+ window.myPie = new Chart(ctx, config);
+ };
- document.getElementById('randomizeData').addEventListener('click', function() {
- config.data.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
- });
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
+ });
- window.myPie.update();
- });
+ window.myPie.update();
+ });
- var colorNames = Object.keys(window.chartColors);
- document.getElementById('addDataset').addEventListener('click', function() {
- var newDataset = {
- backgroundColor: [],
- data: [],
- label: 'New dataset ' + config.data.datasets.length,
- };
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('click', function() {
+ var newDataset = {
+ backgroundColor: [],
+ data: [],
+ label: 'New dataset ' + config.data.datasets.length,
+ };
- for (var index = 0; index < config.data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
+ for (var index = 0; index < config.data.labels.length; ++index) {
+ newDataset.data.push(randomScalingFactor());
- var colorName = colorNames[index % colorNames.length];;
- var newColor = window.chartColors[colorName];
- newDataset.backgroundColor.push(newColor);
- }
+ var colorName = colorNames[index % colorNames.length];
+ var newColor = window.chartColors[colorName];
+ newDataset.backgroundColor.push(newColor);
+ }
- config.data.datasets.push(newDataset);
- window.myPie.update();
- });
+ config.data.datasets.push(newDataset);
+ window.myPie.update();
+ });
- document.getElementById('removeDataset').addEventListener('click', function() {
- config.data.datasets.splice(0, 1);
- window.myPie.update();
- });
- </script>
+ document.getElementById('removeDataset').addEventListener('click', function() {
+ config.data.datasets.splice(0, 1);
+ window.myPie.update();
+ });
+ </script>
</body>
</html>
<html>
<head>
- <title>Polar Area Chart</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>
+ <title>Polar Area Chart</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 id="canvas-holder" style="width:50%">
- <canvas id="chart-area"></canvas>
- </div>
- <button id="randomizeData">Randomize Data</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
+ <div id="canvas-holder" style="width:50%">
+ <canvas id="chart-area"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <button id="addData">Add Data</button>
+ <button id="removeData">Remove Data</button>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
- var chartColors = window.chartColors;
- var color = Chart.helpers.color;
- var config = {
- data: {
- datasets: [{
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- ],
- backgroundColor: [
- color(chartColors.red).alpha(0.5).rgbString(),
- color(chartColors.orange).alpha(0.5).rgbString(),
- color(chartColors.yellow).alpha(0.5).rgbString(),
- color(chartColors.green).alpha(0.5).rgbString(),
- color(chartColors.blue).alpha(0.5).rgbString(),
- ],
- label: 'My dataset' // for legend
- }],
- labels: [
- "Red",
- "Orange",
- "Yellow",
- "Green",
- "Blue"
- ]
- },
- options: {
- responsive: true,
- legend: {
- position: 'right',
- },
- title: {
- display: true,
- text: 'Chart.js Polar Area Chart'
- },
- scale: {
- ticks: {
- beginAtZero: true
- },
- reverse: false
- },
- animation: {
- animateRotate: false,
- animateScale: true
- }
- }
- };
+ var chartColors = window.chartColors;
+ var color = Chart.helpers.color;
+ var config = {
+ data: {
+ datasets: [{
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ ],
+ backgroundColor: [
+ color(chartColors.red).alpha(0.5).rgbString(),
+ color(chartColors.orange).alpha(0.5).rgbString(),
+ color(chartColors.yellow).alpha(0.5).rgbString(),
+ color(chartColors.green).alpha(0.5).rgbString(),
+ color(chartColors.blue).alpha(0.5).rgbString(),
+ ],
+ label: 'My dataset' // for legend
+ }],
+ labels: [
+ 'Red',
+ 'Orange',
+ 'Yellow',
+ 'Green',
+ 'Blue'
+ ]
+ },
+ options: {
+ responsive: true,
+ legend: {
+ position: 'right',
+ },
+ title: {
+ display: true,
+ text: 'Chart.js Polar Area Chart'
+ },
+ scale: {
+ ticks: {
+ beginAtZero: true
+ },
+ reverse: false
+ },
+ animation: {
+ animateRotate: false,
+ animateScale: true
+ }
+ }
+ };
- window.onload = function() {
- var ctx = document.getElementById("chart-area");
- window.myPolarArea = Chart.PolarArea(ctx, config);
- };
+ window.onload = function() {
+ var ctx = document.getElementById('chart-area');
+ window.myPolarArea = Chart.PolarArea(ctx, config);
+ };
- document.getElementById('randomizeData').addEventListener('click', function() {
- config.data.datasets.forEach(function(piece, i) {
- piece.data.forEach(function(value, j) {
- config.data.datasets[i].data[j] = randomScalingFactor();
- });
- });
- window.myPolarArea.update();
- });
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(piece, i) {
+ piece.data.forEach(function(value, j) {
+ config.data.datasets[i].data[j] = randomScalingFactor();
+ });
+ });
+ window.myPolarArea.update();
+ });
- var colorNames = Object.keys(window.chartColors);
- document.getElementById('addData').addEventListener('click', function() {
- if (config.data.datasets.length > 0) {
- config.data.labels.push('data #' + config.data.labels.length);
- config.data.datasets.forEach(function(dataset) {
- var colorName = colorNames[config.data.labels.length % colorNames.length];
- dataset.backgroundColor.push(window.chartColors[colorName]);
- dataset.data.push(randomScalingFactor());
- });
- window.myPolarArea.update();
- }
- });
- document.getElementById('removeData').addEventListener('click', function() {
- config.data.labels.pop(); // remove the label first
- config.data.datasets.forEach(function(dataset) {
- dataset.backgroundColor.pop();
- dataset.data.pop();
- });
- window.myPolarArea.update();
- });
- </script>
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addData').addEventListener('click', function() {
+ if (config.data.datasets.length > 0) {
+ config.data.labels.push('data #' + config.data.labels.length);
+ config.data.datasets.forEach(function(dataset) {
+ var colorName = colorNames[config.data.labels.length % colorNames.length];
+ dataset.backgroundColor.push(window.chartColors[colorName]);
+ dataset.data.push(randomScalingFactor());
+ });
+ window.myPolarArea.update();
+ }
+ });
+ document.getElementById('removeData').addEventListener('click', function() {
+ config.data.labels.pop(); // remove the label first
+ config.data.datasets.forEach(function(dataset) {
+ dataset.backgroundColor.pop();
+ dataset.data.pop();
+ });
+ window.myPolarArea.update();
+ });
+ </script>
</body>
</html>
<html>
<head>
- <title>Radar Chart</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>
+ <title>Radar Chart</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:40%">
- <canvas id="canvas"></canvas>
- </div>
- <button id="randomizeData">Randomize Data</button>
- <script>
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
+ <div style="width:40%">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
- var color = Chart.helpers.color;
- var config = {
- type: 'radar',
- data: {
- labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
- datasets: [{
- label: "Skip first dataset",
- borderColor: window.chartColors.red,
- backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
- pointBackgroundColor: window.chartColors.red,
- data: [
- NaN,
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- label: "Skip mid dataset",
- borderColor: window.chartColors.blue,
- backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
- pointBackgroundColor: window.chartColors.blue,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- NaN,
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- },{
- label: "Skip last dataset",
- borderColor: window.chartColors.green,
- backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
- pointBackgroundColor: window.chartColors.green,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- NaN
- ]
- }]
- },
- options: {
- title:{
- display:true,
- text:"Chart.js Radar Chart - Skip Points"
- },
- elements: {
- line: {
- tension: 0.0,
- }
- },
- scale: {
- beginAtZero: true,
- }
- }
- };
+ var color = Chart.helpers.color;
+ var config = {
+ type: 'radar',
+ data: {
+ labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+ datasets: [{
+ label: 'Skip first dataset',
+ borderColor: window.chartColors.red,
+ backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+ pointBackgroundColor: window.chartColors.red,
+ data: [
+ NaN,
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: 'Skip mid dataset',
+ borderColor: window.chartColors.blue,
+ backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
+ pointBackgroundColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ NaN,
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: 'Skip last dataset',
+ borderColor: window.chartColors.green,
+ backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
+ pointBackgroundColor: window.chartColors.green,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ NaN
+ ]
+ }]
+ },
+ options: {
+ title: {
+ display: true,
+ text: 'Chart.js Radar Chart - Skip Points'
+ },
+ elements: {
+ line: {
+ tension: 0.0,
+ }
+ },
+ scale: {
+ beginAtZero: true,
+ }
+ }
+ };
- window.onload = function() {
- window.myRadar = new Chart(document.getElementById("canvas"), config);
- };
+ window.onload = function() {
+ window.myRadar = new Chart(document.getElementById('canvas'), config);
+ };
- document.getElementById('randomizeData').addEventListener('click', function() {
- config.data.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
- });
+ });
- window.myRadar.update();
- });
- </script>
+ window.myRadar.update();
+ });
+ </script>
</body>
</html>
<html>
<head>
- <title>Radar Chart</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>
+ <title>Radar Chart</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:40%">
- <canvas id="canvas"></canvas>
- </div>
- <button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
-
- var color = Chart.helpers.color;
- var config = {
- type: 'radar',
- data: {
- labels: [["Eating", "Dinner"], ["Drinking", "Water"], "Sleeping", ["Designing", "Graphics"], "Coding", "Cycling", "Running"],
- datasets: [{
- label: "My First dataset",
- backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
- borderColor: window.chartColors.red,
- pointBackgroundColor: window.chartColors.red,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- label: "My Second dataset",
- backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
- borderColor: window.chartColors.blue,
- pointBackgroundColor: window.chartColors.blue,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- },]
- },
- options: {
- legend: {
- position: 'top',
- },
- title: {
- display: true,
- text: 'Chart.js Radar Chart'
- },
- scale: {
- ticks: {
- beginAtZero: true
- }
- }
- }
- };
-
- window.onload = function() {
- window.myRadar = new Chart(document.getElementById("canvas"), config);
- };
-
- document.getElementById('randomizeData').addEventListener('click', function() {
- config.data.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
- });
-
- window.myRadar.update();
- });
-
- var colorNames = Object.keys(window.chartColors);
- document.getElementById('addDataset').addEventListener('click', function() {
- var colorName = colorNames[config.data.datasets.length % colorNames.length];;
- var newColor = window.chartColors[colorName];
-
- var newDataset = {
- label: 'Dataset ' + config.data.datasets.length,
- borderColor: newColor,
- backgroundColor: color(newColor).alpha(0.2).rgbString(),
- pointBorderColor: newColor,
- data: [],
- };
-
- for (var index = 0; index < config.data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- config.data.datasets.push(newDataset);
- window.myRadar.update();
- });
-
- document.getElementById('addData').addEventListener('click', function() {
- if (config.data.datasets.length > 0) {
- config.data.labels.push('dataset #' + config.data.labels.length);
-
- config.data.datasets.forEach(function (dataset) {
- dataset.data.push(randomScalingFactor());
- });
-
- window.myRadar.update();
- }
- });
-
- document.getElementById('removeDataset').addEventListener('click', function() {
- config.data.datasets.splice(0, 1);
- window.myRadar.update();
- });
-
- document.getElementById('removeData').addEventListener('click', function() {
- config.data.labels.pop(); // remove the label first
-
- config.data.datasets.forEach(function(dataset) {
- dataset.data.pop();
- });
-
- window.myRadar.update();
- });
- </script>
+ <div style="width:40%">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <button id="addDataset">Add Dataset</button>
+ <button id="removeDataset">Remove Dataset</button>
+ <button id="addData">Add Data</button>
+ <button id="removeData">Remove Data</button>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
+
+ var color = Chart.helpers.color;
+ var config = {
+ type: 'radar',
+ data: {
+ labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
+ datasets: [{
+ label: 'My First dataset',
+ backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+ borderColor: window.chartColors.red,
+ pointBackgroundColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: 'My Second dataset',
+ backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
+ borderColor: window.chartColors.blue,
+ pointBackgroundColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }]
+ },
+ options: {
+ legend: {
+ position: 'top',
+ },
+ title: {
+ display: true,
+ text: 'Chart.js Radar Chart'
+ },
+ scale: {
+ ticks: {
+ beginAtZero: true
+ }
+ }
+ }
+ };
+
+ window.onload = function() {
+ window.myRadar = new Chart(document.getElementById('canvas'), config);
+ };
+
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
+ });
+
+ window.myRadar.update();
+ });
+
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('click', function() {
+ var colorName = colorNames[config.data.datasets.length % colorNames.length];
+ var newColor = window.chartColors[colorName];
+
+ var newDataset = {
+ label: 'Dataset ' + config.data.datasets.length,
+ borderColor: newColor,
+ backgroundColor: color(newColor).alpha(0.2).rgbString(),
+ pointBorderColor: newColor,
+ data: [],
+ };
+
+ for (var index = 0; index < config.data.labels.length; ++index) {
+ newDataset.data.push(randomScalingFactor());
+ }
+
+ config.data.datasets.push(newDataset);
+ window.myRadar.update();
+ });
+
+ document.getElementById('addData').addEventListener('click', function() {
+ if (config.data.datasets.length > 0) {
+ config.data.labels.push('dataset #' + config.data.labels.length);
+
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data.push(randomScalingFactor());
+ });
+
+ window.myRadar.update();
+ }
+ });
+
+ document.getElementById('removeDataset').addEventListener('click', function() {
+ config.data.datasets.splice(0, 1);
+ window.myRadar.update();
+ });
+
+ document.getElementById('removeData').addEventListener('click', function() {
+ config.data.labels.pop(); // remove the label first
+
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data.pop();
+ });
+
+ window.myRadar.update();
+ });
+ </script>
</body>
</html>
<html>
<head>
- <title>Scatter Chart</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>
+ <title>Scatter Chart</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 scatterChartData = {
- datasets: [{
- label: "My First dataset",
- borderColor: window.chartColors.red,
- backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
- data: [{
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }]
- }, {
- label: "My Second dataset",
- borderColor: window.chartColors.blue,
- backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
- data: [{
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }]
- }]
- };
+ <div style="width:75%">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
+ var color = Chart.helpers.color;
+ var scatterChartData = {
+ datasets: [{
+ label: 'My First dataset',
+ borderColor: window.chartColors.red,
+ backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+ data: [{
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }]
+ }, {
+ label: 'My Second dataset',
+ borderColor: window.chartColors.blue,
+ backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
+ data: [{
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }]
+ }]
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myScatter = Chart.Scatter(ctx, {
- data: scatterChartData,
- options: {
- title: {
- display: true,
- text: 'Chart.js Scatter Chart'
- },
- }
- });
- };
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myScatter = Chart.Scatter(ctx, {
+ data: scatterChartData,
+ options: {
+ title: {
+ display: true,
+ text: 'Chart.js Scatter Chart'
+ },
+ }
+ });
+ };
- document.getElementById('randomizeData').addEventListener('click', function() {
- scatterChartData.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return {
- x: randomScalingFactor(),
- y: randomScalingFactor()
- };
- });
- });
- window.myScatter.update();
- });
- </script>
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ scatterChartData.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return {
+ x: randomScalingFactor(),
+ y: randomScalingFactor()
+ };
+ });
+ });
+ window.myScatter.update();
+ });
+ </script>
</body>
</html>
var color = Chart.helpers.color;
var scatterChartData = {
datasets: [{
- label: "My First dataset",
- xAxisID: "x-axis-1",
- yAxisID: "y-axis-1",
+ label: 'My First dataset',
+ xAxisID: 'x-axis-1',
+ yAxisID: 'y-axis-1',
borderColor: window.chartColors.red,
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
data: [{
y: randomScalingFactor(),
}]
}, {
- label: "My Second dataset",
- xAxisID: "x-axis-1",
- yAxisID: "y-axis-2",
+ label: 'My Second dataset',
+ xAxisID: 'x-axis-1',
+ yAxisID: 'y-axis-2',
borderColor: window.chartColors.blue,
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
data: [{
};
window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
+ var ctx = document.getElementById('canvas').getContext('2d');
window.myScatter = Chart.Scatter(ctx, {
data: scatterChartData,
options: {
},
scales: {
xAxes: [{
- position: "bottom",
+ position: 'bottom',
gridLines: {
- zeroLineColor: "rgba(0,0,0,1)"
+ zeroLineColor: 'rgba(0,0,0,1)'
}
}],
yAxes: [{
- type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+ type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
- position: "left",
- id: "y-axis-1",
+ position: 'left',
+ id: 'y-axis-1',
}, {
- type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+ type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
- position: "right",
+ position: 'right',
reverse: true,
- id: "y-axis-2",
+ id: 'y-axis-2',
// grid line settings
gridLines: {
var category = createCategory(item);
var children = category.getElementsByClassName('items')[0];
- (item.items || []).forEach(function(item) {
- children.appendChild(createEntry(item));
+ (item.items || []).forEach(function(item2) {
+ children.appendChild(createEntry(item2));
});
categories.appendChild(category);
<html>
<head>
- <title>Legend Point Style</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;
- }
- .chart-container {
- width: 500px;
- margin-left: 40px;
- margin-right: 40px;
- }
- .container {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- }
- </style>
+ <title>Legend Point Style</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;
+ }
+ .chart-container {
+ width: 500px;
+ margin-left: 40px;
+ margin-right: 40px;
+ }
+ .container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ </style>
</head>
<body>
- <div class="container">
- <div class="chart-container">
- <canvas id="chart-legend-normal"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-legend-pointstyle"></canvas>
- </div>
- </div>
- <script>
- var color = Chart.helpers.color;
- function createConfig(colorName) {
- return {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
- borderColor: window.chartColors[colorName],
- borderWidth: 1,
- pointStyle: 'rectRot',
- pointRadius: 5,
- pointBorderColor: 'rgb(0, 0, 0)'
- }]
- },
- options: {
- responsive: true,
- legend: {
- labels: {
- usePointStyle: false
- }
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Value'
- }
- }]
- },
- title: {
- display: true,
- text: 'Normal Legend'
- }
- }
- };
- }
+ <div class="container">
+ <div class="chart-container">
+ <canvas id="chart-legend-normal"></canvas>
+ </div>
+ <div class="chart-container">
+ <canvas id="chart-legend-pointstyle"></canvas>
+ </div>
+ </div>
+ <script>
+ var color = Chart.helpers.color;
+ function createConfig(colorName) {
+ return {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
+ borderColor: window.chartColors[colorName],
+ borderWidth: 1,
+ pointStyle: 'rectRot',
+ pointRadius: 5,
+ pointBorderColor: 'rgb(0, 0, 0)'
+ }]
+ },
+ options: {
+ responsive: true,
+ legend: {
+ labels: {
+ usePointStyle: false
+ }
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ }
+ }]
+ },
+ title: {
+ display: true,
+ text: 'Normal Legend'
+ }
+ }
+ };
+ }
- function createPointStyleConfig(colorName) {
- var config = createConfig(colorName);
- config.options.legend.labels.usePointStyle = true;
- config.options.title.text = 'Point Style Legend';
- return config;
- }
+ function createPointStyleConfig(colorName) {
+ var config = createConfig(colorName);
+ config.options.legend.labels.usePointStyle = true;
+ config.options.title.text = 'Point Style Legend';
+ return config;
+ }
- window.onload = function() {
- [{
- id: 'chart-legend-normal',
- config: createConfig('red')
- }, {
- id: 'chart-legend-pointstyle',
- config: createPointStyleConfig('blue')
- }].forEach(function(details) {
- var ctx = document.getElementById(details.id).getContext('2d');
- new Chart(ctx, details.config)
- })
- };
- </script>
+ window.onload = function() {
+ [{
+ id: 'chart-legend-normal',
+ config: createConfig('red')
+ }, {
+ id: 'chart-legend-pointstyle',
+ config: createPointStyleConfig('blue')
+ }].forEach(function(details) {
+ var ctx = document.getElementById(details.id).getContext('2d');
+ new Chart(ctx, details.config);
+ });
+ };
+ </script>
</body>
</html>
<html>
<head>
- <title>Legend Positions</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;
- }
- .chart-container {
- width: 500px;
- margin-left: 40px;
- margin-right: 40px;
- }
- .container {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- }
- </style>
+ <title>Legend Positions</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;
+ }
+ .chart-container {
+ width: 500px;
+ margin-left: 40px;
+ margin-right: 40px;
+ }
+ .container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ </style>
</head>
<body>
- <div class="container">
- <div class="chart-container">
- <canvas id="chart-legend-top"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-legend-right"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-legend-bottom"></canvas>
- </div>
- <div class="chart-container">
- <canvas id="chart-legend-left"></canvas>
- </div>
- </div>
- <script>
- var color = Chart.helpers.color;
- function createConfig(legendPosition, colorName) {
- return {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
- borderColor: window.chartColors[colorName],
- borderWidth: 1
- }]
- },
- options: {
- responsive: true,
- legend: {
- position: legendPosition,
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Value'
- }
- }]
- },
- title: {
- display: true,
- text: 'Legend Position: ' + legendPosition
- }
- }
- };
- }
+ <div class="container">
+ <div class="chart-container">
+ <canvas id="chart-legend-top"></canvas>
+ </div>
+ <div class="chart-container">
+ <canvas id="chart-legend-right"></canvas>
+ </div>
+ <div class="chart-container">
+ <canvas id="chart-legend-bottom"></canvas>
+ </div>
+ <div class="chart-container">
+ <canvas id="chart-legend-left"></canvas>
+ </div>
+ </div>
+ <script>
+ var color = Chart.helpers.color;
+ function createConfig(legendPosition, colorName) {
+ return {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
+ borderColor: window.chartColors[colorName],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true,
+ legend: {
+ position: legendPosition,
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ }
+ }]
+ },
+ title: {
+ display: true,
+ text: 'Legend Position: ' + legendPosition
+ }
+ }
+ };
+ }
- window.onload = function() {
- [{
- id: 'chart-legend-top',
- legendPosition: 'top',
- color: 'red'
- }, {
- id: 'chart-legend-right',
- legendPosition: 'right',
- color: 'blue'
- }, {
- id: 'chart-legend-bottom',
- legendPosition: 'bottom',
- color: 'green'
- }, {
- id: 'chart-legend-left',
- legendPosition: 'left',
- color: 'yellow'
- }].forEach(function(details) {
- var ctx = document.getElementById(details.id).getContext('2d');
- var config = createConfig(details.legendPosition, details.color);
- new Chart(ctx, config)
- })
- };
- </script>
+ window.onload = function() {
+ [{
+ id: 'chart-legend-top',
+ legendPosition: 'top',
+ color: 'red'
+ }, {
+ id: 'chart-legend-right',
+ legendPosition: 'right',
+ color: 'blue'
+ }, {
+ id: 'chart-legend-bottom',
+ legendPosition: 'bottom',
+ color: 'green'
+ }, {
+ id: 'chart-legend-left',
+ legendPosition: 'left',
+ color: 'yellow'
+ }].forEach(function(details) {
+ var ctx = document.getElementById(details.id).getContext('2d');
+ var config = createConfig(details.legendPosition, details.color);
+ new Chart(ctx, config);
+ });
+ };
+ </script>
</body>
</html>
<html>
<head>
- <title>Chart with xAxis Filtering</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>
+ <title>Chart with xAxis Filtering</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>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 50 * (Math.random() > 0.5 ? 1 : 1)) + 50;
+ };
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 50 * (Math.random() > 0.5 ? 1 : 1)) + 50;
- };
+ var config = {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ fill: false,
+ borderColor: window.chartColors.red,
+ backgroundColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: 'My Second dataset',
+ fill: false,
+ borderColor: window.chartColors.blue,
+ backgroundColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - X-Axis Filter'
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ ticks: {
+ callback: function(dataLabel, index) {
+ // Hide the label of every 2nd dataset. return null to hide the grid line too
+ return index % 2 === 0 ? dataLabel : '';
+ }
+ }
+ }],
+ yAxes: [{
+ display: true,
+ beginAtZero: false
+ }]
+ }
+ }
+ };
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- fill: false,
- borderColor: window.chartColors.red,
- backgroundColor: window.chartColors.red,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- label: "My Second dataset",
- fill: false,
- borderColor: window.chartColors.blue,
- backgroundColor: window.chartColors.blue,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:"Chart.js Line Chart - X-Axis Filter"
- },
- scales: {
- xAxes: [{
- display: true,
- ticks: {
- callback: function(dataLabel, index) {
- // Hide the label of every 2nd dataset. return null to hide the grid line too
- return index % 2 === 0 ? dataLabel : '';
- }
- }
- }],
- yAxes: [{
- display: true,
- beginAtZero: false
- }]
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
- </script>
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
</body>
</html>
<html>
<head>
- <title>Grid Lines Display Settings</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;
- }
- .chart-container {
- width: 500px;
- margin-left: 40px;
- margin-right: 40px;
- margin-bottom: 40px;
- }
- .container {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- }
- </style>
+ <title>Grid Lines Display Settings</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;
+ }
+ .chart-container {
+ width: 500px;
+ margin-left: 40px;
+ margin-right: 40px;
+ margin-bottom: 40px;
+ }
+ .container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ </style>
</head>
<body>
- <div class="container"></div>
- <script>
- function createConfig(gridlines, title) {
- return {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- backgroundColor: window.chartColors.red,
- borderColor: window.chartColors.red,
- data: [10, 30, 39, 20, 25, 34, 0],
- fill: false,
- }, {
- label: "My Second dataset",
- fill: false,
- backgroundColor: window.chartColors.blue,
- borderColor: window.chartColors.blue,
- data: [18, 33, 22, 19, 11, 39, 30],
- }]
- },
- options: {
- responsive: true,
- title:{
- display: true,
- text: title
- },
- scales: {
- xAxes: [{
- gridLines: gridlines
- }],
- yAxes: [{
- gridLines: gridlines,
- ticks: {
- min: 0,
- max: 100,
- stepSize: 10
- }
- }]
- }
- }
- };
- }
+ <div class="container"></div>
+ <script>
+ function createConfig(gridlines, title) {
+ return {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [10, 30, 39, 20, 25, 34, 0],
+ fill: false,
+ }, {
+ label: 'My Second dataset',
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [18, 33, 22, 19, 11, 39, 30],
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: title
+ },
+ scales: {
+ xAxes: [{
+ gridLines: gridlines
+ }],
+ yAxes: [{
+ gridLines: gridlines,
+ ticks: {
+ min: 0,
+ max: 100,
+ stepSize: 10
+ }
+ }]
+ }
+ }
+ };
+ }
- window.onload = function() {
- var container = document.querySelector('.container');
+ window.onload = function() {
+ var container = document.querySelector('.container');
- [{
- title: 'Display: true',
- gridLines: {
- display: true
- }
- }, {
- title: 'Display: false',
- gridLines: {
- display: false
- }
- }, {
- title: 'Display: false, no border',
- gridLines: {
- display: false,
- drawBorder: false
- }
- }, {
- title: 'DrawOnChartArea: false',
- gridLines: {
- display: true,
- drawBorder: true,
- drawOnChartArea: false,
- }
- }, {
- title: 'DrawTicks: false',
- gridLines: {
- display: true,
- drawBorder: true,
- drawOnChartArea: true,
- drawTicks: false,
- }
- }].forEach(function(details) {
- var div = document.createElement('div');
- div.classList.add('chart-container');
+ [{
+ title: 'Display: true',
+ gridLines: {
+ display: true
+ }
+ }, {
+ title: 'Display: false',
+ gridLines: {
+ display: false
+ }
+ }, {
+ title: 'Display: false, no border',
+ gridLines: {
+ display: false,
+ drawBorder: false
+ }
+ }, {
+ title: 'DrawOnChartArea: false',
+ gridLines: {
+ display: true,
+ drawBorder: true,
+ drawOnChartArea: false,
+ }
+ }, {
+ title: 'DrawTicks: false',
+ gridLines: {
+ display: true,
+ drawBorder: true,
+ drawOnChartArea: true,
+ drawTicks: false,
+ }
+ }].forEach(function(details) {
+ var div = document.createElement('div');
+ div.classList.add('chart-container');
- var canvas = document.createElement('canvas');
- div.appendChild(canvas);
- container.appendChild(div);
+ var canvas = document.createElement('canvas');
+ div.appendChild(canvas);
+ container.appendChild(div);
- var ctx = canvas.getContext('2d');
- var config = createConfig(details.gridLines, details.title);
- new Chart(ctx, config);
- });
- };
- </script>
+ var ctx = canvas.getContext('2d');
+ var config = createConfig(details.gridLines, details.title);
+ new Chart(ctx, config);
+ });
+ };
+ </script>
</body>
</html>
<html>
<head>
- <title>Grid Lines Style Settings</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>
+ <title>Grid Lines Style Settings</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>
- <script>
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- backgroundColor: window.chartColors.red,
- borderColor: window.chartColors.red,
- data: [10, 30, 39, 20, 25, 34, -10],
- fill: false,
- }, {
- label: "My Second dataset",
- fill: false,
- backgroundColor: window.chartColors.blue,
- borderColor: window.chartColors.blue,
- data: [18, 33, 22, 19, 11, 39, 30],
- }]
- },
- options: {
- responsive: true,
- title:{
- display: true,
- text: 'Grid Line Settings'
- },
- scales: {
- yAxes: [{
- gridLines: {
- drawBorder: false,
- color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
- },
- ticks: {
- min: 0,
- max: 100,
- stepSize: 10
- }
- }]
- }
- }
- };
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var config = {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [10, 30, 39, 20, 25, 34, -10],
+ fill: false,
+ }, {
+ label: 'My Second dataset',
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [18, 33, 22, 19, 11, 39, 30],
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Grid Line Settings'
+ },
+ scales: {
+ yAxes: [{
+ gridLines: {
+ drawBorder: false,
+ color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
+ },
+ ticks: {
+ min: 0,
+ max: 100,
+ stepSize: 10
+ }
+ }]
+ }
+ }
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
- </script>
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
</body>
</html>
<html>
<head>
- <title>Suggested Min/Max Settings</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>
+ <title>Suggested Min/Max Settings</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>
- <script>
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- backgroundColor: window.chartColors.red,
- borderColor: window.chartColors.red,
- data: [10, 30, 39, 20, 25, 34, -10],
- fill: false,
- }, {
- label: "My Second dataset",
- fill: false,
- backgroundColor: window.chartColors.blue,
- borderColor: window.chartColors.blue,
- data: [18, 33, 22, 19, 11, 39, 30],
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Min and Max Settings'
- },
- scales: {
- yAxes: [{
- ticks: {
- // the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
- suggestedMin: 10,
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var config = {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [10, 30, 39, 20, 25, 34, -10],
+ fill: false,
+ }, {
+ label: 'My Second dataset',
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [18, 33, 22, 19, 11, 39, 30],
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Min and Max Settings'
+ },
+ scales: {
+ yAxes: [{
+ ticks: {
+ // the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
+ suggestedMin: 10,
- // the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
- suggestedMax: 50
- }
- }]
- }
- }
- };
+ // the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
+ suggestedMax: 50
+ }
+ }]
+ }
+ }
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
- </script>
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
</body>
</html>
<html>
<head>
- <title>Min/Max Settings</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>
+ <title>Min/Max Settings</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>
- <script>
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- backgroundColor: window.chartColors.red,
- borderColor: window.chartColors.red,
- data: [10, 30, 50, 20, 25, 44, -10],
- fill: false,
- }, {
- label: "My Second dataset",
- fill: false,
- backgroundColor: window.chartColors.blue,
- borderColor: window.chartColors.blue,
- data: [100, 33, 22, 19, 11, 49, 30],
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Min and Max Settings'
- },
- scales: {
- yAxes: [{
- ticks: {
- min: 10,
- max: 50
- }
- }]
- }
- }
- };
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var config = {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [10, 30, 50, 20, 25, 44, -10],
+ fill: false,
+ }, {
+ label: 'My Second dataset',
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [100, 33, 22, 19, 11, 49, 30],
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Min and Max Settings'
+ },
+ scales: {
+ yAxes: [{
+ ticks: {
+ min: 10,
+ max: 50
+ }
+ }]
+ }
+ }
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
- </script>
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
</body>
</html>
<html>
<head>
- <title>Line Chart</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>
+ <title>Line Chart</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>
- <br>
- <br>
- <button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
-
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- backgroundColor: window.chartColors.red,
- borderColor: window.chartColors.red,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- fill: false,
- }, {
- label: "My Second dataset",
- fill: false,
- backgroundColor: window.chartColors.blue,
- borderColor: window.chartColors.blue,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Chart.js Line Chart'
- },
- tooltips: {
- mode: 'index',
- intersect: false,
- },
- hover: {
- mode: 'nearest',
- intersect: true
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Value'
- },
- ticks: {
- min: 0,
- max: 100,
-
- // forces step size to be 5 units
- stepSize: 5
- }
- }]
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
-
- document.getElementById('randomizeData').addEventListener('click', function() {
- config.data.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
- });
-
- window.myLine.update();
- });
-
- var colorNames = Object.keys(window.chartColors);
- document.getElementById('addDataset').addEventListener('click', function() {
- var colorName = colorNames[config.data.datasets.length % colorNames.length];
- var newColor = window.chartColors[colorName];
- var newDataset = {
- label: 'Dataset ' + config.data.datasets.length,
- backgroundColor: newColor,
- borderColor: newColor,
- data: [],
- fill: false
- };
-
- for (var index = 0; index < config.data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- config.data.datasets.push(newDataset);
- window.myLine.update();
- });
-
- document.getElementById('addData').addEventListener('click', function() {
- if (config.data.datasets.length > 0) {
- var month = MONTHS[config.data.labels.length % MONTHS.length];
- config.data.labels.push(month);
-
- config.data.datasets.forEach(function(dataset) {
- dataset.data.push(randomScalingFactor());
- });
-
- window.myLine.update();
- }
- });
-
- document.getElementById('removeDataset').addEventListener('click', function() {
- config.data.datasets.splice(0, 1);
- window.myLine.update();
- });
-
- document.getElementById('removeData').addEventListener('click', function() {
- config.data.labels.splice(-1, 1); // remove the label first
-
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- });
-
- window.myLine.update();
- });
-
- </script>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <br>
+ <br>
+ <button id="randomizeData">Randomize Data</button>
+ <button id="addDataset">Add Dataset</button>
+ <button id="removeDataset">Remove Dataset</button>
+ <button id="addData">Add Data</button>
+ <button id="removeData">Remove Data</button>
+ <script>
+ var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
+
+ var config = {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ fill: false,
+ }, {
+ label: 'My Second dataset',
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart'
+ },
+ tooltips: {
+ mode: 'index',
+ intersect: false,
+ },
+ hover: {
+ mode: 'nearest',
+ intersect: true
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ },
+ ticks: {
+ min: 0,
+ max: 100,
+
+ // forces step size to be 5 units
+ stepSize: 5
+ }
+ }]
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
+
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
+ });
+
+ window.myLine.update();
+ });
+
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('click', function() {
+ var colorName = colorNames[config.data.datasets.length % colorNames.length];
+ var newColor = window.chartColors[colorName];
+ var newDataset = {
+ label: 'Dataset ' + config.data.datasets.length,
+ backgroundColor: newColor,
+ borderColor: newColor,
+ data: [],
+ fill: false
+ };
+
+ for (var index = 0; index < config.data.labels.length; ++index) {
+ newDataset.data.push(randomScalingFactor());
+ }
+
+ config.data.datasets.push(newDataset);
+ window.myLine.update();
+ });
+
+ document.getElementById('addData').addEventListener('click', function() {
+ if (config.data.datasets.length > 0) {
+ var month = MONTHS[config.data.labels.length % MONTHS.length];
+ config.data.labels.push(month);
+
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data.push(randomScalingFactor());
+ });
+
+ window.myLine.update();
+ }
+ });
+
+ document.getElementById('removeDataset').addEventListener('click', function() {
+ config.data.datasets.splice(0, 1);
+ window.myLine.update();
+ });
+
+ document.getElementById('removeData').addEventListener('click', function() {
+ config.data.labels.splice(-1, 1); // remove the label first
+
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data.pop();
+ });
+
+ window.myLine.update();
+ });
+
+ </script>
</body>
</html>
<html>
<head>
- <title>Logarithmic Line Chart</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>
+ <title>Logarithmic Line Chart</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 randomScalingFactor = function() {
- return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
- };
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
+ };
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- backgroundColor: window.chartColors.red,
- borderColor: window.chartColors.red,
- fill: false,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- }, {
- label: "My Second dataset",
- backgroundColor: window.chartColors.blue,
- borderColor: window.chartColors.blue,
- fill: false,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Chart.js Line Chart - Logarithmic'
- },
- scales: {
- xAxes: [{
- display: true,
- }],
- yAxes: [{
- display: true,
- type: 'logarithmic',
- }]
- }
- }
- };
+ var config = {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }, {
+ label: 'My Second dataset',
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Logarithmic'
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ }],
+ yAxes: [{
+ display: true,
+ type: 'logarithmic',
+ }]
+ }
+ }
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
- document.getElementById('randomizeData').addEventListener('click', function() {
- config.data.datasets.forEach(function(dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
- });
+ });
- window.myLine.update();
- });
- </script>
+ window.myLine.update();
+ });
+ </script>
</body>
</html>
<html>
<head>
- <title>Scatter Chart</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>
+ <title>Scatter Chart</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>
- <script>
- var color = Chart.helpers.color;
- var scatterChartData = {
- datasets: [{
- borderColor: window.chartColors.red,
- backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
- label: "V(node2)",
+ <div style="width:75%">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var color = Chart.helpers.color;
+ var scatterChartData = {
+ datasets: [{
+ borderColor: window.chartColors.red,
+ backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+ label: 'V(node2)',
data: [{
x: 1,
y: -1.711e-2,
}, {
x: 1000,
y: -3.596e1,
- },]
- }]
- };
+ }]
+ }]
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myScatter = Chart.Scatter(ctx, {
- data: scatterChartData,
- options: {
- title: {
- display: true,
- text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
- },
- scales: {
- xAxes: [{
- type: 'logarithmic',
- position: 'bottom',
- ticks: {
- userCallback: function(tick) {
- var remain = tick / (Math.pow(10, Math.floor(Chart.helpers.log10(tick))));
- if (remain === 1 || remain === 2 || remain === 5) {
- return tick.toString() + "Hz";
- }
- return '';
- },
- },
- scaleLabel: {
- labelString: 'Frequency',
- display: true,
- }
- }],
- yAxes: [{
- type: 'linear',
- ticks: {
- userCallback: function(tick) {
- return tick.toString() + "dB";
- }
- },
- scaleLabel: {
- labelString: 'Voltage',
- display: true
- }
- }]
- }
- }
- });
- };
- </script>
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myScatter = Chart.Scatter(ctx, {
+ data: scatterChartData,
+ options: {
+ title: {
+ display: true,
+ text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
+ },
+ scales: {
+ xAxes: [{
+ type: 'logarithmic',
+ position: 'bottom',
+ ticks: {
+ userCallback: function(tick) {
+ var remain = tick / (Math.pow(10, Math.floor(Chart.helpers.log10(tick))));
+ if (remain === 1 || remain === 2 || remain === 5) {
+ return tick.toString() + 'Hz';
+ }
+ return '';
+ },
+ },
+ scaleLabel: {
+ labelString: 'Frequency',
+ display: true,
+ }
+ }],
+ yAxes: [{
+ type: 'linear',
+ ticks: {
+ userCallback: function(tick) {
+ return tick.toString() + 'dB';
+ }
+ },
+ scaleLabel: {
+ labelString: 'Voltage',
+ display: true
+ }
+ }]
+ }
+ }
+ });
+ };
+ </script>
</body>
</html>
<html>
<head>
- <title>Line Chart</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>
+ <title>Line Chart</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:90%;">
- <canvas id="canvas"></canvas>
- </div>
- <script>
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
+ <div style="width:90%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
- var config = {
- type: 'line',
- data: {
- labels: [["June","2015"], "July", "August", "September", "October", "November", "December", ["January","2016"],"February", "March", "April", "May"],
- datasets: [{
- label: "My First dataset",
- fill: false,
- backgroundColor: window.chartColors.red,
- borderColor: window.chartColors.red,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ]
- }, {
- label: "My Second dataset",
- fill: false,
- backgroundColor: window.chartColors.blue,
- borderColor: window.chartColors.blue,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Chart with Multiline Labels'
- },
- }
- };
+ var config = {
+ type: 'line',
+ data: {
+ labels: [['June', '2015'], 'July', 'August', 'September', 'October', 'November', 'December', ['January', '2016'], 'February', 'March', 'April', 'May'],
+ datasets: [{
+ label: 'My First dataset',
+ fill: false,
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: 'My Second dataset',
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Chart with Multiline Labels'
+ },
+ }
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
- </script>
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
</body>
</html>
<html>
<head>
- <title>Line Chart</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>
+ <title>Line Chart</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>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
- var config = {
- type: 'line',
- data: {
- xLabels: ["January", "February", "March", "April", "May", "June", "July"],
- yLabels: ['', 'Request Added', 'Request Viewed', 'Request Accepted', 'Request Solved', 'Solving Confirmed'],
- datasets: [{
- label: "My First dataset",
- data: ['', 'Request Added', 'Request Added', 'Request Added', 'Request Viewed', 'Request Viewed', 'Request Viewed'],
- fill: false,
- borderColor: window.chartColors.red,
- backgroundColor: window.chartColors.red
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Chart with Non Numeric Y Axis'
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- type: 'category',
- position: 'left',
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Request State'
- },
- ticks: {
- reverse: true
- }
- }]
- }
- }
- };
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var config = {
+ type: 'line',
+ data: {
+ xLabels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ yLabels: ['', 'Request Added', 'Request Viewed', 'Request Accepted', 'Request Solved', 'Solving Confirmed'],
+ datasets: [{
+ label: 'My First dataset',
+ data: ['', 'Request Added', 'Request Added', 'Request Added', 'Request Viewed', 'Request Viewed', 'Request Viewed'],
+ fill: false,
+ borderColor: window.chartColors.red,
+ backgroundColor: window.chartColors.red
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Chart with Non Numeric Y Axis'
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ type: 'category',
+ position: 'left',
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Request State'
+ },
+ ticks: {
+ reverse: true
+ }
+ }]
+ }
+ }
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
- </script>
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
</body>
</html>
<script src="../../../dist/Chart.js"></script>
<script src="../../utils.js"></script>
<style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
</style>
</head>
type: 'bar',
data: {
labels: [
- newDateString(0),
- newDateString(1),
- newDateString(2),
- newDateString(3),
- newDateString(4),
- newDateString(5),
+ newDateString(0),
+ newDateString(1),
+ newDateString(2),
+ newDateString(3),
+ newDateString(4),
+ newDateString(5),
newDateString(6)
],
datasets: [{
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
}, {
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
}, {
borderColor: window.chartColors.green,
fill: false,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
- }, ]
+ }]
},
options: {
- title: {
- text:"Chart.js Combo Time Scale"
- },
+ title: {
+ text: 'Chart.js Combo Time Scale'
+ },
scales: {
xAxes: [{
- type: "time",
+ type: 'time',
display: true,
time: {
format: timeFormat,
};
window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
+ var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
<body>
<div style="width:1000px">
<canvas id="chart1"></canvas>
- <div>
+ </div>
<br>
<br>
Chart Type:
}
function randomBar(date, lastClose) {
- var open = randomNumber(lastClose * .95, lastClose * 1.05);
- var close = randomNumber(open * .95, open * 1.05);
- var high = randomNumber(Math.max(open, close), Math.max(open, close) * 1.1);
- var low = randomNumber(Math.min(open, close) * .9, Math.min(open, close));
+ var open = randomNumber(lastClose * 0.95, lastClose * 1.05);
+ var close = randomNumber(open * 0.95, open * 1.05);
return {
t: date.valueOf(),
y: close
}
}
- var ctx = document.getElementById("chart1").getContext("2d");
+ var ctx = document.getElementById('chart1').getContext('2d');
ctx.canvas.width = 1000;
ctx.canvas.height = 300;
var cfg = {
data: {
labels: labels,
datasets: [{
- label: "CHRT - Chart.js Corporation",
+ label: 'CHRT - Chart.js Corporation',
data: data,
type: 'line',
pointRadius: 0,
document.getElementById('update').addEventListener('click', function() {
var type = document.getElementById('type').value;
- chart.config.data.datasets[0].type = type;
+ chart.config.data.datasets[0].type = type;
chart.update();
});
<script src="../../../dist/Chart.js"></script>
<script src="../../utils.js"></script>
<style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
</style>
</head>
type: 'line',
data: {
datasets: [{
- label: "Dataset with string point data",
+ label: 'Dataset with string point data',
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
fill: false,
y: randomScalingFactor()
}],
}, {
- label: "Dataset with date object point data",
+ label: 'Dataset with date object point data',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
fill: false,
},
options: {
responsive: true,
- title:{
- display:true,
- text:"Chart.js Time Point Data"
+ title: {
+ display: true,
+ text: 'Chart.js Time Point Data'
},
scales: {
xAxes: [{
- type: "time",
+ type: 'time',
display: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
- ticks: {
- major: {
- fontStyle: "bold",
- fontColor: "#FF0000"
- }
- }
+ ticks: {
+ major: {
+ fontStyle: 'bold',
+ fontColor: '#FF0000'
+ }
+ }
}],
yAxes: [{
display: true,
};
window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
+ var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
window.myLine.update();
});
+ // TODO : fix issue with addData
+ // See https://github.com/chartjs/Chart.js/issues/5197
+ // The Add Data button for this sample has no effect.
+ // An error is logged in the console.
document.getElementById('addData').addEventListener('click', function() {
if (config.data.datasets.length > 0) {
- var numTicks = myLine.scales['x-axis-0'].ticksAsTimestamps.length;
- var lastTime = numTicks ? moment(myLine.scales['x-axis-0'].ticksAsTimestamps[numTicks - 1]) : moment();
+ var numTicks = window.myLine.scales['x-axis-0'].ticksAsTimestamps.length;
+ var lastTime = numTicks ? moment(window.myLine.scales['x-axis-0'].ticksAsTimestamps[numTicks - 1]) : moment();
+
var newTime = lastTime
.clone()
.add(1, 'day')
});
document.getElementById('removeData').addEventListener('click', function() {
- config.data.datasets.forEach(function(dataset, datasetIndex) {
+ config.data.datasets.forEach(function(dataset) {
dataset.data.pop();
});
<script src="../../../dist/Chart.js"></script>
<script src="../../utils.js"></script>
<style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
</style>
</head>
return moment().add(days, 'd').format(timeFormat);
}
- function newTimestamp(days) {
- return moment().add(days, 'd').unix();
- }
-
var color = Chart.helpers.color;
var config = {
type: 'line',
newDate(6)
],
datasets: [{
- label: "My First dataset",
+ label: 'My First dataset',
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
fill: false,
randomScalingFactor()
],
}, {
- label: "My Second dataset",
+ label: 'My Second dataset',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
fill: false,
randomScalingFactor()
],
}, {
- label: "Dataset with point data",
+ label: 'Dataset with point data',
backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
borderColor: window.chartColors.green,
fill: false,
}]
},
options: {
- title:{
- text: "Chart.js Time Scale"
- },
+ title: {
+ text: 'Chart.js Time Scale'
+ },
scales: {
xAxes: [{
- type: "time",
+ type: 'time',
time: {
format: timeFormat,
// round: 'day'
display: true,
labelString: 'Date'
}
- }, ],
+ }],
yAxes: [{
scaleLabel: {
display: true,
};
window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
+ var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
var colorNames = Object.keys(window.chartColors);
document.getElementById('addDataset').addEventListener('click', function() {
var colorName = colorNames[config.data.datasets.length % colorNames.length];
- var newColor = window.chartColors[colorName]
+ var newColor = window.chartColors[colorName];
var newDataset = {
label: 'Dataset ' + config.data.datasets.length,
borderColor: newColor,
config.data.labels.push(newDate(config.data.labels.length));
for (var index = 0; index < config.data.datasets.length; ++index) {
- if (typeof config.data.datasets[index].data[0] === "object") {
+ if (typeof config.data.datasets[index].data[0] === 'object') {
config.data.datasets[index].data.push({
x: newDate(config.data.datasets[index].data.length),
y: randomScalingFactor(),
document.getElementById('removeData').addEventListener('click', function() {
config.data.labels.splice(-1, 1); // remove the label first
- config.data.datasets.forEach(function(dataset, datasetIndex) {
+ config.data.datasets.forEach(function(dataset) {
dataset.data.pop();
});
<html>
<head>
- <title>Toggle Scale Type</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>
+ <title>Toggle Scale Type</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="toggleScale">Toggle Scale Type</button>
- <script>
- var randomScalingFactor = function() {
- return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
- };
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="toggleScale">Toggle Scale Type</button>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
+ };
- var type = 'linear';
+ var type = 'linear';
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- backgroundColor: window.chartColors.red,
- borderColor: window.chartColors.red,
- fill: false,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- }, {
- label: "My Second dataset",
- backgroundColor: window.chartColors.blue,
- borderColor: window.chartColors.blue,
- fill: false,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- }]
- },
- options: {
- responsive: true,
- title:{
- display: true,
- text: 'Chart.js Line Chart - ' + type
- },
- scales: {
- xAxes: [{
- display: true,
- }],
- yAxes: [{
- display: true,
- type: type
- }]
- }
- }
- };
+ var config = {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }, {
+ label: 'My Second dataset',
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - ' + type
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ }],
+ yAxes: [{
+ display: true,
+ type: type
+ }]
+ }
+ }
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
- document.getElementById('toggleScale').addEventListener('click', function() {
- type = type === 'linear' ? 'logarithmic' : 'linear';
- window.myLine.options.title.text = 'Chart.js Line Chart - ' + type;
- window.myLine.options.scales.yAxes[0] = {
- display: true,
- type: type
- }
+ document.getElementById('toggleScale').addEventListener('click', function() {
+ type = type === 'linear' ? 'logarithmic' : 'linear';
+ window.myLine.options.title.text = 'Chart.js Line Chart - ' + type;
+ window.myLine.options.scales.yAxes[0] = {
+ display: true,
+ type: type
+ };
- window.myLine.update();
- });
- </script>
+ window.myLine.update();
+ });
+ </script>
</body>
</html>
var MIN_XY = -150;
var MAX_XY = 100;
- var presets = window.chartColors;
var utils = Samples.utils;
utils.srand(110);
options: options
});
+ // eslint-disable-next-line no-unused-vars
function randomize() {
chart.data.datasets.forEach(function(dataset) {
- dataset.data = generateData()
+ 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();
return {
type: 'line',
data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
- label: "Dataset",
+ label: 'Dataset',
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.red,
data: [10, 30, 46, 2, 8, 50, 0],
},
options: {
responsive: true,
- title:{
+ title: {
display: true,
text: 'Sample tooltip with border'
},
var ctx = canvas.getContext('2d');
var config = createConfig();
new Chart(ctx, config);
- console.log(config);
};
</script>
</body>
<html>
<head>
- <title>Tooltip Hooks</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>
+ <title>Tooltip Hooks</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>
- <script>
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- borderColor: window.chartColors.red,
- backgroundColor: window.chartColors.red,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- fill: false,
- }, {
- label: "My Second dataset",
- borderColor: window.chartColors.blue,
- backgroundColor: window.chartColors.blue,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor()
- ],
- fill: false,
- }]
- },
- options: {
- responsive: true,
- title:{
- display: true,
- text: "Chart.js Line Chart - Custom Information in Tooltip"
- },
- tooltips: {
- mode: 'index',
- callbacks: {
- // Use the footer callback to display the sum of the items showing in the tooltip
- footer: function(tooltipItems, data) {
- var sum = 0;
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var config = {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ borderColor: window.chartColors.red,
+ backgroundColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ fill: false,
+ }, {
+ label: 'My Second dataset',
+ borderColor: window.chartColors.blue,
+ backgroundColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ fill: false,
+ }]
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Custom Information in Tooltip'
+ },
+ tooltips: {
+ mode: 'index',
+ callbacks: {
+ // Use the footer callback to display the sum of the items showing in the tooltip
+ footer: function(tooltipItems, data) {
+ var sum = 0;
- tooltipItems.forEach(function(tooltipItem) {
- sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
- });
- return 'Sum: ' + sum;
- },
- },
- footerFontStyle: 'normal'
- },
- hover: {
- mode: 'index',
- intersect: true
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- show: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- show: true,
- labelString: 'Value'
- }
- }]
- }
- }
- };
+ tooltipItems.forEach(function(tooltipItem) {
+ sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+ });
+ return 'Sum: ' + sum;
+ },
+ },
+ footerFontStyle: 'normal'
+ },
+ hover: {
+ mode: 'index',
+ intersect: true
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ show: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ show: true,
+ labelString: 'Value'
+ }
+ }]
+ }
+ }
+ };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
- </script>
+ window.onload = function() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
</body>
</html>
<body>
<div id="canvas-holder1" style="width:75%;">
- <canvas id="chart"/>
+ <canvas id="chart"></canvas>
</div>
<script>
Chart.defaults.global.pointHitDetectionRadius = 1;
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
- tooltipEl.innerHTML = "<table></table>"
+ tooltipEl.innerHTML = '<table></table>';
this._chart.canvas.parentNode.appendChild(tooltipEl);
}
var colors = tooltip.labelColors[i];
var style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
- style += '; border-width: 2px';
+ style += '; border-width: 2px';
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
innerHtml += '<tr><td>' + span + body + '</td></tr>';
});
};
var lineChartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
- label: "My First dataset",
+ label: 'My First dataset',
borderColor: window.chartColors.red,
pointBackgroundColor: window.chartColors.red,
fill: false,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}, {
- label: "My Second dataset",
+ label: 'My Second dataset',
borderColor: window.chartColors.blue,
pointBackgroundColor: window.chartColors.blue,
fill: false,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}]
};
window.onload = function() {
- var chartEl = document.getElementById("chart");
+ var chartEl = document.getElementById('chart');
window.myLine = new Chart(chartEl, {
type: 'line',
data: lineChartData,
options: {
- title:{
- display:true,
- text:'Chart.js Line Chart - Custom Tooltips'
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Custom Tooltips'
},
tooltips: {
enabled: false,
<html>
<head>
- <title>Pie Chart with Custom Tooltips</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <title>Pie Chart with Custom Tooltips</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../utils.js"></script>
- <style>
+ <style>
#canvas-holder {
- width: 100%;
- margin-top: 50px;
- text-align: center;
+ width: 100%;
+ margin-top: 50px;
+ text-align: center;
}
#chartjs-tooltip {
opacity: 1;
height: 10px;
margin-right: 10px;
}
- </style>
+ </style>
</head>
<body>
</div>
<script>
- Chart.defaults.global.tooltips.custom = function(tooltip) {
- // Tooltip Element
- var tooltipEl = document.getElementById('chartjs-tooltip');
-
- // Hide if no tooltip
- if (tooltip.opacity === 0) {
- tooltipEl.style.opacity = 0;
- return;
- }
+ Chart.defaults.global.tooltips.custom = function(tooltip) {
+ // Tooltip Element
+ var tooltipEl = document.getElementById('chartjs-tooltip');
+
+ // Hide if no tooltip
+ if (tooltip.opacity === 0) {
+ tooltipEl.style.opacity = 0;
+ return;
+ }
- // Set caret Position
- tooltipEl.classList.remove('above', 'below', 'no-transform');
- if (tooltip.yAlign) {
- tooltipEl.classList.add(tooltip.yAlign);
- } else {
- tooltipEl.classList.add('no-transform');
- }
+ // Set caret Position
+ tooltipEl.classList.remove('above', 'below', 'no-transform');
+ if (tooltip.yAlign) {
+ tooltipEl.classList.add(tooltip.yAlign);
+ } else {
+ tooltipEl.classList.add('no-transform');
+ }
- function getBody(bodyItem) {
- return bodyItem.lines;
- }
+ function getBody(bodyItem) {
+ return bodyItem.lines;
+ }
- // Set Text
- if (tooltip.body) {
- var titleLines = tooltip.title || [];
- var bodyLines = tooltip.body.map(getBody);
-
- var innerHtml = '<thead>';
-
- titleLines.forEach(function(title) {
- innerHtml += '<tr><th>' + title + '</th></tr>';
- });
- innerHtml += '</thead><tbody>';
-
- bodyLines.forEach(function(body, i) {
- var colors = tooltip.labelColors[i];
- var style = 'background:' + colors.backgroundColor;
- style += '; border-color:' + colors.borderColor;
- style += '; border-width: 2px';
- var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
- innerHtml += '<tr><td>' + span + body + '</td></tr>';
- });
- innerHtml += '</tbody>';
-
- var tableRoot = tooltipEl.querySelector('table');
- tableRoot.innerHTML = innerHtml;
- }
+ // Set Text
+ if (tooltip.body) {
+ var titleLines = tooltip.title || [];
+ var bodyLines = tooltip.body.map(getBody);
+
+ var innerHtml = '<thead>';
+
+ titleLines.forEach(function(title) {
+ innerHtml += '<tr><th>' + title + '</th></tr>';
+ });
+ innerHtml += '</thead><tbody>';
+
+ bodyLines.forEach(function(body, i) {
+ var colors = tooltip.labelColors[i];
+ var style = 'background:' + colors.backgroundColor;
+ style += '; border-color:' + colors.borderColor;
+ style += '; border-width: 2px';
+ var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
+ innerHtml += '<tr><td>' + span + body + '</td></tr>';
+ });
+ innerHtml += '</tbody>';
+
+ var tableRoot = tooltipEl.querySelector('table');
+ tableRoot.innerHTML = innerHtml;
+ }
- var positionY = this._chart.canvas.offsetTop;
- var positionX = this._chart.canvas.offsetLeft;
-
- // Display, position, and set styles for font
- tooltipEl.style.opacity = 1;
- tooltipEl.style.left = positionX + tooltip.caretX + 'px';
- tooltipEl.style.top = positionY + tooltip.caretY + 'px';
- tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
- tooltipEl.style.fontSize = tooltip.bodyFontSize;
- tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
- tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
- };
-
- var config = {
- type: 'pie',
- data: {
- datasets: [{
- data: [300, 50, 100, 40, 10],
- backgroundColor: [
- window.chartColors.red,
- window.chartColors.orange,
- window.chartColors.yellow,
- window.chartColors.green,
- window.chartColors.blue,
- ],
- }],
- labels: [
- "Red",
- "Orange",
- "Yellow",
- "Green",
- "Blue"
- ]
- },
- options: {
- responsive: true,
- legend: {
- display: false
+ var positionY = this._chart.canvas.offsetTop;
+ var positionX = this._chart.canvas.offsetLeft;
+
+ // Display, position, and set styles for font
+ tooltipEl.style.opacity = 1;
+ tooltipEl.style.left = positionX + tooltip.caretX + 'px';
+ tooltipEl.style.top = positionY + tooltip.caretY + 'px';
+ tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
+ tooltipEl.style.fontSize = tooltip.bodyFontSize;
+ tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
+ tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
+ };
+
+ var config = {
+ type: 'pie',
+ data: {
+ datasets: [{
+ data: [300, 50, 100, 40, 10],
+ backgroundColor: [
+ window.chartColors.red,
+ window.chartColors.orange,
+ window.chartColors.yellow,
+ window.chartColors.green,
+ window.chartColors.blue,
+ ],
+ }],
+ labels: [
+ 'Red',
+ 'Orange',
+ 'Yellow',
+ 'Green',
+ 'Blue'
+ ]
},
- tooltips: {
- enabled: false,
+ options: {
+ responsive: true,
+ legend: {
+ display: false
+ },
+ tooltips: {
+ enabled: false,
+ }
}
- }
- };
+ };
- window.onload = function() {
- var ctx = document.getElementById("chart-area").getContext("2d");
+ window.onload = function() {
+ var ctx = document.getElementById('chart-area').getContext('2d');
window.myPie = new Chart(ctx, config);
- };
+ };
</script>
</body>
<div class="chartjs-tooltip" id="tooltip-1"></div>
</div>
<script>
- var customTooltips = function (tooltip) {
- $(this._chart.canvas).css("cursor", "pointer");
+ var customTooltips = function(tooltip) {
+ $(this._chart.canvas).css('cursor', 'pointer');
var positionY = this._chart.canvas.offsetTop;
var positionX = this._chart.canvas.offsetLeft;
- $(".chartjs-tooltip").css({
+ $('.chartjs-tooltip').css({
opacity: 0,
});
}
if (tooltip.dataPoints.length > 0) {
- tooltip.dataPoints.forEach(function (dataPoint) {
- var content = [dataPoint.xLabel, dataPoint.yLabel].join(": ");
- var $tooltip = $("#tooltip-" + dataPoint.datasetIndex);
+ tooltip.dataPoints.forEach(function(dataPoint) {
+ var content = [dataPoint.xLabel, dataPoint.yLabel].join(': ');
+ var $tooltip = $('#tooltip-' + dataPoint.datasetIndex);
$tooltip.html(content);
$tooltip.css({
opacity: 1,
- top: positionY + dataPoint.y + "px",
- left: positionX + dataPoint.x + "px",
+ top: positionY + dataPoint.y + 'px',
+ left: positionX + dataPoint.x + 'px',
});
});
}
};
var color = Chart.helpers.color;
var lineChartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
- label: "My First dataset",
+ label: 'My First dataset',
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
borderColor: window.chartColors.red,
pointBackgroundColor: window.chartColors.red,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}, {
- label: "My Second dataset",
+ label: 'My Second dataset',
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
borderColor: window.chartColors.blue,
pointBackgroundColor: window.chartColors.blue,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}]
};
window.onload = function() {
- var chartEl = document.getElementById("chart1");
- var chart = new Chart(chartEl, {
- type: "line",
+ var chartEl = document.getElementById('chart1');
+ new Chart(chartEl, {
+ type: 'line',
data: lineChartData,
options: {
- title:{
+ title: {
display: true,
- text: "Chart.js - Custom Tooltips using Data Points"
+ text: 'Chart.js - Custom Tooltips using Data Points'
},
tooltips: {
enabled: false,
return {
type: 'line',
data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
- label: "My First dataset",
+ label: 'My First dataset',
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.red,
data: [10, 30, 46, 2, 8, 50, 0],
fill: false,
}, {
- label: "My Second dataset",
+ label: 'My Second dataset',
borderColor: window.chartColors.blue,
backgroundColor: window.chartColors.blue,
data: [7, 49, 46, 13, 25, 30, 22],
},
options: {
responsive: true,
- title:{
+ title: {
display: true,
text: 'Mode: ' + mode + ', intersect = ' + intersect
},
var ctx = canvas.getContext('2d');
var config = createConfig(details.mode, details.intersect);
new Chart(ctx, config);
- })
+ });
};
</script>
</body>
return {
type: 'line',
data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
- label: "My First dataset",
+ label: 'My First dataset',
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.red,
data: [10, 30, 46, 2, 8, 50, 0],
fill: false,
}, {
- label: "My Second dataset",
+ label: 'My Second dataset',
borderColor: window.chartColors.blue,
backgroundColor: window.chartColors.blue,
data: [7, 49, 46, 13, 25, 30, 22],
},
options: {
responsive: true,
- title:{
+ title: {
display: true,
text: 'Tooltip Position: ' + position
},
var ctx = canvas.getContext('2d');
var config = createConfig(position);
new Chart(ctx, config);
- })
+ });
};
</script>
</body>