Merge pull request #2100 from gabsource/fix/svg-error-bar-chart

Fix NaN error when values are not defined in charts widget
This commit is contained in:
Samuel Georges 2016-06-07 08:49:14 +10:00
commit 68c53aee34
2 changed files with 22 additions and 24 deletions

View File

@ -15,12 +15,11 @@
+function ($) { "use strict";
var BarChart = function (element, options) {
this.options = options || {};
this.options = options || {}
var
$el = this.$el = $(element),
size = this.size = $el.height(),
total = 0,
self = this,
values = $.oc.chartUtils.loadListValues($('ul', $el)),
$legend = $.oc.chartUtils.createLegend($('ul', $el)),
@ -35,7 +34,7 @@
$el.toggleClass('full-width', isFullWidth)
Raphael($canvas.get(0), isFullWidth ? '100%' : chartWidth, chartHeight, function(){
self.paper = this;
self.paper = this
self.bars = this.set()
self.paper.customAttributes.bar = function (start, height) {
@ -51,7 +50,7 @@
}
// Add bars
var start = 0;
var start = 0
$.each(values.values, function(index, valueInfo) {
var color = valueInfo.color !== undefined ? valueInfo.color : $.oc.chartUtils.getColor(index),
path = self.paper.path().attr({"stroke-width": 0}).attr({bar: [start, 0]}).attr({fill: color})
@ -71,28 +70,28 @@
// Animate bars
start = 0
$.each(values.values, function(index, valueInfo) {
var height = chartHeight/values.max * valueInfo.value;
var height = (values.max && valueInfo.value) ? chartHeight/values.max * valueInfo.value : 0
self.bars[index].animate({bar: [start, height]}, 1000, "bounce")
start += barWidth + self.options.gap;
start += barWidth + self.options.gap
})
// Update the full-width chart when the window is redized
if (isFullWidth) {
$(window).on('resize', function(){
chartWidth = self.$el.width(),
chartWidth = self.$el.width()
barWidth = (chartWidth - (values.values.length-1)*self.options.gap)/values.values.length
var start = 0
$.each(values.values, function(index, valueInfo) {
var height = chartHeight/values.max * valueInfo.value;
var height = (values.max && valueInfo.value) ? chartHeight/values.max * valueInfo.value : 0
self.bars[index].animate({bar: [start, height]}, 10, "bounce")
start += barWidth + self.options.gap;
start += barWidth + self.options.gap
})
})
}
});
})
}
BarChart.prototype.isFullWidth = function() {
@ -115,7 +114,7 @@
var options = $.extend({}, BarChart.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data)
$this.data('oc.barChart', (data = new BarChart(this, options)))
$this.data('oc.barChart', new BarChart(this, options))
})
}
@ -136,4 +135,4 @@
$('[data-control=chart-bar]').barChart()
})
}(window.jQuery);
}(window.jQuery)

View File

@ -16,24 +16,23 @@
+function ($) { "use strict";
var PieChart = function (element, options) {
this.options = options || {};
this.options = options || {}
var
$el = this.$el = $(element),
size = this.size = (this.options.size !== undefined ? this.options.size : $el.height()),
outerRadius = size/2 - 1,
innerRadius = outerRadius - outerRadius/3.5,
total = 0,
values = $.oc.chartUtils.loadListValues($('ul', $el)),
$legend = $.oc.chartUtils.createLegend($('ul', $el)),
indicators = $.oc.chartUtils.initLegendColorIndicators($legend),
self = this;
self = this
var $canvas = $('<div/>').addClass('canvas').width(size).height(size)
$el.prepend($canvas)
Raphael($canvas.get(0), size, size, function(){
self.paper = this;
self.paper = this
self.segments = this.set()
self.paper.customAttributes.segment = function (startAngle, endAngle) {
@ -49,7 +48,7 @@
["L", p3.x, p3.y],
["A", innerRadius, innerRadius, 0, +flag, 1, p4.x, p4.y],
["Z"]
];
]
return {path: path}
}
@ -76,16 +75,16 @@
})
// Animate segments
var start = self.options.startAngle;
var start = self.options.startAngle
$.each(values.values, function(index, valueInfo) {
var length = 360/values.total * valueInfo.value;
var length = (values.total && valueInfo.value) ? 360/values.total * valueInfo.value : 0
if (length == 360)
length--;
length--
self.segments[index].animate({segment: [start, start + length]}, 1000, "bounce")
start += length
})
});
})
if (this.options.centerText !== undefined) {
var $text = $('<span>').addClass('center').html(this.options.centerText)
@ -97,7 +96,7 @@
var
a = Raphael.rad(angle),
x = this.size/2 + radius * Math.cos(a),
y = this.size/2 - radius * Math.sin(a);
y = this.size/2 - radius * Math.sin(a)
return {'x': x, 'y': y}
}
@ -118,7 +117,7 @@
var options = $.extend({}, PieChart.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data)
$this.data('oc.pieChart', (data = new PieChart(this, options)))
$this.data('oc.pieChart', new PieChart(this, options))
})
}
@ -139,4 +138,4 @@
$('[data-control=chart-pie]').pieChart()
})
}(window.jQuery);
}(window.jQuery)