First attempt at unifying code for categories and budgets, which are basically the same thing.

This commit is contained in:
Sander Dorigo
2014-11-10 21:55:22 +01:00
parent af9473c126
commit 9fa326f630
11 changed files with 417 additions and 393 deletions

View File

@@ -8,12 +8,15 @@ $(function () {
if (typeof(googleTable) == 'function') {
if (typeof budgetID != 'undefined' && typeof repetitionID == 'undefined') {
googleTable('table/budget/' + budgetID + '/0/transactions', 'transactions');
googleColumnChart('chart/budgets/'+budgetID+'/spending/2014','budgetOverview');
console.log('A');
if (typeof componentID != 'undefined' && typeof repetitionID == 'undefined') {
console.log('B');
googleTable('table/component/' + componentID + '/0/transactions', 'transactions');
googleColumnChart('chart/component/' + componentID + '/spending/' + year, 'componentOverview');
} else if (typeof budgetID != 'undefined' && typeof repetitionID != 'undefined') {
googleTable('table/budget/' + budgetID + '/' + repetitionID + '/transactions', 'transactions');
} else if (typeof componentID != 'undefined' && typeof repetitionID != 'undefined') {
console.log('C');
googleTable('table/component/' + componentID + '/' + repetitionID + '/transactions', 'transactions');
}
}
@@ -162,7 +165,6 @@ function updateRanges() {
// we gaan er X overheen,
var pct = totalAmount / sum * 100;
console.log(pct)
var danger = 100 - pct;
var err = 100 - danger;
$('#progress-bar-default').css('width', 0);

View File

@@ -2,93 +2,17 @@ $(function () {
if (typeof googleTable == 'function') {
googleTable('table/categories', 'category-list');
if (typeof(componentID) != 'undefined') {
googleTable('table/component/' + componentID + '/0/transactions','transactions');
if (typeof googleColumnChart == 'function') {
googleColumnChart('chart/component/' + componentID + '/spending/' + year, 'componentOverview');
}
}
}
if ($('#chart').length == 1) {
/**
* get data from controller for home charts:
*/
$.getJSON('chart/categories/show/' + categoryID).success(function (data) {
var options = {
chart: {
renderTo: 'chart',
type: 'column'
},
series: [data.series],
title: {
text: data.chart_title
},
yAxis: {
formatter: function () {
return '$' + Highcharts.numberFormat(this.y, 0);
}
},
subtitle: {
text: data.subtitle,
useHTML: true
},
xAxis: {
floor: 0,
type: 'category',
title: {
text: 'Period'
}
},
tooltip: {
shared: true,
crosshairs: false,
formatter: function () {
var str = '<span style="font-size:80%;">' + Highcharts.dateFormat("%A, %e %B", this.x) + '</span><br />';
for (x in this.points) {
var point = this.points[x];
var colour = point.point.pointAttr[''].fill;
str += '<span style="color:' + colour + '">' + point.series.name + '</span>: \u20AC ' + Highcharts.numberFormat(point.y, 2) + '<br />';
}
//console.log();
return str;
return '<span style="font-size:80%;">' + this.series.name + ' on ' + Highcharts.dateFormat("%e %B", this.x) + ':</span><br /> \u20AC ' + Highcharts.numberFormat(this.y, 2);
}
},
plotOptions: {
line: {
shadow: true
},
series: {
cursor: 'pointer',
negativeColor: '#FF0000',
threshold: 0,
lineWidth: 1,
marker: {
radius: 2
},
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
src: 'chart/home/info/' + this.series.name + '/' + Highcharts.dateFormat("%d/%m/%Y", this.x),
pageOrigin: {
x: e.pageX,
y: e.pageY
},
objectType: 'ajax',
headingText: '<a href="#">' + this.series.name + '</a>',
width: 250
}
)
;
}
}
}
}
},
credits: {
enabled: false
}
};
$('#chart').highcharts(options);
});
}
});

View File

