diff --git a/.eslintrc.yml b/.eslintrc.yml index 8f9b4af30..b0d9d5695 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -3,3 +3,5 @@ extends: chartjs env: browser: true node: true + +plugins: ['html'] diff --git a/.htmllintrc b/.htmllintrc new file mode 100644 index 000000000..a6b209703 --- /dev/null +++ b/.htmllintrc @@ -0,0 +1,18 @@ +{ + "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 +} diff --git a/gulpfile.js b/gulpfile.js index 09165c8b0..21f19645f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -3,7 +3,6 @@ var concat = require('gulp-concat'); 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'); @@ -20,6 +19,7 @@ var collapse = require('bundle-collapser/plugin'); 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 @@ -49,12 +49,13 @@ gulp.task('bower', bowerTask); 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); @@ -153,8 +154,9 @@ function packageTask() { .pipe(gulp.dest(outDir)); } -function lintTask() { +function lintJsTask() { var files = [ + 'samples/**/*.html', 'samples/**/*.js', 'src/**/*.js', 'test/**/*.js' @@ -176,6 +178,13 @@ function lintTask() { .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; @@ -189,11 +198,6 @@ function docsTask(done) { }); } -function validHTMLTask() { - return gulp.src('samples/*.html') - .pipe(htmlv()); -} - function startTest() { return [ {pattern: './test/fixtures/**/*.json', included: false}, diff --git a/package.json b/package.json index c7d21043b..03f3815cc 100644 --- a/package.json +++ b/package.json @@ -17,13 +17,14 @@ "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", diff --git a/samples/.eslintrc.yml b/samples/.eslintrc.yml new file mode 100644 index 000000000..9573adbcd --- /dev/null +++ b/samples/.eslintrc.yml @@ -0,0 +1,9 @@ +globals: + $: true + Chart: true + Samples: true + moment: true + randomScalingFactor: true + +rules: + no-new: 0 diff --git a/samples/advanced/data-labelling.html b/samples/advanced/data-labelling.html index 17fc47c8f..52eb07b8f 100644 --- a/samples/advanced/data-labelling.html +++ b/samples/advanced/data-labelling.html @@ -3,130 +3,129 @@ - Labelling Data Points - - - + Labelling Data Points + + + -
- -
- - + document.getElementById('randomizeData').addEventListener('click', function() { + barChartData.datasets.forEach(function(dataset) { + dataset.data = dataset.data.map(function() { + return randomScalingFactor(); + }); + }); + window.myBar.update(); + }); + diff --git a/samples/advanced/progress-bar.html b/samples/advanced/progress-bar.html index d460bc88e..b97a998ea 100644 --- a/samples/advanced/progress-bar.html +++ b/samples/advanced/progress-bar.html @@ -1,96 +1,95 @@ - Animation Callbacks - - - + Animation Callbacks + + + -
- - -
-
-
- - + window.myLine.update(); + }); + - \ No newline at end of file + diff --git a/samples/charts/area/analyser.js b/samples/charts/area/analyser.js index e4ed8e90b..36fd56716 100644 --- a/samples/charts/area/analyser.js +++ b/samples/charts/area/analyser.js @@ -4,7 +4,7 @@ (function() { Chart.plugins.register({ - id: 'samples_filler_analyser', + id: 'samples-filler-analyser', beforeInit: function(chart, options) { this.element = document.getElementById(options.target); diff --git a/samples/charts/area/line-boundaries.html b/samples/charts/area/line-boundaries.html index edadc781c..7ac6883bb 100644 --- a/samples/charts/area/line-boundaries.html +++ b/samples/charts/area/line-boundaries.html @@ -94,15 +94,16 @@ }); }); - + // 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) { diff --git a/samples/charts/area/line-datasets.html b/samples/charts/area/line-datasets.html index 7bc54e313..127726e7f 100644 --- a/samples/charts/area/line-datasets.html +++ b/samples/charts/area/line-datasets.html @@ -38,7 +38,7 @@ return utils.numbers(inputs); } - function generateLabels(config) { + function generateLabels() { return utils.months({count: inputs.count}); } @@ -122,7 +122,7 @@ filler: { propagate: false }, - samples_filler_analyser: { + 'samples-filler-analyser': { target: 'chart-analyser' } } @@ -134,18 +134,21 @@ 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(); diff --git a/samples/charts/area/line-stacked.html b/samples/charts/area/line-stacked.html index 26ee6b18f..11a143b0b 100644 --- a/samples/charts/area/line-stacked.html +++ b/samples/charts/area/line-stacked.html @@ -7,9 +7,9 @@ @@ -26,70 +26,70 @@ - - + Horizontal Bar Chart + + + -
- -
- - - - - - + window.myHorizontalBar.update(); + }); + diff --git a/samples/charts/bar/multi-axis.html b/samples/charts/bar/multi-axis.html index 28755a701..c206866a4 100644 --- a/samples/charts/bar/multi-axis.html +++ b/samples/charts/bar/multi-axis.html @@ -2,107 +2,107 @@ - Bar Chart Multi Axis - - - + Bar Chart Multi Axis + + + -
- -
- - + document.getElementById('randomizeData').addEventListener('click', function() { + barChartData.datasets.forEach(function(dataset) { + dataset.data = dataset.data.map(function() { + return randomScalingFactor(); + }); + }); + window.myBar.update(); + }); + diff --git a/samples/charts/bar/stacked-group.html b/samples/charts/bar/stacked-group.html index 624992cfb..e3b734b2d 100644 --- a/samples/charts/bar/stacked-group.html +++ b/samples/charts/bar/stacked-group.html @@ -2,104 +2,104 @@ - Stacked Bar Chart with Groups - - - + Stacked Bar Chart with Groups + + + -
- -
- - + document.getElementById('randomizeData').addEventListener('click', function() { + barChartData.datasets.forEach(function(dataset) { + dataset.data = dataset.data.map(function() { + return randomScalingFactor(); + }); + }); + window.myBar.update(); + }); + diff --git a/samples/charts/bar/stacked.html b/samples/charts/bar/stacked.html index 46d1c4051..ca9f0cafb 100644 --- a/samples/charts/bar/stacked.html +++ b/samples/charts/bar/stacked.html @@ -2,101 +2,101 @@ - Stacked Bar Chart - - - + Stacked Bar Chart + + + -
- -
- - + document.getElementById('randomizeData').addEventListener('click', function() { + barChartData.datasets.forEach(function(dataset) { + dataset.data = dataset.data.map(function() { + return randomScalingFactor(); + }); + }); + window.myBar.update(); + }); + diff --git a/samples/charts/bar/vertical.html b/samples/charts/bar/vertical.html index 906b4624c..e9348b274 100644 --- a/samples/charts/bar/vertical.html +++ b/samples/charts/bar/vertical.html @@ -2,143 +2,143 @@ - Bar Chart - - - + Bar Chart + + + -
- -
- - - - - - + window.myBar.update(); + }); + diff --git a/samples/charts/bubble.html b/samples/charts/bubble.html index 0df09477f..092c1fb46 100644 --- a/samples/charts/bubble.html +++ b/samples/charts/bubble.html @@ -2,190 +2,190 @@ - Bubble Chart - - - + Bubble Chart + + + -
- -
- - - - - - + window.myChart.update(); + }); + diff --git a/samples/charts/combo-bar-line.html b/samples/charts/combo-bar-line.html index 0906029c4..c99894e22 100644 --- a/samples/charts/combo-bar-line.html +++ b/samples/charts/combo-bar-line.html @@ -2,100 +2,100 @@ - Combo Bar-Line Chart - - - + Combo Bar-Line Chart + + + -
- -
- - + document.getElementById('randomizeData').addEventListener('click', function() { + chartData.datasets.forEach(function(dataset) { + dataset.data = dataset.data.map(function() { + return randomScalingFactor(); + }); + }); + window.myMixedChart.update(); + }); + diff --git a/samples/charts/doughnut.html b/samples/charts/doughnut.html index b288fe129..446dcee4e 100644 --- a/samples/charts/doughnut.html +++ b/samples/charts/doughnut.html @@ -2,143 +2,143 @@ - Doughnut Chart - - - + Doughnut Chart + + + -
- -
- - - - - - + window.myDoughnut.update(); + }); + diff --git a/samples/charts/line/basic.html b/samples/charts/line/basic.html index db01ccf74..8028bee9c 100644 --- a/samples/charts/line/basic.html +++ b/samples/charts/line/basic.html @@ -2,162 +2,162 @@ - Line Chart - - - + Line Chart + + + -
- -
-
-
- - - - - - + window.myLine.update(); + }); + diff --git a/samples/charts/line/interpolation-modes.html b/samples/charts/line/interpolation-modes.html index 374da49c0..b11dd6819 100644 --- a/samples/charts/line/interpolation-modes.html +++ b/samples/charts/line/interpolation-modes.html @@ -2,102 +2,102 @@ - Line Chart - Cubic interpolation mode - - - + Line Chart - Cubic interpolation mode + + + -
- -
-
-
- - + diff --git a/samples/charts/line/line-styles.html b/samples/charts/line/line-styles.html index ed268e1fd..3ba9defcd 100644 --- a/samples/charts/line/line-styles.html +++ b/samples/charts/line/line-styles.html @@ -2,110 +2,110 @@ - Line Styles - - - + Line Styles + + + -
- -
- + window.onload = function() { + var ctx = document.getElementById('canvas').getContext('2d'); + window.myLine = new Chart(ctx, config); + }; + diff --git a/samples/charts/line/multi-axis.html b/samples/charts/line/multi-axis.html index 2ede74446..d3569e855 100644 --- a/samples/charts/line/multi-axis.html +++ b/samples/charts/line/multi-axis.html @@ -2,103 +2,103 @@ - Line Chart Multiple Axes - - - + Line Chart Multiple Axes + + + -
- -
- - + window.myLine.update(); + }); + diff --git a/samples/charts/line/point-sizes.html b/samples/charts/line/point-sizes.html index 823c6d3e4..53d3db46c 100644 --- a/samples/charts/line/point-sizes.html +++ b/samples/charts/line/point-sizes.html @@ -2,129 +2,128 @@ - Different Point Sizes - - - + Different Point Sizes + + + -
- -
- + window.onload = function() { + var ctx = document.getElementById('canvas').getContext('2d'); + window.myLine = new Chart(ctx, config); + }; + diff --git a/samples/charts/line/point-styles.html b/samples/charts/line/point-styles.html index 1985d394d..2ef46a9cf 100644 --- a/samples/charts/line/point-styles.html +++ b/samples/charts/line/point-styles.html @@ -2,95 +2,95 @@ - Line Chart - - - + Line Chart + + + -
-
- + var ctx = canvas.getContext('2d'); + var config = createConfig(pointStyle); + new Chart(ctx, config); + }); + }; + diff --git a/samples/charts/line/skip-points.html b/samples/charts/line/skip-points.html index 00aa81fe0..aedacce72 100644 --- a/samples/charts/line/skip-points.html +++ b/samples/charts/line/skip-points.html @@ -2,94 +2,94 @@ - Line Chart - - - + Line Chart + + + -
- -
- + window.onload = function() { + var ctx = document.getElementById('canvas').getContext('2d'); + window.myLine = new Chart(ctx, config); + }; + diff --git a/samples/charts/line/stepped.html b/samples/charts/line/stepped.html index ccce87c2d..4ad9708eb 100644 --- a/samples/charts/line/stepped.html +++ b/samples/charts/line/stepped.html @@ -2,9 +2,9 @@ - Stepped Line Chart - - + Stepped Line Chart + + + Polar Area Chart + + + -
- -
- - - - + 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(); + }); + diff --git a/samples/charts/radar-skip-points.html b/samples/charts/radar-skip-points.html index ab29b3a0e..ab042e2dc 100644 --- a/samples/charts/radar-skip-points.html +++ b/samples/charts/radar-skip-points.html @@ -2,108 +2,108 @@ - Radar Chart - - - + Radar Chart + + + -
- -
- - + window.myRadar.update(); + }); + diff --git a/samples/charts/radar.html b/samples/charts/radar.html index fbbb9d972..7eda09a7f 100644 --- a/samples/charts/radar.html +++ b/samples/charts/radar.html @@ -2,145 +2,145 @@ - Radar Chart - - - + Radar Chart + + + -
- -
- - - - - - + window.myRadar.update(); + }); + diff --git a/samples/charts/scatter/basic.html b/samples/charts/scatter/basic.html index c5e36e9d9..6ac227c3b 100644 --- a/samples/charts/scatter/basic.html +++ b/samples/charts/scatter/basic.html @@ -2,106 +2,106 @@ - Scatter Chart - - - + 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(); + }); + diff --git a/samples/charts/scatter/multi-axis.html b/samples/charts/scatter/multi-axis.html index cbf3bf73a..6c20b98f0 100644 --- a/samples/charts/scatter/multi-axis.html +++ b/samples/charts/scatter/multi-axis.html @@ -23,9 +23,9 @@ 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: [{ @@ -51,9 +51,9 @@ 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: [{ @@ -82,7 +82,7 @@ }; 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: { @@ -95,22 +95,22 @@ }, 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: { diff --git a/samples/index.html b/samples/index.html index d855662f0..b9e13c364 100644 --- a/samples/index.html +++ b/samples/index.html @@ -47,8 +47,8 @@ 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); diff --git a/samples/legend/point-style.html b/samples/legend/point-style.html index 727c7a6d8..b7acea4bd 100644 --- a/samples/legend/point-style.html +++ b/samples/legend/point-style.html @@ -2,115 +2,115 @@ - Legend Point Style - - - + Legend Point Style + + + -
-
- -
-
- -
-
- + 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); + }); + }; + diff --git a/samples/legend/positioning.html b/samples/legend/positioning.html index 97bc70fa0..5bd2259cf 100644 --- a/samples/legend/positioning.html +++ b/samples/legend/positioning.html @@ -2,120 +2,120 @@ - Legend Positions - - - + Legend Positions + + + -
-
- -
-
- -
-
- -
-
- -
-
- + 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); + }); + }; + diff --git a/samples/scales/filtering-labels.html b/samples/scales/filtering-labels.html index 4af89025e..4b4b51724 100644 --- a/samples/scales/filtering-labels.html +++ b/samples/scales/filtering-labels.html @@ -2,92 +2,90 @@ - Chart with xAxis Filtering - - - + Chart with xAxis Filtering + + + -
- -
- + window.onload = function() { + var ctx = document.getElementById('canvas').getContext('2d'); + window.myLine = new Chart(ctx, config); + }; + diff --git a/samples/scales/gridlines-display.html b/samples/scales/gridlines-display.html index c21469329..8e30bdcdb 100644 --- a/samples/scales/gridlines-display.html +++ b/samples/scales/gridlines-display.html @@ -2,123 +2,123 @@ - Grid Lines Display Settings - - - + Grid Lines Display Settings + + + -
- + var ctx = canvas.getContext('2d'); + var config = createConfig(details.gridLines, details.title); + new Chart(ctx, config); + }); + }; + diff --git a/samples/scales/gridlines-style.html b/samples/scales/gridlines-style.html index f945cb266..d2c00ecdd 100644 --- a/samples/scales/gridlines-style.html +++ b/samples/scales/gridlines-style.html @@ -2,68 +2,68 @@ - Grid Lines Style Settings - - - + Grid Lines Style Settings + + + -
- -
- + window.onload = function() { + var ctx = document.getElementById('canvas').getContext('2d'); + window.myLine = new Chart(ctx, config); + }; + diff --git a/samples/scales/linear/min-max-suggested.html b/samples/scales/linear/min-max-suggested.html index 18059548a..10d546ac2 100644 --- a/samples/scales/linear/min-max-suggested.html +++ b/samples/scales/linear/min-max-suggested.html @@ -2,66 +2,66 @@ - Suggested Min/Max Settings - - - + Suggested Min/Max Settings + + + -
- -
- + window.onload = function() { + var ctx = document.getElementById('canvas').getContext('2d'); + window.myLine = new Chart(ctx, config); + }; + diff --git a/samples/scales/linear/min-max.html b/samples/scales/linear/min-max.html index 868bc7b1d..feafbd7a6 100644 --- a/samples/scales/linear/min-max.html +++ b/samples/scales/linear/min-max.html @@ -2,63 +2,63 @@ - Min/Max Settings - - - + Min/Max Settings + + + -
- -
- + window.onload = function() { + var ctx = document.getElementById('canvas').getContext('2d'); + window.myLine = new Chart(ctx, config); + }; + diff --git a/samples/scales/linear/step-size.html b/samples/scales/linear/step-size.html index ced0b6c3c..fc0af2ee3 100644 --- a/samples/scales/linear/step-size.html +++ b/samples/scales/linear/step-size.html @@ -2,174 +2,174 @@ - Line Chart - - - + Line Chart + + + -
- -
-
-
- - - - - - + window.myLine.update(); + }); + + diff --git a/samples/scales/logarithmic/line.html b/samples/scales/logarithmic/line.html index 2c961abd2..72fd9b07d 100644 --- a/samples/scales/logarithmic/line.html +++ b/samples/scales/logarithmic/line.html @@ -2,96 +2,96 @@ - Logarithmic Line Chart - - - + Logarithmic Line Chart + + + -
- -
- - + window.myLine.update(); + }); + diff --git a/samples/scales/logarithmic/scatter.html b/samples/scales/logarithmic/scatter.html index a4bd577c2..5f266a5cd 100644 --- a/samples/scales/logarithmic/scatter.html +++ b/samples/scales/logarithmic/scatter.html @@ -2,29 +2,29 @@ - Scatter Chart - - - + 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 - 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 + } + }] + } + } + }); + }; + diff --git a/samples/scales/multiline-labels.html b/samples/scales/multiline-labels.html index b7bb041e9..0f8af2a7d 100644 --- a/samples/scales/multiline-labels.html +++ b/samples/scales/multiline-labels.html @@ -2,85 +2,85 @@ - Line Chart - - - + Line Chart + + + -
- -
- + window.onload = function() { + var ctx = document.getElementById('canvas').getContext('2d'); + window.myLine = new Chart(ctx, config); + }; + diff --git a/samples/scales/non-numeric-y.html b/samples/scales/non-numeric-y.html index 07e319b70..b3bfc5eec 100644 --- a/samples/scales/non-numeric-y.html +++ b/samples/scales/non-numeric-y.html @@ -2,72 +2,71 @@ - Line Chart - - - + Line Chart + + + -
- -
- + window.onload = function() { + var ctx = document.getElementById('canvas').getContext('2d'); + window.myLine = new Chart(ctx, config); + }; + diff --git a/samples/scales/time/combo.html b/samples/scales/time/combo.html index ddcc5b326..d435e74c6 100644 --- a/samples/scales/time/combo.html +++ b/samples/scales/time/combo.html @@ -7,11 +7,11 @@ @@ -38,12 +38,12 @@ 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: [{ @@ -52,12 +52,12 @@ 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() ], }, { @@ -66,12 +66,12 @@ 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() ], }, { @@ -81,23 +81,23 @@ 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, @@ -109,7 +109,7 @@ }; window.onload = function() { - var ctx = document.getElementById("canvas").getContext("2d"); + var ctx = document.getElementById('canvas').getContext('2d'); window.myLine = new Chart(ctx, config); }; diff --git a/samples/scales/time/financial.html b/samples/scales/time/financial.html index 3d91dfa56..792eef553 100644 --- a/samples/scales/time/financial.html +++ b/samples/scales/time/financial.html @@ -18,7 +18,7 @@
-
+


