Ero sivun ”Widget:JwObsCharts” versioiden välillä
Järvi-meriwikistä
| (352 välissä olevaa versiota samalta käyttäjältä ei näytetä) | |||
| Rivi 1: | Rivi 1: | ||
<includeonly> | <includeonly> | ||
| + | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| + | |||
(function() { | (function() { | ||
| Rivi 13: | Rivi 15: | ||
} | } | ||
} | } | ||
| − | setTimeout( | + | setTimeout( <!--{$id|default:TheGraph|escape:'html'}-->_jQueryTest, 300); |
function <!--{$id|default:TheGraph|escape:'html'}-->_func() { | function <!--{$id|default:TheGraph|escape:'html'}-->_func() { | ||
if ( typeof window.jwobschart == 'undefined' ) { | if ( typeof window.jwobschart == 'undefined' ) { | ||
| − | + | ||
window.jwobschart = {}; | window.jwobschart = {}; | ||
| Rivi 27: | Rivi 29: | ||
jQuery.getScript( '//www.gstatic.com/charts/loader.js', function() { | jQuery.getScript( '//www.gstatic.com/charts/loader.js', function() { | ||
google.charts.load( 'current', { 'packages':[ 'corechart' ], 'language': 'fi' } ); | google.charts.load( 'current', { 'packages':[ 'corechart' ], 'language': 'fi' } ); | ||
| − | google.charts.setOnLoadCallback( | + | google.charts.setOnLoadCallback( allReady ); |
}); | }); | ||
}); | }); | ||
}); | }); | ||
} | } | ||
| + | } | ||
| + | |||
| + | function allReady() { | ||
| + | |||
| + | // resize all when window resizes | ||
| + | jQuery( window ).resize(function() { | ||
| + | for ( var c in window.jwobschart ) { | ||
| + | if ( window.jwobschart[c].memo.widgetEl.is( ':visible' ) ) { | ||
| + | doResize( window.jwobschart[c].memo ); | ||
| + | } | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | loadObservations(); | ||
} | } | ||
function loadObservations() { | function loadObservations() { | ||
| + | |||
| + | var hc = 0; | ||
jQuery( '.jwChartWidget' ).each( function() { | jQuery( '.jwChartWidget' ).each( function() { | ||
| Rivi 40: | Rivi 58: | ||
var el = jQuery( this ); | var el = jQuery( this ); | ||
var id = el.attr( 'id' ); if ( typeof id == 'undefined' ) { id = 'jwsitegraph_' + Math.random() + '_container'; el.attr( 'id', id ); } | var id = el.attr( 'id' ); if ( typeof id == 'undefined' ) { id = 'jwsitegraph_' + Math.random() + '_container'; el.attr( 'id', id ); } | ||
| − | + | ||
| − | if ( el. | + | if ( typeof el.attr( 'data-preload' ) == 'undefined' ) { |
| − | + | preload = false; | |
| − | + | } else { | |
| + | preload = ( el.attr( 'data-preload' ).toLowerCase() == 'true' ); | ||
| + | } | ||
| + | if ( ( preload || el.is( ':visible' ) ) && typeof window.jwobschart[id] == 'undefined' ) { | ||
| + | |||
window.jwobschart[id] = {}; | window.jwobschart[id] = {}; | ||
| − | + | ||
| − | var memo = {}; | + | var memo = { "distF": 0 }; window.jwobschart[id].memo = memo; |
memo.widgetEl = jQuery( this ); | memo.widgetEl = jQuery( this ); | ||
| − | memo.lang = memo.widgetEl.attr( 'data-lang' ); if (typeof memo.lang == 'undefined') { memo.lang = 'fi'; } | + | memo.lang = memo.widgetEl.attr( 'data-lang' ); if (typeof memo.lang == 'undefined') { memo.lang = 'fi'; } |
memo.height = memo.widgetEl.attr( 'data-height' ); if (typeof memo.height == 'undefined') { memo.height = 450; } | memo.height = memo.widgetEl.attr( 'data-height' ); if (typeof memo.height == 'undefined') { memo.height = 450; } | ||
| − | memo.siteid = jQuery( this ).attr( 'data-jw-siteid' ); | + | memo.siteid = jQuery( this ).attr( 'data-jw-siteid' ); if ( typeof memo.siteid == 'undefined' ) { memo.siteid = '-'; } |
| − | memo.obscode = jQuery( this ).attr( 'data-jw-obscode' ); | + | memo.waterbody = jQuery( this ).attr( 'data-jw-waterbody' ); if ( typeof memo.waterbody == 'undefined' ) { memo.waterbody = '-'; } |
| + | memo.obscode = jQuery( this ).attr( 'data-jw-obscode' ); if ( typeof memo.obscode == 'undefined' ) { memo.obscode = '-'; } | ||
| + | if ( typeof i18n[ memo.obscode ] == 'undefined' ) { i18n[ memo.obscode ] = i18n.obs; } | ||
| + | memo.refcode = jQuery( this ).attr( 'data-jw-refcode' ); if ( typeof memo.refcode == 'undefined' ) { memo.refcode = '-'; } | ||
| + | memo.reffilter = jQuery( this ).attr( 'data-jw-reffilter' ); if ( typeof memo.reffilter == 'undefined' ) { memo.reffilter = ''; } | ||
memo.obscodeParts = memo.obscode.split('_'); | memo.obscodeParts = memo.obscode.split('_'); | ||
| − | memo.title = jQuery( this ).attr( 'data-title' ); if ( typeof memo.title == 'undefined' ) { memo.title = i18n[ memo.obscode ][ 'title' ][ memo.lang ]; } | + | memo.title = jQuery( this ).attr( 'data-title' ); if ( typeof memo.title == 'undefined' ) { memo.title = i18n[ memo.obscode ][ 'title' ][ memo.lang ]; } |
| − | memo. | + | memo.axistitlev = jQuery( this ).attr( 'data-axistitlev' ); if ( typeof memo.axistitlev == 'undefined' ) { memo.axistitlev = i18n[ memo.obscode ][ 'axisTitleV' ][ memo.lang ]; } |
| + | memo.tooltiptitle = jQuery( this ).attr( 'data-tooltiptitle' ); if ( typeof memo.tooltiptitle == 'undefined' ) { memo.tooltiptitle = i18n[ memo.obscode ][ 'title' ][ memo.lang ]; } | ||
| + | memo.info = jQuery( this ).attr( 'data-info' ); if ( typeof memo.info == 'undefined' ) { memo.info = jQuery( this ).attr( 'data-info' ); } | ||
| + | |||
| + | if ( typeof jQuery( this ).attr( 'data-min' ) != 'undefined' ) { i18n[memo.obscode]['min'] = parseInt( jQuery( this ).attr( 'data-min' ) ); } | ||
| + | if ( typeof jQuery( this ).attr( 'data-unit' ) != 'undefined' ) { i18n[memo.obscode]['unit'] = parseInt( jQuery( this ).attr( 'data-unit' ) ); } | ||
| + | |||
| + | if ( typeof jQuery( this ).attr( 'data-start-date' ) != 'undefined' ) { | ||
| + | memo.startDate = jQuery( this ).attr( 'data-start-date' ); | ||
| + | } else if ( typeof jQuery( this ).attr( 'data-start-year' ) != 'undefined' ) { | ||
| + | memo.startDate = jQuery( this ).attr( 'data-start-year' ) + '-01-01'; | ||
| + | } else { | ||
| + | memo.startDate = '1800-01-01'; | ||
| + | } | ||
| + | |||
| + | |||
memo.service = jQuery( this ).attr( 'data-coo311-service_code' ); | memo.service = jQuery( this ).attr( 'data-coo311-service_code' ); | ||
memo.graphType = jQuery( this ).attr( 'data-graph-type' ); | memo.graphType = jQuery( this ).attr( 'data-graph-type' ); | ||
| − | |||
| − | |||
memo.editUrl = jQuery( this ).attr( 'data-edit-url' ); if (typeof memo.editUrl == 'undefined') { memo.editUrl = '-'; } | memo.editUrl = jQuery( this ).attr( 'data-edit-url' ); if (typeof memo.editUrl == 'undefined') { memo.editUrl = '-'; } | ||
| + | memo.download = true; if ( typeof jQuery( this ).attr( 'data-download' ) != 'undefined' ) { memo.download = ( jQuery( this ).attr( 'data-download' ) == '1' || jQuery( this ).attr( 'data-download' ) == 'true' ); } | ||
| + | |||
memo.csvfile = jQuery( this ).attr( 'data-csv-filename' ); if (typeof memo.csvfile == 'undefined') { memo.csvfile = i18n[ memo.obscode ].title[ memo.lang ] + '_SiteID-' + memo.siteid + '_Downloaded-' + today.toISOString().split( 'T' )[0] + '.csv'; } | memo.csvfile = jQuery( this ).attr( 'data-csv-filename' ); if (typeof memo.csvfile == 'undefined') { memo.csvfile = i18n[ memo.obscode ].title[ memo.lang ] + '_SiteID-' + memo.siteid + '_Downloaded-' + today.toISOString().split( 'T' )[0] + '.csv'; } | ||
if ( typeof jQuery( this ).attr( 'data-maintainer' ) == 'undefined' ) { memo.maintainerShow = false; } | if ( typeof jQuery( this ).attr( 'data-maintainer' ) == 'undefined' ) { memo.maintainerShow = false; } | ||
| Rivi 125: | Rivi 166: | ||
memo.fullscreenEl.find( 'button' ).html( '<i class="fas fa-compress"></i>' ); | memo.fullscreenEl.find( 'button' ).html( '<i class="fas fa-compress"></i>' ); | ||
} | } | ||
| + | doResize( memo ); | ||
}); | }); | ||
| Rivi 134: | Rivi 176: | ||
} | } | ||
| − | // add download data button | + | // add download data button |
| − | memo.headerEl.append( '<div class="obschartbutton download-button" style="display: none; margin-left: 10px; float: right; Xbackground-color: rgba( 255, 255, 255, 1 ); border-radius: 50%; Xborder: 1px solid rgba( 0, 0, 0, 0.5 ); Xpadding: 1px;"><button title="' + i18n['download'][memo.lang] + '" style="width: 24px; height: 24px; padding: 0; margin: 0; color: #1B599B; background: none; border: none;"><i class="fas fa-download"></i></button></div>' ); | + | if ( memo.download ) { |
| − | + | memo.headerEl.append( '<div class="obschartbutton download-button" style="display: none; margin-left: 10px; float: right; Xbackground-color: rgba( 255, 255, 255, 1 ); border-radius: 50%; Xborder: 1px solid rgba( 0, 0, 0, 0.5 ); Xpadding: 1px;"><button title="' + i18n['download'][memo.lang] + '" style="width: 24px; height: 24px; padding: 0; margin: 0; color: #1B599B; background: none; border: none;"><i class="fas fa-download"></i></button></div>' ); | |
| + | memo.downloadEl = jQuery( this ).find( '.download-button' ); | ||
| − | + | memo.downloadEl.on( 'click', function() { | |
| − | + | var header = ''; | |
| − | + | header += '\uFEFF'; // BOM | |
| − | + | var csv = ''; | |
| − | + | //csv += '\r\nsep=,\r\n'; | |
| − | + | var headerCols = []; | |
| − | + | var csvCols = []; | |
| − | + | if ( i18n[memo.obscode].type == 'num' ) { | |
| + | |||
| + | headerCols.push( i18n[ 'Date' ][ memo.lang ] ); | ||
| + | headerCols.push( i18n[ 'Time' ][ memo.lang ] ); | ||
| + | headerCols.push( '"' + memo.axistitlev + '"' ); | ||
| + | headerCols.push( 'Lisätiedot' ); | ||
| + | headerCols.push( 'Valokuva' ); | ||
| + | headerCols.push( 'Havainnoijan status' ); | ||
| + | |||
| + | header += headerCols.join( i18n['sep'][memo.lang] ); | ||
| + | |||
| + | for ( var o in memo.obses ) { | ||
| + | |||
| + | csvCols = []; | ||
| + | |||
| + | csvCols.push( memo.obses[o].obsdatetime.getFullYear() + '-' + ( memo.obses[o].obsdatetime.getMonth() + 1 ) + '-' + memo.obses[o].obsdatetime.getDate() ); | ||
| + | |||
| + | if ( memo.obses[o].obsdatetime.getUTCHours() == 0 && memo.obses[o].obsdatetime.getUTCMinutes() == 0 && memo.obses[o].obsdatetime.getUTCSeconds() == 0 ) { | ||
| + | csvCols.push( '' ); | ||
| + | } else { | ||
| + | csvCols.push( ( "0" + memo.obses[o].obsdatetime.getUTCHours() ).slice(-2) + ':' + ( "0" + memo.obses[o].obsdatetime.getUTCMinutes() ).slice(-2) ); | ||
| + | } | ||
| − | + | csvCols.push( '"' + memo.obses[o].value.toString().replace( '.', i18n['dec'][memo.lang] ) + '"' ); | |
| − | + | csvCols.push( memo.obses[o].addInfo.replace( '<p>', '' ).replace( '</p>', '' ) ); | |
| − | + | csvCols.push( '' ); | |
| − | + | csvCols.push( memo.obses[o].maintainer ); | |
| − | |||
| − | |||
| − | + | csv += '\r\n' + csvCols.join( i18n['sep'][memo.lang] ); | |
| − | + | } | |
| − | |||
| − | + | } else if ( i18n[memo.obscode].type == 'date' ) { | |
| − | if ( memo. | + | if ( i18n[memo.obscode].season == 'winter' ) { |
| − | + | header += i18n[ 'season' ][ i18n[memo.obscode].season ][ memo.lang ]; | |
} else { | } else { | ||
| − | + | header += i18n[ 'year' ][ memo.lang ]; | |
} | } | ||
| + | |||
| + | header += ';' + i18n[ 'Observation' ][ memo.lang ]; | ||
| + | header += ';' + i18n[ 'Value' ][ memo.lang ]; | ||
| + | header += ';' + i18n[ 'ValueUnit' ][ memo.lang ]; | ||
| + | header += ';' + i18n[ 'Additionalinfo' ][ memo.lang ]; | ||
| + | header += ';' + i18n[ 'Image' ][ memo.lang ]; | ||
| + | header += ';' + i18n[ 'ObserverStatus' ][ memo.lang ]; | ||
| + | |||
| + | for ( var s in memo.seriesA ) { | ||
| + | |||
| + | for ( var o in memo.seriesA[ s ].obses ) { | ||
| − | + | obs = memo.seriesA[ s ].obses[ o ]; | |
| − | |||
| − | |||
| − | |||
| − | + | csv += '\r\n'; | |
| − | + | csv += obs.season + '-' + (obs.season+1); | |
| + | csv += ';' + i18n[ memo.seriesA[ s ].id ].title[ memo.lang ]; | ||
| − | + | csv += ';' + obs.value; | |
| + | csv += ';' + obs.valueUnit; | ||
| + | |||
| + | csv += ';' + obs.addInfo; | ||
| + | csv += ';'; | ||
| + | csv += ';' + obs.maintainer; | ||
| + | |||
| + | } | ||
| − | + | } | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | } else if ( i18n[memo.obscode].type == 'cat' ) { | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | header += 'Päivämäärä'; | |
| − | + | header += ';' + 'Kellonaika'; | |
| − | for ( var o in memo | + | header += ';' + i18n[memo.obscode].title[memo.lang]; |
| − | + | header += ';' + i18n[memo.obscode].title[memo.lang]; | |
| − | + | header += ';' + utf8StringToUtf16String( 'Lisätiedot' ); | |
| + | header += ';' + 'Valokuva'; | ||
| + | header += ';' + 'Havainnoijan status'; | ||
| + | |||
| + | for ( var o in memo.obses ) { | ||
csv += '\r\n'; | csv += '\r\n'; | ||
| − | csv += | + | csv += memo.obses[o].obsdatetime.toLocaleDateString(); //.toISOString(); |
| − | csv += ';' + | + | if ( memo.obses[o].obsdatetime.getUTCHours() == 0 && memo.obses[o].obsdatetime.getUTCMinutes() == 0 && memo.obses[o].obsdatetime.getUTCSeconds() == 0 ) { |
| + | csv += ';'; | ||
| + | } else { | ||
| + | csv += ';' + ( "0" + memo.obses[o].obsdatetime.getUTCHours() ).slice(-2) + ':' + ( "0" + memo.obses[o].obsdatetime.getUTCMinutes() ).slice(-2); | ||
| + | } | ||
| − | csv += ';' + | + | csv += ';' + memo.obses[o].value; |
| − | csv += ';' + | + | csv += ';' + i18n[memo.obscode].catNames[memo.obses[o].value][memo.lang]; |
| − | csv += ';' + | + | csv += ';' + memo.obses[o].addInfo; |
csv += ';'; | csv += ';'; | ||
| − | csv += ';' + | + | csv += ';' + memo.obses[o].maintainer; |
} | } | ||
| Rivi 219: | Rivi 295: | ||
} | } | ||
| − | + | csv = header + csv; | |
| − | + | var exportedFilename = memo.csvfile; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | var blob = new Blob( [csv], { type: 'text/csv;charset=utf-16LE;' }); | |
| − | + | if (navigator.msSaveBlob) { // IE 10+ | |
| − | + | navigator.msSaveBlob(blob, exportedFilename); | |
| − | + | } else { | |
| − | + | var link = document.createElement("a"); | |
| − | + | if (link.download !== undefined) { // feature detection | |
| − | if ( | + | // Browsers that support HTML5 download attribute |
| − | + | var url = URL.createObjectURL(blob); | |
| − | + | link.setAttribute("href", url); | |
| − | + | link.setAttribute("download", exportedFilename); | |
| + | link.style.visibility = 'hidden'; | ||
| + | document.body.appendChild(link); | ||
| + | link.click(); | ||
| + | document.body.removeChild(link); | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | } | + | }); |
| − | + | } | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
} | } | ||
| Rivi 287: | Rivi 331: | ||
memo.showTrend = ( jQuery( this ).attr( 'data-show-trend' ) != 'false' ); | memo.showTrend = ( jQuery( this ).attr( 'data-show-trend' ) != 'false' ); | ||
| − | memo.trendType = jQuery( this ).attr( 'data-trend-type' ); if (typeof memo.trendType == 'undefined') { memo.trendType = i18n[memo.obscode]['trend']['type']; } | + | memo.trendType = jQuery( this ).attr( 'data-trend-type' ); if (typeof memo.trendType == 'undefined') { memo.trendType = i18n[memo.obscode]['trend']['type']; } |
| − | |||
| − | |||
| − | |||
| − | |||
| + | memo.jw = new jwApi(); | ||
| + | memo.jwR = new jwApi(); | ||
| + | |||
var custom = ''; | var custom = ''; | ||
if ( typeof memo.obscodeParts[1] != 'undefined' ) { | if ( typeof memo.obscodeParts[1] != 'undefined' ) { | ||
| Rivi 301: | Rivi 344: | ||
} | } | ||
} | } | ||
| + | |||
| + | if ( memo.siteid != '-' ) { | ||
| + | so = { 'obscode': memo.obscodeParts[0], 'siteid': memo.siteid, 'startdate': memo.startDate, 'custom': custom }; | ||
| + | } else { | ||
| + | so = { 'obscode': memo.obscodeParts[0], 'waterbody': memo.waterbody, 'startdate': memo.startDate, 'custom': custom }; | ||
| + | } | ||
| + | |||
| + | // if testsite | ||
| + | if ( memo.siteid == 170072 ) { so.test = true; } | ||
| − | memo.jw.loadObses( | + | memo.jw.loadObses( so, function( o ) { |
| − | memo.obses = memo.jw.obs; | + | memo.obses = memo.jw.obs; |
| − | + | if ( memo.refcode != '-' ) { | |
| − | + | memo.jwR.loadObses( { "obscode": memo.refcode, "siteid": memo.siteid, "sort": "SiteID", "custom": memo.reffilter }, function( r ) { | |
| − | + | memo.refs = memo.jwR.obs; | |
| − | + | drawVisualization(memo); | |
| − | + | }); | |
| − | + | } else { | |
| − | + | drawVisualization(memo); | |
| − | + | } | |
| − | |||
}); | }); | ||
} else { | } else { | ||
if ( typeof window.jwobschart[id] == 'undefined' ) { | if ( typeof window.jwobschart[id] == 'undefined' ) { | ||
| − | + | hc++; | |
} | } | ||
} | } | ||
}); | }); | ||
| + | |||
| + | if ( hc > 0 ) { | ||
| + | setTimeout( loadObservations, 1000 ); | ||
| + | } | ||
| + | |||
} | } | ||
| − | function drawVisualization( memo ) { | + | function drawVisualization( memo ) { |
| − | + | ||
| − | if ( typeof i18n[ memo.obscode ].direction != 'undefined' ) { memo.vaxisdir = i18n[ memo.obscode ].direction; } else { memo.vaxisdir = 1; } | + | if ( typeof i18n[memo.obscode].valfield == 'undefined' ) { i18n[memo.obscode].valfield = 'val'; } |
| + | if ( typeof i18n[ memo.obscode ].direction != 'undefined' ) { memo.vaxisdir = i18n[ memo.obscode ].direction; } else { memo.vaxisdir = 1; } | ||
memo.options = { | memo.options = { | ||
| Rivi 335: | Rivi 392: | ||
interpolateNulls: true, | interpolateNulls: true, | ||
vAxis: { | vAxis: { | ||
| − | title: | + | title: memo.axistitlev, |
titleTextStyle: { bold: true, italic: false }, | titleTextStyle: { bold: true, italic: false }, | ||
slantedText: false, | slantedText: false, | ||
| Rivi 354: | Rivi 411: | ||
series: [ ], | series: [ ], | ||
trendlines: [ ], | trendlines: [ ], | ||
| + | intervals: { | ||
| + | 'style': 'area' | ||
| + | }, | ||
annotations: { | annotations: { | ||
textStyle: { | textStyle: { | ||
| Rivi 387: | Rivi 447: | ||
obs = memo.obses[o]; | obs = memo.obses[o]; | ||
| − | + | ||
memo.obsesTotal++; | memo.obsesTotal++; | ||
// create data | // create data | ||
obs.data = JSON.parse( obs.printouts.DataJSON ); | obs.data = JSON.parse( obs.printouts.DataJSON ); | ||
| + | obs.data.num = obs.data[ i18n[memo.obscode].valfield ]; | ||
if ( obs.data.unit == 'cm' && i18n[memo.obscode]['unit'] == 'm' ) { | if ( obs.data.unit == 'cm' && i18n[memo.obscode]['unit'] == 'm' ) { | ||
| − | obs.data. | + | obs.data.num = obs.data.num/100; |
obs.value = obs.value/100; | obs.value = obs.value/100; | ||
} | } | ||
| + | |||
| + | if ( i18n[ memo.obscode ].valfield != 'val' ) { | ||
| + | obs.value = obs.data[ i18n[memo.obscode].valfield ]; | ||
| + | } | ||
// add season | // add season | ||
| Rivi 453: | Rivi 518: | ||
if ( i18n[memo.obscode]['type'] == 'cat') { | if ( i18n[memo.obscode]['type'] == 'cat') { | ||
| − | obs.popup +='<b>' + | + | obs.popup +='<b>' + memo.tooltiptitle + ': ' + i18n[memo.obscode]['catNames'][obs.value][memo.lang] + '</b> '; |
} else if ( i18n[memo.obscode]['type'] == 'date') { | } else if ( i18n[memo.obscode]['type'] == 'date') { | ||
| − | obs.popup +='<b>' + | + | obs.popup +='<b>' + memo.tooltiptitle + '</b> '; |
} else { | } else { | ||
| − | obs.popup +='<b>' + | + | memo.decimals = 1; |
| + | if ( memo.obscode == 'level' ) { memo.decimals = 2; } | ||
| + | obs.popup +='<b>' + memo.tooltiptitle + ': ' + (Math.round(obs.value * (memo.decimals*10))/(memo.decimals*10)).toString().replace( '.', i18n['dec'][memo.lang] ) + ' ' + i18n[memo.obscode]['unit'] + '</b> '; | ||
} | } | ||
| Rivi 495: | Rivi 562: | ||
baseSize = 2; | baseSize = 2; | ||
} | } | ||
| − | |||
| − | |||
if ( memo.maintainerShow ) { maintcol = maintColors[obs.maintainer]; } | if ( memo.maintainerShow ) { maintcol = maintColors[obs.maintainer]; } | ||
| Rivi 542: | Rivi 607: | ||
memo.titleEl.html( memo.title ); | memo.titleEl.html( memo.title ); | ||
| + | |||
| + | //memo.titleEl.append( ' <button style="padding: 0 0.25em; font-size: 13px; margin-bottom: 3px;" type="button" class="btn btn-secondary btn-info" data-toggle="tooltip" data-placement="top" title="' + 'asdfsadf' + '">' + '<i class="fa-solid fa-location-dot"></i>' + '</button>' ); | ||
| + | |||
if ( typeof i18n[ memo.obscode ].changes != 'undefined' ) { | if ( typeof i18n[ memo.obscode ].changes != 'undefined' ) { | ||
if ( typeof typeof i18n[ memo.obscode ].changes[ memo.lang ] != 'undefined' ) { | if ( typeof typeof i18n[ memo.obscode ].changes[ memo.lang ] != 'undefined' ) { | ||
| Rivi 547: | Rivi 615: | ||
jQuery( '[data-toggle="tooltip"]' ).tooltip(); | jQuery( '[data-toggle="tooltip"]' ).tooltip(); | ||
} | } | ||
| − | } | + | } |
| + | |||
| + | if ( typeof memo.info != 'undefined' ) { | ||
| + | memo.titleEl.append( ' <button style="padding: 0 0.25em; font-size: 13px; margin-bottom: 3px;" type="button" class="btn btn-secondary btn-info" data-toggle="tooltip" data-placement="top" title="' + memo.info + '"><span class="fontawesome"></span></button>' ); | ||
| + | jQuery( '[data-toggle="tooltip"]' ).tooltip(); | ||
| + | } | ||
| + | |||
} | } | ||
| − | + | ||
if (memo.graphType == 'trend') { | if (memo.graphType == 'trend') { | ||
addDataToTrendChart(memo); | addDataToTrendChart(memo); | ||
| − | } else if (memo.graphType == ' | + | } else if (memo.graphType == 'seasonwithreferences') { |
| − | addDataToSeasonChart(memo); | + | addDataToSeasonWithReferencesChart(memo); |
| + | |||
| + | } else if (memo.graphType == 'trendwithhighlow') { | ||
| + | |||
| + | addDataToTrendWithHighLowChart(memo); | ||
| + | |||
| + | } else if (memo.graphType == 'season') { | ||
| + | |||
| + | addDataToSeasonChart(memo); | ||
} else if (memo.graphType == 'dateofyear') { | } else if (memo.graphType == 'dateofyear') { | ||
| Rivi 574: | Rivi 656: | ||
// sort according to obs date | // sort according to obs date | ||
memo.obsesA.sort( function( a, b ) { return b.obsdatetime - a.obsdatetime; }); | memo.obsesA.sort( function( a, b ) { return b.obsdatetime - a.obsdatetime; }); | ||
| + | |||
| + | if ( typeof memo.info != 'undefined' ) { | ||
| + | addToTitle = ' <button style="padding: 0 0.25em; font-size: 13px; margin-bottom: 3px;" type="button" class="btn btn-secondary btn-info" data-toggle="tooltip" data-placement="top" title="' + memo.info + '"><span class="fontawesome"></span></button>'; | ||
| + | } else { | ||
| + | addToTitle = ''; | ||
| + | } | ||
if ( memo.obscode == 'level' ) { | if ( memo.obscode == 'level' ) { | ||
| Rivi 598: | Rivi 686: | ||
obs = memo.obsesA[0]; | obs = memo.obsesA[0]; | ||
| + | for (var r in memo.refs) { | ||
| + | ref = memo.refs[r]; | ||
| + | break; | ||
| + | } | ||
| + | |||
| + | refdata = JSON.parse( ref.printouts.DataJSON ); | ||
| + | refn = refdata.val/100; | ||
| − | diff = obs.value - | + | diff = obs.value - refn; |
diff = Math.round( diff*100 ); | diff = Math.round( diff*100 ); | ||
diffStr = diff.toString() + ' cm'; | diffStr = diff.toString() + ' cm'; | ||
if ( diff > 0 ) { diffStr = '+' + diffStr; } | if ( diff > 0 ) { diffStr = '+' + diffStr; } | ||
| + | |||
| + | var levelsvg = '<?xml version="1.0" encoding="utf-8"?><svg role="img" aria-label="XXX" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 99.6;" xml:space="preserve"><style type="text/css">.st0{fill:#ccc;} .st1{fill:#0076B0;}</style>'; | ||
| + | |||
| + | var levelclass = 'st0'; | ||
| + | if ( diff > 20 ) { levelclass = "st1"; } | ||
| + | levelsvg += '<path class="' + levelclass + '" d="M46.8,1.2c1.9-1.5,4.5-1.5,6.4,0c3.9,3,8.7,5.1,13.5,5.1c4.7,0,9.6-2.1,13.4-5.1l0,0c2.1-1.7,4.9-1.5,6.8,0.3c2.5,2.3,5.6,4.1,8.8,4.9c3,0.8,4.8,4.1,4.2,7.5s-3.7,5.4-6.7,4.7c-4.3-1.1-7.8-3.2-10.1-4.9c-5,3-10.7,5.1-16.4,5.1c-5.5,0-10.5-1.9-14-3.7c-1-0.5-1.9-1-2.7-1.5c-0.8,0.5-1.7,1-2.7,1.5c-3.4,1.8-8.4,3.7-14,3.7c-5.7,0-11.4-2-16.4-5c-2.3,1.6-5.9,3.8-10.1,4.9c-3,0.8-6-1.3-6.7-4.7s1.2-6.7,4.2-7.5c3.1-0.8,6.3-2.6,8.8-4.9c1.9-1.9,4.7-2,6.8-0.3l0,0c3.9,3,8.8,5.1,13.5,5.1C38.1,6.3,42.9,4.2,46.8,1.2z"/>'; | ||
| + | |||
| + | if ( diff > 10 ) { levelclass = "st1"; } | ||
| + | levelsvg += '<path class="' + levelclass + '" d="M53.2,21.5c3.9,3,8.7,5.1,13.5,5.1c4.7,0,9.6-2.1,13.4-5.1l0,0c2.1-1.7,4.9-1.5,6.8,0.3c2.5,2.3,5.6,4.1,8.8,4.9c3,0.8,4.8,4.1,4.2,7.5s-3.7,5.4-6.7,4.7c-4.3-1.1-7.8-3.2-10.1-4.9c-5,3-10.7,5.1-16.4,5.1c-5.5,0-10.5-1.9-14-3.7c-1-0.5-1.9-1-2.7-1.5c-0.8,0.5-1.7,1-2.7,1.5c-3.4,1.8-8.4,3.7-14,3.7c-5.7,0-11.4-2-16.4-5c-2.3,1.6-5.9,3.8-10.1,4.9c-3,0.8-6-1.3-6.7-4.7c-0.7-3.4,1.2-6.7,4.2-7.5c3.1-0.8,6.3-2.6,8.8-4.9c1.9-1.9,4.7-2,6.8-0.3l0,0c3.8,3,8.8,5.1,13.4,5.1c4.8,0,9.6-2.1,13.5-5.1C48.7,19.9,51.3,19.9,53.2,21.5z"/>'; | ||
| + | |||
| + | if ( diff > 0 ) { levelclass = "st1"; } | ||
| + | levelsvg += '<path class="' + levelclass + '" d="M53.2,41.8c3.9,3,8.7,5.1,13.5,5.1c4.7,0,9.6-2.1,13.4-5.1l0,0c2.1-1.7,4.9-1.5,6.8,0.3c2.5,2.3,5.6,4.1,8.8,4.9c3,0.8,4.8,4.1,4.2,7.5s-3.7,5.4-6.7,4.7c-4.3-1.1-7.8-3.2-10.1-4.9c-5,3-10.7,5.1-16.4,5.1c-5.5,0-10.5-1.9-14-3.7c-1-0.5-1.9-1-2.7-1.5c-0.8,0.5-1.7,1-2.7,1.5c-3.4,1.8-8.4,3.7-14,3.7c-5.7,0-11.4-2-16.4-5c-2.3,1.6-5.9,3.8-10.1,4.9c-3,0.8-6-1.3-6.7-4.7s1.2-6.7,4.2-7.5c3.1-0.8,6.3-2.6,8.8-4.9c1.9-1.9,4.7-2,6.8-0.3l0,0c3.8,3,8.8,5.1,13.4,5.1c4.8,0,9.6-2.1,13.5-5.1C48.7,40.2,51.3,40.2,53.2,41.8z"/>'; | ||
| − | // | + | if ( diff > -10 ) { levelclass = "st1"; } |
| + | levelsvg += '<path class="' + levelclass + '" d="M53.2,62.1c3.9,3,8.7,5.1,13.5,5.1c4.7,0,9.6-2.1,13.4-5.1l0,0c2.1-1.7,4.9-1.5,6.8,0.3c2.5,2.3,5.6,4.1,8.8,4.9c3,0.8,4.8,4.1,4.2,7.5c-0.7,3.4-3.7,5.4-6.7,4.7c-4.3-1.1-7.8-3.2-10.1-4.9c-5,3-10.7,5.1-16.4,5.1c-5.5,0-10.5-1.9-14-3.7c-1-0.5-1.9-1-2.7-1.5c-0.8,0.5-1.7,1-2.7,1.5c-3.4,1.8-8.4,3.7-14,3.7c-5.7,0-11.4-2-16.4-5c-2.3,1.6-5.9,3.8-10.1,4.9c-3,0.8-6-1.3-6.7-4.7c-0.7-3.4,1.2-6.7,4.2-7.5c3.1-0.8,6.3-2.6,8.8-4.9c1.9-1.9,4.7-2,6.8-0.3l0,0c3.8,3,8.8,5.1,13.4,5.1c4.8,0,9.6-2.1,13.5-5.1C48.7,60.5,51.3,60.5,53.2,62.1z"/>'; | ||
| + | |||
| + | if ( diff > -20 ) { levelclass = "st1"; } | ||
| + | levelsvg += '<path class="' + levelclass + '" d="M53.2,82.4c3.9,3,8.7,5.1,13.5,5.1c4.7,0,9.6-2.1,13.4-5.1l0,0c2.1-1.7,4.9-1.5,6.8,0.3c2.5,2.3,5.6,4.1,8.8,4.9c3,0.8,4.8,4.1,4.2,7.5c-0.7,3.4-3.7,5.4-6.7,4.7c-4.3-1.1-7.8-3.2-10.1-4.9c-5,3-10.7,5.1-16.4,5.1c-5.5,0-10.5-1.9-14-3.7c-1-0.5-1.9-1-2.7-1.5c-0.8,0.5-1.7,1-2.7,1.5c-3.4,1.8-8.4,3.7-14,3.7c-5.7,0-11.4-2-16.4-5c-2.3,1.6-5.9,3.8-10.1,4.9c-3,0.8-6-1.3-6.7-4.7c-0.7-3.4,1.2-6.7,4.2-7.5c3.1-0.8,6.3-2.6,8.8-4.9c1.9-1.8,4.7-2,6.8-0.3l0,0c3.8,3,8.8,5.1,13.4,5.1c4.8,0,9.6-2.1,13.5-5.1C48.7,80.9,51.3,80.9,53.2,82.4z"/>'; | ||
| + | |||
| + | levelsvg += '</svg>'; | ||
| + | |||
| + | if ( diff > 20 ) { | ||
| + | levelsvg.replace( 'XXX', 'Vedenpinta erittäin korkea' ); | ||
| + | } else if ( diff > 10 ) { | ||
| + | levelsvg.replace( 'XXX', 'Vedenpinta korkea' ); | ||
| + | } else if ( diff > 0 ) { | ||
| + | levelsvg.replace( 'XXX', 'Vedenpinta melko tavanomainen' ); | ||
| + | } else if ( diff > -10 ) { | ||
| + | levelsvg.replace( 'XXX', 'Vedenpinta melko tavanomainen' ); | ||
| + | } else if ( diff > -20 ) { | ||
| + | levelsvg.replace( 'XXX', 'Vedenpinta matala' ); | ||
| + | } else { | ||
| + | levelsvg.replace( 'XXX', 'Vedenpinta erittäin matala' ); | ||
| + | } | ||
memo.widgetEl.html(''); | memo.widgetEl.html(''); | ||
| − | memo.widgetEl.append( '< | + | memo.widgetEl.append( '<h3 style="text-align: center; font-size: 18px; margin-top: 0;">Vedenkorkeus' + addToTitle + '</h3>' ); |
| − | memo.widgetEl.append( '<div style="width: | + | memo.widgetEl.append( '<div style="width: 120px; height: 120px; margin: 12px auto; padding: 10px; border-radius: 6px; Xborder: 3px solid rgba( 213, 218, 38, 0.5 );">' + levelsvg + '</div>'); |
| − | memo.widgetEl.append( '<p style="text-align: center; line-height: 20px;" class="huomio"> | + | memo.widgetEl.append( '<p style="text-align: center; line-height: 20px;" class="huomio">' + diffStr + '<br /><span class="Xsmall">(' + obs.obsdatetime.inRelationToToday(memo.lang).toLowerCase() + ')</span></p>' ); |
| − | + | //' + obs.obsdatetime.inRelationToToday(memo.lang) + ' | |
} else if ( memo.obscode == 'ice' ) { | } else if ( memo.obscode == 'ice' ) { | ||
| Rivi 623: | Rivi 750: | ||
| − | } else { | + | } else if ( memo.obscode == 'ski' ) { |
memo.widgetEl.html(''); | memo.widgetEl.html(''); | ||
memo.widgetEl.append( '<p style="text-align: center; line-height: 20px;" class="huomio">29.3.2023</p>' ); | memo.widgetEl.append( '<p style="text-align: center; line-height: 20px;" class="huomio">29.3.2023</p>' ); | ||
| − | memo.widgetEl.append( '<div style="width: 100px; height: 100px; margin: 0 auto;"><svg style="width: 100px; height: 100px;" Xfill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 943.01 710.7"><defs><style>.cls-1{fill:#1d1e21;fill-rule:evenodd;}</style></defs><g id="_Ñëîé_2"><path class="cls-1" d="m924.06,669.04c0,15.87-11.49,23.41-26.25,23.41H259.14v18.25h638.68c27.25,0,45.19-13.59,45.19-43.17-.47-9.56-18.76-12.12-18.94,1.51h0Z"/><path class="cls-1" d="m666.6,63.13c0,17.45,6.1,31.93,18.24,44.86,12.94,12.15,27.39,18.24,45.61,18.24s32.7-6.1,45.63-18.24c12.15-12.94,18.27-27.41,18.27-44.86s-6.12-31.93-18.27-44.12c-12.94-12.91-28.13-19.01-45.63-19.01s-32.67,6.12-45.61,19.01c-12.15,12.19-18.24,26.62-18.24,44.12h0Z"/><path class="cls-1" d="m518.95,152.16l-69.79,73.81c-22.53,32.02-68.04,3.51-34.44-34.02l76.63-86.71c6.84-7.59,15.2-11.35,25.85-11.35l135.69,15.61c11.42,0,21.29,3.79,28.9,11.4l83.94,85.43,63.11-65.34c25.92-22.25,55.13,1.98,35.58,29.27l-66.07,69.76c-24.27,26.55-35.16,31.83-53.99,14.99l-39.93-38.49-115.54,131.85,86.36,69.9c.75,1.54,2.28,3.03,3.79,5.35,2.28,2.23,3.79,7.59,6.07,16.71,2.3,9.12.75,18.24-3.02,28.11l-39.35,163.82c-13.66,52.91-71.3,32.88-59.36-11.54l36.95-159.68-111.14-92.43-76.56,77.54c-.74.74-2.3,2.28-4.59,3.77-2.28,1.54-7.61,4.56-15.94,7.63-8.35,3.79-17.5,4.56-28.16,3.82l-158.77-.02c-45.17,3.51-58.15-50.8-7.66-61.6h158.14l205.9-239.38-62.62-8.22h0Z"/><path class="cls-1" d="m334.12,626.16c-12.47,9.84-25.53,5.49-34.67-6.08L14.29,259.16l-14.29,11.33,285.15,360.9c16.87,21.37,38.68,27.02,61.88,8.68,7.24-6.26-2.12-22.22-12.91-13.91h0Z"/></g></svg></div>'); | + | memo.widgetEl.append( '<div style="width: 100px; height: 100px; margin: 0 auto;"><svg <svg style="width: 100px; height: 100px;" Xfill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 943.01 710.7"><defs><style>.cls-1{fill:#1d1e21;fill-rule:evenodd;}</style></defs><g id="_Ñëîé_2"><path class="cls-1" d="m924.06,669.04c0,15.87-11.49,23.41-26.25,23.41H259.14v18.25h638.68c27.25,0,45.19-13.59,45.19-43.17-.47-9.56-18.76-12.12-18.94,1.51h0Z"/><path class="cls-1" d="m666.6,63.13c0,17.45,6.1,31.93,18.24,44.86,12.94,12.15,27.39,18.24,45.61,18.24s32.7-6.1,45.63-18.24c12.15-12.94,18.27-27.41,18.27-44.86s-6.12-31.93-18.27-44.12c-12.94-12.91-28.13-19.01-45.63-19.01s-32.67,6.12-45.61,19.01c-12.15,12.19-18.24,26.62-18.24,44.12h0Z"/><path class="cls-1" d="m518.95,152.16l-69.79,73.81c-22.53,32.02-68.04,3.51-34.44-34.02l76.63-86.71c6.84-7.59,15.2-11.35,25.85-11.35l135.69,15.61c11.42,0,21.29,3.79,28.9,11.4l83.94,85.43,63.11-65.34c25.92-22.25,55.13,1.98,35.58,29.27l-66.07,69.76c-24.27,26.55-35.16,31.83-53.99,14.99l-39.93-38.49-115.54,131.85,86.36,69.9c.75,1.54,2.28,3.03,3.79,5.35,2.28,2.23,3.79,7.59,6.07,16.71,2.3,9.12.75,18.24-3.02,28.11l-39.35,163.82c-13.66,52.91-71.3,32.88-59.36-11.54l36.95-159.68-111.14-92.43-76.56,77.54c-.74.74-2.3,2.28-4.59,3.77-2.28,1.54-7.61,4.56-15.94,7.63-8.35,3.79-17.5,4.56-28.16,3.82l-158.77-.02c-45.17,3.51-58.15-50.8-7.66-61.6h158.14l205.9-239.38-62.62-8.22h0Z"/><path class="cls-1" d="m334.12,626.16c-12.47,9.84-25.53,5.49-34.67-6.08L14.29,259.16l-14.29,11.33,285.15,360.9c16.87,21.37,38.68,27.02,61.88,8.68,7.24-6.26-2.12-22.22-12.91-13.91h0Z"/></g></svg></div>'); |
| − | memo.widgetEl.append( '<p style="text-align: center; line-height: | + | memo.widgetEl.append( '<p style="text-align: center; line-height: 22px;" class="huomio">Katuman jäälatu<br />Kunnostettu</p>' ); |
| − | |||
| − | memo. | + | } else if ( memo.obscode == 'temp' ) { |
| + | |||
| + | var tsum = 0; | ||
| + | var tc = 0; | ||
| + | |||
| + | for ( var o in memo.obsesA ) { | ||
| + | tsum += memo.obsesA[o].data.val; | ||
| + | tc++; | ||
| + | } | ||
| − | + | if ( tc > 0 ) { | |
| + | tavg = Math.round( tsum/tc*10 ) / 10; | ||
| + | tstr = tavg.toString().replace( '.', ',' ) + ' °C'; | ||
| + | if ( tc == 1 ) { | ||
| + | tstr += '<br /><span>(' + memo.obsesA[0].obsdatetime.inRelationToToday(memo.lang).toLowerCase() + ')</span>'; | ||
| + | } | ||
| + | up = Math.round( (tavg/33)*50 ); | ||
| + | up = Math.max( up, 0 ); | ||
| + | up = Math.min( up, 50 ); | ||
| + | |||
| + | a1 = 60 - up; | ||
| + | a2 = 9 + up; | ||
| + | } else { | ||
| + | tavg = -1; | ||
| + | tstr = 'Ei tuoreita<br />havaintoja'; | ||
| + | a1 = 60 - 25; | ||
| + | a2 = 9 + 25; | ||
| + | } | ||
| − | |||
| − | // | + | //up = 10; |
| − | + | //hue = 100 * ( 50-up ) / ( 50 ); | |
| − | + | //rgb = hslToRgb( (360-hue), 0.8, 0.33 ); | |
| − | + | ||
| − | + | //console.log( 360-hue ); | |
| − | + | //console.log( rgb ); | |
| + | |||
| + | //fill = '#' + rgb[0].toString(16).padStart(2, '0') + rgb[1].toString(16).padStart(2, '0') + rgb[2].toString(16).padStart(2, '0'); | ||
| − | memo. | + | if ( tavg < 0 ) { fill ='#ccc'; } |
| − | if ( memo. | + | else if ( tavg < 10 ) { fill = '#0076b0'; } |
| − | + | else if ( tavg < 20 ) { fill = '#d5da26'; } | |
| − | + | else { fill = '#da2626'; } | |
| − | + | ||
| − | + | var tsvg = '<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">'; | |
| + | tsvg += '<style type="text/css">.tscale{fill:none;stroke:#1E1E1E;stroke-width:2;stroke-miterlimit:10;}.toutline{fill:none;stroke:#1E1E1E;stroke-width:4;stroke-miterlimit:10;}'; | ||
| + | tsvg += '.ttemp{fill:' + fill + ';}'; | ||
| + | tsvg += '</style>'; | ||
| + | tsvg += '<g>'; | ||
| + | tsvg += '<line class="tscale" x1="60.6" y1="9" x2="69.5" y2="9"/>'; | ||
| + | tsvg += '<line class="tscale" x1="60.6" y1="25.7" x2="69.5" y2="25.7"/>'; | ||
| + | tsvg += '<line class="tscale" x1="60.6" y1="14.6" x2="66.2" y2="14.6"/>'; | ||
| + | tsvg += '<line class="tscale" x1="60.6" y1="20.1" x2="66.2" y2="20.1"/>'; | ||
| + | tsvg += '<line class="tscale" x1="60.6" y1="42.4" x2="69.5" y2="42.4"/>'; | ||
| + | tsvg += '<line class="tscale" x1="60.6" y1="31.2" x2="66.2" y2="31.2"/>'; | ||
| + | tsvg += '<line class="tscale" x1="60.6" y1="36.8" x2="66.2" y2="36.8"/>'; | ||
| + | tsvg += '<line class="tscale" x1="60.6" y1="59" x2="69.5" y2="59"/>'; | ||
| + | tsvg += '<line class="tscale" x1="60.6" y1="47.9" x2="66.2" y2="47.9"/>'; | ||
| + | tsvg += '<line class="tscale" x1="60.6" y1="53.5" x2="66.2" y2="53.5"/>'; | ||
| + | tsvg += '</g>'; | ||
| + | |||
| + | tsvg += '<path class="ttemp" d="M51.8,69.7V' + a1.toString() + '.3c0-2.1-1.7-3.8-3.8-3.8c-2.1,0-3.8,1.7-3.8,3.8v' + a2.toString() + '.4c-4.7,1.6-8.1,6-8.1,11.3c0,6.6,5.3,11.9,11.9,11.9C54.6,92.9,60,87.5,60,81C60,75.7,56.6,71.2,51.8,69.7z"/>'; | ||
| + | tsvg += '<path class="toutline" d="M56.4,65.5V9.9c0-4.6-3.7-8.4-8.4-8.4h0c-4.6,0-8.4,3.7-8.4,8.4v55.7c-5.5,3-9.2,8.8-9.2,15.4c0,9.7,7.9,17.5,17.5,17.5c9.7,0,17.5-7.9,17.5-17.5C65.6,74.3,61.9,68.5,56.4,65.5z"/>'; | ||
| + | tsvg += '</svg>'; | ||
| + | |||
| + | memo.widgetEl.html(''); | ||
| + | memo.widgetEl.append( '<h3 style="text-align: center; font-size: 18px; margin-top: 0;">Pintaveden lämpötila' + addToTitle + '</h3>' ); | ||
| + | memo.widgetEl.append( '<div style="width: 120px; height: 120px; margin: 10px auto; padding: 10px; border-radius: 6px; Xborder: 3px solid rgba( 213, 218, 38, 0.5 );">' + tsvg + '</div>'); | ||
| + | memo.widgetEl.append( '<p style="text-align: center; line-height: 22px;" class="huomio">' + tstr + '</p>' ); | ||
| + | |||
| + | } else if ( memo.obscode == 'alg' ) { | ||
| + | |||
| + | var asum = 0; | ||
| + | var ac = 0; | ||
| + | |||
| + | for ( var o in memo.obsesA ) { | ||
| + | asum += memo.obsesA[o].data.val; | ||
| + | ac++; | ||
| + | } | ||
| + | |||
| + | if ( ac > 0 ) { | ||
| + | var aavg = Math.round( asum/ac ); | ||
| + | if ( aavg < 0.5 ) { astr = 'Ei sinilevää'; } | ||
| + | else if ( aavg < 1.5 ) { astr = 'Hieman sinilevää'; } | ||
| + | else if ( aavg < 2.5 ) { astr = 'Runsaasti sinilevää'; } | ||
| + | else { astr = 'Erittäin runsaasti sinilevää'; } | ||
| + | if ( ac == 1 ) { | ||
| + | astr += '<br /><span>(' + memo.obsesA[0].obsdatetime.inRelationToToday(memo.lang).toLowerCase() + ')</span>'; | ||
| + | } | ||
| + | } else { | ||
| + | astr = 'Ei tuoreita<br />havaintoja'; | ||
| + | aavg = -1; | ||
| + | } | ||
| + | |||
| + | var asvg = '<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">'; | ||
| + | asvg += '<style type="text/css">.alg0{fill:#0076B0;} .alg1{fill:#D5DA26;} .algx{fill:#ccc;}</style>'; | ||
| + | |||
| + | var rx = 10; | ||
| + | var ry = 10; | ||
| + | |||
| + | for ( var row=0; row<10; row++ ) { | ||
| + | for ( var col=0; col<10; col++ ) { | ||
| + | x = col * 10 + 1; | ||
| + | y = row * 10 + 1; | ||
| + | if ( ac > 0 ) { | ||
| + | if ( Math.random() < ( (aavg) / 3) ) { | ||
| + | aclass = 'alg1'; | ||
| + | } else { | ||
| + | aclass = 'alg0'; | ||
| + | } | ||
| + | } else { | ||
| + | aclass = 'algx'; | ||
| + | } | ||
| + | asvg += '<rect x="' + x.toString() +'" y="' + y.toString() +'" class="' + aclass + '" width="8" height="8"/>'; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | asvg += '</svg>'; | ||
| + | |||
| + | memo.widgetEl.html(''); | ||
| + | memo.widgetEl.append( '<h3 style="text-align: center; font-size: 18px; margin-top: 0;">Sinilevätilanne' + addToTitle + '</h3>' ); | ||
| + | memo.widgetEl.append( '<div style="width: 120px; height: 120px; margin: 10px auto; padding: 10px; border-radius: 6px; Xborder: 3px solid rgba( 213, 218, 38, 0.5 );">' + asvg + '</div>'); | ||
| + | memo.widgetEl.append( '<p style="text-align: center; line-height: 22px;" class="huomio">' + astr + '</p>' ); | ||
| + | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | jQuery( '[data-toggle="tooltip"]' ).tooltip(); | |
| − | memo. | + | memo.loaderEl.fadeOut( "slow", function() { memo.loaderEl.remove(); } ); |
| − | |||
| − | |||
| − | + | } | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | function addDataToDateOfYearChart( memo ) { | |
| − | |||
| − | for ( | + | // do X axis min and max for this chart type |
| + | memo.options.hAxis.minValue = new Date( memo.obsMinDateMs ); | ||
| + | if ( memo.season = 'winter' && memo.options.hAxis.minValue.getMonth() < 8 ) { memo.options.hAxis.minValue.setFullYear( memo.options.hAxis.minValue.getFullYear()-1 ); } | ||
| + | memo.options.hAxis.minValue.setMonth(0); | ||
| + | memo.options.hAxis.minValue.setDate(1); | ||
| + | memo.options.hAxis.viewWindow.min = memo.options.hAxis.minValue; | ||
| − | + | memo.options.hAxis.maxValue = new Date( memo.obsMaxDateMs ); | |
| − | + | if ( memo.season = 'winter' && memo.options.hAxis.maxValue.getMonth() > 7 ) { memo.options.hAxis.maxValue.setFullYear( memo.options.hAxis.maxValue.getFullYear()+1 ); } | |
| − | + | else { memo.options.hAxis.maxValue.setFullYear( memo.options.hAxis.maxValue.getFullYear()+1 ); } | |
| + | memo.options.hAxis.maxValue.setMonth(11); | ||
| + | memo.options.hAxis.maxValue.setDate(31); | ||
| + | memo.options.hAxis.viewWindow.max = memo.options.hAxis.maxValue; | ||
| − | startOfMonth = new Date( yx, mx, 1 ); | + | // do Y axis min and max for this chart type |
| + | memo.options.vAxis.minValue = new Date( memo.obsMinCompDate.getTime() ); | ||
| + | memo.options.vAxis.minValue.setDate(1); | ||
| + | memo.options.vAxis.viewWindow.min = memo.options.vAxis.minValue; | ||
| + | |||
| + | memo.options.vAxis.maxValue = new Date( memo.obsMaxCompDate.getTime() ); | ||
| + | memo.options.vAxis.maxValue.setMonth( memo.options.vAxis.maxValue.getMonth()+1 ); | ||
| + | memo.options.vAxis.maxValue.setDate(0); | ||
| + | memo.options.vAxis.viewWindow.max = memo.options.vAxis.maxValue; | ||
| + | |||
| + | // do Y axis ticks and gridlines | ||
| + | memo.options.vAxis.ticks = []; | ||
| + | memo.vAxisGridlines = []; | ||
| + | memo.options.vAxis.gridlines = { color: 'transparent' }; | ||
| + | memo.options.vAxis.minorGridlines = { color: 'transparent' }; | ||
| + | minM = memo.options.vAxis.minValue.getMonth(); | ||
| + | maxM = memo.options.vAxis.maxValue.getMonth(); | ||
| + | |||
| + | if ( minM > maxM ) { mc = 13-minM+maxM; } | ||
| + | else { mc = maxM-minM+1; } | ||
| + | |||
| + | for ( mi = 0; mi < mc; mi++ ) { | ||
| + | |||
| + | mx = minM+mi; | ||
| + | yx = memo.options.vAxis.minValue.getFullYear(); | ||
| + | if ( mx > 11 ) { yx = memo.options.vAxis.maxValue.getFullYear(); mx = mx - 12; } | ||
| + | |||
| + | startOfMonth = new Date( yx, mx, 1 ); | ||
middleOfMonth = new Date( yx, mx, 15 ); | middleOfMonth = new Date( yx, mx, 15 ); | ||
| Rivi 747: | Rivi 1 000: | ||
memo.data.addColumn( { type: 'string', role: 'annotation' } ); | memo.data.addColumn( { type: 'string', role: 'annotation' } ); | ||
| − | memo.options.series.push( { type: 'scatter', pointType: 'circle', pointSize: 9, color: memo.seriesA[ s ].color } ); | + | memo.options.series.push( { type: 'scatter', pointType: 'circle', pointSize: 9, color: memo.seriesA[ s ].color, XstrokeWidth: 2, Xstroke: '#000000' } ); |
if ( memo.seriesA[ s ].obses.length > 1 ) { | if ( memo.seriesA[ s ].obses.length > 1 ) { | ||
| Rivi 814: | Rivi 1 067: | ||
} | } | ||
| − | + | drawChart(memo); | |
| − | |||
| − | |||
| − | + | } | |
| − | + | ||
| − | + | function addDataToSeasonWithReferencesChart(memo) { | |
| − | |||
| − | |||
| + | // do axis min and max | ||
| + | memo.axisMinDate = new Date( memo.curSeason, 0, 1 ); | ||
| + | memo.axisMaxDate = new Date( memo.curSeason, 11, 31 ); | ||
| − | + | memo.data.addColumn( 'number', memo.obsMinYear + '-' + memo.obsMaxYear ); | |
| − | + | memo.data.addColumn( { id:'i0', type:'number', role:'interval' } ); | |
| + | memo.data.addColumn( { id:'i0', type:'number', role:'interval' } ); | ||
| + | memo.data.addColumn( {'type': 'string', 'role': 'style' } ); | ||
| + | memo.data.addColumn( { type: 'string', role: 'annotation' } ); | ||
| + | memo.data.addColumn( { type: 'string', role: 'tooltip', 'p': { 'html': true } } ); | ||
| − | + | // series for trend line | |
| − | + | //memo.options.trendlines[0] = { labelInLegend: i18n['trendline'][memo.lang], tooltip: false, color: colors['trend'], lineWidth: 2, opacity: 0.5, type: 'linear', visibleInLegend: memo.trendType!='moving' }; | |
| − | // | + | for (var o in memo.obsesA) { |
| − | + | dateStr = memo.obsesA[o].popup.match( /\([^)]*\)/g ); | |
| + | yearStr = dateStr[0].match( /[0-9]{4}/g ); | ||
| + | memo.obsesA[o].popup = memo.obsesA[o].popup.replace( dateStr[0], '(' + yearStr[0] + ')' ); | ||
| + | memo.dataA.push( [ | ||
| + | memo.obsesA[o].obsdatetime, | ||
| + | memo.obsesA[o].value, | ||
| + | memo.obsesA[o].data.low/100, | ||
| + | memo.obsesA[o].data.high/100, | ||
| + | memo.obsesA[o].style, | ||
| + | null, | ||
| + | memo.obsesA[o].popup | ||
| + | ] ); | ||
| + | } | ||
| − | + | memo.options.hAxis.ticks = []; | |
| − | + | for (i=memo.axisMinDate.getFullYear(); i<=memo.axisMaxDate.getFullYear(); i++) { | |
| − | + | middleOfYear = new Date( i, 6, 1 ); | |
| − | + | memo.options.hAxis.ticks.push({v: middleOfYear, f: String(i) }); | |
| − | |||
| − | |||
| − | memo. | ||
| − | |||
} | } | ||
| − | |||
| + | memo.options.seriesType = 'line'; | ||
| + | memo.options.series[0] = { type: 'line', pointSize: 3, color: '#3366cc' }; | ||
| + | memo.options.curveType = 'function'; | ||
| + | memo.options.intervals = { 'style': 'area' }; | ||
| + | |||
| + | memo.options.vAxis.viewWindow.min = 80; | ||
| + | memo.options.vAxis.viewWindow.max = 82; | ||
| + | |||
| + | memo.chart = new google.visualization.LineChart( memo.chartEl[0] ); // document.getElementById(memo.id) | ||
| + | |||
drawChart(memo); | drawChart(memo); | ||
| + | } | ||
| − | + | function addDataToTrendWithHighLowChart (memo) { | |
| − | + | //console.log( 'high low chart'); | |
// do axis min and max | // do axis min and max | ||
| Rivi 860: | Rivi 1 134: | ||
memo.data.addColumn( 'number', memo.obsMinYear + '-' + memo.obsMaxYear ); | memo.data.addColumn( 'number', memo.obsMinYear + '-' + memo.obsMaxYear ); | ||
| + | memo.data.addColumn( { id:'i0', type:'number', role:'interval' } ); | ||
| + | memo.data.addColumn( { id:'i0', type:'number', role:'interval' } ); | ||
memo.data.addColumn( {'type': 'string', 'role': 'style' } ); | memo.data.addColumn( {'type': 'string', 'role': 'style' } ); | ||
memo.data.addColumn( { type: 'string', role: 'annotation' } ); | memo.data.addColumn( { type: 'string', role: 'annotation' } ); | ||
| Rivi 865: | Rivi 1 141: | ||
// series for trend line | // series for trend line | ||
| − | memo.options.trendlines[0] = { labelInLegend: i18n['trendline'][memo.lang], tooltip: false, color: colors['trend'], lineWidth: 2, opacity: 0.5, type: 'linear', visibleInLegend: memo.trendType!='moving' }; | + | //memo.options.trendlines[0] = { labelInLegend: i18n['trendline'][memo.lang], tooltip: false, color: colors['trend'], lineWidth: 2, opacity: 0.5, type: 'linear', visibleInLegend: memo.trendType!='moving' }; |
| + | //console.log( memo ); | ||
for (var o in memo.obsesA) { | for (var o in memo.obsesA) { | ||
| − | + | ||
| − | + | dateStr = memo.obsesA[o].popup.match( /\([^)]*\)/g ); | |
| − | + | yearStr = dateStr[0].match( /[0-9]{4}/g ); | |
| − | + | memo.obsesA[o].popup = memo.obsesA[o].popup.replace( dateStr[0], '(' + yearStr[0] + ')' ); | |
| − | + | memo.dataA.push( [ memo.obsesA[o].obsdatetime, memo.obsesA[o].value, memo.obsesA[o].data.low/100, memo.obsesA[o].data.high/100, memo.obsesA[o].style, null, memo.obsesA[o].popup ] ); | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| Rivi 891: | Rivi 1 159: | ||
} | } | ||
| − | memo.options.series[0] = {type: ' | + | memo.options.seriesType = 'line'; |
| − | + | memo.options.series[0] = { type: 'line', pointSize: 3, color: '#3366cc' }; | |
| + | memo.options.curveType = 'function'; | ||
| + | memo.options.intervals = { 'style': 'area' }; | ||
| + | |||
| + | memo.options.vAxis.viewWindow.min = 80; | ||
| + | memo.options.vAxis.viewWindow.max = 82; | ||
| + | |||
| + | |||
| + | memo.chart = new google.visualization.LineChart( memo.chartEl[0] ); // document.getElementById(memo.id) | ||
| + | |||
drawChart(memo); | drawChart(memo); | ||
| − | } | + | } |
| − | function | + | function addDataToTrendChart(memo) { |
| − | memo.axisMinDate = new Date( memo. | + | // do axis min and max |
| − | memo.axisMinDate.setDate(1); | + | memo.axisMinDate = new Date(memo.obsMinDate.getTime()); |
| − | memo.axisMaxDate | + | memo.axisMaxDate = new Date(memo.obsMaxDate.getTime()); |
| − | memo. | + | memo.axisMinDate.setMonth(0); |
| − | memo. | + | memo.axisMaxDate.setMonth(11); |
| + | memo.axisMinDate.setDate(1); | ||
| + | memo.axisMaxDate.setDate(31); | ||
| + | |||
| + | memo.data.addColumn( 'number', memo.obsMinYear + '-' + memo.obsMaxYear ); | ||
| + | memo.data.addColumn( {'type': 'string', 'role': 'style' } ); | ||
| + | memo.data.addColumn( { type: 'string', role: 'annotation' } ); | ||
| + | memo.data.addColumn( { type: 'string', role: 'tooltip', 'p': { 'html': true } } ); | ||
| − | memo. | + | // series for trend line |
| − | + | memo.options.trendlines[0] = { labelInLegend: i18n['trendline'][memo.lang], tooltip: false, color: colors['trend'], lineWidth: 2, opacity: 0.5, type: 'linear', visibleInLegend: memo.trendType!='moving' }; | |
| − | |||
| − | + | for (var o in memo.obsesA) { | |
| − | |||
| − | |||
| − | |||
| − | + | //dataRow = []; | |
| − | // | + | //if (!!memo.obsesA[o].addInfo) { |
| − | + | //dataArr.push( [ memo.obsesA[o].obsdatetime, memo.obsesA[o].value, 0, memo.obsesA[o].value, memo.obsesA[o].value, 'point { size: 5; fill-color: #0076b0; stroke-width: 2; stroke-color: ' + maintColors[memo.obsesA[o].maintainer] + '; }', '', memo.obsesA[o].popup ] ); | |
| − | + | //memo.dataA.push( [ memo.obsesA[o].obsdatetime, memo.obsesA[o].value, 'point { size: 5; fill-color: #0076b0; stroke-width: 2; stroke-color: ' + maintColors[memo.obsesA[o].maintainer] + '; }', null, memo.obsesA[o].popup ] ); | |
| + | memo.dataA.push( [ memo.obsesA[o].obsdatetime, memo.obsesA[o].value, memo.obsesA[o].style, null, memo.obsesA[o].popup ] ); | ||
| + | //} else { | ||
| + | //dataArr.push( [ memo.obsesA[o].obsdatetime, memo.obsesA[o].value, 0, memo.obsesA[o].value, memo.obsesA[o].value, 'point { size: 4; fill-color: #5893b0; stroke-width: 2; stroke-color: ' + maintColors[memo.obsesA[o].maintainer] + '; }', '', memo.obsesA[o].popup ] ); | ||
| + | //memo.dataA.push( [ memo.obsesA[o].obsdatetime, memo.obsesA[o].value, 'point { size: 4; fill-color: #5893b0; stroke-width: 2; stroke-color: ' + maintColors[memo.obsesA[o].maintainer] + '; }', null, memo.obsesA[o].popup ] ); | ||
| + | //} | ||
| + | |||
| + | //memo.dataA.push( dataRow ); | ||
| − | + | } | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | memo.options.hAxis.ticks = []; | |
| − | + | for (i=memo.axisMinDate.getFullYear(); i<=memo.axisMaxDate.getFullYear(); i++) { | |
| − | + | middleOfYear = new Date( i, 6, 1 ); | |
| − | + | memo.options.hAxis.ticks.push({v: middleOfYear, f: String(i) }); | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | memo.options.series[0] = {type: 'scatter', pointSize: 6, color: '#3366cc' }; | |
| − | |||
| − | memo.options.series[ | ||
| − | + | drawChart(memo); | |
| − | |||
| − | + | } | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | function addDataToSeasonChart(memo) { | |
| − | |||
| − | + | memo.axisMinDate = new Date( memo.obsMinCompDateMs ); | |
| − | memo. | + | memo.axisMinDate.setDate(1); |
| − | + | memo.axisMaxDate = new Date( memo.obsMaxCompDateMs ); | |
| − | memo. | + | memo.axisMaxDate.setMonth( memo.axisMaxDate.getMonth()+1 ); |
| + | memo.axisMaxDate.setDate(0); | ||
| − | + | memo.seasonsO = {}; | |
| − | + | memo.seasonsA = []; | |
| − | + | for (var o in memo.obsesA) { | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | s = memo.obsesA[o].seriesId; | |
| − | + | if (typeof memo.seasonsO[s] == 'undefined' ) { memo.seasonsO[s] = { 'obses': [] }; } | |
| + | memo.seasonsO[s].obses.push( memo.obsesA[o] ); | ||
| + | } | ||
| − | + | for (var o in memo.seasonsO) { memo.seasonsA.push(o); } memo.seasonsA.sort( function(a,b) { return b-a; } ); | |
| − | |||
| − | |||
| − | + | // create cols for each series | |
| − | + | var sc = 0; | |
| − | + | ||
| − | + | ||
| + | for (var s in memo.seasonsA) { | ||
| − | + | // data | |
| − | + | if ( memo.season == 'summer' ) { | |
| − | + | memo.data.addColumn( 'number', memo.seasonsA[s].toString() ); | |
| − | + | } else { | |
| − | memo. | + | memo.data.addColumn( 'number', memo.seasonsA[s].toString() + '-' + (parseInt(memo.seasonsA[s])+1).toString() ); |
| − | } else { | + | } |
| − | memo. | + | // style |
| − | + | memo.data.addColumn( { type: 'string', role: 'style' } ); | |
| − | memo. | + | // tooltip |
| − | memo. | + | memo.data.addColumn( { type: 'string', role: 'tooltip', 'p': { 'html': true } } ); |
| − | + | // annotation | |
| + | memo.data.addColumn( { type: 'string', role: 'annotation' } ); | ||
| + | |||
| + | // add to series | ||
| + | if ( memo.seasonsA[s] == memo.curSeason ) { | ||
| + | if ( memo.type == 'cat' ) { | ||
| + | memo.options.series[sc++] = { type: 'scatter', curveType: 'function', color: colors['curObses'], XpointSize: 3, lineWidth: 0, visibleInLegend: true, hideThis: false, origSize: 10 }; | ||
| + | } else { | ||
| + | if ( memo.obscode == 'secchi' ) { | ||
| + | //console.log('secchi'); | ||
| + | memo.options.series[sc++] = { type: 'area', curveType: 'function', color: colors['curObses'], pointSize: 3, lineWidth: 4, visibleInLegend: true, hideThis: false, origSize: 10 }; | ||
| + | } else { | ||
| + | memo.options.series[sc++] = { type: 'scatter', curveType: 'function', color: colors['curObses'], XpointSize: 3, lineWidth: 4, visibleInLegend: true, hideThis: false, origSize: 10 }; | ||
| + | } | ||
| + | } | ||
| + | } else { | ||
| + | memo.options.series[sc++] = { type: 'scatter', curveType: 'function', color: colors['obses'], XpointSize: 5, lineWidth: 0, visibleInLegend: false, hideThis: true, origSize: 5 }; | ||
} | } | ||
| + | } | ||
| − | + | // legend entry for timespan | |
| − | + | memo.data.addColumn( 'number', memo.obsMinDate.getFullYear() + '-' + memo.obsMaxDate.getFullYear() ); | |
| − | + | memo.options.series[sc++] = { type: 'scatter', color: colors['obses'], pointSize: 5, visibleInLegend: true, hideThis: false }; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | // series for average | |
| − | + | memo.data.addColumn( 'number', i18n['average'][memo.lang] ); | |
| − | + | if ( i18n[memo.obscode].trend.layout == 'area') { | |
| − | + | memo.options.series[sc++] = { type: 'area', curveType: 'function', lineWidth: 2, pointSize: 0, color: colors['average'], areaOpacity: 0.25, lineDashStyle: [2,2], enableInteractivity: false, visibleInLegend: memo.trendType=='moving' }; | |
| − | + | } else { | |
| − | + | memo.options.series[sc++] = { type: 'line', curveType: 'function', lineWidth: 3, pointSize: 5, color: colors['average'], dataOpacity: 0.75, lineDashStyle: [6,3], enableInteractivity: false, visibleInLegend: memo.trendType=='moving' }; | |
| − | + | } | |
| − | + | memo.data.addColumn( { id: 'dev', type: 'number', role: 'interval' } ); | |
| − | + | memo.data.addColumn( { id: 'dev', type: 'number', role: 'interval' } ); | |
| − | memo. | + | if ( memo.seasonsA.length == 1 && memo.seasonsA[0] == memo.curSeason ) { |
| + | memo.options.series[ sc-1 ].lineWidth = 0; | ||
| + | memo.options.series[ sc-1 ].pointSize = 0; | ||
| + | memo.options.series[ sc-1 ].labelInLegend = false; | ||
| + | memo.options.intervals = { 'style':'none' }; | ||
| + | } | ||
| + | |||
| + | // series for trend line | ||
| + | memo.data.addColumn( 'number', 'trend' ); | ||
| + | //memo.options.trendlines[sc] = { labelInLegend: i18n['trendline'][memo.lang], tooltip: false, color: colors['trend'], lineWidth: 2, opacity: 0.5, type: 'polynomial', degree: 15, visibleInLegend: memo.trendType!='moving' }; | ||
| + | memo.options.series[sc++] = { type: 'scatter', pointSize: 0, enableInteractivity: false, visibleInLegend: false, hideThis: false }; | ||
| − | + | // do average | |
| − | + | if (memo.trendType == 'gaussian') { | |
| − | |||
| − | |||
| − | |||
| − | memo. | + | memo.gSmoothing = 4; |
| + | if ( i18n[memo.obscode]['type'] == 'cat') { | ||
| + | memo.distF = 0.1; | ||
| + | } else { | ||
| + | memo.distF = 0; | ||
| + | } | ||
| − | // | + | // sort according to compare date |
| + | memo.obsesA.sort( function( a, b ) { return a.compareDate - b.compareDate; }); | ||
| − | + | // make week averages | |
| − | + | memo.avgW = {}; | |
| − | + | for (var o in memo.obsesA) { | |
| − | |||
| − | + | mwDate = new Date( memo.obsesA[o].compareDate.getFullYear(), memo.obsesA[o].compareDate.getMonth(), memo.obsesA[o].compareDate.getDate() ); | |
| − | + | y = mwDate.getFullYear(); | |
| − | + | w = mwDate.getWeek(); | |
| + | v = memo.obsesA[o].value + memo.distF*Math.random() - memo.distF*Math.random(); | ||
| − | + | if ( typeof memo.avgW[y] == 'undefined' ) { memo.avgW[y] = {}; } | |
| − | if ( y == | + | if ( typeof memo.avgW[y][w] == 'undefined' ) { |
| − | + | mwDate.setDate( mwDate.getDate() - mwDate.getDay() + 3 ) | |
| + | memo.avgW[y][w] = { cDate: mwDate, values: [ v ], sum: v, count: 1, avg: v }; | ||
| + | } else { | ||
| + | memo.avgW[y][w].values.push( v ); | ||
| + | memo.avgW[y][w].sum += v; | ||
| + | memo.avgW[y][w].count++; | ||
| + | memo.avgW[y][w].avg = memo.avgW[y][w].sum / memo.avgW[y][w].count; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // calculate standard deviation | ||
| + | devSum = 0; | ||
| + | devC = 0; | ||
| + | devMax = 0; | ||
| + | for ( var y in memo.avgW ) { | ||
| + | for ( var w in memo.avgW[y] ) { | ||
| + | devC++; | ||
| + | devx = 0; | ||
| + | for (var vi in memo.avgW[y][w].values ) { | ||
| + | devx += Math.pow( (memo.avgW[y][w].values[vi] - memo.avgW[y][w].avg), 2 ); | ||
| + | } | ||
| + | memo.avgW[y][w].dev = Math.sqrt( devx/memo.avgW[y][w].count ); | ||
| + | devSum += memo.avgW[y][w].dev; | ||
| + | devMax = Math.max( memo.avgW[y][w].dev, devMax ); | ||
| + | } | ||
| + | } | ||
| − | + | devAvg = devSum/devC; | |
| − | |||
| − | for ( var w | + | for ( var y in memo.avgW ) { |
| + | for ( var w in memo.avgW[y] ) { | ||
| + | if ( memo.avgW[y][w].count < 5 ) { | ||
| + | //memo.avgW[y][w].dev = Math.max( memo.avgW[y][w].dev, devAvg ); | ||
| + | } | ||
| + | } | ||
| + | } | ||
| − | + | memo.avgWlist = []; | |
| − | + | for ( var y in memo.avgW ) { | |
| + | for ( var w in memo.avgW[y] ) { | ||
| + | memo.avgWlist.push( { y: parseInt(y), w: parseInt(w), avg: memo.avgW[y][w].avg, dev: memo.avgW[y][w].dev } ); | ||
| + | } | ||
| + | } | ||
| − | memo.avgMlist.push( null ); | + | memo.avgWlist.sort( function(a, b) { return (a.y*100+a.w) - (b.y*100+b.w); }); |
| − | memo.avgLlist.push( null ); | + | firstY = memo.avgWlist[0].y; |
| − | memo.avgHlist.push( null ); | + | firstW = memo.avgWlist[0].w; |
| + | lastY = memo.avgWlist[memo.avgWlist.length-1].y; | ||
| + | lastW = memo.avgWlist[memo.avgWlist.length-1].w; | ||
| + | |||
| + | memo.avgMlist = []; | ||
| + | memo.avgLlist = []; | ||
| + | memo.avgHlist = []; | ||
| + | |||
| + | for ( var y=firstY; y<=lastY; y++ ) { | ||
| + | |||
| + | if ( y == firstY ) { w1 = firstW; } | ||
| + | else { w1 = 1; } | ||
| + | |||
| + | if ( y == lastY ) { w2 = lastW; } | ||
| + | else { w2 = 52; } | ||
| + | |||
| + | for ( var w=w1; w<=w2; w++) { | ||
| + | |||
| + | //console.log( y + '/' + w ); | ||
| + | |||
| + | if ( typeof(memo.avgW[y][w]) == 'undefined' ) { | ||
| + | |||
| + | memo.avgMlist.push( null ); | ||
| + | memo.avgLlist.push( null ); | ||
| + | memo.avgHlist.push( null ); | ||
| Rivi 1 172: | Rivi 1 504: | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
dataRow[cc-4] = memo.avgMsmooth[i]; | dataRow[cc-4] = memo.avgMsmooth[i]; | ||
| Rivi 1 188: | Rivi 1 516: | ||
} | } | ||
| − | |||
| − | |||
} else if (memo.trendType == 'moving') { | } else if (memo.trendType == 'moving') { | ||
| Rivi 1 199: | Rivi 1 525: | ||
for (var s in memo.seasonsA) { | for (var s in memo.seasonsA) { | ||
| + | |||
| + | //console.log( s ); | ||
for (var o in memo.seasonsO[memo.seasonsA[s]].obses) { | for (var o in memo.seasonsO[memo.seasonsA[s]].obses) { | ||
| Rivi 1 214: | Rivi 1 542: | ||
// data for series cols | // data for series cols | ||
if ( memo.seasonsA[s] == memo.curSeason ) { | if ( memo.seasonsA[s] == memo.curSeason ) { | ||
| − | dataRow[s*4+1] = obs.value; | + | dataRow[s*4+1] = obs.value; |
} else { | } else { | ||
| + | //console.log( memo.distF ); | ||
dataRow[s*4+1] = obs.value + memo.distF*Math.random() - memo.distF*Math.random(); | dataRow[s*4+1] = obs.value + memo.distF*Math.random() - memo.distF*Math.random(); | ||
} | } | ||
dataRow[s*4+2] = obs.style; | dataRow[s*4+2] = obs.style; | ||
dataRow[s*4+3] = obs.popup; | dataRow[s*4+3] = obs.popup; | ||
| − | + | ||
if ( ( today.getTime() - obs.compareDate.getTime() < 10*24*60*60*1000 ) && s == 0 && o == ( memo.seasonsO[memo.seasonsA[s]].obses.length - 1 ) ) { | if ( ( today.getTime() - obs.compareDate.getTime() < 10*24*60*60*1000 ) && s == 0 && o == ( memo.seasonsO[memo.seasonsA[s]].obses.length - 1 ) ) { | ||
| − | + | ||
| − | var diff = obs.value - memo.avgW[ obs.compareDate.getFullYear() ][ obs.compareDate.getWeek() ].avg; | + | //var diff = obs.value - memo.avgW[ obs.compareDate.getFullYear() ][ obs.compareDate.getWeek() ].avg; |
| − | var diff = Math.round( diff*100 ); | + | //var diff = Math.round( diff*100 ); |
| − | var diffStr = diff.toString() + ' cm'; | + | //var diffStr = diff.toString() + ' cm'; |
| − | if ( diff > 0 ) { diffStr = '+' + diffStr; } | + | //if ( diff > 0 ) { diffStr = '+' + diffStr; } |
dataRow[s*4+4] = null; //diffStr; //annotation | dataRow[s*4+4] = null; //diffStr; //annotation | ||
| Rivi 1 237: | Rivi 1 566: | ||
} | } | ||
| − | } | + | } |
| − | |||
| − | |||
// make ticks for x axis | // make ticks for x axis | ||
| Rivi 1 256: | Rivi 1 583: | ||
memo.options.hAxis.viewWindow.max = memo.axisMaxDate; | memo.options.hAxis.viewWindow.max = memo.axisMaxDate; | ||
memo.options.hAxis.ticks = []; | memo.options.hAxis.ticks = []; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
for (i=0; i<mCount; i++) { | for (i=0; i<mCount; i++) { | ||
| Rivi 1 289: | Rivi 1 608: | ||
} | } | ||
| − | |||
function drawChart(memo) { | function drawChart(memo) { | ||
| − | + | ||
memo.loaderEl.fadeOut( "slow", function() { memo.loaderEl.remove(); } ); | memo.loaderEl.fadeOut( "slow", function() { memo.loaderEl.remove(); } ); | ||
| Rivi 1 299: | Rivi 1 617: | ||
memo.data.addRows(memo.dataA); | memo.data.addRows(memo.dataA); | ||
| − | memo.chart = new google.visualization.ComboChart( memo.chartEl[0] ); // document.getElementById(memo.id) | + | if ( typeof memo.chart == 'undefined' ) { |
| + | memo.chart = new google.visualization.ComboChart( memo.chartEl[0] ); // document.getElementById(memo.id) | ||
| + | } | ||
//doResize(); | //doResize(); | ||
memo.fullscreenEl.fadeIn( "slow" ); | memo.fullscreenEl.fadeIn( "slow" ); | ||
| − | memo.downloadEl.fadeIn( "slow" ); | + | if ( memo.download) { memo.downloadEl.fadeIn( "slow" ); } |
memo.selectedCol = 0; | memo.selectedCol = 0; | ||
| Rivi 1 349: | Rivi 1 669: | ||
} | } | ||
| − | doResize(); | + | doResize( memo ); |
}); | }); | ||
| − | |||
| − | + | } else { | |
| − | + | jQuery( jQuery( document.getElementById(memo.id) ) ).hide(); | |
| − | + | } | |
| − | + | doResize( memo ); | |
| − | |||
| − | |||
| − | |||
| − | + | } | |
| + | |||
| + | var doResize = function( memo ) { | ||
| + | |||
| + | function wait() { | ||
| + | |||
| + | //console.log( memo ); | ||
| + | |||
| + | var w = memo.chartEl.width(); | ||
| + | var h = memo.chartEl.height(); | ||
| + | |||
| + | //console.log( w ); | ||
| + | |||
| + | if ( typeof memo.oldW == 'undefined' ) { memo.oldW = 1; } | ||
| + | if ( typeof memo.oldH == 'undefined' ) { memo.oldH = 1; } | ||
| + | |||
| + | if ( ( w != memo.oldW || h != memo.oldH ) && w*h != 0 ) { | ||
| + | |||
| + | memo.oldW = w; memo.oldH = h; | ||
| − | + | memo.margins = { top: 10, right: 10, bottom: 80, left: 80 }; | |
| − | |||
| − | + | var w = memo.chartEl.width(); | |
| − | + | var h = memo.chartEl.height(); | |
| − | |||
| − | |||
| − | + | var l = Math.max( memo.margins.left, 0.1*w ); | |
| − | + | var r = Math.max( memo.margins.right, 0.02*w ); | |
| − | + | var t = Math.max( memo.margins.top, 0.02*h ); | |
| − | + | var b = Math.max( memo.margins.bottom, 0.15*h ); | |
| − | |||
| − | |||
| − | |||
| − | + | memo.options.chartArea = { top: t, left: l, width: (w - l - r), height: (h - t - b), backgroundColor: { fill: '#fff', stroke: '#eee', strokeWidth: 4 }}; | |
| − | + | memo.chart.draw( memo.data, memo.options ); | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | // hide every second vaxis gridline on cat charts | ||
| + | if ( i18n[memo.obscode]['type'] == 'cat') { | ||
| + | var glc = 0; | ||
| + | jQuery( document.getElementById(memo.id) ).find( 'rect[height="1"]' ).each( function() { | ||
| + | if ( ( glc++ % 2 ) == 0 ) { | ||
| + | jQuery( this ).attr( 'fill', 'none' ); | ||
| + | } | ||
| + | }); | ||
} | } | ||
| − | + | // add dash to trendlines | |
| − | + | jQuery( document.getElementById(memo.id) ).find( 'path[stroke-width="2.33"]' ).each( function() { | |
| − | + | jQuery( this ).attr('stroke-dasharray', '5, 5'); | |
| + | }); | ||
| − | jQuery( jQuery( document.getElementById(memo.id) ) ). | + | // move current observations to top |
| + | gEl = jQuery( document.getElementById(memo.id) ).find( 'svg' ).append( 'g' ); | ||
| + | jQuery( document.getElementById(memo.id) ).find( 'path[stroke="#3366cc"]' ).detach().appendTo( gEl ); | ||
| + | jQuery( document.getElementById(memo.id) ).find( 'circle[fill="#3366cc"]' ).detach().appendTo( gEl ); | ||
| + | jQuery( document.getElementById(memo.id) ).find( 'circle[stroke-width="3"]' ).each( function() { jQuery( this ).parent().append( jQuery( this ) ); }); | ||
| + | } | ||
| + | } | ||
| + | //wait(); | ||
| + | if ( typeof memo.chartEl != 'undefined' ) { | ||
| + | setTimeout( wait, 500 ); | ||
} | } | ||
| − | |||
| − | |||
} | } | ||
| + | window.jwobschartresize = doResize; | ||
function smooth( list, degree ) { | function smooth( list, degree ) { | ||
| Rivi 1 482: | Rivi 1 801: | ||
'season': { 'winter': { 'fi': 'Talvi', 'en': 'Winter', 'sv': 'Vintern' } }, | 'season': { 'winter': { 'fi': 'Talvi', 'en': 'Winter', 'sv': 'Vintern' } }, | ||
'dec': { 'fi': ',', 'en': '.', 'sv': ',' }, | 'dec': { 'fi': ',', 'en': '.', 'sv': ',' }, | ||
| − | 'sep': { 'fi': ' | + | 'sep': { 'fi': ';', 'en': ';', 'sv': ';' }, |
| + | 'obs': { | ||
| + | 'type': 'num', | ||
| + | 'season': 'summer', | ||
| + | 'trend': { 'type': 'gaussian', 'layout': 'line' }, | ||
| + | 'title': { 'fi': '', 'en': '', 'sv': '', 'ru': '' }, | ||
| + | 'unit': '', | ||
| + | 'axisTitleV': { 'fi': '', 'en': '', 'sv': '', 'ru': '' } | ||
| + | }, | ||
'alg': { | 'alg': { | ||
'type': 'cat', | 'type': 'cat', | ||
| Rivi 1 497: | Rivi 1 824: | ||
'type': 'num', | 'type': 'num', | ||
'season': 'summer', | 'season': 'summer', | ||
| + | 'min': 0, | ||
'trend': { 'type': 'gaussian', 'layout': 'line' }, | 'trend': { 'type': 'gaussian', 'layout': 'line' }, | ||
'title': { 'fi': 'Pintaveden lämpötila', 'en': 'Surface water termperature', 'sv': 'Ytvattentemperatur', 'ru': '???' }, | 'title': { 'fi': 'Pintaveden lämpötila', 'en': 'Surface water termperature', 'sv': 'Ytvattentemperatur', 'ru': '???' }, | ||
| Rivi 1 536: | Rivi 1 864: | ||
'snow_load': { | 'snow_load': { | ||
'catName': 'Lumikuorma', | 'catName': 'Lumikuorma', | ||
| + | 'valfield': 'load', | ||
'type': 'num', | 'type': 'num', | ||
'season': 'winter', | 'season': 'winter', | ||
'min': 0, | 'min': 0, | ||
| − | 'trend': { 'type': ' | + | 'trend': { 'type': 'gaussian', 'layout': 'line' }, |
'title': { 'fi': 'Lumikuorma', 'en': 'Snow load', 'sv': 'Snöbelastning', 'ru': '???' }, | 'title': { 'fi': 'Lumikuorma', 'en': 'Snow load', 'sv': 'Snöbelastning', 'ru': '???' }, | ||
'unit': 'kg/m²', | 'unit': 'kg/m²', | ||
'axisTitleV': { 'fi': 'Lumikuorma, kg/m²', 'en': 'Snow load, kg/m²', 'sv': 'Snöbelastning, kg/m²', 'ru': 'm' } | 'axisTitleV': { 'fi': 'Lumikuorma, kg/m²', 'en': 'Snow load, kg/m²', 'sv': 'Snöbelastning, kg/m²', 'ru': 'm' } | ||
}, | }, | ||
| − | ' | + | 'snow': { |
| + | 'catName': 'Lumen syvyys', | ||
'type': 'num', | 'type': 'num', | ||
| − | 'season': 'summer', | + | 'season': 'winter', |
| + | 'min': 0, | ||
| + | 'trend': { 'type': 'gaussian', 'layout': 'line' }, | ||
| + | 'title': { 'fi': 'Lumipeitteen paksuus', 'en': 'Snow cover depth', 'sv': 'Snötäckets tjockhet', 'ru': '???' }, | ||
| + | 'unit': 'cm', | ||
| + | 'axisTitleV': { 'fi': 'Lumipeite, cm', 'en': 'Snow cover, cm', 'sv': 'Snötäcket, cm', 'ru': 'm' } | ||
| + | }, | ||
| + | 'ptot': { | ||
| + | 'type': 'num', | ||
| + | 'season': 'summer', | ||
'min': 0, | 'min': 0, | ||
'direction': 1, | 'direction': 1, | ||
| Rivi 1 578: | Rivi 1 917: | ||
'season': 'summer', | 'season': 'summer', | ||
'min': 0, | 'min': 0, | ||
| − | 'direction': 1, | + | 'direction': 1, |
| − | 'trend': { 'type': 'regression', 'layout': 'line' }, | + | 'trend': { 'type': 'regression', 'layout': 'line' }, |
| − | 'title': { 'fi': 'Hapen kyllästysaste', 'en': 'Oxygen saturation', 'sv': 'Syremättnad', 'ru': '???' }, | + | 'title': { 'fi': 'Hapen kyllästysaste', 'en': 'Oxygen saturation', 'sv': 'Syremättnad', 'ru': '???' }, |
| − | 'unit': '%', | + | 'unit': '%', |
| − | 'axisTitleV': { 'fi': 'Hapen kyllästysaste, %', 'en': 'Oxygen saturation, %', 'sv': 'Syremättnad, %', 'ru': '%' } | + | 'axisTitleV': { 'fi': 'Hapen kyllästysaste, %', 'en': 'Oxygen saturation, %', 'sv': 'Syremättnad, %', 'ru': '%' } |
| − | }, | + | }, |
| − | 'secchi': { | + | 'secchi': { |
| − | 'type': 'num', | + | 'type': 'num', |
| − | 'season': 'summer', | + | 'season': 'summer', |
| − | 'min': 0, | + | 'min': 0, |
| − | 'direction': | + | 'direction': 1, |
| − | 'trend': { 'type': 'gaussian', 'layout': 'line' }, | + | 'trend': { 'type': 'gaussian', 'layout': 'line' }, |
| − | 'title': { 'fi': 'Näkösyvyys', 'en': 'Water transparency', 'sv': 'Siktdjupet', 'ru': '???' }, | + | 'title': { 'fi': 'Näkösyvyys', 'en': 'Water transparency', 'sv': 'Siktdjupet', 'ru': '???' }, |
| + | 'unit': 'm', | ||
| + | 'axisTitleV': { 'fi': 'Näkösyvyys, m', 'en': 'Secchi depth, m', 'sv': 'Siktdjupet, m', 'ru': 'm' } | ||
| + | }, | ||
| + | 'level': { | ||
| + | 'title': { 'fi': 'Vedenkorkeus', 'en': 'Water level', 'sv': 'Vattenståndpunkt', 'ru': '???' }, | ||
| + | 'title2': { 'fi': 'Vedenkorkeus', 'en': '???', 'sv': '???', 'ru': '???' }, | ||
| + | 'type': 'num', | ||
| + | 'season': 'summer', | ||
| + | 'trend': { 'type': 'gaussian', 'layout': 'line' }, | ||
| + | 'unit': 'm', | ||
| + | 'axisTitleV': { 'fi': 'Vedenpinnan korkeus, m', 'en': 'Water level, m', 'sv': 'Vattennivå, m', 'ru': 'm' } | ||
| + | }, | ||
| + | 'avglevelsy': { | ||
| + | 'title': { 'fi': 'Keskivedenkorkeus', 'en': '', 'sv': '', 'ru': '???' }, | ||
| + | 'title2': { 'fi': 'Vedenkorkeus', 'en': '???', 'sv': '???', 'ru': '???' }, | ||
| + | 'type': 'num', | ||
| + | 'season': 'summer', | ||
| + | 'trend': { 'type': 'gaussian', 'layout': 'line' }, | ||
'unit': 'm', | 'unit': 'm', | ||
| − | 'axisTitleV': { 'fi': ' | + | 'axisTitleV': { 'fi': 'Vuosikeskiarvo, m', 'en': 'Water level, m', 'sv': 'Vattennivå, m', 'ru': 'm' } |
}, | }, | ||
| − | ' | + | 'avglevelsw': { |
| − | 'title': { 'fi': ' | + | 'title': { 'fi': 'Keskivedenkorkeus', 'en': '', 'sv': '', 'ru': '???' }, |
'title2': { 'fi': 'Vedenkorkeus', 'en': '???', 'sv': '???', 'ru': '???' }, | 'title2': { 'fi': 'Vedenkorkeus', 'en': '???', 'sv': '???', 'ru': '???' }, | ||
'type': 'num', | 'type': 'num', | ||
| Rivi 1 601: | Rivi 1 958: | ||
'trend': { 'type': 'gaussian', 'layout': 'line' }, | 'trend': { 'type': 'gaussian', 'layout': 'line' }, | ||
'unit': 'm', | 'unit': 'm', | ||
| − | 'axisTitleV': { 'fi': ' | + | 'axisTitleV': { 'fi': 'Vuosikeskiarvo, m', 'en': 'Water level, m', 'sv': 'Vattennivå, m', 'ru': 'm' } |
| − | + | }, | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | }, | ||
'ski': { | 'ski': { | ||
'title': { 'fi': 'Hiihto', 'en': 'Skiing', 'sv': '', 'ru': '???' }, | 'title': { 'fi': 'Hiihto', 'en': 'Skiing', 'sv': '', 'ru': '???' }, | ||
| Rivi 1 626: | Rivi 1 974: | ||
'ValueUnit': { 'fi': 'Arvon tyyppi', 'en': 'Value type', 'sv': 'Värdes typ', 'ru': '???' }, | 'ValueUnit': { 'fi': 'Arvon tyyppi', 'en': 'Value type', 'sv': 'Värdes typ', 'ru': '???' }, | ||
'Date': { 'fi': 'Päivämäärä', 'en': 'Date', 'sv': 'Datum', 'ru': '???' }, | 'Date': { 'fi': 'Päivämäärä', 'en': 'Date', 'sv': 'Datum', 'ru': '???' }, | ||
| + | 'Time': { 'fi': 'Kellonaika', 'en': 'Time', 'sv': 'Tid', 'ru': '???' }, | ||
'Additionalinfo': { 'fi': 'Lisätiedot', 'en': 'Additional info', 'sv': 'Tillägsinformation', 'ru': '???' }, | 'Additionalinfo': { 'fi': 'Lisätiedot', 'en': 'Additional info', 'sv': 'Tillägsinformation', 'ru': '???' }, | ||
'Image': { 'fi': 'Valokuva', 'en': 'Image', 'sv': 'Bild', 'ru': '???' }, | 'Image': { 'fi': 'Valokuva', 'en': 'Image', 'sv': 'Bild', 'ru': '???' }, | ||