@@ -1,263 +1,315 @@
google.load('visualization', '1.1', {'packages': ['corechart', 'bar', 'sankey', 'table']});
function googleLineChart(URL, container) {
$.getJSON(URL).success(function (data) {
/*
Get the data from the JSON
*/
gdata = new google.visualization.DataTable(data);
/*
Format as money
*/
var money = new google.visualization.NumberFormat({decimalSymbol: ',', groupingSymbol: '.', prefix: '\u20AC '});
for (i = 1; i < gdata.getNumberOfColumns(); i++) {
money.format(gdata, i);
}
/*
Create a new google charts object.
*/
var chart = new google.visualization.LineChart(document.getElementById(container));
/*
Draw it:
*/
chart.draw(gdata, defaultLineChartOptions);
}).fail(function () {
$('#' + container).addClass('google-chart-error');
});
}
function googleBarChart(URL, container) {
$.getJSON(URL).success(function (data) {
/*
Get the data from the JSON
*/
gdata = new google.visualization.DataTable(data);
/*
Format as money
*/
var money = new google.visualization.NumberFormat({decimalSymbol: ',', groupingSymbol: '.', prefix: '\u20AC '});
for (i = 1; i < gdata.getNumberOfColumns(); i++) {
money.format(gdata, i);
}
/*
Create a new google charts object.
*/
var chart = new google.charts.Bar(document.getElementById(container));
/*
Draw it:
*/
chart.draw(gdata, defaultBarChartOptions);
}).fail(function () {
$('#' + container).addClass('google-chart-error');
});
}
function googleColumnChart(URL, container) {
$.getJSON(URL).success(function (data) {
/*
Get the data from the JSON
*/
gdata = new google.visualization.DataTable(data);
/*
Format as money
*/
var money = new google.visualization.NumberFormat({decimalSymbol: ',', groupingSymbol: '.', prefix: '\u20AC '});
for (i = 1; i < gdata.getNumberOfColumns(); i++) {
money.format(gdata, i);
}
/*
Create a new google charts object.
*/
var chart = new google.charts.Bar(document.getElementById(container));
/*
Draw it:
*/
chart.draw(gdata, defaultColumnChartOptions);
}).fail(function () {
$('#' + container).addClass('google-chart-error');
});
}
function googleStackedColumnChart(URL, container) {
$.getJSON(URL).success(function (data) {
/*
Get the data from the JSON
*/
gdata = new google.visualization.DataTable(data);
/*
Format as money
*/
var money = new google.visualization.NumberFormat({decimalSymbol: ',', groupingSymbol: '.', prefix: '\u20AC '});
for (i = 1; i < gdata.getNumberOfColumns(); i++) {
money.format(gdata, i);
}
/*
Create a new google charts object.
*/
var chart = new google.visualization.ColumnChart(document.getElementById(container));
/*
Draw it:
*/
chart.draw(gdata, defaultStackedColumnChartOptions);
}).fail(function () {
$('#' + container).addClass('google-chart-error');
});
}
function googlePieChart(URL, container) {
$.getJSON(URL).success(function (data) {
/*
Get the data from the JSON
*/
gdata = new google.visualization.DataTable(data);
/*
Format as money
*/
var money = new google.visualization.NumberFormat({decimalSymbol: ',', groupingSymbol: '.', prefix: '\u20AC '});
for (i = 1; i < gdata.getNumberOfColumns(); i++) {
money.format(gdata, i);
}
/*
Create a new google charts object.
*/
var chart = new google.visualization.PieChart(document.getElementById(container));
/*
Draw it:
*/
chart.draw(gdata, defaultPieChartOptions);
}).fail(function () {
$('#' + container).addClass('google-chart-error');
});
}
function googleSankeyChart(URL, container) {
$.getJSON(URL).success(function (data) {
/*
Get the data from the JSON
*/
gdata = new google.visualization.DataTable(data);
/*
Format as money
*/
console.log(gdata.getNumberOfRows())
if (gdata.getNumberOfRows() < 1) {
console.log('remove');
$('#' + container).parent().parent().remove();
return;
} else if (gdata.getNumberOfRows() < 6) {
defaultSankeyChartOptions.height = 100
} else {
defaultSankeyChartOptions.height = 400
}
/*
Create a new google charts object.
*/
var chart = new google.visualization.Sankey(document.getElementById(container));
/*
Draw it:
*/
chart.draw(gdata, defaultSankeyChartOptions);
}).fail(function () {
$('#' + container).addClass('google-chart-error');
});
}
function googleTable(URL, container) {
$.getJSON(URL).success(function (data) {
/*
Get the data from the JSON
*/
var gdata = new google.visualization.DataTable(data);
/*
Create a new google charts object.
*/
var chart = new google.visualization.Table(document.getElementById(container));
/*
Do something with formatters:
*/
var x = gdata.getNumberOfColumns();
var columnsToHide = new Array;
var URLFormatter = new google.visualization.PatternFormat('<a href="{0}">{1}</a>');
var EditButtonFormatter = new google.visualization.PatternFormat('<div class="btn-group btn-group-xs"><a href="{0}" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-pencil"></span></a><a class="btn btn-xs btn-danger" href="{1}"><span class="glyphicon glyphicon-trash"></span></a></div>');
var money = new google.visualization.NumberFormat({decimalSymbol: ',', groupingSymbol: '.', prefix: '\u20AC '});
for (var i = 0; i < x; i++) {
var label = gdata.getColumnLabel(i);
console.log('Column ' + i + ':' + label);
if ($('#' + container).length == 1) {
$.getJSON(URL).success(function (data) {
/*
Format a string using the previous column as URL.
Get the data from the JSON
*/
if (label == 'Description' || label == 'From' || label == 'Name' || label == 'To' || label == 'Budget' || label == 'Category') {
URLFormatter.format(gdata, [i - 1, i], i);
columnsToHide.push(i - 1);
}
if (label == 'ID') {
EditButtonFormatter.format(gdata, [i + 1, i + 2], i);
columnsToHide.push(i + 1, i + 2);
}
/*
Format with buttons:
*/
gdata = new google.visualization.DataTable(data);
/*
Format as money
*/
if (label == 'Amount' || label == 'Balance') {
var money = new google.visualization.NumberFormat({
decimalSymbol: ',',
groupingSymbol: '.',
prefix: '\u20AC '
});
for (i = 1; i < gdata.getNumberOfColumns(); i++) {
money.format(gdata, i);
}
}
/*
Create a new google charts object.
*/
var chart = new google.visualization.LineChart(document.getElementById(container));
/*
Draw it:
*/
chart.draw(gdata, defaultLineChartOptions);
}).fail(function () {
$('#' + container).addClass('google-chart-error');
});
} else {
console.log('No container found called "' + container + '"');
}
}
function googleBarChart(URL, container) {
if ($('#' + container).length == 1) {
$.getJSON(URL).success(function (data) {
/*
Get the data from the JSON
*/
gdata = new google.visualization.DataTable(data);
/*
Format as money
*/
var money = new google.visualization.NumberFormat({
decimalSymbol: ',',
groupingSymbol: '.',
prefix: '\u20AC '
});
for (i = 1; i < gdata.getNumberOfColumns(); i++) {
money.format(gdata, i);
}
/*
Create a new google charts object.
*/
var chart = new google.charts.Bar(document.getElementById(container));
/*
Draw it:
*/
chart.draw(gdata, defaultBarChartOptions);
}).fail(function () {
$('#' + container).addClass('google-chart-error');
});
} else {
console.log('No container found called "' + container + '"');
}
}
function googleColumnChart(URL, container) {
if ($('#' + container).length == 1) {
$.getJSON(URL).success(function (data) {
/*
Get the data from the JSON
*/
gdata = new google.visualization.DataTable(data);
/*
Format as money
*/
var money = new google.visualization.NumberFormat({
decimalSymbol: ',',
groupingSymbol: '.',
prefix: '\u20AC '
});
for (i = 1; i < gdata.getNumberOfColumns(); i++) {
money.format(gdata, i);
}
/*
Create a new google charts object.
*/
var chart = new google.charts.Bar(document.getElementById(container));
/*
Draw it:
*/
chart.draw(gdata, defaultColumnChartOptions);
}).fail(function () {
$('#' + container).addClass('google-chart-error');
});
} else {
console.log('No container found called "' + container + '"');
}
}
function googleStackedColumnChart(URL, container) {
if ($('#' + container).length == 1) {
$.getJSON(URL).success(function (data) {
/*
Get the data from the JSON
*/
gdata = new google.visualization.DataTable(data);
/*
Format as money
*/
var money = new google.visualization.NumberFormat({
decimalSymbol: ',',
groupingSymbol: '.',
prefix: '\u20AC '
});
for (i = 1; i < gdata.getNumberOfColumns(); i++) {
money.format(gdata, i);
}
/*
Create a new google charts object.
*/
var chart = new google.visualization.ColumnChart(document.getElementById(container));
/*
Draw it:
*/
chart.draw(gdata, defaultStackedColumnChartOptions);
}).fail(function () {
$('#' + container).addClass('google-chart-error');
});
} else {
console.log('No container found called "' + container + '"');
}
}
function googlePieChart(URL, container) {
if ($('#' + container).length == 1) {
$.getJSON(URL).success(function (data) {
/*
Get the data from the JSON
*/
gdata = new google.visualization.DataTable(data);
/*
Format as money
*/
var money = new google.visualization.NumberFormat({
decimalSymbol: ',',
groupingSymbol: '.',
prefix: '\u20AC '
});
for (i = 1; i < gdata.getNumberOfColumns(); i++) {
money.format(gdata, i);
}
/*
Create a new google charts object.
*/
var chart = new google.visualization.PieChart(document.getElementById(container));
/*
Draw it:
*/
chart.draw(gdata, defaultPieChartOptions);
}).fail(function () {
$('#' + container).addClass('google-chart-error');
});
} else {
console.log('No container found called "' + container + '"');
}
}
function googleSankeyChart(URL, container) {
if ($('#' + container).length == 1) {
$.getJSON(URL).success(function (data) {
/*
Get the data from the JSON
*/
gdata = new google.visualization.DataTable(data);
/*
Format as money
*/
console.log(gdata.getNumberOfRows())
if (gdata.getNumberOfRows() < 1) {
console.log('remove');
$('#' + container).parent().parent().remove();
return;
} else if (gdata.getNumberOfRows() < 6) {
defaultSankeyChartOptions.height = 100
} else {
defaultSankeyChartOptions.height = 400
}
//var formatter = new google.visualization.PatternFormat('<a href="#">{1}</a>');
/*
Create a new google charts object.
*/
var chart = new google.visualization.Sankey(document.getElementById(container));
//formatter.format(gdata, [5, 6], 6);
//formatter.format(gdata, [7, 8], 8);
/*
Draw it:
*/
chart.draw(gdata, defaultSankeyChartOptions);
}).fail(function () {
$('#' + container).addClass('google-chart-error');
});
} else {
console.log('No container found called "' + container + '"');
}
}
function googleTable(URL, container) {
if ($('#' + container).length == 1) {
$.getJSON(URL).success(function (data) {
/*
Get the data from the JSON
*/
var gdata = new google.visualization.DataTable(data);
/*
Create a new google charts object.
*/
var chart = new google.visualization.Table(document.getElementById(container));
/*
Do something with formatters:
*/
var x = gdata.getNumberOfColumns();
var columnsToHide = new Array;
var URLFormatter = new google.visualization.PatternFormat('<a href="{0}">{1}</a>');
var EditButtonFormatter = new google.visualization.PatternFormat('<div class="btn-group btn-group-xs"><a href="{0}" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-pencil"></span></a><a class="btn btn-xs btn-danger" href="{1}"><span class="glyphicon glyphicon-trash"></span></a></div>');
var money = new google.visualization.NumberFormat({
decimalSymbol: ',',
groupingSymbol: '.',
prefix: '\u20AC '
});
var view = new google.visualization.DataView(gdata);
// hide certain columns:
for (var i = 0; i < x; i++) {
var label = gdata.getColumnLabel(i);
console.log('Column ' + i + ':' + label);
/*
Format a string using the previous column as URL.
*/
if (label == 'Description' || label == 'From' || label == 'Name' || label == 'To' || label == 'Budget' || label == 'Category') {
URLFormatter.format(gdata, [i - 1, i], i);
columnsToHide.push(i - 1);
}
if (label == 'ID') {
EditButtonFormatter.format(gdata, [i + 1, i + 2], i);
columnsToHide.push(i + 1, i + 2);
}
view.hideColumns(columnsToHide);
/*
Format with buttons:
*/
/*
Draw it:
*/
chart.draw(view, defaultTableOptions);
/*
Format as money
*/
if (label == 'Amount' || label == 'Balance') {
money.format(gdata, i);
}
}).fail(function () {
$('#' + container).addClass('google-chart-error');
});
}
//var formatter = new google.visualization.PatternFormat('<a href="#">{1}</a>');
//formatter.format(gdata, [5, 6], 6);
//formatter.format(gdata, [7, 8], 8);
var view = new google.visualization.DataView(gdata);
// hide certain columns:
view.hideColumns(columnsToHide);
/*
Draw it:
*/
chart.draw(view, defaultTableOptions);
}).fail(function () {
$('#' + container).addClass('google-chart-error');
});
} else {
console.log('No container found called "' + container + '"');
}
}