--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Bar Chart</title>
+ <script src="../../../dist/Chart.min.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(), 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(), 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(), 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 + 1),
+ 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(), 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) {
+ barChartData.datasets[index].data.push([randomScalingFactor(), randomScalingFactor()]);
+ }
+
+ window.myBar.update();
+ }
+ });
+
+ document.getElementById('removeDataset').addEventListener('click', function() {
+ barChartData.datasets.pop();
+ 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>
return parseArrayOrPrimitive.apply(this, arguments);
},
+ /**
+ * Overriding object data parsing since we support mixed primitive/array
+ * value-scale data for float bars
+ * @private
+ */
+ _parseObjectData: function(meta, data, start, count) {
+ var iScale = this._getIndexScale();
+ var vScale = this._getValueScale();
+ var vProp = vScale._getAxis();
+ var parsed = [];
+ var i, ilen, item, obj, value;
+ for (i = start, ilen = start + count; i < ilen; ++i) {
+ obj = data[i];
+ item = {};
+ item[iScale.id] = iScale._parseObject(obj, iScale._getAxis(), i);
+ value = obj[vProp];
+ if (helpers.isArray(value)) {
+ parseFloatBar(value, item, vScale, i);
+ } else {
+ item[vScale.id] = vScale._parseObject(obj, vProp, i);
+ }
+ parsed.push(item);
+ }
+ return parsed;
+ },
+
initialize: function() {
var me = this;
var meta;
projects / thirdparty / Chart.js.git / commitdiff