Chart Type: @@ -33,10 +33,8 @@ } 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 @@ -55,7 +53,7 @@ } } - var ctx = document.getElementById("chart1").getContext("2d"); + var ctx = document.getElementById('chart1').getContext('2d'); ctx.canvas.width = 1000; ctx.canvas.height = 300; var cfg = { @@ -63,7 +61,7 @@ data: { labels: labels, datasets: [{ - label: "CHRT - Chart.js Corporation", + label: 'CHRT - Chart.js Corporation', data: data, type: 'line', pointRadius: 0, @@ -94,7 +92,7 @@ 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(); }); diff --git a/samples/scales/time/line-point-data.html b/samples/scales/time/line-point-data.html index 3483c4545..e18be91f3 100644 --- a/samples/scales/time/line-point-data.html +++ b/samples/scales/time/line-point-data.html @@ -7,11 +7,11 @@ @@ -38,7 +38,7 @@ 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, @@ -56,7 +56,7 @@ 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, @@ -77,24 +77,24 @@ }, 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, @@ -108,7 +108,7 @@ }; window.onload = function() { - var ctx = document.getElementById("canvas").getContext("2d"); + var ctx = document.getElementById('canvas').getContext('2d'); window.myLine = new Chart(ctx, config); }; @@ -122,10 +122,15 @@ 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') @@ -143,7 +148,7 @@ }); document.getElementById('removeData').addEventListener('click', function() { - config.data.datasets.forEach(function(dataset, datasetIndex) { + config.data.datasets.forEach(function(dataset) { dataset.data.pop(); }); diff --git a/samples/scales/time/line.html b/samples/scales/time/line.html index 0cca931e0..70a6978af 100644 --- a/samples/scales/time/line.html +++ b/samples/scales/time/line.html @@ -7,11 +7,11 @@ @@ -37,10 +37,6 @@ 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', @@ -55,7 +51,7 @@ 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, @@ -69,7 +65,7 @@ randomScalingFactor() ], }, { - label: "My Second dataset", + label: 'My Second dataset', backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(), borderColor: window.chartColors.blue, fill: false, @@ -83,7 +79,7 @@ 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, @@ -103,12 +99,12 @@ }] }, options: { - title:{ - text: "Chart.js Time Scale" - }, + title: { + text: 'Chart.js Time Scale' + }, scales: { xAxes: [{ - type: "time", + type: 'time', time: { format: timeFormat, // round: 'day' @@ -118,7 +114,7 @@ display: true, labelString: 'Date' } - }, ], + }], yAxes: [{ scaleLabel: { display: true, @@ -130,7 +126,7 @@ }; window.onload = function() { - var ctx = document.getElementById("canvas").getContext("2d"); + var ctx = document.getElementById('canvas').getContext('2d'); window.myLine = new Chart(ctx, config); }; @@ -152,7 +148,7 @@ 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, @@ -173,7 +169,7 @@ 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(), @@ -195,7 +191,7 @@ 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(); }); diff --git a/samples/scales/toggle-scale-type.html b/samples/scales/toggle-scale-type.html index b46687e82..92c943288 100644 --- a/samples/scales/toggle-scale-type.html +++ b/samples/scales/toggle-scale-type.html @@ -2,98 +2,98 @@ - Toggle Scale Type - - - + Toggle Scale Type + + + -
- -
- - + window.myLine.update(); + }); + diff --git a/samples/scriptable/bubble.html b/samples/scriptable/bubble.html index feaf1ecb8..a8ce1f474 100644 --- a/samples/scriptable/bubble.html +++ b/samples/scriptable/bubble.html @@ -24,7 +24,6 @@ var MIN_XY = -150; var MAX_XY = 100; - var presets = window.chartColors; var utils = Samples.utils; utils.srand(110); @@ -106,13 +105,15 @@ 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() @@ -120,6 +121,7 @@ chart.update(); } + // eslint-disable-next-line no-unused-vars function removeDataset() { chart.data.datasets.shift(); chart.update(); diff --git a/samples/tooltips/border.html b/samples/tooltips/border.html index 25c649e54..0742be0c5 100644 --- a/samples/tooltips/border.html +++ b/samples/tooltips/border.html @@ -34,9 +34,9 @@ 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], @@ -45,7 +45,7 @@ }, options: { responsive: true, - title:{ + title: { display: true, text: 'Sample tooltip with border' }, @@ -78,7 +78,6 @@ var ctx = canvas.getContext('2d'); var config = createConfig(); new Chart(ctx, config); - console.log(config); }; diff --git a/samples/tooltips/callbacks.html b/samples/tooltips/callbacks.html index 590edd1a2..0aa336bd5 100644 --- a/samples/tooltips/callbacks.html +++ b/samples/tooltips/callbacks.html @@ -2,106 +2,106 @@ - Tooltip Hooks - - - + Tooltip Hooks + + + -
- -
- + window.onload = function() { + var ctx = document.getElementById('canvas').getContext('2d'); + window.myLine = new Chart(ctx, config); + }; + diff --git a/samples/tooltips/custom-line.html b/samples/tooltips/custom-line.html index 011762907..96cfac6fd 100644 --- a/samples/tooltips/custom-line.html +++ b/samples/tooltips/custom-line.html @@ -35,7 +35,7 @@
- +
- + Pie Chart with Custom Tooltips + + - + @@ -43,103 +43,103 @@
diff --git a/samples/tooltips/custom-points.html b/samples/tooltips/custom-points.html index 1bb64da4f..f779f62f9 100644 --- a/samples/tooltips/custom-points.html +++ b/samples/tooltips/custom-points.html @@ -41,13 +41,13 @@
diff --git a/samples/tooltips/positioning.html b/samples/tooltips/positioning.html index 696584b06..f98cd638c 100644 --- a/samples/tooltips/positioning.html +++ b/samples/tooltips/positioning.html @@ -34,15 +34,15 @@ 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], @@ -51,7 +51,7 @@ }, options: { responsive: true, - title:{ + title: { display: true, text: 'Tooltip Position: ' + position }, @@ -78,7 +78,7 @@ var ctx = canvas.getContext('2d'); var config = createConfig(position); new Chart(ctx, config); - }) + }); };