expenses/page/statistics.php

<?
    include_once("../php/include.php");

	initDatabaseConnection();

	$divWidth = 800;
	$divHeight = 400;
?>

Year:
<select id="displayYear" onchange="changeYear();">
    <?
        $rows = dbQuery("SELECT DISTINCT year FROM record_valid");
        foreach($rows as $row) {
			?>
				<option value="<?=$row['year']?>"><?=$row['year']?></option>
			<?
        }
    ?>
</select>

<div id="graphMonthTotals" style="width: <?=$divWidth?>px; height: <?=$divHeight?>px; margin: 0 auto"></div>
<br/><br/>

<div id="graphMonthPlus" style="width: <?=$divWidth?>px; height: <?=$divHeight?>px; margin: 0 auto"></div>
<br/><br/>

<div id="graphMonthAvg" style="width: <?=$divWidth?>px; height: <?=$divHeight?>px; margin: 0 auto"></div>
<br/><br/>

<script type="text/javascript">
	$(document).ready(function() {
		changeYear();
	});

	function changeYear() {
		var year = $('#displayYear option:selected').val();

		closeCategoryDetails();
		updateGraphMonthTotals(year);
		updateGraphMonthPlus(year);
		updateGraphMonthAvg(year);
	}

	function requestGraphData(requestData, divId, drawFunc, setLoading) {
		if(setLoading) {
			var loadingHtml = "<div style='width: 100%; height: 100%; line-height: <?=$divHeight?>px; border: 1px dashed gray; border-radius: 10px; text-align: center;'><img src='graphics/loading.gif' /> Fetching graph data...</div>";
			$('#' + divId).html(loadingHtml);
		}

		var requestType = "statistic";
		$.ajax(
			{
				url: "request/" + requestType + ".php",
				type: "POST",
				data: requestData,
				dataType: 'text',  // type of response
				success: function(response) {
					var data = JSON.parse(response);
					drawFunc(divId, data);
				},
				error: function(xhr, textStatus, errorThrown) {
					$('#' + divId).html(xhr.responseText);
				}
			}
		);
	}

	function updateGraphMonthTotals(year) {
		var requestData = {
			action: "graph-month-totals",
			year: year
		};
		requestGraphData(requestData, "graphMonthTotals", drawGraphMonthTotals, true);
	}

	function drawGraphMonthTotals(divId, data) {
		$('#' + divId).highcharts({
            chart: {
                type: 'column'
            },
			title: {
                text: 'Total income and expenses per account and month for ' + data.year
            },
            xAxis: {
                categories: data.xCategories
            },
            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                    text: '<?=getHouseholdCurrency()?>'
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + ' <?=getHouseholdCurrency()?><br/>' +
                        'Total: ' + this.point.stackTotal + ' <?=getHouseholdCurrency()?>';
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal'
                }
            },
            series: data.series
        });
    }

    function updateGraphMonthPlus(year) {
		var requestData = {
			action: "graph-month-plus",
			year: year
		};
		requestGraphData(requestData, "graphMonthPlus", drawGraphMonthPlus, true);
	}

	function drawGraphMonthPlus(divId, data) {
		$('#' + divId).highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Save per month for ' + data.year
            },
            yAxis: {
                allowDecimals: false,
                title: {
                    text: '<?=getHouseholdCurrency()?>'
                }
            },
            xAxis: {
                categories: data.xCategories
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' + this.y + ' <?=getHouseholdCurrency()?>';
                }
            },
            credits: {
                enabled: false
            },
            series: [
                {
                    name: 'Sum',
                    data: data.seriesData
                }
            ]
        });
	}

	function updateGraphMonthAvg(year) {
		var requestData = {
			action: "graph-month-avg",
			year: year
		};
		requestGraphData(requestData, "graphMonthAvg", drawGraphMonthAvg, true);
	}

	function drawGraphMonthAvg(divId, data) {
		$('#' + divId).highcharts({
			chart: {
                type: 'pie',
				events: {
	                drillup: function(event) {
						closeCategoryDetails();
	                },
					drilldown: function(event) {
	                }
	            }
            },
	        title: {
	            text: 'Average income and expenses per month for ' + data.year
	        },
	        plotOptions: {
                series: {
					dataLabels: {
                        enabled: true,
                        format: '<span style="color:{point.color}">{point.name}: {point.y:.0f} <?=getHouseholdCurrency()?></span>'
                    },
					point: {
						events: {
			            	click: function(event) {
								if(event.point.id) {
									showCategoryDetails(divId, data.year, event.point.name, event.point.id);
								}
			                }
			            }
					},
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}: {point.y:.0f} <?=getHouseholdCurrency()?></span>'
            },
			series: [
				{
		            name: 'Income/expense',
		            colorByPoint: true,
		            data: data.seriesData
				}
			],
	        drilldown: {
	            series: data.drilldownSeries
	        }
	    });
	}

	var categoryDetailsDivId = null;
	function closeCategoryDetails() {
		if(categoryDetailsDivId != null) {
			var tempDivId = categoryDetailsDivId;
			categoryDetailsDivId = null;

			$('#' + tempDivId).animate(
				{
					opacity: 0,
					left: "+=50"
				},
				200,
				function() {
					removeDiv(tempDivId);
				}
			);
		}
	}

	function showCategoryDetails(divId, year, categoryName, categoryId) {
		closeCategoryDetails();

		categoryDetailsDivId = createDivRelative("loadingDiv", divId);
		$('#' + categoryDetailsDivId).html("<img src='graphics/loading.gif' /> Loading details for category \"" + categoryName + "\"...");
		$('#' + categoryDetailsDivId).animate(
			{
				opacity: 1,
				left: "+=30"
			},
			200,
			function() {
				var requestData = {
					action: "category-details",
					year: year,
					categoryId: categoryId
				};
				requestGraphData(requestData, categoryDetailsDivId, drawCategoryDetails, false);
			}
		);
	}

	function drawCategoryDetails(divId, data) {
		var html = "";
		html += data.categoryGroupName + " - " + data.categoryName + "<br/>";
		html += "<table class='list-c'>";
		html += "	<tr>";
		html += "		<th>Month</th>";
		html += "		<th>Sum</th>";
		html += "	</tr>";
		for(var i = 0; i < data.months.length; i++) {
			html += "	<tr>";
			html += "		<td>" + data.months[i].month + "</td>";
			html += "		<td class='right'>" + data.months[i].sum + " <?=getHouseholdCurrency()?></td>";
			html += "	</tr>";
		}
		html += "	<tr>";
		html += "		<td></td>";
		html += "		<td></td>";
		html += "	</tr>";
		html += "	<tr>";
		html += "		<th>Monthly average</th>";
		html += "		<td class='right'>" + data.monthlyAverage + " <?=getHouseholdCurrency()?></td>";
		html += "	</tr>";
		html += "	<tr>";
		html += "		<th>Total sum</th>";
		html += "		<td class='right'>" + data.yearSum + " <?=getHouseholdCurrency()?></td>";
		html += "	</tr>";
		html += "	<tr>";
		html += "		<td colspan='2' class='right'><button onclick='closeCategoryDetails();'>Close</button></td>";
		html += "	</tr>";
		html += "</table>";
		$('#' + divId).html(html);
	}
</script>

<?
	closeDatabaseConnection();
?>