]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Setup HTML and JS linters for samples (#5195)
authorLoïc Bourgois <loic@bourgois.pro>
Sat, 3 Feb 2018 12:28:54 +0000 (13:28 +0100)
committerSimon Brunel <simonbrunel@users.noreply.github.com>
Sat, 3 Feb 2018 12:28:54 +0000 (13:28 +0100)
60 files changed:
.eslintrc.yml
.htmllintrc [new file with mode: 0644]
gulpfile.js
package.json
samples/.eslintrc.yml [new file with mode: 0644]
samples/advanced/data-labelling.html
samples/advanced/progress-bar.html
samples/charts/area/analyser.js
samples/charts/area/line-boundaries.html
samples/charts/area/line-datasets.html
samples/charts/area/line-stacked.html
samples/charts/area/radar.html
samples/charts/bar/horizontal.html
samples/charts/bar/multi-axis.html
samples/charts/bar/stacked-group.html
samples/charts/bar/stacked.html
samples/charts/bar/vertical.html
samples/charts/bubble.html
samples/charts/combo-bar-line.html
samples/charts/doughnut.html
samples/charts/line/basic.html
samples/charts/line/interpolation-modes.html
samples/charts/line/line-styles.html
samples/charts/line/multi-axis.html
samples/charts/line/point-sizes.html
samples/charts/line/point-styles.html
samples/charts/line/skip-points.html
samples/charts/line/stepped.html
samples/charts/pie.html
samples/charts/polar-area.html
samples/charts/radar-skip-points.html
samples/charts/radar.html
samples/charts/scatter/basic.html
samples/charts/scatter/multi-axis.html
samples/index.html
samples/legend/point-style.html
samples/legend/positioning.html
samples/scales/filtering-labels.html
samples/scales/gridlines-display.html
samples/scales/gridlines-style.html
samples/scales/linear/min-max-suggested.html
samples/scales/linear/min-max.html
samples/scales/linear/step-size.html
samples/scales/logarithmic/line.html
samples/scales/logarithmic/scatter.html
samples/scales/multiline-labels.html
samples/scales/non-numeric-y.html
samples/scales/time/combo.html
samples/scales/time/financial.html
samples/scales/time/line-point-data.html
samples/scales/time/line.html
samples/scales/toggle-scale-type.html
samples/scriptable/bubble.html
samples/tooltips/border.html
samples/tooltips/callbacks.html
samples/tooltips/custom-line.html
samples/tooltips/custom-pie.html
samples/tooltips/custom-points.html
samples/tooltips/interactions.html
samples/tooltips/positioning.html

index 8f9b4af302362fed57d5aad4129308b4fcfd940c..b0d9d5695a9166c3c16382beaf424990abb12086 100644 (file)
@@ -3,3 +3,5 @@ extends: chartjs
 env:
   browser: true
   node: true
+
+plugins: ['html']
diff --git a/.htmllintrc b/.htmllintrc
new file mode 100644 (file)
index 0000000..a6b2097
--- /dev/null
@@ -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
+}
index 09165c8b041539b0e9478187f30b0600c4284f20..21f19645f816abbd25aa8f5189a4efd619dd016e 100644 (file)
@@ -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},
index c7d21043b1a9ebeb6f3444cb7d48af920032fe41..03f3815ccd7b9d7f6b12893a04a8daa450369cb7 100644 (file)
     "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 (file)
index 0000000..9573adb
--- /dev/null
@@ -0,0 +1,9 @@
+globals:
+  $: true
+  Chart: true
+  Samples: true
+  moment: true
+  randomScalingFactor: true
+
+rules:
+  no-new: 0
index 17fc47c8f99d2aa7d50ad889c12b182078c48777..52eb07b8fd327f819613a6439c838b382df4b5db 100644 (file)
 <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>
index d460bc88e2a1c0b1c2b9f7e562d9a9a3f856d323..b97a998ea9522bc2c00b6b7c1a9821faca98e2a9 100644 (file)
@@ -1,96 +1,95 @@
 <!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>
index e4ed8e90b2474320d7e658ecf29aae82e82df0b9..36fd5671692b4150201e0208c791f3acd5f0e794 100644 (file)
@@ -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);
index edadc781c54ff3f3ae61858490625b6e7ffe4d4c..7ac6883bb125da25d124e14a9ff561099a7460fa 100644 (file)
                        });
                });
 
-
+               // 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) {
index 7bc54e3138ac958ac653fc3ce0fc8719ce685ce3..127726e7fb79db56367e604dd2a192742911cf2d 100644 (file)
@@ -38,7 +38,7 @@
                        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();
index 26ee6b18f8f1edc2dcef09121caeae51a28fd0cc..11a143b0b636e09e66b73b4a917241da2b0775ad 100644 (file)
@@ -7,9 +7,9 @@
        <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();
                        });
 
