Widget:PH graph

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

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

		function <!--{$id|default:drawpHChart|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 dataArr = new Array();
				    //var sourceDataArr = new Array();
				    var imagesArr = new Array();
				    var firstYear = 3000;
				    var lastYear = 0;
				    var today = new Date();
				    var curYear = today.getFullYear();
				    //curYear = 2013;
				    var firstMonth = 12;
				    var lastMonth = 1;
				    var minDays = 365;
				    var maxDays = 0;
				    var minpH = 14;
				    var maxpH = 0;
				    var images=0;
				    var pHNum;
				    var meanValuesArr = new Array();
				    var meanWeightedArr = new Array();
				    var meanFloatedArr = new Array();

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

						// analyze & store data
						zi = -1;						
						for (var i in request.query.results) {
							zi++;
							resultItem = request.query.results[i].printouts;	
						//console.log(resultItem);
							pHNum = resultItem.PH[0];
							if (resultItem.Lisätiedot[0] != undefined) { freeTxt = resultItem.Lisätiedot[0]; }
							else { freeText = ''; }
							
							obsDate = new Date(toDateFromSecsSince1970(resultItem.Päivämäärä[0].timestamp));
	    						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 (pHNum < minpH) { minpH = pHNum; }
	                        			if (pHNum > maxpH) { maxpH = pHNum; }

	                        			// 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--; }
								});
							}

							if (obsDate.getFullYear() < curYear) {
								meanValuesArr.push(new Object( { days: obsDate.getDayOfYear(), trans: pHNum, 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].trans += meanValuesArr[i].trans;
											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].trans;
												weight += meanWeightedArr[e].weight;
											}
										}
										meanFloatedArr[i] = new Object( { days: meanWeightedArr[i].days, trans: (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;							
									val = resultItem.PH[0];							
									obsDate = new Date(toDateFromSecsSince1970(resultItem.Päivämäärä[0].timestamp));
									dataRow = new Array();
									dataRow[0] = obsDate.getDayOfYear();
									tooltip = '<div style="padding: 8px; max-width: 196px;"><b>' + pHTranslate(1, lang) + ': ' + val + '</b> (' + obsDate.toLocaleDateString() + ')';
			    					if (imagesArr[zi]) {
										tooltip += '<br />' + '<div style="margin-top: 5px;" class="transTooltipDiv" id="transTooltipDiv_' + i + '"><img class="transTooltipImg" id="transTooltipImg_' + i + '" 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>';
									
									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].trans;
									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', pHTranslate(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: pHTranslate(1, lang), titleTextStyle: { bold: true }, minValue: Math.floor(minpH), direction: 1  },
  				    				series: {
  				    					0: { type: 'line', pointSize: 12, lineWidth: 5, curveType: 'function', color: color0  },
  				    					1: { type: 'scatter', pointSize: 5, 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('#pH_chart_div').width() - 80 - 20), height: (jQuery('#pH_chart_div').height() - 50 - 10), backgroundColor: { stroke: '#ccc', strokeWidth: 1, fill: '#daf0fa' } },
  				  					tooltip: { isHtml: true }
				  				};
  								var chart = new google.visualization.ComboChart(document.getElementById('pH_chart_div'));
				  				chart.draw(dataTable, options);

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

							}
						}
						imagesLoaded();
					}
				}
			}

			function pHTranslate(labelId, lang) {

				var labels = {
						fi: ['Päivämäärä', 'Happamuus, pH', 'Keskiarvo', '', 'Trendi: ', '2 viikon liukuva keskiarvo'],
						sv: ['Datum', 'Surhet, pH', 'Medelvärde', '', 'Trend: ', '2 veckors glidande medelvärde'],
						en: ['Date', 'pH', 'Average', '', 'Trend: ', '2-week moving average']
				};

				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_chart_div"></div>
</includeonly>