Widget:LeväbarometriX

<includeonly>
<div class="algalbaroContainer" id="<!--{$id|default:algalbaro|escape:'html'}-->_container" style="height: <!--{$height|default:500px|escape:'html'}-->;">
<div class="chartdiv" id="<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv1"></div>
<div class="chartdiv" id="<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv2"></div>
</div>
<script type="text/javascript" src="//www.jarviwiki.fi/api/common/jwapi.js"></script>

    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    
	function <!--{$id|default:algalbarochart|escape:'html'}-->_jQueryTest() {
  		  if ( typeof window.jQuery == 'undefined' || typeof queryApi == 'undefined' ) {
  		  	setTimeout( function(){ <!--{$id|default:algalbarochart|escape:'html'}-->_jQueryTest() }, 300);
  		  } else {
			<!--{$id|default:algalbarochart|escape:'html'}-->_func();
  		  }
  	}
  	setTimeout( function(){ <!--{$id|default:algalbarochart|escape:'html'}-->_jQueryTest() }, 300);

	function <!--{$id|default:algalbarochart|escape:'html'}-->_func() {
      		// Load the Visualization API and the corechart package.
      		google.charts.load('current', {'packages':['corechart'] });

      		// Set a callback to run when the Google Visualization API is loaded.
      		google.charts.setOnLoadCallback( <!--{$id|default:algalbarochart|escape:'html'}-->_init );
      		
      	}

	function <!--{$id|default:algalbarochart|escape:'html'}-->_init() {
		var today = new Date();
		var vuosi = <!--{$vuosi|default:0|escape:'html'}-->;
		if (vuosi == 0) { vuosi = (today.getFullYear()); }
		var viikko = <!--{$viikko|default:100|escape:'html'}-->;
		if (viikko == 100) { viikko = today.getWeek(); }
		var vertaa = <!--{$vertaa|default:undefined|escape:'html'}-->;
		var meri = <!--{$meri|default:2|escape:'html'}-->;
		var ely = "<!--{$ely|default:xxx|escape:'html'}-->";
		var maakunta = "<!--{$maakunta|default:xxx|escape:'html'}-->";
		var showTitle = <!--{$showTitle|default:1|escape:'html'}-->;
		//elySearch = ely.split(' ').join('%20');
		//elySearch= elySearch.split('ä').join('%C3%A4');
		//elySearch= elySearch.split('ö').join('%C3%B6');
	        var elySearch = encodeURI(ely);
	        var minweek = <!--{$minweek|default:23|escape:'html'}-->;
	        var maxweek = <!--{$maxweek|default:39|escape:'html'}-->;
	        var lang = '<!--{$lang|default:fi|escape:'html'}-->';

		if (ely == "xxx") { ely = undefined; }
if (maakunta == "xxx") { maakunta = undefined; }

		var successCount = 0;

		var options1;
		var data1;
		var chart1;
	
		var options2;
		var data2;
		var chart2;
	
		var Rdata1 = new Array();
		var Rdata2 = new Array();

		for (i=minweek; i<=maxweek; i++) {
			Rdata1[(i-minweek)] = [i.toString(), null, "", null, "", null, "", null, "", null, ""];
			Rdata2[(i-minweek)] = [i.toString(), null, "", null, "", null, "", null, "", null, ""];
		}

	        if (ely != undefined) {
			searchStr = "action=ask&query=[[Lev%C3%A4barometridataELY::%3E0]]";
			searchStr += "[[ELY-keskus::" + elySearch + "]]";
	        } else if (maakunta != undefined) {
			searchStr = "action=ask&query=[[Lev%C3%A4barometridataMK::%3E0]]";
			searchStr += "[[Maakunta::" + maakunta + "]]";
		} else {
			searchStr = "action=ask&query=[[Lev%C3%A4barometridataUUSI::%3E0]]";
		}
		if (meri == "0") {
			searchStr += encodeURI("[[Vesistö::Järvi]]");
		} else if (meri == "1") {
			searchStr += encodeURI("[[Vesistö::Meri]]");
		}
		searchStr += "[[Tyyppi::Viikkoarvo]]";
		searchStr += "[[Vuosi::" + vuosi + "]]";
		searchStr += "[[Viikko::%3E" + minweek.toString() + "]][[Viikko::%3C" + maxweek.toString() + "]]";
		searchStr += encodeURI('|?Viikko|?Leväbarometri|?Vesistö|limit=100');
		searchStr += '&format=json';
console.log( searchStr );
		jQuery.ajax({
	    		type: 'GET',
	    		url: queryApi,
	    		data: searchStr,
	    		success: success,
	    		dataType: 'jsonp'
		});

		if (ely != undefined) {
			searchStr2 = "action=ask&query=[[Lev%C3%A4barometridataELY::%3E0]]";
			searchStr2 += "[[ELY-keskus::" + elySearch + "]]";
		} else if (maakunta != undefined) {
			searchStr2 = "action=ask&query=[[Lev%C3%A4barometridataMK::%3E0]]";
			searchStr2 += "[[Maakunta::" + maakunta + "]]";
		} else {
			searchStr2 = "action=ask&query=[[Lev%C3%A4barometridataUUSI::%3E0]]";
		}
		if (meri == "0") {
			searchStr2 += encodeURI("[[Vesistö::Järvi]]");
		} else if (meri == "1") {
			searchStr2 += encodeURI("[[Vesistö::Meri]]");
		}
		if (vertaa == undefined) {
			searchStr2 += "[[Tyyppi::Vertailuarvo]][[Vuosi::" + (today.getFullYear()) + "]]";
		} else {
	                searchStr2 += "[[Tyyppi::Viikkoarvo]][[Vuosi::" + vertaa + "]]";
		}
		searchStr2 += "[[Viikko::%3E" + minweek.toString() + "]][[Viikko::%3C" + maxweek.toString() + "]]";
		searchStr2 += encodeURI('|?Viikko|?Tyyppi|?Leväbarometri|?Vesistö|limit=100');
		searchStr2 += '&format=json';
		jQuery.ajax({
			type: 'GET',
			url: queryApi,
			data: searchStr2,
			success: success,
			dataType:'jsonp'
		});
	
		function i18n( text, lang ) {
	
			var o = {};		
			o[ 'Sinileväbarometri' ] = { 'en': 'Blue-green algal barometer', 'sv': 'Blågrönalgbarometer' };
			o[ 'Sisävedet' ] = { 'en': 'Inland waters', 'sv': 'Inlandsvatten' };
			o[ 'Merialueet' ] = { 'en': 'Sea areas', 'sv': 'Havsområden' };
			o[ 'Viikko' ] = { 'en': 'Week', 'sv': 'Vecka' };
			o[ 'Määritelty viikko' ] = { 'en': 'Specified week', 'sv': 'Angiven vecka' };		
			o[ 'Ei levähavaintoja' ] = { 'en': 'No blue-green algae observations', 'sv': 'Inga blögrönalgobservationer' };		
			o[ 'Liian vähän havaintoja' ] = { 'en': 'Not enough observations', 'sv': 'För lite observationer' };		
			o[ 'Liukuva keskiarvo' ] = { 'en': 'Moving average', 'sv': 'Glidande medelvärde' };				
		
			var response = text;
		
			if ( typeof o[ text ] != 'undefined' ) {
				if ( typeof o[ text ][ lang ] != 'undefined' ) {
					response = o[ text ][ lang ];
				}
			}

			return response;
	
		}

    	function success(request) {
 
 		//console.log(request);
 
 		if (request.query.results != undefined) {
			
			zi = -1;
			for (var i in request.query.results) {
				zi++;
				resultItem = request.query.results[i].printouts;
				if (resultItem.Leväbarometri[0] == undefined) {
					resultBaroVal = "-1";
				} else {
					resultBaroVal = resultItem.Leväbarometri[0];
				}	
				resultBaroStr = (Math.round(resultBaroVal * 100)/100).toString();
			    	if (resultItem.Vesistö[0] != 'Meri') {

					if (resultItem.Tyyppi == undefined) {
						date1 = getDateFromYWD(vuosi, resultItem.Viikko[0], 0);
						date1Str = date1.getDate() + "." + (date1.getMonth()+1) + ".";
						date2 = getDateFromYWD(vuosi, resultItem.Viikko[0], 6);
						date2Str = date2.getDate() + "." + (date2.getMonth()+1) + ".";
						weekSpan = printWeekSpan(vuosi, resultItem.Viikko[0]);
						if (resultBaroVal < 0) {
							Rdata1[resultItem.Viikko[0]-minweek][5] = 0;
							Rdata1[resultItem.Viikko[0]-minweek][6] = weekSpan;
							Rdata1[resultItem.Viikko[0]-minweek][6] += '\n' + i18n( 'Liian vähän havaintoja', lang );
						} else if (resultBaroVal == 0) {
							Rdata1[resultItem.Viikko[0]-minweek][9] = 0;
							Rdata1[resultItem.Viikko[0]-minweek][10] = weekSpan;
							Rdata1[resultItem.Viikko[0]-minweek][10] += '\n0 - ' + i18n( 'Ei levähavaintoja', lang );												
						} else {
							if (resultItem.Viikko[0] == viikko) {
								Rdata1[resultItem.Viikko[0]-minweek][7] = resultBaroVal;
								Rdata1[resultItem.Viikko[0]-minweek][8] = weekSpan;
								Rdata1[resultItem.Viikko[0]-minweek][8] += '\n' + resultBaroStr;
							} else {
								Rdata1[resultItem.Viikko[0]-minweek][1] = resultBaroVal;
								Rdata1[resultItem.Viikko[0]-minweek][2] = weekSpan;
								Rdata1[resultItem.Viikko[0]-minweek][2] += '\n' + resultBaroStr;
							}
						}
					} else {
						if (resultBaroVal < 0) {
							Rdata1[resultItem.Viikko[0]-minweek][3] = 0;
							Rdata1[resultItem.Viikko[0]-minweek][4] = i18n( 'Liukuva keskiarvo', lang ) + '\n1998-';
							Rdata1[resultItem.Viikko[0]-minweek][4] += '\n' + i18n( 'Liian vähän havaintoja', lang );
						} else {
							Rdata1[resultItem.Viikko[0]-minweek][3] = resultBaroVal;
							if (vertaa == undefined) {
								Rdata1[resultItem.Viikko[0]-minweek][4] = i18n( 'Liukuva keskiarvo', lang ) + '\n1998-';
								Rdata1[resultItem.Viikko[0]-minweek][4] += (today.getFullYear()-1).toString();
							} else {
								date1 = getDateFromYWD(vertaa, resultItem.Viikko[0], 0);
								date1Str = date1.getDate() + "." + (date1.getMonth()+1) + ".";
								date2 = getDateFromYWD(vertaa, resultItem.Viikko[0], 6);
								date2Str = date2.getDate() + "." + (date2.getMonth()+1) + ".";
								weekSpan = printWeekSpan(vertaa, resultItem.Viikko[0]);
								Rdata1[resultItem.Viikko[0]-minweek][4] = weekSpan; //date1Str + '-' + date2Str;
								Rdata1[resultItem.Viikko[0]-minweek][4] += '\n' + resultBaroStr;
							}
						}
					}

	    			} else {	
					if (resultItem.Tyyppi == undefined) {
						date1 = getDateFromYWD(vuosi, resultItem.Viikko[0], 0);
						date1Str = date1.getDate() + "." + (date1.getMonth()+1) + ".";
						date2 = getDateFromYWD(vuosi, resultItem.Viikko[0], 6);
						date2Str = date2.getDate() + "." + (date2.getMonth()+1) + ".";
						weekSpan = printWeekSpan(vuosi, resultItem.Viikko[0]);
						if (resultBaroVal < 0) {
							Rdata2[resultItem.Viikko[0]-minweek][5] = 0;
							Rdata2[resultItem.Viikko[0]-minweek][6] = weekSpan;
							Rdata2[resultItem.Viikko[0]-minweek][6] += '\n' + i18n( 'Liian vähän havaintoja', lang );
						} else if (resultBaroVal == 0) {
							Rdata2[resultItem.Viikko[0]-minweek][9] = 0;
							Rdata2[resultItem.Viikko[0]-minweek][10] = weekSpan;
							Rdata2[resultItem.Viikko[0]-minweek][10] += '\n0 - ' + i18n( 'Ei levähavaintoja', lang );						
						} else {
							if (resultItem.Viikko[0] == viikko) {
								Rdata2[resultItem.Viikko[0]-minweek][7] = resultBaroVal;
								Rdata2[resultItem.Viikko[0]-minweek][8] = weekSpan; //date1Str + '-' + date2Str + vuosi;
								Rdata2[resultItem.Viikko[0]-minweek][8] += '\n' + resultBaroStr;
							} else {
								Rdata2[resultItem.Viikko[0]-minweek][1] = resultBaroVal;
								Rdata2[resultItem.Viikko[0]-minweek][2] = weekSpan;
								Rdata2[resultItem.Viikko[0]-minweek][2] += '\n' + resultBaroStr;
							}
						}
					} else {
						if (resultBaroVal < 0) {
							Rdata2[resultItem.Viikko[0]-minweek][3] = 0;
							Rdata2[resultItem.Viikko[0]-minweek][4] = i18n( 'Liukuva keskiarvo', lang ) + '\n1998-';
							Rdata2[resultItem.Viikko[0]-minweek][4] += '\n' + i18n( 'Liian vähän havaintoja', lang );
						} else {
							Rdata2[resultItem.Viikko[0]-minweek][3] = resultBaroVal;
							if (vertaa == undefined) {
								Rdata2[resultItem.Viikko[0]-minweek][4] = i18n( 'Liukuva keskiarvo', lang ) + '\n1998-';
								Rdata2[resultItem.Viikko[0]-minweek][4] += (today.getFullYear()-1).toString();
							} else {
								date1 = getDateFromYWD(vertaa, resultItem.Viikko[0], 0);
								date1Str = date1.getDate() + "." + (date1.getMonth()+1) + ".";
								date2 = getDateFromYWD(vertaa, resultItem.Viikko[0], 6);
								date2Str = date2.getDate() + "." + (date2.getMonth()+1) + ".";
								weekSpan = printWeekSpan(vertaa, resultItem.Viikko[0]);
								Rdata2[resultItem.Viikko[0]-minweek][4] = weekSpan; //date1Str + '-' + date2Str;
								//Rdata2[resultItem.Viikko[0]-minweek][4] += (vertaa).toString();
								Rdata2[resultItem.Viikko[0]-minweek][4] += '\n' + resultBaroStr;
							}
						}
					}
				}
			}
		}
        	successCount++;
        	if (successCount > 1) { drawVisualization(); }
	}
	
	function drawVisualization() {

		if (meri != "1") {

			// liukuva keskiarvo
			if (vertaa == undefined) {
				for (i = 1; i < (Rdata1.length-1); i++) {
					Rdata1[i][3] = (Rdata1[i-1][3] + Rdata1[i][3] + Rdata1[i+1][3])/3;
				}
			}

			data1 = new google.visualization.DataTable();
			data1.addColumn('string', 'Viikko');
			data1.addColumn('number', vuosi);
			data1.addColumn({type:'string', role:'tooltip'});
			if (vertaa==undefined) {
				data1.addColumn('number', '1998-' + (today.getFullYear()-1));
			} else {
				data1.addColumn('number', (vertaa));
			}
			data1.addColumn({type:'string', role:'tooltip'});
			data1.addColumn('number', i18n( 'Liian vähän havaintoja', lang ));
			data1.addColumn({type:'string', role:'tooltip'});
			data1.addColumn('number', i18n( 'Määritelty viikko', lang ));
			data1.addColumn({type:'string', role:'tooltip'});
			data1.addColumn('number', i18n( 'Sinileväbarometri', lang ) + ' 0' );
			data1.addColumn({type:'string', role:'tooltip'});
			
			data1.addRows(Rdata1);

			titlevar = i18n( 'Sisävedet', lang );
			if (ely != undefined) { titlevar += ' (' + ely.replace(' elinkeino-, liikenne- ja ympäristökeskus', '') + ')'; }
			else if (maakunta != undefined) { titlevar += ' (' + maakunta.replace(' maakunta', '') + ')'; }

			if (!showTitle) { titlevar = ''; }

			options1 = {
				fontSize: 12,
					title: titlevar,
					titlePosition: 'out',
					titleTextStyle: { fontName: 'Poppins', fontSize: 15, color: '#005854' },
				vAxis: { viewWindowMode:'explicit', viewWindow:{ max:0.8, min:0 }, gridlines: { count: '4', color: '#e4e3de' }, textStyle: { fontName: 'Poppins', color: '#005854', italic: false, bold: false }, titleTextStyle: { fontName: 'Poppins', color: '#005854', italic: false, bold: true } },
				hAxis: {title: i18n( 'Viikko', lang ), slantedText: false, maxAlternation: 1, textStyle: { fontName: 'Poppins', color: '#005854' }, titleTextStyle: { fontName: 'Poppins', color: '#005854', italic: false, bold: true } },
					backgroundColor: { fill: "#<!--{$bgcolor|default:ffffff|escape:'html'}-->", stroke: "#c1e7f7", strokeWidth: 0 },
					chartArea: { top: 30, right: 30, bottom: 40, left: 30, backgroundColor: "#<!--{$bgcolor|default:ffffff|escape:'html'}-->" },
					series: {
						0: {type: "bars", color: '#005854' },
						1: {type: "area", color: '#c7e3d2', areaOpacity: 1, lineWidth: 0.5 },
						2: {type: "line", color: '#59B500', pointSize: 10, lineWidth: 0, visibleInLegend: false },
						3: {type: "bars", color: '#44E522', visibleInLegend: false },
						4: {type: "line", color: '#308fb3', pointSize: 10, lineWidth: 1, visibleInLegend: false }
					},
					legend: { position: 'in', alignment: 'center', textStyle: { color: '#005854' } },
					isStacked: true
			};

			chart1 = new google.visualization.ComboChart(document.getElementById('<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv1'));
		}

		if (meri != "0" ) {

			// liukuva keskiarvo
			if (vertaa == undefined) {
				for (i = 1; i < (Rdata2.length-1); i++) {
					Rdata2[i][3] = (Rdata2[i-1][3] + Rdata2[i][3] + Rdata2[i+1][3])/3;
				}
			}

			data2 = new google.visualization.DataTable();
			data2.addColumn('string', 'Viikko');
			data2.addColumn('number', vuosi);
			data2.addColumn({type:'string', role:'tooltip'});
			if (vertaa==undefined) {
				data2.addColumn('number', '1998-' + (today.getFullYear()-1));
			} else {
				data2.addColumn('number', (vertaa));
			}
			data2.addColumn({type:'string', role:'tooltip'});
			data2.addColumn('number', i18n( 'Liian vähän havaintoja', lang ));
			data2.addColumn({type:'string', role:'tooltip'});
			data2.addColumn('number', i18n( 'Määritelty viikko', lang ));
			data2.addColumn({type:'string', role:'tooltip'});
			data2.addColumn('number', i18n( 'Sinileväbarometri', lang ) + ' 0');
			data2.addColumn({type:'string', role:'tooltip'});

			data2.addRows(Rdata2);

			titlevar = i18n( 'Merialueet', lang );
			if (ely != undefined) { titlevar += ' (' + ely.replace(' elinkeino-, liikenne- ja ympäristökeskus', '')+ ')'; }
			else if (maakunta != undefined) { titlevar += ' (' + maakunta.replace(' maakunta', '') + ')'; }

			if (!showTitle) { titlevar = ''; }

			options2 = {
				title: titlevar,
				titlePosition: 'out',
				titleTextStyle: { fontName: 'Poppins', fontSize: 15, color: '#005854', bold: true },
				fontSize: 12,
				vAxis: { viewWindowMode:'explicit', viewWindow:{ max: 0.8, min:0 }, gridlines: { count: 4, color: '#e4e3de' }, textStyle: { fontName: 'Poppins', color: '#005854', italic: false, bold: false }, titleTextStyle: { fontName: 'Poppins', color: '#005854', italic: false, bold: true } },
				hAxis: {title: i18n( 'Viikko', lang ), slantedText: false, maxAlternation: 1, textStyle: { fontName: 'Poppins', color: '#005854', italic: false, bold: false }, titleTextStyle: { fontName: 'Poppins', color: '#005854', italic: false, bold: true } },
				backgroundColor: { fill: "#<!--{$bgcolor|default:ffffff|escape:'html'}-->", stroke: "#e4e3de" },
				chartArea: { top: 30, right: 40, bottom: 40, left: 40, backgroundColor: "#<!--{$bgcolor|default:ffffff|escape:'html'}-->" },
				series: {
					0: {type: "bars", color: '#005854' },
					1: {type: "area", color: '#c7e3d2', areaOpacity: 1, lineWidth: 0.5 },
					2: {type: "line", color: '#aaaaaa', pointSize: 10, lineWidth: 0, visibleInLegend: false },
					3: {type: "bars", color: '#44E522', visibleInLegend: false },
					4: {type: "line", color: '#308fb3', pointSize: 10, lineWidth: 1, visibleInLegend: false }
				},
				legend: {position: 'in', alignment: 'center', textStyle: { color: '#005854' } },
				isStacked: true
			};
			chart2 = new google.visualization.ComboChart(document.getElementById('<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv2'));
		}
		doResize();
	}

	function doResize() {
		height = jQuery('#<!--{$id|default:algalbaro|escape:'html'}-->_container').height(); 
		width = jQuery('#<!--{$id|default:algalbaro|escape:'html'}-->_container').width();

		if (meri == "2") {
			jQuery('#<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv1').css('height', height/2);
			jQuery('#<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv1').css('width', width);
			jQuery('#<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv2').css('height', height/2);
			jQuery('#<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv2').css('width', width);

			options1.chartArea.width = (width-25);
			options1.chartArea.height = (height/2-54);
			chart1.draw(data1, options1);

			options2.chartArea.width = (width-25);
			options2.chartArea.height = (height/2-54);
			chart2.draw(data2, options2);
		} else {
			if (meri == "1") {
				jQuery('#<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv2').css('height', 0);

				jQuery('#<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv2').css('height', height);
				jQuery('#<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv2').css('width', width);

				//jQuery('#<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv2').css('top', div1pos.top);
				options2.chartArea.width = (width-25);
				options2.chartArea.height = (height-50);
				jQuery('#<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv1').html('');
				chart2.draw(data2, options2);
			} else {
				jQuery('#<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv1').css('height', 0);

				jQuery('#<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv1').css('height', height);
				jQuery('#<!--{$id|default:algalbaro|escape:'html'}-->_chartdiv1').css('width', width);

				options1.chartArea.width = (width-25);
				options1.chartArea.height = (height-50);
				chart1.draw(data1, options1);
			}
		}
	}

jQuery( window ).on( 'resize', doResize );

}

</script>
</includeonly>