Commit 9da20bc1 authored by Eduardo L. Buratti's avatar Eduardo L. Buratti

web: Split OS pie outter chart into three small ones

Signed-off-by: Eduardo L. Buratti's avatarEduardo L. Buratti <elb09@c3sl.ufpr.br>
parent 67a20b16
......@@ -29,6 +29,29 @@ var Charts = {
type: 'pie',
backgroundColor: null,
height: '400',
events: {
load: function () {
var ren = this.renderer,
colors = Highcharts.getOptions().colors,
rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],
leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];
ren.label('Linux Educacional', 570, 70).css({
fontWeight: 'bold',
color: '#437600'
}).add();
ren.label('Windows', 570, 190).css({
fontWeight: 'bold',
color: '#18537D'
}).add();
ren.label('Outros', 570, 310).css({
fontWeight: 'bold',
color: '#8F1111'
}).add();
}
}
},
title: {
text: ''
......@@ -50,11 +73,10 @@ var Charts = {
pie: {
dataLabels: {
enabled: true,
distance: 5,
connectorWidth: 0,
formatter: function() {
return '<b>'+ this.point.name.split('\\').join('</b><br/><b>') +
'</b><br/>' + Math.round(this.percentage) + '%';
return this.percentage > 1 ?
'<b>' + this.point.name.split('\\').join('</b><br/><b>') +
'</b><br/>' + this.percentage.toFixed(1) + '%' : null;
}
}
}
......@@ -142,7 +164,7 @@ var Charts = {
var categories = {
le: {
name: 'Linux Educacional',
color: '#437600'
color: '#68950A'
},
windows: {
name: 'Windows',
......@@ -156,16 +178,16 @@ var Charts = {
};
var distros = {
'Linux Educacional 5.0': {color: '#437600', category: categories.le},
'Linux Educacional 4.0': {color: '#68950A', category: categories.le},
'Linux Educacional 3.0': {color: '#8DB414', category: categories.le},
'Linux Educacional 2.0': {color: '#B2D31D', category: categories.le},
'Linux Educacional 1.0': {color: '#D7F227', category: categories.le},
'Windows 7': {color: '#18537D', category: categories.windows},
'Windows MultiPoint Server':{color: '#73A0B4', category: categories.windows},
'Ubuntu': {color: '#8F1111', category: categories.others},
'Debian': {color: '#C25147', category: categories.others},
'Outros': {color: '#F5917D', category: categories.others},
'Linux Educacional 5.0': {color: '#437600', name: 'LE5', category: categories.le},
'Linux Educacional 4.0': {color: '#68950A', name: 'LE4', category: categories.le},
'Linux Educacional 3.0': {color: '#8DB414', name: 'LE3', category: categories.le},
'Linux Educacional 2.0': {color: '#B2D31D', name: 'LE2', category: categories.le},
'Linux Educacional 1.0': {color: '#D7F227', name: 'LE1', category: categories.le},
'Windows 7': {color: '#18537D', name: 'Win7', category: categories.windows},
'Windows MultiPoint Server':{color: '#73A0B4', name: 'MultiPoint', category: categories.windows},
'Ubuntu': {color: '#8F1111', name: 'Ubuntu', category: categories.others},
'Debian': {color: '#C25147', name: 'Debian', category: categories.others},
'Outros': {color: '#F5917D', name: 'Outros', category: categories.others},
};
var DEFAULT_DISTRO = {color: '#FFFEDE', category: categories.others};
......@@ -198,7 +220,6 @@ var Charts = {
}
distro.category.y += val;
distro.name = data[i].name;
distro.y += val;
total += val;
};
......@@ -211,7 +232,7 @@ var Charts = {
if (distros[d].category === categories.le) {
les.push(distros[d]);
}
else if (distros[d].category === categories.le) {
else if (distros[d].category === categories.windows) {
windows.push(distros[d]);
}
else {
......@@ -222,18 +243,60 @@ var Charts = {
Charts.pieChart.addSeries({
name: 'Sistemas Operacionais',
data: [ categories.le, categories.windows, categories.others ],
size: '60%',
size: '70%',
center: [200,200],
shadow: true,
dataLabels: {
formatter: function() {
// display only if larger than 1 percent
return this.percentage > 1 ? '<b>'+ this.point.name +'</b><br>'+ this.percentage.toFixed(1) + '%' : null;
},
color: 'white',
distance: -40
return '<b>' + this.point.name.split('\\').join('</b><br/><b>') +
'</b><br/>' + this.percentage.toFixed(1) + '%';
}
}
});
Charts.pieChart.addSeries({
name: 'Linux Educacional',
data: les,
size: '30%',
center: [480,70],
shadow: true,
dataLabels: {
borderRadius: 2,
backgroundColor: 'rgba(255, 255, 255, 0.7)',
borderWidth: 0,
distance: -30,
}
});
Charts.pieChart.addSeries({
name: 'Windows',
data: windows,
size: '30%',
center: [480,190],
shadow: true,
dataLabels: {
borderRadius: 2,
backgroundColor: 'rgba(255, 255, 255, 0.7)',
borderWidth: 0,
distance: -30
}
});
Charts.pieChart.addSeries({
name: 'Outros',
data: others,
size: '30%',
center: [480,310],
shadow: true,
dataLabels: {
borderRadius: 2,
backgroundColor: 'rgba(255, 255, 255, 0.7)',
borderWidth: 0,
distance: -30
}
});
/*Charts.pieChart.addSeries({
name: 'Versões',
data: les.concat(windows, others),
size: '80%',
......@@ -245,7 +308,7 @@ var Charts = {
},
distance: 10
}
});
});*/
Charts.pieChart.hideLoading();
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment