--- a/chart.new 2014-10-28 22:07:37.000000000 +0000 +++ b/chart.js 2014-10-28 22:08:06.000000000 +0000 @@ -2049,15 +2049,33 @@ 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({ + + // Modified for error bars, fillColors and strokeColors by Chris Seaton + + var datasetProperties = { 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 - })); + fillColor : dataset.fillColor + }; + + if (datasetProperties.fillColor === undefined && dataset.fillColors !== undefined) { + datasetProperties.fillColor = dataset.fillColors[index]; + } + + if (datasetProperties.strokeColor === undefined && dataset.strokeColors !== undefined) { + datasetProperties.strokeColor = dataset.strokeColors[index]; + } + + if (dataset.error != undefined && dataset.error[index] != undefined) { + datasetProperties.error = dataset.error[index] + } + + datasetProperties.highlightFill = dataset.highlightFill || datasetProperties.fillColor, + datasetProperties.highlightStroke = dataset.highlightStroke || datasetProperties.strokeColor + + datasetObject.bars.push(new this.BarClass(datasetProperties)); },this); },this); @@ -2222,11 +2240,46 @@ if (bar.hasValue()){ bar.base = this.scale.endPoint; //Transition then draw + + var x = this.scale.calculateBarX(this.datasets.length, datasetIndex, index); + var y = this.scale.calculateY(bar.value); + var width = this.scale.calculateBarWidth(this.datasets.length); + bar.transition({ - x : this.scale.calculateBarX(this.datasets.length, datasetIndex, index), - y : this.scale.calculateY(bar.value), - width : this.scale.calculateBarWidth(this.datasets.length) + x : x, + y : y, + width : width }, easingDecimal).draw(); + + // Modified for error bars by Chris Seaton + + if (bar.error != undefined && width > 6) { + var scalingFactor = this.scale.drawingArea() / (this.scale.min - this.scale.max); + var error_height = bar.error * scalingFactor; + var error_width = error_width = Math.min(5, width * 0.25); + + ctx.save(); + + ctx.strokeStyle = "white"; + ctx.lineWidth = error_width + 2; + + ctx.beginPath(); + ctx.moveTo(x, y - error_height - 1); + ctx.lineTo(x, y + error_height + 1); + ctx.closePath(); + ctx.stroke(); + + ctx.strokeStyle = "black"; + ctx.lineWidth = error_width; + + ctx.beginPath(); + ctx.moveTo(x, y - error_height); + ctx.lineTo(x, y + error_height); + ctx.closePath(); + ctx.stroke(); + + ctx.restore(); + } } },this);