Widget:Total phosphorus trend graph

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

  		function <!--{$id|default:drawPhosphorusTrendChart|escape:'html'}-->_jQueryTest() {
  		  	if ( typeof window.jQuery == 'undefined' ) {
  		  		setTimeout( function(){ <!--{$id|default:drawPhosphorusTrendChart|escape:'html'}-->_jQueryTest() }, 300);
  		  	} else {
  		  		google.charts.load( 'current', { 'packages':[ 'corechart' ], 'language': 'fi' } );
				google.setOnLoadCallback(<!--{$id|default:drawPhosphorusTrendChart|escape:'html'}-->_func);
  		  	}
  		}
  		setTimeout( function(){ <!--{$id|default:drawPhosphorusTrendChart|escape:'html'}-->_jQueryTest() }, 300);

		function <!--{$id|default:drawPhosphorusTrendChart|escape:'html'}-->_func() {

	    		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::Kokonaisfosfori]]");
			searchStr += encodeURI("|?Päivämäärä|?Luokittelu|?Kokonaisfosfori|?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 today = new Date();
				var curYear = today.getFullYear();

				var firstYear = 3000;
				var lastYear = 0;
				var minVal = 1000;
				var maxVal = 0;
				var categoriesArr = new Array();
				var numberOfCats;
				
				var imagesArr = new Array();
				var images = 0;

				if (request.query.results != undefined) {

					zi = -1;
					for (var i in request.query.results) {
						
						zi++;
						var resultItem = request.query.results[i].printouts;

						var obsDate = new Date(toDateFromSecsSince1970(resultItem.Päivämäärä[0].timestamp));
						var obsVal = resultItem.Kokonaisfosfori[0].value;

						if (obsDate.getFullYear() < firstYear) { firstYear = obsDate.getFullYear(); }
						if (obsDate.getFullYear() > lastYear) { lastYear = obsDate.getFullYear(); }
						if (obsVal < minVal) { minVal = obsVal; }
						if (obsVal > maxVal) { maxVal = obsVal; }

						if (categoriesArr[resultItem.Luokittelu[0]] == undefined) {
							categoriesArr[resultItem.Luokittelu[0]] = new Array();
						}
						categoriesArr[resultItem.Luokittelu[0]].push(resultItem);
						
						 // 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--; }
							});
						}

					}

					numberOfCats = Object.keys(categoriesArr).length;

					var zc = -1;
					for (var e in categoriesArr) {

						zc++;

						daysSum = 0;
						valSum = 0;

						zi = -1;
						for (var a in categoriesArr[e]) {
							zi++;	    					
							resultItem = categoriesArr[e][a];

							obsDate = new Date(toDateFromSecsSince1970(resultItem.Päivämäärä[0].timestamp));
							obsVal = resultItem.Kokonaisfosfori[0].value;

							daysSum += 365.25 * obsDate.getFullYear() + obsDate.getDayOfYear();
							valSum += obsVal;
						}

						daysMean = daysSum / (zi+1);
						valMean = valSum / (zi+1);
						sigma1 = 0;
						sigma2 = 0;

						//zi = -1;
						for (var a in categoriesArr[e]) {
							//zi++;
							resultItem = categoriesArr[e][a];

							obsDate = new Date(toDateFromSecsSince1970(resultItem.Päivämäärä[0].timestamp));
							obsVal = resultItem.Kokonaisfosfori[0].value;

							obsDays = 365.25 * obsDate.getFullYear() + obsDate.getDayOfYear();
							sigma1 += (obsDays - daysMean) * (obsVal - valMean);
							sigma2 += (obsDays - daysMean) * (obsDays - daysMean);
						}
						categoriesArr[e].c = zc;
						categoriesArr[e].m = sigma1/sigma2;
						categoriesArr[e].b = valMean - ((sigma1/sigma2) * daysMean);
					}

					function imagesLoaded() {

						if (images != 0) { setTimeout(function() {
							imagesLoaded()},500);
						} else {
							// add to data table

							var dataArr = new Array();		                    				
							var dataTable = new google.visualization.DataTable();

							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].timestamp));
								obsVal = resultItem.Kokonaisfosfori[0].value;

								dataRow = new Array();	
								for (e = 0; e < (numberOfCats)*6+1; e++) { dataRow[e] = null; }

								luokka = resultItem.Luokittelu[0];
								if (luokka == 'Ei') {
									luokka = '';
								} else {
									luokka = ' (' + luokka + ')';
								}

								tooltip = '<div style="padding: 8px; max-width: 196px;"><b>' + phosphorusTrendTranslate(1, lang) + luokka + ': ' + obsVal + ' mg/l</b> (' + obsDate.toLocaleDateString() + ')';
								//console.log(imagesArr[zi]);
								if (imagesArr[zi]) {
									tooltip += '<br />' + '<div class="ibuTooltipDiv" id="ibuTooltipDiv_' + zi + '" style="margin-top: 5px;"><img class="ibuTooltipImg" id="ibuTooltipImg_' + zi + '" style="max-width: 196px; max-height: 196px;" src="' + imagesArr[zi] + '" /></div>';
								}
								if (resultItem.Lisätiedot[0] != undefined) {
									tooltip += '<div style="margin-top: 5px;" >' + resultItem.Lisätiedot[0] + '</div>';
								}
								tooltip += '</div>';	

								c = categoriesArr[resultItem.Luokittelu[0]].c;
								m = categoriesArr[resultItem.Luokittelu[0]].m;
								b = categoriesArr[resultItem.Luokittelu[0]].b;

								tooltip2 = '<div style="padding: 8px;">' + phosphorusTrendTranslate(4, lang);
								if (m > 0) { 
									tooltip2 += ' + '; 
								} else { 
									tooltip2 += ' - ';
								}
								tooltip2 += Math.abs(Math.round(10 * (m * 10*365.25 + b - b))/10);
								tooltip2 += phosphorusTrendTranslate(5, lang) + '</div>';

								dataRow[0] = 365.25 * obsDate.getFullYear() + obsDate.getDayOfYear();
								dataRow[c * 6 + 1] = obsVal;
								dataRow[c * 6 + 2] = tooltip;
								dataRow[c * 6 + 3] = ""; //annotation

								dataRow[c * 6 + 4] = m * (365.25 * obsDate.getFullYear() + obsDate.getDayOfYear()) + b;
								dataRow[c * 6 + 5] = tooltip2;
								dataRow[c * 6 + 6] = false;

								dataArr.push(dataRow);
							}

							dataTable.addColumn('number', 'Date');
							for (e = 0; e < numberOfCats; e++) {
								dataTable.addColumn('number', 'Value');
								dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true }});
								dataTable.addColumn({type: 'string', role: 'annotation'});
								dataTable.addColumn('number', 'Trend');
								dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true }});
								dataTable.addColumn({type: 'boolean', role:'certainty' });
							}
							dataTable.addRows(dataArr);

							minVal = Math.floor(minVal);
							maxVal = Math.floor(maxVal)+1;

							var hAxisTicks = new Array();
							for (i=firstYear; i<=lastYear; i++) {
								middleOfYear = (i+0.5)*365.25;
								hAxisTicks.push({v: middleOfYear, f: String(i) });
							}
							var options = {
								hAxis: { title: phosphorusTrendTranslate(0, lang), titleTextStyle: { bold: true }, minValue: firstYear*365.25, maxValue: (lastYear+1)*365.25, ticks: hAxisTicks, gridlines: { color: 'transparent' }, minorGridlines: { count: 1, color: '#ccc' } },
								//vAxis: { title: phosphorusTrendTranslate(1, lang) + ', mg/l', titleTextStyle: { bold: true }, minValue: minVal, maxValue: maxVal },
								vAxis: { 
									title: phosphorusTrendTranslate(1, lang) + ', mg/l', 
									titleTextStyle: { bold: true }, 
									//minValue: minVal, 
									//maxValue: maxVal,
									viewWindowMode:'explicit',
									viewWindow:{
										min:0
									}
								},
								seriesType: "scatter",
								interpolateNulls: true,
								series: { 
									0: { color: 'blue', type: "line", curveType: 'function', pointSize: 6, lineWidth: 2 }, 
									1: { color: 'blue', type: "line", lineWidth: 3 }, 
									2: { color: 'green', type: "line", curveType: 'function', pointSize: 6, lineWidth: 2 }, 
									3: { color: 'green', type: "line", lineWidth: 3 }, 
									4: { color: 'gray', type: "line", curveType: 'function', pointSize: 6, lineWidth: 2 }, 
									5: { color: 'gray', type: "line", lineWidth: 3 }, 
									6: { type: "line", curveType: 'function', pointSize: 5, lineWidth: 2 }, 
									7: { type: "line", lineWidth: 3 } 
								},
								legend: { position: 'none' },
								backgroundColor: { fill:'transparent' },
								crosshair: { trigger: 'both' },
								chartArea: { top: 10, left: 80, width: (jQuery('#phosphorus-trend_chart_div').width() - 80 - 20), height: (jQuery('#phosphorus-trend_chart_div').height() - 50 - 10), backgroundColor: { stroke: '#ccc', strokeWidth: 1, fill: '#daf0fa' } },
								tooltip: { isHtml: true }
							};

							var chart = new google.visualization.ComboChart(document.getElementById('phosphorus-trend_chart_div'));
							chart.draw(dataTable, options);

							jQuery( window ).resize(function() {
							
								options.chartArea.width = (jQuery('#phosphorus-trend_chart_div').width() - 80 - 20);
								options.chartArea.height = (jQuery('#phosphorus-trend_chart_div').height() - 50 - 10);
								chart.draw(dataTable, options);
							});

						}
					}
					imagesLoaded();
				}
			}

			function phosphorusTrendTranslate(labelId, lang) {

				var labels = {
						fi: ['Vuosi', 'Kokonaisfosfori', 'aikaisin', 'myöhäisin', 'Trendi: ', ' µg/l / 10 vuotta'],
						sv: ['År', 'Total fosfor', 'tidigast', 'senast', 'Trend: ', ' µg/l / 10 år'],
						en: ['Year', 'Total phosphorus level', 'earliest', 'latest', 'Trend: ', ' µg/l / 10 years']
				};

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

    	</script>

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