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:
commit
68c53aee34
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
Loading…
Reference in New Issue