Widget:Water level graph

<includeonly>
    	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    	<script type="text/javascript">

    		google.load('visualization', '1.0', {'packages':['corechart']});
			google.setOnLoadCallback(drawWaterLevelChart);

			function drawWaterLevelChart() {

    	    	var siteName = '<!--{$page|escape:'urlpathinfo'}-->';
		var lang = '<!--{$lang|default:fi|escape:'urlpathinfo'}-->';
				var SiteID = '<!--{$SiteID|default:x|escape:'html'}-->';

	    			var searchStr = "action=ask&query=";
	    			searchStr += "[[Havainto::>0]][[SiteID::" + SiteID + "]]";

	    			searchStr += encodeURI("[[Tyyppi::Vedenkorkeus]]");
				searchStr += encodeURI("|?Päivämäärä|?Vedenkorkeus|?Tiedosto|?Lisätiedot|sort=Päivämäärä|limit=10000");
				searchStr += '&format=json';
				jQuery.ajax({
			   		type: 'GET',
			   		url: queryApi,
			   		data: searchStr,
			   		success: success,
			   		dataType: 'jsonp'
				});

				function success(request) {

				    var dataArr = new Array();
				    var imagesArr = new Array();
				    var firstYear = 3000;
				    var lastYear = 0;
				    var today = new Date();
				    var curYear = today.getFullYear();
				    var firstMonth = 12;
				    var lastMonth = 1;
				    var minDays = 365;
				    var maxDays = 0;
				    var minLevel = 100;
				    var maxLevel = 0;
				    var images=0;
				    var levelNum;
				    var meanValuesArr = new Array();
				    var meanWeightedArr = new Array();
				    var meanFloatedArr = new Array();

					if (request.query.results != undefined) {
					
						// analyze data
						zi = -1;
						for (var i in request.query.results) {
							zi++;
							resultItem = request.query.results[i].printouts;
							obsDate = new Date(toDateFromSecsSince1970(resultItem.Päivämäärä[0]));							
							levelNum = resultItem.Vedenkorkeus[0].value;
							if (resultItem.Lisätiedot[0] != undefined) { freeTxt = resultItem.Lisätiedot[0]; }
							else { freeText = ''; }
	    						if (obsDate.getFullYear() < firstYear) { firstYear = obsDate.getFullYear(); }
	    						if (obsDate.getFullYear() > lastYear) { lastYear = obsDate.getFullYear(); }
	    						if (obsDate.getMonth() < firstMonth) { firstMonth = obsDate.getMonth(); }
	    						if (obsDate.getMonth() > lastMonth) { lastMonth = obsDate.getMonth(); }
	                      				if (levelNum < minLevel) { minLevel = levelNum; }
	                        			if (levelNum > maxLevel) { maxLevel = levelNum; }

	                        			// If image, get filename
	                        			if (resultItem.Tiedosto[0] != undefined) {
	                        				images++;
								searchStr2 = "action=query&prop=imageinfo&iiprop=url&format=json&titles=";
								searchStr2 += encodeURIComponent(resultItem.Tiedosto[0]);
								jQuery.ajax({
									type: 'GET',
									url: queryApi,
									data: searchStr2,
									dataType: 'jsonp',
									index: zi,
									success: function(request2) {
										for (var x in request2.query.pages) {
											imagesArr[this.index] = request2.query.pages[x].imageinfo[0].url;
											break;
  										}
										images--;
									},
									error: function() { images--; }
								});
							}

							if (obsDate.getFullYear() < curYear) {
								meanValuesArr.push(new Object( { days: obsDate.getDayOfYear(), level: levelNum, weight: 1 }));
							}
	                    }

						function imagesLoaded() {

							if (images != 0) { setTimeout(function() {
								imagesLoaded()},500);
							} else {

								var color0;
								var color1 = 'transparent';
								var color2 = 'transparent';
								if (curYear > lastYear) { color0 = 'transparent'; } else { color0 = '#36c'; }

								if (meanValuesArr.length > 0) {

									color1 = '#ccc';
									color2 = '#f90';

									// make floating mean
									meanValuesArr.sort(function(a,b) { return (a.days - b.days); });
									meanWeightedArr.push(meanValuesArr[0]);
									for (i = 1; i < meanValuesArr.length; i++) {
										if (meanValuesArr[i].days == meanWeightedArr[meanWeightedArr.length-1].days) {
											meanWeightedArr[meanWeightedArr.length-1].level += meanValuesArr[i].level;
											meanWeightedArr[meanWeightedArr.length-1].weight++;
										} else {
											meanWeightedArr.push(meanValuesArr[i]);
										}
									}
									for (i = 0; i < meanWeightedArr.length; i++) {
										sum = 0;
										weight = 0;
										for (e = 0; e < meanWeightedArr.length; e++) {
											if (meanWeightedArr[e].days > (meanWeightedArr[i].days-14) && meanWeightedArr[e].days < (meanWeightedArr[i].days+14)) {
												sum += meanWeightedArr[e].level;
												weight += meanWeightedArr[e].weight;
											}
										}
										meanFloatedArr[i] = new Object( { days: meanWeightedArr[i].days, level: (sum/weight) } );
									}
								}

								// make graph data table
								var annotation = null;
								zi = -1;
								for (var i in request.query.results) {
									zi++;
									resultItem = request.query.results[i].printouts;
									obsDate = new Date(toDateFromSecsSince1970(resultItem.Päivämäärä[0]));	
									dataRow = new Array();
									dataRow[0] = obsDate.getDayOfYear();
									val = resultItem.Vedenkorkeus[0].value;
									tooltip = '<div style="padding: 8px;"><b>' + levelTranslate(1, lang) + ': ' + val + ' cm</b> (' + obsDate.toLocaleDateString() + ')';
			    					if (imagesArr[zi]) {
										tooltip += '<br />' + '<div class="levelTooltipDiv" id="levelTooltipDiv_' + zi + '" style="width: 144px; height: 144px;"><img class="levelTooltipImg" id="levelTooltipImg_' + zi + '" style="max-width: 144px; max-height: 144px;" src="' + imagesArr[zi] + '" /></div>';
									}
									if (resultItem.Lisätiedot[0] != undefined) { tooltip += '<br />' + resultItem.Lisätiedot[0]; }
	    							tooltip += '</div>';
						
									if (obsDate.getFullYear() == curYear) {
										dataRow[1] = val;
										dataRow[2] = tooltip;
										dataRow[3] = annotation;
										dataRow[4] = null;
										dataRow[5] = null;
										dataRow[6] = null;
									} else {
										dataRow[1] = null;
										dataRow[2] = null;
										dataRow[3] = null;
										dataRow[4] = val;
										dataRow[5] = tooltip;
										dataRow[6] = annotation;
									}
									dataRow[7] = null;
									dataRow[8] = null;
									dataRow[9] = true;
	    								dataArr.push(dataRow);
								}

								for (i = 0; i < meanFloatedArr.length; i++) {
									dataRow = new Array();
									dataRow[0] = meanFloatedArr[i].days;
									dataRow[1] = null;
									dataRow[2] = null;
									dataRow[3] = null;
									dataRow[4] = null;
									dataRow[5] = null;
									dataRow[6] = null;
									dataRow[7] = meanFloatedArr[i].level;
									dataRow[8] = '';
									dataRow[9] = false;
									dataArr.push(dataRow);
								}


	                    		// visualization parameters

								// dataTable columns
				 				var dataTable = new google.visualization.DataTable();
				 				dataTable.addColumn('number', 'Date');
				 				if (curYear > lastYear) {
				 					if (firstYear == lastYear) { yearSpan = firstYear; }
				 					else { yearSpan = firstYear + '-' + lastYear; }
				 					dataTable.addColumn('number', '');
				 				} else {
				 					if (firstYear == lastYear) { yearSpan = firstYear; }
				 					else { yearSpan = firstYear + '-' + (lastYear-1); }
				 					dataTable.addColumn('number', curYear);
				 				}
				  				dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true }});
				  				dataTable.addColumn({type: 'string', role: 'annotation'});
				  				if (meanValuesArr.length > 0) {
				  					dataTable.addColumn('number',  yearSpan);
				  					dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true }});
				  					dataTable.addColumn({type: 'string', role: 'annotation'});
									dataTable.addColumn('number', levelTranslate(2, lang) + ' ' + yearSpan);
								} else {
					  				dataTable.addColumn('number',  '');
				  					dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true }});
				  					dataTable.addColumn({type: 'string', role: 'annotation'});
									dataTable.addColumn('number', '');
				  				}
				  				dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true }});
				  				dataTable.addColumn({type: 'boolean', role:'certainty' });

  								var hAxisTicks = new Array();
				  				var startOfMonth;
  								for (i=firstMonth; i<=lastMonth; i++) {
  									startOfMonth = new Date(curYear, i, 15);
  									if ((lastMonth-firstMonth) < 6) {
			  					    	hAxisTicks.push({v: startOfMonth.getDayOfYear(), f: startOfMonth.getMonthName(lang) });
			  					    } else {
			  					    	hAxisTicks.push({v: startOfMonth.getDayOfYear(), f: startOfMonth.getMonthNameShort(lang) });
			  					    }
			  					}

  								dataTable.addRows(dataArr);
				  				var options = {
				  				    seriesType: "scatter",
  				    				interpolateNulls: true,
  				    				hAxis: { slantedText: false, maxAlternation: 1, maxValue: new Date(curYear, lastMonth+1, 1).getDayOfYear()-1, ticks: hAxisTicks, gridlines: { color: 'transparent' }, minorGridlines: { count: 1, color: '#ccc' }, viewWindowMode:'explicit', viewWindow:{ min: new Date(curYear, firstMonth, 1).getDayOfYear() } },
  				    				vAxis: { title: levelTranslate(1, lang) + ', cm', titleTextStyle: { bold: true }, minValue: 0 },
  				    				series: {
  				    					0: { type: 'line', pointSize: 8, lineWidth: 5, curveType: 'function', color: color0  },
  				    					1: { type: 'scatter', pointSize: 3, color: color1 },
  				    					2: { type: 'line', pointSize: 0, lineWidth: 3, curveType: 'function', color: color2, enableInteractivity : false }
  				    				},
  				    				legend: { position: 'bottom' },
				  				    backgroundColor: { fill:'transparent' },
  				    				crosshair: { trigger: 'both' },
				  				    chartArea: { top: 10, left: 80, width: (jQuery('#water-level_chart_div').width() - 80 - 20), height: (jQuery('#water-level_chart_div').height() - 50 - 10), backgroundColor: { stroke: '#ccc', strokeWidth: 1, fill: '#daf0fa' } },
  				  					tooltip: { isHtml: true }
				  				};
  								var chart = new google.visualization.ComboChart(document.getElementById('water-level_chart_div'));
				  				chart.draw(dataTable, options);

				  				jQuery( window ).resize(function() {
				  					//console.log((jQuery('#water-level_chart_div').width() - 80 - 10));
				  					options.chartArea.width = (jQuery('#water-level_chart_div').width() - 80 - 20);
				  					options.chartArea.height = (jQuery('#water-level_chart_div').height() - 50 - 10);
									chart.draw(dataTable, options);
								});

							}
						}
						imagesLoaded();
					}
				}
			}

			function levelTranslate(labelId, lang) {

				var labels = {
						fi: ['Päivämäärä', 'Vedenkorkeus', 'Keskiarvo', 'lämpimin', 'Trendi: ', '2 viikon liukuva keskiarvo'],
						sv: ['Datum', 'Vattenstånd', 'Medelvärde', 'varmaste', 'Trend: ', '2 veckors glidande medelvärde'],
						en: ['Date', 'Water level', 'Average', 'warmest', 'Trend: ', '2-week moving average']
				};

				lang = lang && (lang in labels) ? lang : 'en';
			    return labels[lang][labelId];
			}

			Date.prototype.getDayOfYear = function () {
    			var aggregateMonths = [0, // January
                	31, // February
                    31 + 28, // March
                    31 + 28 + 31, // April
                    31 + 28 + 31 + 30, // May
                    31 + 28 + 31 + 30 + 31, // June
                    31 + 28 + 31 + 30 + 31 + 30, // July
                    31 + 28 + 31 + 30 + 31 + 30 + 31, // August
                    31 + 28 + 31 + 30 + 31 + 30 + 31 + 31, // September
                    31 + 28 + 31 + 30 + 31 + 30 + 31 + 31 + 30, // October
                    31 + 28 + 31 + 30 + 31 + 30 + 31 + 31 + 30 + 31, // November
                    31 + 28 + 31 + 30 + 31 + 30 + 31 + 31 + 30 + 31 + 30, // December
                ];

			    return (aggregateMonths[this.getMonth()] + this.getDate());
			}


			Date.prototype.getMonthName = function(lang) {
			    lang = lang && (lang in Date.locale) ? lang : 'en';
			    return Date.locale[lang].month_names[this.getMonth()];
			};

			Date.prototype.getMonthNameShort = function(lang) {
			    lang = lang && (lang in Date.locale) ? lang : 'en';
			    return Date.locale[lang].month_names_short[this.getMonth()];
			};

			Date.locale = {
			    fi: {
			       month_names: ['Tammikuu', 'Helmikuu', 'Maaliskuu', 'Huhtikuu', 'Toukokuu', 'Kesäkuu', 'Heinäkuu', 'Elokuu', 'Syyskuu', 'Lokakuu', 'Marraskuu', 'Joulukuu'],
			       month_names_short: ['Tammi', 'Helmi', 'Maalis', 'Huhti', 'Touko', 'Kesä', 'Heinä', 'Elo', 'Syys', 'Loka', 'Marras', 'Joulu']
			    },
			    sv: {
			       month_names: ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'],
			       month_names_short: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec']
			    },
			    en: {
			       month_names: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
			       month_names_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
			    }
			};


    	</script>

    <!--Div that will hold the pie chart-->
    <div style="Xbackground-color: #c1e7f7; height: 300px;" id="water-level_chart_div"></div>
</includeonly>