From: etimberg Date: Fri, 21 Oct 2016 03:12:10 +0000 (-0400) Subject: Reorganized sample files into sub directories. Added a helper containing colours... X-Git-Tag: v2.4.0~1^2~14 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=9ad9cd215466e3abb82731f6550d4df80bbc3a84;p=thirdparty%2FChart.js.git Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. --- diff --git a/samples/AnimationCallbacks/progress-bar.html b/samples/AnimationCallbacks/progress-bar.html index fad7bd489..ddfc12e3c 100644 --- a/samples/AnimationCallbacks/progress-bar.html +++ b/samples/AnimationCallbacks/progress-bar.html @@ -3,7 +3,7 @@ Animation Callbacks - + - - - -
- -
-
-
- - - - diff --git a/samples/data_label_combo-bar-line.html b/samples/data_label_combo-bar-line.html deleted file mode 100644 index a5e1e8d37..000000000 --- a/samples/data_label_combo-bar-line.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - Combo Bar-Line Chart - - - - - - -
- -
- - - - - diff --git a/samples/data_labelling.html b/samples/data_labelling.html new file mode 100644 index 000000000..849de80d3 --- /dev/null +++ b/samples/data_labelling.html @@ -0,0 +1,136 @@ + + + + + + Labelling Data Points + + + + + + +
+ +
+ + + + + diff --git a/samples/different-point-sizes.html b/samples/different-point-sizes.html deleted file mode 100644 index 0fb231f52..000000000 --- a/samples/different-point-sizes.html +++ /dev/null @@ -1,154 +0,0 @@ - - - - - Line Chart - - - - - - -
- -
-
-
- - - - - - - diff --git a/samples/doughnut.html b/samples/doughnut.html index 38a9d5782..e2fd662d8 100644 --- a/samples/doughnut.html +++ b/samples/doughnut.html @@ -4,7 +4,7 @@ Doughnut Chart - + + + + +
+ + + + diff --git a/samples/generalScales/filtering-labels.html b/samples/generalScales/filtering-labels.html new file mode 100644 index 000000000..21cb0cc89 --- /dev/null +++ b/samples/generalScales/filtering-labels.html @@ -0,0 +1,93 @@ + + + + + Chart with xAxis Filtering + + + + + + +
+ +
+ + + + diff --git a/samples/generalScales/gridlines.html b/samples/generalScales/gridlines.html new file mode 100644 index 000000000..e133e4e8d --- /dev/null +++ b/samples/generalScales/gridlines.html @@ -0,0 +1,69 @@ + + + + + Suggested Min/Max Settings + + + + + + +
+ +
+ + + + diff --git a/samples/line-non-numeric-y.html b/samples/generalScales/line-non-numeric-y.html similarity index 81% rename from samples/line-non-numeric-y.html rename to samples/generalScales/line-non-numeric-y.html index c0b74a150..3ec760e92 100644 --- a/samples/line-non-numeric-y.html +++ b/samples/generalScales/line-non-numeric-y.html @@ -3,8 +3,8 @@ Line Chart - - + + + + + +
+ +
+ + + + diff --git a/samples/legend/pointstyle.html b/samples/legend/pointstyle.html new file mode 100644 index 000000000..e90b63def --- /dev/null +++ b/samples/legend/pointstyle.html @@ -0,0 +1,120 @@ + + + + + Legend Point Style + + + + + + +
+
+ +
+
+ +
+
+ + + + diff --git a/samples/legend/positions.html b/samples/legend/positions.html new file mode 100644 index 000000000..f1edd7c6f --- /dev/null +++ b/samples/legend/positions.html @@ -0,0 +1,125 @@ + + + + + Legend Positions + + + + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + + diff --git a/samples/line-customTooltips.html b/samples/line-customTooltips.html deleted file mode 100644 index 9272caff8..000000000 --- a/samples/line-customTooltips.html +++ /dev/null @@ -1,146 +0,0 @@ - - - - - Line Chart with Custom Tooltips - - - - - -
- -
- - - - diff --git a/samples/line-legend.html b/samples/line-legend.html deleted file mode 100644 index 201d4c07e..000000000 --- a/samples/line-legend.html +++ /dev/null @@ -1,172 +0,0 @@ - - - - - Line Chart - - - - - - -
- -
-
-
- - - - - - - - - diff --git a/samples/line-logarithmic.html b/samples/line-logarithmic.html deleted file mode 100644 index 290ea43ea..000000000 --- a/samples/line-logarithmic.html +++ /dev/null @@ -1,155 +0,0 @@ - - - - - Line Chart - - - - - - -
- -
- - - - - - - - - diff --git a/samples/line-multiline-labels.html b/samples/line-multiline-labels.html deleted file mode 100644 index b9d08aee7..000000000 --- a/samples/line-multiline-labels.html +++ /dev/null @@ -1,218 +0,0 @@ - - - - - Line Chart - - - - - - -
- -
-
-
- - - - - - - - - - diff --git a/samples/line-stacked-area.html b/samples/line-stacked-area.html deleted file mode 100644 index 26616f5de..000000000 --- a/samples/line-stacked-area.html +++ /dev/null @@ -1,163 +0,0 @@ - - - - - Line Chart - - - - - - -
- -
-
-
- - - - - - - - - diff --git a/samples/line-stepped.html b/samples/line-stepped.html deleted file mode 100644 index f6cebe262..000000000 --- a/samples/line-stepped.html +++ /dev/null @@ -1,224 +0,0 @@ - - - - - Line Chart - - - - - - -
- -
-
-
- - - - - - - - - - diff --git a/samples/line-x-axis-filter.html b/samples/line-x-axis-filter.html deleted file mode 100644 index e90575df5..000000000 --- a/samples/line-x-axis-filter.html +++ /dev/null @@ -1,151 +0,0 @@ - - - - - Chart with xAxis Filtering - - - - - - -
- -
-
-
- - - - - - - - - diff --git a/samples/line.html b/samples/line.html deleted file mode 100644 index 464072ba1..000000000 --- a/samples/line.html +++ /dev/null @@ -1,220 +0,0 @@ - - - - - Line Chart - - - - - - -
- -
-
-
- - - - - - - - - - diff --git a/samples/line/different-point-sizes.html b/samples/line/different-point-sizes.html new file mode 100644 index 000000000..3137367f7 --- /dev/null +++ b/samples/line/different-point-sizes.html @@ -0,0 +1,134 @@ + + + + + Different Point Sizes + + + + + + +
+ +
+ + + + diff --git a/samples/line-cubicInterpolationMode.html b/samples/line/interpolation-modes.html similarity index 78% rename from samples/line-cubicInterpolationMode.html rename to samples/line/interpolation-modes.html index 2d85c95c9..51469c933 100644 --- a/samples/line-cubicInterpolationMode.html +++ b/samples/line/interpolation-modes.html @@ -3,8 +3,8 @@ Line Chart - Cubic interpolation mode - - + + + + + +
+ +
+ + + + diff --git a/samples/line/line-stacked-area.html b/samples/line/line-stacked-area.html new file mode 100644 index 000000000..a194bba3b --- /dev/null +++ b/samples/line/line-stacked-area.html @@ -0,0 +1,188 @@ + + + + + Line Chart + + + + + + +
+ +
+
+
+ + + + + + + + + diff --git a/samples/line/line-stepped.html b/samples/line/line-stepped.html new file mode 100644 index 000000000..94cc61520 --- /dev/null +++ b/samples/line/line-stepped.html @@ -0,0 +1,96 @@ + + + + + Stepped Line Chart + + + + + + +
+ +
+ + + + diff --git a/samples/line/line-styles.html b/samples/line/line-styles.html new file mode 100644 index 000000000..a2c06f935 --- /dev/null +++ b/samples/line/line-styles.html @@ -0,0 +1,115 @@ + + + + + Line Styles + + + + + + +
+ +
+ + + + diff --git a/samples/line-skip-points.html b/samples/line/line.html similarity index 60% rename from samples/line-skip-points.html rename to samples/line/line.html index 3ef275587..980feb747 100644 --- a/samples/line-skip-points.html +++ b/samples/line/line.html @@ -3,10 +3,10 @@ Line Chart - - + + + + + +
+
+ + + + diff --git a/samples/linearScale/min-max-settings.html b/samples/linearScale/min-max-settings.html new file mode 100644 index 000000000..529eb481f --- /dev/null +++ b/samples/linearScale/min-max-settings.html @@ -0,0 +1,64 @@ + + + + + Min/Max Settings + + + + + + +
+ +
+ + + + diff --git a/samples/linearScale/step-size.html b/samples/linearScale/step-size.html new file mode 100644 index 000000000..c65cc9ab4 --- /dev/null +++ b/samples/linearScale/step-size.html @@ -0,0 +1,116 @@ + + + + + Line Chart + + + + + + +
+ +
+
+
+ + + + + + + + + diff --git a/samples/linearScale/suggested-min-max-settings.html b/samples/linearScale/suggested-min-max-settings.html new file mode 100644 index 000000000..54396f92e --- /dev/null +++ b/samples/linearScale/suggested-min-max-settings.html @@ -0,0 +1,67 @@ + + + + + Suggested Min/Max Settings + + + + + + +
+ +
+ + + + diff --git a/samples/logarithmicScale/line-logarithmic.html b/samples/logarithmicScale/line-logarithmic.html new file mode 100644 index 000000000..fe3d5b110 --- /dev/null +++ b/samples/logarithmicScale/line-logarithmic.html @@ -0,0 +1,97 @@ + + + + + Logarithmic Line Chart + + + + + + +
+ +
+ + + + + diff --git a/samples/scatter-logX.html b/samples/logarithmicScale/scatter-logX.html similarity index 76% rename from samples/scatter-logX.html rename to samples/logarithmicScale/scatter-logX.html index 8c7fe2ad0..6864b4090 100644 --- a/samples/scatter-logX.html +++ b/samples/logarithmicScale/scatter-logX.html @@ -3,8 +3,8 @@ Scatter Chart - - + + - - - -
- -
-
- -
- -
- - - - - - diff --git a/samples/pie.html b/samples/pie.html index b376b5abd..2b1578536 100644 --- a/samples/pie.html +++ b/samples/pie.html @@ -4,12 +4,12 @@ Pie Chart - + -
- +
+
@@ -18,12 +18,6 @@ var randomScalingFactor = function() { return Math.round(Math.random() * 100); }; - var randomColorFactor = function() { - return Math.round(Math.random() * 255); - }; - var randomColor = function(opacity) { - return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')'; - }; var config = { type: 'pie', @@ -37,49 +31,20 @@ randomScalingFactor(), ], backgroundColor: [ - "#F7464A", - "#46BFBD", - "#FDB45C", - "#949FB1", - "#4D5360", - ], - }, { - data: [ - randomScalingFactor(), - randomScalingFactor(), - randomScalingFactor(), - randomScalingFactor(), - randomScalingFactor(), - ], - backgroundColor: [ - "#F7464A", - "#46BFBD", - "#FDB45C", - "#949FB1", - "#4D5360", - ], - }, { - data: [ - randomScalingFactor(), - randomScalingFactor(), - randomScalingFactor(), - randomScalingFactor(), - randomScalingFactor(), - ], - backgroundColor: [ - "#F7464A", - "#46BFBD", - "#FDB45C", - "#949FB1", - "#4D5360", + window.chartColors.red, + window.chartColors.orange, + window.chartColors.yellow, + window.chartColors.green, + window.chartColors.blue, ], + label: 'Dataset 1' }], labels: [ "Red", - "Green", + "Orange", "Yellow", - "Grey", - "Dark Grey" + "Green", + "Blue" ] }, options: { @@ -92,27 +57,37 @@ window.myPie = new Chart(ctx, config); }; - $('#randomizeData').click(function() { - $.each(config.data.datasets, function(i, piece) { - $.each(piece.data, function(j, value) { - config.data.datasets[i].data[j] = randomScalingFactor(); - config.data.datasets[i].backgroundColor[j] = randomColor(0.7); + document.getElementById('randomizeData').addEventListener('click', function() { + config.data.datasets.forEach(function(dataset) { + dataset.data = dataset.data.map(function() { + return randomScalingFactor(); }); }); + window.myPie.update(); }); - $('#addDataset').click(function() { + var colorNames = Object.keys(window.chartColors); + document.getElementById('addDataset').addEventListener('click', function() { var newDataset = { - backgroundColor: [randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7)], - data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] + 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.myPie.update(); }); - $('#removeDataset').click(function() { + document.getElementById('removeDataset').addEventListener('click', function() { config.data.datasets.splice(0, 1); window.myPie.update(); }); diff --git a/samples/polar-area.html b/samples/polar-area.html index 16572dd45..0b382c484 100644 --- a/samples/polar-area.html +++ b/samples/polar-area.html @@ -4,7 +4,7 @@ Polar Area Chart - + - - - -
- -
- - - - - - - - - diff --git a/samples/radar/radar-skip-points.html b/samples/radar/radar-skip-points.html new file mode 100644 index 000000000..40ad4779e --- /dev/null +++ b/samples/radar/radar-skip-points.html @@ -0,0 +1,109 @@ + + + + + Radar Chart + + + + + + +
+ +
+ + + + + diff --git a/samples/radar.html b/samples/radar/radar.html similarity index 53% rename from samples/radar.html rename to samples/radar/radar.html index eadcd9eca..98bc7086d 100644 --- a/samples/radar.html +++ b/samples/radar/radar.html @@ -3,8 +3,8 @@ Radar Chart - - + + - - - -
-
- -
-
- - - - - diff --git a/samples/scatter.html b/samples/scatter.html deleted file mode 100644 index af026e7b1..000000000 --- a/samples/scatter.html +++ /dev/null @@ -1,177 +0,0 @@ - - - - - Scatter Chart - - - - - - -
-
- -
-
- - - - - diff --git a/samples/scatter/scatter-multi-axis.html b/samples/scatter/scatter-multi-axis.html new file mode 100644 index 000000000..96edac994 --- /dev/null +++ b/samples/scatter/scatter-multi-axis.html @@ -0,0 +1,143 @@ + + + + + Scatter Chart Multi Axis + + + + + + +
+ +
+ + + + + diff --git a/samples/scatter/scatter.html b/samples/scatter/scatter.html new file mode 100644 index 000000000..c5de6bae0 --- /dev/null +++ b/samples/scatter/scatter.html @@ -0,0 +1,111 @@ + + + + + Scatter Chart + + + + + + +
+ +
+ + + + + diff --git a/samples/timeScale/combo-time-scale.html b/samples/timeScale/combo-time-scale.html index f6c178a7d..23a5f777e 100644 --- a/samples/timeScale/combo-time-scale.html +++ b/samples/timeScale/combo-time-scale.html @@ -4,8 +4,8 @@ Line Chart - Combo Time Scale - - + + - - - -
- -
-
-
- - - - - - - - - diff --git a/samples/tooltips/dataPoints-customTooltips.html b/samples/tooltips/dataPoints-customTooltips.html new file mode 100644 index 000000000..1ae7f90ab --- /dev/null +++ b/samples/tooltips/dataPoints-customTooltips.html @@ -0,0 +1,128 @@ + + + + + Custom Tooltips using Data Points + + + + + + + +
+ +
+
+
+ + + + diff --git a/samples/tooltips/interaction-modes.html b/samples/tooltips/interaction-modes.html new file mode 100644 index 000000000..bf9bf971a --- /dev/null +++ b/samples/tooltips/interaction-modes.html @@ -0,0 +1,119 @@ + + + + + Tooltip Interaction Modes + + + + + + +
+
+ + + + diff --git a/samples/tooltips/line-customTooltips.html b/samples/tooltips/line-customTooltips.html new file mode 100644 index 000000000..cc6e356b3 --- /dev/null +++ b/samples/tooltips/line-customTooltips.html @@ -0,0 +1,168 @@ + + + + + Line Chart with Custom Tooltips + + + + + + +
+ +
+ + + + diff --git a/samples/tooltips/pie-customTooltips.html b/samples/tooltips/pie-customTooltips.html new file mode 100644 index 000000000..abc047bfd --- /dev/null +++ b/samples/tooltips/pie-customTooltips.html @@ -0,0 +1,146 @@ + + + + + Pie Chart with Custom Tooltips + + + + + + + +
+ +
+ +
+
+
+ + + + + diff --git a/samples/tooltips/position-modes.html b/samples/tooltips/position-modes.html new file mode 100644 index 000000000..596eb6dfe --- /dev/null +++ b/samples/tooltips/position-modes.html @@ -0,0 +1,86 @@ + + + + + Tooltip Interaction Modes + + + + + + +
+
+ + + + diff --git a/samples/tooltips/tooltip-callbacks.html b/samples/tooltips/tooltip-callbacks.html new file mode 100644 index 000000000..397348b01 --- /dev/null +++ b/samples/tooltips/tooltip-callbacks.html @@ -0,0 +1,111 @@ + + + + + Tooltip Hooks + + + + + + +
+ +
+ + + +