155 lines
5.1 KiB
JavaScript
155 lines
5.1 KiB
JavaScript
/**
|
|
* Created by Pensare Software.
|
|
* User: Theo Weijmer
|
|
* Date: 30/01/2018
|
|
* Time: 16:03
|
|
*/
|
|
|
|
dbo.charts = {
|
|
|
|
pieColors : ['#ffcf30', '#06b2dc', '#048a44', '#a63305', '#a0c03b', '#ffcb22', '#89c540', '#f77c01', '#1094f6', '#6733ba'],
|
|
barColor : ['#f3a921', '#f2770c', '#72221a', '#04843b', '#d63f2e', '#fec220'],
|
|
charts : [],
|
|
|
|
drawHoursVsBudget: function ( hours, budget, element ) {
|
|
var ctx = document.getElementById( element ).getContext( '2d' );
|
|
|
|
var myChart = new Chart( ctx, {
|
|
type : 'bar',
|
|
data : {
|
|
labels : ["uren", "budget"],
|
|
datasets: [{
|
|
data : [hours, budget],
|
|
backgroundColor: [
|
|
'#f3a921', '#f2770c'
|
|
]
|
|
}]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
scales : {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}]
|
|
},
|
|
legend : {
|
|
display: false,
|
|
},
|
|
title : {
|
|
display : true,
|
|
text : 'Uren vs budget',
|
|
fontSize : 16,
|
|
fontColor: '#b2b2b2'
|
|
}
|
|
}
|
|
} );
|
|
},
|
|
|
|
drawInvoicesVsPayed: function ( offer, invoice, payed, element ) {
|
|
var ctx = document.getElementById( element ).getContext( '2d' );
|
|
|
|
var myChart = new Chart( ctx, {
|
|
type : 'bar',
|
|
data : {
|
|
labels : ["offerte", "facturen", "betaald"],
|
|
datasets: [{
|
|
data : [offer, invoice, payed],
|
|
backgroundColor: dbo.charts.barColor
|
|
}]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
scales : {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}]
|
|
},
|
|
legend : {
|
|
display: false,
|
|
},
|
|
title : {
|
|
display : true,
|
|
text : 'offerte vs facuren vs betalingen',
|
|
fontSize : 16,
|
|
fontColor: '#b2b2b2'
|
|
}
|
|
}
|
|
} );
|
|
},
|
|
|
|
drawHoursChart: function ( element, chartData, labels, title, colors ) {
|
|
var ctx = document.getElementById( element ).getContext( '2d' );
|
|
|
|
var myChart = new Chart( ctx, {
|
|
type : 'bar',
|
|
data : {
|
|
labels : labels,
|
|
datasets: [{
|
|
data : chartData,
|
|
backgroundColor: colors,
|
|
}]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
scales : {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}]
|
|
},
|
|
legend : {
|
|
display : false,
|
|
fontColor: '#ffffff',
|
|
},
|
|
title : {
|
|
display : true,
|
|
text : title,
|
|
fontSize : 16,
|
|
fontColor: '#ffffff'
|
|
}
|
|
}
|
|
} );
|
|
},
|
|
|
|
drawPie: function ( element, data, chartLabels, title ) {
|
|
var ctx = document.getElementById( element ).getContext( '2d' );
|
|
dbo.charts.charts[element] = new Chart( ctx, {
|
|
type : 'doughnut',
|
|
data : {
|
|
datasets: [{
|
|
data : data,
|
|
backgroundColor: dbo.charts.pieColors,
|
|
borderColor : dbo.charts.pieColors,
|
|
label : chartLabels
|
|
}],
|
|
labels : chartLabels
|
|
},
|
|
options: {
|
|
title : {
|
|
display : true,
|
|
text : title,
|
|
fontSize : 16,
|
|
fontColor: '#ffffff'
|
|
},
|
|
legend : {
|
|
display: false
|
|
},
|
|
legendCallback: function ( chart ) {
|
|
var text = '';
|
|
_.each( chart.data.labels, function ( p, i ) {
|
|
text += '<div><div style="float:left;width:15px;height:15px;border-radius:50%;background-color:' + dbo.charts.pieColors[i] + '"></div><div style="margin-left:10px;float:left;color:#ffffff;">' + p + '</div></div><br />'
|
|
} );
|
|
|
|
return text;
|
|
}
|
|
}
|
|
} );
|
|
document.getElementById( element + '-legends' ).innerHTML = dbo.charts.charts[element].generateLegend();
|
|
}
|
|
|
|
} |