Project

General

Profile

« Previous | Next » 

Revision a9ea3490

Added by Amir Fefer almost 9 years ago

Fixes #11006, #11004 - Facts % is now in the center of the graph

Additionally, the value represented in the graph is trimmed for
readability, and a legend was added.

View differences:

app/assets/javascripts/charts.js
label.css('right', labelOffset); //make sure it is centered
}
function trunc_with_tooltip(val){
if (val.length > 10) {
var trunced_val = val.substring(0, 10) + "...";
val = '<small data-toggle="tooltip" title=' + val + '>' + trunced_val + '</small>';
}
return val;
}
function expanded_pie(target, data){
var max = {data:0}, sum = 0;
var label_exist = false;
$(data).each(function(i, el){sum = sum + el.data; if (max.data< el.data) max = el;});
$.plot(target, data, {
colors: ['#0099d3', '#393f44','#00618a','#505459','#057d9f','#025167'],
series: {
......
show: true,
innerRadius: 0.8*3/4,
radius: 0.8,
labels: {
show:true,
radius: 1
label: {
show: true,
radius: 0.001,
formatter: function(label, series) {
if (label_exist)
return '';
else{
label_exist = true;
return '<div id="test"> <div class="percent">' + Math.round(100 * max.data / sum) + '%</div>' + trunc_with_tooltip(max.label);
}
}
},
highlight: {
opacity: 0.1
}
}
},
legend: {
show: false
show: true,
container: $(".legend"),
labelFormatter: function(label, series) {
return trunc_with_tooltip(label)
}
},
grid: {
hoverable: true,
clickable: true
}
});
bind_hover_event(target, function(item){
var percent = Math.round(item.series.percent);
return item.series.label + ' ('+percent+'%)';
});
target.bind("plotclick", function (event, pos, item) {
search_on_click(event, item);
});
......
top: pos.pageY - 40,
left: pos.pageX -10,
'border-color': item.series.color
}).appendTo("body").show();
}).appendTo("body").zIndex(5000).show();
}
$previousPoint=null;
function bind_hover_event(target, formater){
$(target).bind("plothover", function (event, pos, item) {
if (item) {
$(target).css('cursor','pointer');
if ($previousPoint != item.datapoint) {
$previousPoint = item.datapoint;
$("#flot-tooltip").remove();
showTooltip(pos, item, formater);
}
} else {
$("#flot-tooltip").remove();
$previousPoint = null;
$(target).css('cursor','default');
$("#flot-tooltip").remove();
$previousPoint = null;
}
});
}
......
{
$('body').append('<div id="' + div + '" class="modal fade"><div class="modal-dialog"><div class="modal-content"></div></div></div>');
$("#"+div+" .modal-content").append('<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title"></h4></div>')
.append('<div id="' + div + '-body" class="fact_chart modal-body">' + __('Loading') + ' ...</div>')
.append('<div class="container">')
.append('<div id="' + div + '-body" class="fact_chart modal-body">' + __('Loading') + ' ... </div>')
.append('<div class="legend" ></div>')
.append('</div>')
.append('<div class="modal-footer"></div>');
$("#"+div).modal('show');
......
}
$(function() {
$('[data-toggle="tooltip"]').tooltip();
$(".statistics-pie").flot_pie();
$(".statistics-bar").flot_bar();
$(".statistics-chart").flot_chart();
app/assets/stylesheets/charts.scss
}
.fact_chart {
float: left;
min-height: 450px !important;
width: 560px !important;
width: 485px !important;
padding: 0 !important;
text-align: center;
font-weight: bold;
overflow: hidden;
}
.legend {
margin-left: 485px;
margin-top: 10px;
height: 450px;
width: 110px;
text-align: center;
overflow-y: auto;
overflow-x: hidden;
}
#statistics{
.stats-well{
float: left;

Also available in: Unified diff