index 1c5a0df9ecd2de99bd35b0f25c8167b16fe98cd2..692984cbfd75e38b70083a0ad6618168b90f4b69 100644 (file)
@@ -41,7 +41,7 @@
                        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) {
index 0cfb78e84d04e4cdd2c3315d47a209fc07b146f0..6450e014d92064c69c57b1fbb28265d43732fc31 100644 (file)
 <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>
index 28755a701a5fd1c8597cf5d6d0daa72edb5a2bf8..c206866a4109032c780a2db4df54456a67668a66 100644 (file)
 <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>
index 624992cfb4ac836150fe8a4547311b2c40b1164d..e3b734b2d17f329845cdb95add13048f0b02234a 100644 (file)
 <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>
index 46d1c4051f3bbcad768f155cd2125743f5d5e206..ca9f0cafb71375b520ff7aabdc6a9882cac4ac18 100644 (file)
 <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>
index 906b4624c39cfc918b3797bb917b028c39cd74dd..e9348b274fdb9de71265bd23f220f61d76484651 100644 (file)
 <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>
index 0df09477f5c0bf93dd22dcf758544214f51bc9f7..092c1fb464b0ccb556105143becf005ffe13c8dc 100644 (file)
 <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>
index 0906029c41de485dbf082f26666b4183557d839c..c99894e22127f44c095258d4ed5aeeec0f856ea2 100644 (file)
 <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>
index b288fe1293f03adc150cc80d136f072ad5d8c278..446dcee4e2e9da1fd683d0592b314de4bd328b7c 100644 (file)
 <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>
index db01ccf743d83bb14d644f83cd3518c9b9b21bcf..8028bee9c51a1bd55b78daacd08709a334e3ef75 100644 (file)
 <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>
index 374da49c0838ec53338182db6299e0c38f2ffc42..b11dd681972ddd0ce5f8f89554d661e52c9faefe 100644 (file)
 <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>
index ed268e1fdb4a23046013d3f2846920490da0309e..3ba9defcdafbf640b4cc32c3639657a9105f79c3 100644 (file)
 <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>
index 2ede74446ae3cb6cebfe468c2015ca24aed5be05..d3569e8552582b9e2d25fd557e0d8d6fe5a86864 100644 (file)
 <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>
index 823c6d3e41c8cc1e0d548cdcbc1fc64242296b8e..53d3db46cbb505c25ea85cccc43fbe7d443a3c83 100644 (file)
 <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>
index 1985d394d236b20a5a4affa3633a9191ccbdf688..2ef46a9cf35b5622f054854b9d307ef31109177a 100644 (file)
@@ -2,95 +2,95 @@
 <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>
index 00aa81fe045137ae77d7cb3a30032ff02f140ef7..aedacce7244db1ad453a46ff0ed36a8ce41fed98 100644 (file)
@@ -2,94 +2,94 @@
 <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>
index ccce87c2dcf1431111de5a4695b28ee29e696978..4ad9708ebd1ce6311d4d264f5510edc7937fc9ca 100644 (file)
@@ -2,9 +2,9 @@
 <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>
index e931cee3fdeb8602d2ba18367a47bdd3e88d7774..ed9aeb77c1ce9bb3bbe96db17d3ad33dd919d9e0 100644 (file)
@@ -2,96 +2,96 @@
 <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>
index 3981651de74432c467d96267a79390053b682ea8..1c40a645181d9d6c691780bd6d672f45eddda661 100644 (file)
 <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>
index ab29b3a0e34039c5063014b6e4f1e86eea67ab34..ab042e2dcd6ff52860715cd4d852a1f103df9643 100644 (file)
 <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>
index fbbb9d972bc1cb8f474ed1fd06ca24f7b0b62a6f..7eda09a7fb4035ec94348eb1f2c8d839d2ece70b 100644 (file)
 <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>
index c5e36e9d99cf9eca9864880b07e4aad970f7177b..6ac227c3b954c25b1e7f9a2a762b2e73ed49ebbf 100644 (file)
 <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>
index cbf3bf73a8affd8e96f3f95833bf0938d3fe947d..6c20b98f0debdcbabef1d48c1ea48821a2514e37 100644 (file)
@@ -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: {
                                },
                                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: {
index d855662f093efba2882ba134761b69a972fb8fa6..b9e13c364c44ad92a07ea521ebfa4ac9eb45d017 100644 (file)
@@ -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);
index 727c7a6d85c2498acde9c45d81e9ea3f97539660..b7acea4bd84221ea1fff977f28980cb36d561693 100644 (file)
 <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>
index 97bc70fa04790480721e1327bcd9e40484bc8576..5bd2259cfb120c0d8b91a7f1f147ee7473e52e61 100644 (file)
 <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>
index 4af89025eb497c64536fbdf76f5c940a584d73e7..4b4b51724e4a83a14c38821d97dc29e485bc4270 100644 (file)
@@ -2,92 +2,90 @@
 <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>
index c21469329b82851cd27393644763e7ba5d7f8f81..8e30bdcdbf4c1f53e40fb029b3b5d6727b2b85e7 100644 (file)
 <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>
index f945cb266d4e9e52d378747ebff000fe6af9c39e..d2c00ecdda2f57781a9e3eb0cffb703b1458548e 100644 (file)
@@ -2,68 +2,68 @@
 <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>
index 18059548a7fe00783076f4b2f08f175d6fd1532d..10d546ac2970f10bd6dfb1f699e99bed92d65d4f 100644 (file)
@@ -2,66 +2,66 @@
 <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>
index 868bc7b1db53d7ea75b24d27f777dc255620dd6e..feafbd7a62c390e2951dc307287f0a3bf0cc5322 100644 (file)
@@ -2,63 +2,63 @@
 <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>
index ced0b6c3ca32a106e717002819c50377d7034867..fc0af2ee3e0ae1b90b6f83bf8d71351fff651123 100644 (file)
 <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>
index 2c961abd2e14d9f38b4af56c63a611cca34b6bdc..72fd9b07dba3215e824ed801ddeb5beb5e0bf349 100644 (file)
@@ -2,96 +2,96 @@
 <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>
index a4bd577c27306b54e72a07840edfec9078b3dab1..5f266a5cda1fd836ab5f7e63f4c1bddf1f9f8932 100644 (file)
@@ -2,29 +2,29 @@
 <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>
index b7bb041e973787d25b1b1e397aa2ad3df802db89..0f8af2a7df1740350219972955fe2168e6f959b5 100644 (file)
@@ -2,85 +2,85 @@
 <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>
index 07e319b7090716b53506327f6f283ee4adfbe180..b3bfc5eec92ffab941faabc802a820361aa5cea1 100644 (file)
@@ -2,72 +2,71 @@
 <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>
index ddcc5b326bfacdea309bf0a0ad2255877522fbad..d435e74c69cc26a8178e18fffbf776eaf3ff9ec4 100644 (file)
@@ -7,11 +7,11 @@
        <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);
 
                };
