Widget:Chlorophyll-a trend graph

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

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

		function <!--{$id|default:drawChlorophyllChart|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::Klorofylli-a]]");
				searchStr += encodeURI("|?Päivämäärä|?Luokittelu|?Klorofylli-a|?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;
							
							//console.log(resultItem["Klorofylli-a"]);
							
							var obsDate = new Date(toDateFromSecsSince1970(resultItem.Päivämäärä[0].timestamp));
							var obsVal = resultItem["Klorofylli-a"][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["Klorofylli-a"][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["Klorofylli-a"][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["Klorofylli-a"][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>' + chlorophyllTrendTranslate(1, lang) + luokka + ': ' + obsVal + ' µg/l</b> (' + obsDate.toLocaleDateString() + ')';
									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;">' + chlorophyllTrendTranslate(4, lang);
									if (m > 0) { 
										tooltip2 += ' + '; 
									} else { 
										tooltip2 += ' - ';
									}
									tooltip2 += Math.abs(Math.round(10 * (m * 10*365.25 + b - b))/10);
			    						tooltip2 += chlorophyllTrendTranslate(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: chlorophyllTrendTranslate(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: chlorophyllTrendTranslate(1, lang) + ', µg/l', titleTextStyle: { bold: true }, minValue: minVal, maxValue: maxVal },
  				    					vAxis: { 
  				    						title: chlorophyllTrendTranslate(1, lang) + ', µg/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('#chlorophyll-trend_chart_div').width() - 80 - 20), height: (jQuery('#chlorophyll-trend_chart_div').height() - 50 - 10), backgroundColor: { stroke: '#ccc', strokeWidth: 1, fill: '#daf0fa' } },
  				  					tooltip: { isHtml: true }
				  				};
				  				
  								var chart = new google.visualization.ComboChart(document.getElementById('chlorophyll-trend_chart_div'));
				  				chart.draw(dataTable, options);

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

							}
						}
						imagesLoaded();
					}
				}

			function chlorophyllTrendTranslate(labelId, lang) {

				var labels = {
						fi: ['Vuosi', 'Klorofylli-a', 'aikaisin', 'myöhäisin', 'Trendi: ', ' µg/l / 10 vuotta'],
						sv: ['År', 'Syrehalt', 'tidigast', 'senast', 'Trend: ', ' µg/l / 10 år'],
						en: ['Year', 'Oxygen 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="chlorophyll-trend_chart_div"></div>
</includeonly>