From: Tanner Linsley Date: Fri, 8 May 2015 22:20:21 +0000 (-0600) Subject: Bar Attempt # 4 X-Git-Tag: v2.0-alpha~34^2~1 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=cf07df07d6d7fa155a9f40661417ac27853adeac;p=thirdparty%2FChart.js.git Bar Attempt # 4 --- diff --git a/samples/bar.html b/samples/bar.html index c386c50fa..5146660b8 100644 --- a/samples/bar.html +++ b/samples/bar.html @@ -50,6 +50,8 @@ barChartData.datasets[1].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]; window.myBar.update(); + + console.log(window.barChartData); }); diff --git a/src/Chart.Bar.js b/src/Chart.Bar.js index 8127d520a..385131acc 100644 --- a/src/Chart.Bar.js +++ b/src/Chart.Bar.js @@ -75,8 +75,6 @@ } }); - this.datasets = []; - //Set up tooltip events on the chart if (this.options.showTooltips){ helpers.bindEvents(this, this.options.tooltipEvents, function(evt){ @@ -100,86 +98,68 @@ ctx : this.chart.ctx }); - //Iterate through each of the datasets, and build this into a property of the chart - helpers.each(data.datasets,function(dataset,datasetIndex){ - - var datasetObject = { - label : dataset.label || null, - fillColor : dataset.fillColor, - strokeColor : dataset.strokeColor, - bars : [] - }; - - this.datasets.push(datasetObject); - + //Create a new point for each piece of data + helpers.each(this.data.datasets,function(dataset,datasetIndex){ + dataset.metaData = []; helpers.each(dataset.data,function(dataPoint,index){ - //Add a new point for each piece of data, passing any required data to draw. - datasetObject.bars.push(new this.BarClass({ - value : dataPoint, - label : data.labels[index], - datasetLabel: dataset.label, - strokeColor : dataset.strokeColor, - fillColor : dataset.fillColor, - highlightFill : dataset.highlightFill || dataset.fillColor, - highlightStroke : dataset.highlightStroke || dataset.strokeColor - })); + dataset.metaData.push(new this.BarClass()); },this); - },this); - this.buildScale(data.labels); - - this.BarClass.prototype.base = this.scale.endPoint; this.eachBars(function(bar, index, datasetIndex){ helpers.extend(bar, { - width : this.scale.calculateBarWidth(this.datasets.length), - x: this.scale.calculateBarX(this.datasets.length, datasetIndex, index), - y: this.scale.endPoint + value : this.data.datasets[datasetIndex].data[index], + label : this.data.labels[index], + datasetLabel: this.data.datasets[datasetIndex].label, + strokeColor : this.data.datasets[datasetIndex].strokeColor, + fillColor : this.data.datasets[datasetIndex].fillColor, + highlightFill : this.data.datasets[datasetIndex].highlightFill || this.data.datasets[datasetIndex].fillColor, + highlightStroke : this.data.datasets[datasetIndex].highlightStroke || this.data.datasets[datasetIndex].strokeColor }); bar.save(); }, this); + this.buildScale(data.labels); + this.BarClass.prototype.base = this.scale.endPoint; + + this.update(); + this.render(); }, update : function(){ - //Iterate through each of the datasets, and build this into a property of the chart - helpers.each(this.data.datasets,function(dataset,datasetIndex){ - - helpers.extend(this.datasets[datasetIndex], { - label : dataset.label || null, - fillColor : dataset.fillColor, - strokeColor : dataset.strokeColor, - }); + //Create a new point for each piece of data + helpers.each(this.data.datasets,function(dataset,datasetIndex){ + dataset.metaData = dataset.metaData || []; helpers.each(dataset.data,function(dataPoint,index){ - helpers.extend(this.datasets[datasetIndex].bars[index], { - value : dataPoint, - label : this.data.labels[index], - datasetLabel: dataset.label, - strokeColor : dataset.strokeColor, - fillColor : dataset.fillColor, - highlightFill : dataset.highlightFill || dataset.fillColor, - highlightStroke : dataset.highlightStroke || dataset.strokeColor - }); + dataset.metaData[index] = dataset.metaData[index] || new this.BarClass(); },this); - },this); + this.eachBars(function(bar, index, datasetIndex){ + helpers.extend(bar, { + width : this.scale.calculateBarWidth(this.data.datasets.length), + x: this.scale.calculateBarX(this.data.datasets.length, datasetIndex, index), + y: this.scale.endPoint, + value : this.data.datasets[datasetIndex].data[index], + label : this.data.labels[index], + datasetLabel: this.data.datasets[datasetIndex].label, + strokeColor : this.data.datasets[datasetIndex].strokeColor, + fillColor : this.data.datasets[datasetIndex].fillColor, + highlightFill : this.data.datasets[datasetIndex].highlightFill || this.data.datasets[datasetIndex].fillColor, + highlightStroke : this.data.datasets[datasetIndex].highlightStroke || this.data.datasets[datasetIndex].strokeColor + }); + bar.save(); + }, this); + this.scale.update(); - // Reset any highlight colours before updating. - helpers.each(this.activeElements, function(activeElement){ - activeElement.restore(['fillColor', 'strokeColor']); - }); - this.eachBars(function(bar){ - bar.save(); - }); this.render(); }, eachBars : function(callback){ - helpers.each(this.datasets,function(dataset, datasetIndex){ - helpers.each(dataset.bars, callback, this, datasetIndex); + helpers.each(this.data.datasets,function(dataset, datasetIndex){ + helpers.each(dataset.metaData, callback, this, datasetIndex); },this); }, getBarsAtEvent : function(e){ @@ -190,10 +170,10 @@ }, barIndex; - for (var datasetIndex = 0; datasetIndex < this.datasets.length; datasetIndex++) { - for (barIndex = 0; barIndex < this.datasets[datasetIndex].bars.length; barIndex++) { - if (this.datasets[datasetIndex].bars[barIndex].inRange(eventPosition.x,eventPosition.y)){ - helpers.each(this.datasets, datasetIterator); + for (var datasetIndex = 0; datasetIndex < this.data.datasets.length; datasetIndex++) { + for (barIndex = 0; barIndex < this.data.datasets[datasetIndex].bars.length; barIndex++) { + if (this.data.datasets[datasetIndex].bars[barIndex].inRange(eventPosition.x,eventPosition.y)){ + helpers.each(this.data.datasets, datasetIterator); return barsArray; } } @@ -263,16 +243,16 @@ //Map the values array for each of the datasets helpers.each(valuesArray,function(value,datasetIndex){ //Add a new point for each piece of data, passing any required data to draw. - this.datasets[datasetIndex].bars.push(new this.BarClass({ + this.data.datasets[datasetIndex].bars.push(new this.BarClass({ value : value, label : label, - datasetLabel: this.datasets[datasetIndex].label, - x: this.scale.calculateBarX(this.datasets.length, datasetIndex, this.scale.valuesCount+1), + datasetLabel: this.data.datasets[datasetIndex].label, + x: this.scale.calculateBarX(this.data.datasets.length, datasetIndex, this.scale.valuesCount+1), y: this.scale.endPoint, - width : this.scale.calculateBarWidth(this.datasets.length), + width : this.scale.calculateBarWidth(this.data.datasets.length), base : this.scale.endPoint, - strokeColor : this.datasets[datasetIndex].strokeColor, - fillColor : this.datasets[datasetIndex].fillColor + strokeColor : this.data.datasets[datasetIndex].strokeColor, + fillColor : this.data.datasets[datasetIndex].fillColor })); },this); @@ -283,7 +263,7 @@ removeData : function(){ this.scale.removeXLabel(); //Then re-render the chart. - helpers.each(this.datasets,function(dataset){ + helpers.each(this.data.datasets,function(dataset){ dataset.bars.shift(); },this); this.update(); @@ -308,20 +288,18 @@ this.scale.draw(easingDecimal); //Draw all the bars for each dataset - helpers.each(this.datasets,function(dataset,datasetIndex){ - helpers.each(dataset.bars,function(bar,index){ - if (bar.hasValue()){ - bar.base = this.scale.endPoint; - //Transition then draw - bar.transition({ - x : this.scale.calculateBarX(this.datasets.length, datasetIndex, index), - y : this.scale.calculateY(bar.value), - width : this.scale.calculateBarWidth(this.datasets.length) - }, easingDecimal).draw(); - } - },this); - - },this); + this.eachBars(function(bar, index, datasetIndex){ + if (bar.hasValue()){ + bar.base = this.scale.endPoint; + //Transition then draw + bar.transition({ + x : this.scale.calculateBarX(this.data.datasets.length, datasetIndex, index), + y : this.scale.calculateY(bar.value), + width : this.scale.calculateBarWidth(this.data.datasets.length) + }, easingDecimal).draw(); + bar.save(); + } + }, this); } }); diff --git a/src/Chart.Core.js b/src/Chart.Core.js index d0a70336d..68f87df9a 100755 --- a/src/Chart.Core.js +++ b/src/Chart.Core.js @@ -466,7 +466,6 @@ numberOfSteps = minSteps; stepValue = graphRange / numberOfSteps; } - return { steps : numberOfSteps, stepValue : stepValue, @@ -1021,12 +1020,12 @@ } if (ChartElements.length > 0){ // If we have multiple datasets, show a MultiTooltip for all of the data points at that index - if (this.datasets && this.datasets.length > 1) { + if (this.data.datasets && this.data.datasets.length > 1) { var dataArray, dataIndex; - for (var i = this.datasets.length - 1; i >= 0; i--) { - dataArray = this.datasets[i].points || this.datasets[i].bars || this.datasets[i].segments; + for (var i = this.data.datasets.length - 1; i >= 0; i--) { + dataArray = this.data.datasets[i].points || this.data.datasets[i].bars || this.data.datasets[i].segments; dataIndex = indexOf(dataArray, ChartElements[0]); if (dataIndex !== -1){ break; @@ -1045,7 +1044,7 @@ yMax, xMin, yMin; - helpers.each(this.datasets, function(dataset){ + helpers.each(this.data.datasets, function(dataset){ dataCollection = dataset.points || dataset.bars || dataset.segments; if (dataCollection[dataIndex] && dataCollection[dataIndex].hasValue()){ Elements.push(dataCollection[dataIndex]); @@ -1060,8 +1059,8 @@ //Include any colour information about the element tooltipLabels.push(helpers.template(this.options.multiTooltipTemplate, element)); tooltipColors.push({ - fill: element._saved.fillColor || element.fillColor, - stroke: element._saved.strokeColor || element.strokeColor + fill: element._vm.fillColor || element.fillColor, + stroke: element._vm.strokeColor || element.strokeColor }); }, this); @@ -1182,29 +1181,29 @@ initialize : function(){}, restore : function(props){ if (!props){ - extend(this,this._saved); + extend(this,this._vm); } else { each(props,function(key){ - this[key] = this._saved[key]; + this[key] = this._vm[key]; },this); } return this; }, save : function(){ - this._saved = clone(this); - delete this._saved._saved; + this._vm = clone(this); + delete this._vm._vm; return this; }, update : function(newProps){ each(newProps,function(value,key){ - this._saved[key] = this[key]; + this._vm[key] = this[key]; this[key] = value; },this); return this; }, transition : function(props,ease){ each(props,function(value,key){ - this[key] = ((value - this._saved[key]) * ease) + this._saved[key]; + this._vm[key] = ((value - this._vm[key]) * ease) + this._vm[key]; },this); return this; }, @@ -1325,16 +1324,19 @@ Chart.Rectangle = Chart.Element.extend({ draw : function(){ + + var vm = this._vm; + var ctx = this.ctx, - halfWidth = this.width/2, - leftX = this.x - halfWidth, - rightX = this.x + halfWidth, - top = this.base - (this.base - this.y), - halfStroke = this.strokeWidth / 2; + halfWidth = vm.width/2, + leftX = vm.x - halfWidth, + rightX = vm.x + halfWidth, + top = this.base - (this.base - vm.y), + halfStroke = vm.strokeWidth / 2; // Canvas doesn't allow us to stroke inside the width so we can // adjust the sizes to fit if we're setting a stroke on the line - if (this.showStroke){ + if (vm.showStroke){ leftX += halfStroke; rightX -= halfStroke; top += halfStroke; @@ -1342,9 +1344,9 @@ ctx.beginPath(); - ctx.fillStyle = this.fillColor; - ctx.strokeStyle = this.strokeColor; - ctx.lineWidth = this.strokeWidth; + ctx.fillStyle = vm.fillColor; + ctx.strokeStyle = vm.strokeColor; + ctx.lineWidth = vm.strokeWidth; // It'd be nice to keep this class totally generic to any rectangle // and simply specify which border to miss out. @@ -1353,15 +1355,15 @@ ctx.lineTo(rightX, top); ctx.lineTo(rightX, this.base); ctx.fill(); - if (this.showStroke){ + if (vm.showStroke){ ctx.stroke(); } }, height : function(){ - return this.base - this.y; + return this.base - vm.y; }, inRange : function(chartX,chartY){ - return (chartX >= this.x - this.width/2 && chartX <= this.x + this.width/2) && (chartY >= this.y && chartY <= this.base); + return (chartX >= vm.x - vm.width/2 && chartX <= vm.x + vm.width/2) && (chartY >= vm.y && chartY <= this.base); } });