index 3d91dfa56b7d1738b0dca9dcab369db09f601367..792eef55306f333ead2bfd6d083dfd20db6e4a1c 100644 (file)
@@ -18,7 +18,7 @@
 <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
@@ -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();
                });
 
index 3483c4545358af6c1cd4900aacbb7c05e95d74d6..e18be91f3d8416eadbda21a69feb2964e623489c 100644 (file)
@@ -7,11 +7,11 @@
        <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>
 
@@ -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,
                        },
                        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();
                        });
 
index 0cca931e0091ca3c6d7cf7c5b398eb326f57d758..70a6978af18a3065d95389eec6bba08b48e315ea 100644 (file)
@@ -7,11 +7,11 @@
        <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',
@@ -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,
                                }]
                        },
                        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();
                        });
 
index b46687e823a1af99a7caffa62ee6270495c46136..92c943288e3ac83a4e8831029630afb15b282012 100644 (file)
@@ -2,98 +2,98 @@
 <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>
index feaf1ecb84cd42bcd4558c78e3fcf06aa82d2491..a8ce1f4743c42c52373a84062d4f77a80d859c6c 100644 (file)
@@ -24,7 +24,6 @@
                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();
index 25c649e548e3632190bc733cf002a7ce35f35c2e..0742be0c5f51f90738a3e3fcdb08324b8f184248 100644 (file)
@@ -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);
                };
        </script>
 </body>
index 590edd1a236cd557b5135a0f95483eca267ab2cf..0aa336bd5f3455a4962fb16ccee980d3774f26d8 100644 (file)
 <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>
index 011762907c45699c87c961d92790bb8368e7be23..96cfac6fd3cfc5cb9cfca72873843007de4b03fa 100644 (file)
@@ -35,7 +35,7 @@
 
 <body>
        <div id="canvas-holder1" style="width:75%;">
-               <canvas id="chart"/>
+               <canvas id="chart"></canvas>
        </div>
        <script>
                Chart.defaults.global.pointHitDetectionRadius = 1;
@@ -47,7 +47,7 @@
                        if (!tooltipEl) {
                                tooltipEl = document.createElement('div');
                                tooltipEl.id = 'chartjs-tooltip';
-                               tooltipEl.innerHTML = "<table></table>"
+                               tooltipEl.innerHTML = '<table></table>';
                                this._chart.canvas.parentNode.appendChild(tooltipEl);
                        }
 
@@ -85,7 +85,7 @@
                                        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,
index 7bfbc56f1e9d9a876b862c8d057c5b8c1c86dc25..017a5f66d84766d95799476ac49d0e2b867b88c9 100644 (file)
@@ -2,15 +2,15 @@
 <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;
@@ -31,7 +31,7 @@
                        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>
 
index 1bb64da4fa51054c6f7619a8ad5552f174c04a21..f779f62f9c77b41fba1762933c69a05ceb2d64d1 100644 (file)
                <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,
index 17cacf42a0055f542a8efef2851ea84297bc4e3f..3b1229e287188cd8a62154f3fd593144ca85ebd1 100644 (file)
                        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: 'Mode: ' + mode + ', intersect = ' + intersect
                                        },
                                var ctx = canvas.getContext('2d');
                                var config = createConfig(details.mode, details.intersect);
                                new Chart(ctx, config);
-                       })
+                       });
                };
        </script>
 </body>
index 696584b067751144e68d449a23940284af85ad86..f98cd638ced7059c02e09812eabc0491af53966e 100644 (file)
                        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);
-                       })
+                       });
                };
        </script>
 </body>