Widget:PH trend graph

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

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

		function <!--{$id|default:drawpHTrendChart|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::pH]]");
				searchStr += encodeURI("|?Päivämäärä|?PH|?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 daysSum = 0;
					var pHSum = 0;
					var firstYear = 3000;
					var lastYear = 0;
					var minpH = 100;
					var maxpH = 0;

					var today = new Date();
					var curYear = today.getFullYear();
					var dataArr = new Array();
					var imagesArr = new Array();

					var firstMonth = 12;
					var lastMonth = 1;
					var minDay = 365;
					var maxDay = 0;
					var daysCount = 0;
					var yearSum = 0;
					var images=0;

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

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

	    						if (obsDate.getFullYear() < firstYear) { firstYear = obsDate.getFullYear(); }
	    						if (obsDate.getFullYear() > lastYear) { lastYear = obsDate.getFullYear(); }
	    						if (obsVal < minpH) { minpH = obsVal; }
	    						if (obsVal > maxpH) { maxpH = obsVal; }
	    							    						
	                       				 // 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) {
										//console.log(request2);
										for (var x in request2.query.pages) {
											imagesArr[this.index] = request2.query.pages[x].imageinfo[0].url;
											break;
  										}
										images--;
									},
									error: function() { images--; }
								});
							}
	                    			}
	                    								    	
	                   			// count linear regression
	                 			var daysMean = daysSum / (zi+1);
	                    			var pHMean = pHSum / (zi+1);
	                    			var sigma1 = 0;
						var sigma2 = 0;

						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.PH[0];
							obsDays = 365.25 * obsDate.getFullYear() + obsDate.getDayOfYear();
							sigma1 += (obsDays - daysMean) * (obsVal - pHMean);
	    					        sigma2 += (obsDays - daysMean) * (obsDays - daysMean);
	                   			 }
						var m = sigma1/sigma2;
						var b = pHMean - (m * daysMean);

						function imagesLoaded() {

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

	                    		// add to data table
	                    				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.PH[0];
									dataRow = new Array();
			    						dataRow[0] = 365.25 * obsDate.getFullYear() + obsDate.getDayOfYear();
			    						dataRow[1] = obsVal;
			    						dataRow[2] = '<div style="padding: 8px; max-width: 196px;"><b>' + pHTrendTranslate(1, lang) + ': ' + obsVal + '</b> (' + obsDate.toLocaleDateString() + ')';
			    						if (imagesArr[zi]) {
										dataRow[2] += '<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) {
	    								dataRow[2] += '<div style="margin-top: 5px;" >' + resultItem.Lisätiedot[0] + '</div>';
	    							}
	    							dataRow[2] += '</div>';
			    					dataRow[3] = null;
			    					dataRow[4] = m * (365.25 * obsDate.getFullYear() + obsDate.getDayOfYear()) + b;
			    					dataRow[5] = '<div style="padding: 8px;">' + pHTrendTranslate(4, lang);
			    					if (m > 0) { dataRow[5] += ' + '; } else { dataRow[5] += ' - '; }
			    					dataRow[5] += Math.abs(Math.round(10 * (m * 10*365.25 + b - b))/10);
			    					dataRow[5] += pHTrendTranslate(5, lang) + '</div>';
			    					dataRow[6] = false;
			    					dataArr[zi] = dataRow;
			                    }

	                    		// visualization parameters

			                	minpH = Math.floor(minpH - 0.5);
			                	maxpH = Math.floor(maxpH + 1,5);

				 				var dataTable = new google.visualization.DataTable();
				  				dataTable.addColumn('number', 'Date');
				  				dataTable.addColumn('number', 'pH');
				  				dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true }});
				  				dataTable.addColumn({type: 'string', role: 'annotation'});
				  				dataTable.addColumn('number', 'Trend line');
				  				dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true }});
				  				dataTable.addColumn({type: 'boolean', role:'certainty' });

  								var vAxisTicks = new Array();
				  				var startOfMonth;
  								for (i=firstMonth; i<=lastMonth; i++) {
  									startOfMonth = new Date(curYear, i, 15);
			  					    vAxisTicks.push({v: startOfMonth.getDayOfYear(), f: startOfMonth.getMonthName(lang) });
			  					}
		  					    vAxisTicks.push({v: 1000, f: '' });

		  					    var hAxisTicks = new Array();
		  					    for (i=firstYear; i<=lastYear; i++) {
		  					    	middleOfYear = (i+0.5)*365.25;
		  					    	hAxisTicks.push({v: middleOfYear, f: String(i) });
		  					    }

							dataTable.addRows(dataArr);
				  			var options = {
				  				hAxis: { title: pHTrendTranslate(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: pHTrendTranslate(1, lang), titleTextStyle: { bold: true }}, //, minValue: minpH, maxValue: maxpH },
				  				seriesType: "scatter",
  				    				interpolateNulls: true,
				  				series: { 0: { type: "line", curveType: 'function', pointSize: 5, lineWidth: 2 }, 1: { type: "line", lineWidth: 3 } },
  				    				legend: { position: 'none' },
				  				backgroundColor: { fill:'transparent' },
  				    				crosshair: { trigger: 'both' },
				  				chartArea: { top: 10, left: 80, width: (jQuery('#pH-trend_chart_div').width() - 80 - 20), height: (jQuery('#pH-trend_chart_div').height() - 50 - 10), backgroundColor: { stroke: '#ccc', strokeWidth: 1, fill: '#daf0fa' } },
  				  				tooltip: { isHtml: true }
				  			};
  								var chart = new google.visualization.ComboChart(document.getElementById('pH-trend_chart_div'));
				  				chart.draw(dataTable, options);

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

							}
						}
						imagesLoaded();
					}
				}
			}

			function pHTrendTranslate(labelId, lang) {

				var labels = {
						fi: ['Vuosi', 'Happamuus, pH', 'happamin', 'emäksisin', 'Trendi: ', ' / 10 vuotta'],
						sv: ['År', 'Surhet, pH', 'tidigast', 'senast', 'Trend: ', ' / 10 år'],
						en: ['Year', 'pH', 'earliest', 'latest', 'Trend: ', ' / 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="pH-trend_chart_div"></div>
</includeonly>