Widget:Algaline temperature trend graph

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

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

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

			var id = '<!--{$id|default:AlgalineTemperatureChart|escape:'urlpathinfo'}-->';
			var lang = '<!--{$lang|default:fi|escape:'urlpathinfo'}-->';
			var basin = '<!--{$basin|default:0|escape:'urlpathinfo'}-->';
			var timestep = '<!--{$timestep|default:week|escape:'urlpathinfo'}-->';

			var searchStr = 'variable=Soxtemp&basin=' + basin + '&timestep=' + timestep;
			jQuery.ajax({
		   		type: 'GET',
		   		url: '//www.jarviwiki.fi/common/algaline/algaline.php',
		   		data: searchStr,
		   		success: success,
		   		dataType: 'json'
			});

			function success(request) {
			
				var colors = ['#010202', '#ee2e2f', '#008c48', '#185aa9', '#f47d23', '#662c91', '#a21d21', '#b43894'];

				var firstym = 300012;
				var lastym = 100001;
				var firstx = 30000000;
				var lastx = 0;
				var categoriesArr = new Object();
				
				for (var i in request) {
					resultItem = request[i];
					if (categoriesArr[resultItem.basin] == undefined) {
						categoriesArr[resultItem.basin] = new Array();
	    				}
					categoriesArr[resultItem.basin].push(resultItem);
				}
				var numberOfCats = Object.keys(categoriesArr).length;
				
				var dataArr = new Array();
				var dataTable = new google.visualization.DataTable();
				dataTable.addColumn('number', 'Week');

				var c = -1;
				for (var i in categoriesArr) {
				
					c++;
					
					for (var a in categoriesArr[i]) {
										
						resultItem = categoriesArr[i][a];
						yearweek = parseInt(resultItem.yearweek);
						yearw = Math.floor(yearweek/100);
						yweek = yearweek - yearw*100;
						month = parseInt(resultItem.month);
						year = parseInt(resultItem.year);
						week = parseInt(resultItem.week);
						date = new Date(resultItem.date);
						if (week < 10) { weekStr = '0' + week.toString(); }
						else { weekStr = week.toString(); }
						value = parseFloat(resultItem.val);
						
						if (timestep == 'day') {
							xdate = date;
						} else if (timestep == 'week') {
							xdate = firstDayOfWeek (yearw, yweek);
							xdate.setDate(xdate.getDate() + 3);
						} else {
							xdate = new Date(year, 7, 1);
						}
						xvalue = xdate.getDaysSinceZero();

						dataRow = new Array();	
						for (e = 0; e < (numberOfCats)*2+1; e++) { dataRow[e] = null; }
												    							
						tooltip = '<div style="padding: 8px; max-width: 196px;">';

						tooltip += '<div style="float: left;"><svg height="10" width="15"><circle cx="5" cy="5" r="5" stroke="black" stroke-width="0" fill="' + colors[c] + '" /></svg></div>';
						
						tooltip += '<div style="float: left;"><b><a href="//www.jarviwiki.fi/wiki/' + IdToSubBasinName(resultItem.basin, lang) + '">' + IdToSubBasinName(resultItem.basin, lang) + '</a></b><br />';
						
						if (timestep == 'day') {
							tooltip += '<b>' + AlgTempLabels(3, lang) + ':</b> ' + date.toLocaleDateString() + '<br />';	
						} else if (timestep == 'week') {
							tooltip += '<b>' + AlgTempLabels(2, lang) + ':</b> ' + weekStr + '/' + year.toString() + '<br />';
						} else {
							tooltip += '<b>' + AlgTempLabels(1, lang) + ':</b> ' + year.toString() + '<br />';
						}
						tooltip += '<b>' + AlgTempLabels(0, lang) + ':</b> ' + (Math.round(value*100)/100).toString() + ' °C <span class="small">(n=' + resultItem.n + ')</span>';
						tooltip += '</div>{{JwClear}}</div>';

						ym = year*100+month; 
						if (ym < firstym) { firstym = ym; }
						if (ym > lastym) { lastym = ym; }
						
						if (xvalue < firstx) { firstx = xvalue; }
						if (xvalue > lastx) { lastx = xvalue; }
						
						dataRow[0] = xvalue;
						
						dataRow[c * 2 + 1] = value;
						dataRow[c * 2 + 2] = tooltip;
			    						
						dataArr.push(dataRow);
						
					}
					
					dataTable.addColumn('number', IdToSubBasinName(i, lang));
					dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true }});
				}

				dataTable.addRows(dataArr);
				
				var hAxisTicks = new Array();				
				
				var xDate1 = new Date(Math.round(firstym/100), firstym-Math.round(firstym/100)*100-1);
				var xDate2 = new Date(Math.round(lastym/100), lastym-Math.round(lastym/100)*100-1);
				firstx = xDate1.getDaysSinceZero();
				xDate2.setMonth(xDate2.getMonth() + 1);
				lastx = xDate2.getDaysSinceZero();

				var ticks = Math.round((lastx-firstx)/30.4375);
				var tickDate = xDate1;
				tickDate.setDate(30.4375/2);
				for (i=0; i<ticks; i++) {
					v = tickDate.getDaysSinceZero();
					f = tickDate.getMonthNameShort(lang);
					hAxisTicks.push({v: v, f: f });
					tickDate.setMonth(tickDate.getMonth()+1);
				}
				
				var htitle;
				if (timestep == 'day') { htitle = AlgTempLabels(3, lang); }
				else if (timestep == 'week') { htitle = AlgTempLabels(2, lang); }
				else if (timestep == 'month') { htitle = AlgTempLabels(4, lang); }
				else { htitle = AlgTempLabels(1, lang); }

  				var options = {
					hAxis: { title: htitle, slantedText: false, titleTextStyle: { bold: true }, ticks: hAxisTicks, viewWindowMode: 'explicit', viewWindow: { min: firstx, max: lastx-1}, gridlines: { color: 'transparent' }, minorGridlines: { count: 1, color: '#ccc' } },
  				    	vAxis: { 
  				    		title: AlgTempLabels(0, lang) + ', °C', 
  				    		titleTextStyle: { bold: true }, 
  				    		viewWindowMode:'explicit',
						viewWindow:{
						   	min:0,
						   	Xmax: 30
						}
             				},
             				colors: colors,
					series: { 
						0: { Xcolor: 'blue', type: "line", XcurveType: 'function', pointSize: 8, lineWidth: 3 }, 
						1: { Xcolor: 'green', type: "line", XcurveType: 'function', pointSize: 8, lineWidth: 3 }, 
						2: { Xcolor: 'gray', type: "line", XcurveType: 'function', pointSize: 8, lineWidth: 3 }, 
						3: { Xcolor: 'gray', type: "line", XcurveType: 'function', pointSize: 8, lineWidth: 3 }, 
						4: { Xcolor: 'gray', type: "line", XcurveType: 'function', pointSize: 8, lineWidth: 3 }, 
						5: { Xcolor: 'gray', type: "line", XcurveType: 'function', pointSize: 8, lineWidth: 3 }, 
						6: { Xcolor: 'gray', type: "line", XcurveType: 'function', pointSize: 8, lineWidth: 3 }, 
						7: { Xcolor: 'gray', type: "line", XcurveType: 'function', pointSize: 8, lineWidth: 3 }, 
						8: { Xcolor: 'gray', type: "line", XcurveType: 'function', pointSize: 8, lineWidth: 3 }, 
					},

				    	seriesType: "scatter",
  					interpolateNulls: true,
  					legend: { position: 'bottom' },
				    	backgroundColor: { fill:'transparent' },
  					crosshair: { trigger: 'both' },
				  	chartArea: { top: 10, left: 80, width: (jQuery('#' + id + '_div').width() - 80 - 20), height: (jQuery('#' + id + '_div').height() - 50 - 10), backgroundColor: { stroke: '#ccc', strokeWidth: 1, fill: '#daf0fa' } }, 
  				  	tooltip: { isHtml: true }
				};
				  				
  				var chart = new google.visualization.ComboChart(document.getElementById(id + '_div'));
				chart.draw(dataTable, options);
				

				
			}
			
			function IdToSubBasinName(basinId, lang) {
			
				var labels = {
					fi: ['Skagerrak', 'Kattegat', 'Eteläinen Gotlannin allas', 'Gdanskinlahti', 'Läntinen Gotlannin allas', 'Itäinen Gotlannin allas', 'Riianlahti', 'Perämeri', 'Selkämeri', 'Merenkurkku', 'Saaristomeri', 'Ahvenanmeri', 'Suomenlahti', 'Pohjoinen Gotlannin allas', 'Iso-Belt', 'Vähä-Belt', 'Juutinrauma', 'Mecklenburginlahti', 'Kielinlahti'],
					sv: ['Skagerrak', 'Kattegat', '?', '?', '?', '?', 'Rigabukten', 'Bottenviken', 'Bottenhavet', 'Kvarken', 'Skärgårdshavet', 'Ålandshavet', 'Finska viken', '?', 'Stora Bält', 'Lilla Bält', '?', '?', '?'],
					en: ['Skagerrak', 'Kattegat', 'Southern Baltic Proper', 'Gulf of Gdansk', 'Western Gotland Basin', 'Eastern Gotland Basin', 'Gulf of Riga', 'Bothnian Bay', 'Bothnian Sea', 'The Quark', 'Archipelago Sea', 'Åland Sea', 'Gulf of Finland', 'Northern Baltic Proper', 'Great Belt', 'Little Belt', 'The Sound', 'Bay of Mecklenburg', 'Kiel Bay']
				};
				lang = lang && (lang in labels) ? lang : 'en';
			    	return labels[lang][basinId-1];
			}

			function AlgTempLabels(labelId, lang) {

				var labels = {
						fi: ['Lämpötila', 'Vuosi', 'Viikko', 'Päivämäärä', 'Kuukausi'],
						sv: ['Temperatur', 'År', 'Vecka', 'Datum', 'Månad'],
						en: ['Temperature', 'Year', 'Week', 'Date', 'Month']
				};

				lang = lang && (lang in labels) ? lang : 'en';
			    return labels[lang][labelId];
			}
		}
		
    	</script>
	<div style="Xbackground-color: #c1e7f7; height: <!--{$height|default:300|escape:'urlpathinfo'}-->px;" id="<!--{$id|default:AlgalineTemperatureChart|escape:'urlpathinfo'}-->_div"></div>
</includeonly>