Ero sivun ”Widget:XJwCharts” versioiden välillä

Järvi-meriwikistä
Loikkaa:valikkoon, hakuun
 
(5 välissä olevaa versiota samalta käyttäjältä ei näytetä)
Rivi 111: Rivi 111:
 
 
 
 
 
// first loop
 
// first loop
−
for ( var o in memo.jw.obses ) {
+
for ( var o in memo.jw.obs ) {
  
−
obs = memo.jw.obses[o];
+
obs = memo.jw.obs[o];
  
−
console.log( obs );
+
console.log( obs );
  
 
memo.obsesTotal++;
 
memo.obsesTotal++;
  
−
memo.obsMinValue = Math.min( memo.obsMinValue, memo.obses[o].value );
+
memo.obsMinValue = Math.min( memo.obsMinValue, obs.value );
−
memo.obsMaxValue = Math.max( memo.obsMaxValue, memo.obses[o].value );
+
memo.obsMaxValue = Math.max( memo.obsMaxValue, obs.value );
  
−
memo.obsMinDateMs = Math.min( memo.obsMinDateMs, memo.obses[o].datetime.getTime() );
+
memo.obsMinDateMs = Math.min( memo.obsMinDateMs, obs.obsdatetime.getTime() );
−
memo.obsMaxDateMs = Math.max( memo.obsMaxDateMs, memo.obses[o].datetime.getTime() );
+
memo.obsMaxDateMs = Math.max( memo.obsMaxDateMs, obs.obsdatetime.getTime() );
  
 
// add compare date to obses
 
// add compare date to obses
−
if ( memo.season == 'summer' || obs.datetime.getMonth() > 7 ) {
+
if ( memo.season == 'summer' || obs.obsdatetime.getMonth() > 7 ) {
−
obs.compareDate = new Date( memo.curSeason, obs.datetime.getMonth(), obs.datetime.getDate() );
+
obs.compareDate = new Date( memo.curSeason, obs.obsdatetime.getMonth(), obs.obsdatetime.getDate() );
 
} else {
 
} else {
−
obs.compareDate = new Date( memo.curSeason+1, obs.datetime.getMonth(), obs.datetime.getDate() );
+
obs.compareDate = new Date( memo.curSeason+1, obs.obsdatetime.getMonth(), obs.obsdatetime.getDate() );
 
}
 
}
 
ms = obs.compareDate.getTime();
 
ms = obs.compareDate.getTime();
Rivi 137: Rivi 137:
 
// add series id
 
// add series id
 
if ( memo.graphType == 'trend' ) {
 
if ( memo.graphType == 'trend' ) {
−
memo.obses[o].seriesId = 0;
+
obs.seriesId = 0;
−
} else if ( memo.season == 'summer' || memo.obses[o].datetime.getMonth() > 7 ) {
+
} else if ( memo.season == 'summer' || obs.obsdatetime.getMonth() > 7 ) {
−
memo.obses[o].seriesId = memo.obses[o].datetime.getFullYear();
+
obs.seriesId = obs.obsdatetime.getFullYear();
 
} else {
 
} else {
−
memo.obses[o].seriesId = memo.obses[o].datetime.getFullYear()-1;
+
obs.seriesId = obs.obsdatetime.getFullYear()-1;
 
}
 
}
  
 
// create popup for obs
 
// create popup for obs
−
memo.obses[o].popup = '<div style="padding: 8px;">';
+
obs.popup = '<div style="padding: 8px;">';
−
memo.obses[o].popup += '<div>';
+
obs.popup += '<div>';
  
 
if ( i18n[memo.obscode]['type'] == 'cat') {
 
if ( i18n[memo.obscode]['type'] == 'cat') {
−
memo.obses[o].popup +='<b>' + i18n[memo.obscode]['title'][memo.lang] + ': ' + i18n[memo.obscode]['catNames'][memo.obses[o].value][memo.lang] + '</b> ';
+
obs.popup +='<b>' + i18n[memo.obscode]['title'][memo.lang] + ': ' + i18n[memo.obscode]['catNames'][obs.value][memo.lang] + '</b> ';
 
} else if ( i18n[memo.obscode]['type'] == 'date') {
 
} else if ( i18n[memo.obscode]['type'] == 'date') {
−
memo.obses[o].popup +='<b>' + i18n[memo.obscode]['title'][memo.lang] + '</b> ';
+
obs.popup +='<b>' + i18n[memo.obscode]['title'][memo.lang] + '</b> ';
 
} else {
 
} else {
−
memo.obses[o].popup +='<b>' + i18n[memo.obscode]['title'][memo.lang] + ': ' + (Math.round(memo.obses[o].value * 10)/10).toString().replace( '.', i18n['dec'][memo.lang] ) + ' ' + i18n[memo.obscode]['unit'] + '</b> ';
+
obs.popup +='<b>' + i18n[memo.obscode]['title'][memo.lang] + ': ' + (Math.round(obs.value * 10)/10).toString().replace( '.', i18n['dec'][memo.lang] ) + ' ' + i18n[memo.obscode]['unit'] + '</b> ';
 
}
 
}
  
−
memo.obses[o].popup += '(' + memo.obses[o].datetime.inRelationToToday(memo.lang) + ')';
+
obs.popup += '(' + obs.obsdatetime.inRelationToToday(memo.lang) + ')';
−
memo.obses[o].popup += '</div>';
+
obs.popup += '</div>';
  
−
if (!!memo.obses[o].addInfo) { memo.obses[o].popup += '<div style="margin-top: 5px;">' + memo.obses[o].addInfo + '</div>'; }
+
if (!!obs.addInfo) { obs.popup += '<div style="margin-top: 5px;">' + obs.addInfo + '</div>'; }
−
memo.obses[o].popup += '</div>';
+
obs.popup += '</div>';
  
 
}  
 
}  
 +
     
 +
memo.obsMinDate = new Date( memo.obsMinDateMs );
 +
memo.obsMaxDate = new Date( memo.obsMaxDateMs );
 +
memo.obsMinYear = memo.obsMinDate.getFullYear();
 +
memo.obsMaxYear = memo.obsMaxDate.getFullYear();
 +
memo.obsMinCompDate = new Date( memo.obsMinCompDateMs );
 +
memo.obsMaxCompDate = new Date( memo.obsMaxCompDateMs );
 +
 +
memo.obsesA = []; memo.dataA = [];  
 
 
 
 
 +
for (var o in memo.jw.obs) {
 +
 +
obs = memo.jw.obs[o];
 +
 +
// style points
 +
if ( obs.seriesId == memo.curSeason ) {
 +
baseSize = 6;
 +
} else if (memo.obsesTotal < 100) {
 +
baseSize = 4;
 +
} else if (memo.obsesTotal < 200) {
 +
baseSize = 3;
 +
} else if (memo.obsesTotal < 300) {
 +
baseSize = 2;
 +
} else {
 +
baseSize = 2;
 +
}
 +
 +
//if ( memo.graphType == 'dateofyear' ) { baseSize = baseSize + 1; }
 +
 +
if (!!obs.addInfo) {
 +
//obs.style = 'point { shape-type: star; size: ' + (baseSize+3) + '; shape-dent: 0.5; fill-color: ' + colors['noticeObses'] + '; stroke-width: 0; stroke-color: ' + maintColors[memo.obses[o].maintainer] + '; }';
 +
//obs.style = 'point { size: ' + (baseSize+1) + '; stroke-width: 2; stroke-color: gold; }';
 +
obs.style = 'point { size: ' + (baseSize+1) + '; stroke-width: 3; stroke-color: ' + maintColors[obs.maintainer] + '; }';
 +
} else {
 +
obs.style = 'point { size: ' + baseSize + '; stroke-width: 0.5; stroke-color: ' + maintColors[obs.maintainer] + '; }';
 +
}
 +
 +
memo.obsesA.push( obs );
 +
 +
}
 +
 +
// sort
 +
memo.obsesA.sort( function(a, b) { return a.obsdatetime - b.obsdatetime; });
 
 
 
 
−
 
+
// create DataTable
−
 
+
memo.data = new google.visualization.DataTable();
−
 
+
 
−
 
+
// col for xAxis values
−
 
+
memo.data.addColumn( 'date', 'time' );
 +
 
 +
// make ticks for y axis on cat types
 +
if ( i18n[memo.obscode]['type'] == 'cat' ) {
 +
memo.options.vAxis.ticks = [];
 +
for (var c in i18n[memo.obscode]['catNamesShort']) {
 +
memo.options.vAxis.ticks.push({v: parseInt(c), f: i18n[memo.obscode]['catNamesShort'][c][memo.lang] });
 +
memo.options.vAxis.ticks.push({v: parseInt(c)+0.5, f: '' });
 +
}
 +
memo.options.vAxis.ticks.sort( function(a, b) { return a.v-b.v } );
 +
memo.options.vAxis.viewWindow = { min: -0.5, max: parseInt(memo.options.vAxis.ticks[memo.options.vAxis.ticks.length-1].v)+0.5 };
 +
memo.options.vAxis.gridlines.color = '#fff';
 +
memo.options.vAxis.baselineColor = 'none';
 +
} else if ( typeof i18n[memo.obscode]['min'] != 'undefined' ) {
 +
memo.options.vAxis.viewWindow = { min: i18n[memo.obscode]['min'] };
 +
} else if ( memo.obsMinValue >= 0) {
 +
memo.options.vAxis.viewWindow = { min: 0 };
 +
}
 +
 
 +
if (memo.graphType == 'trend') {
 +
 
 +
//addDataToTrendChart(memo);
 +
 
 +
} else if (memo.graphType == 'season') {
 +
 
 +
//addDataToSeasonChart(memo);
 +
 
 +
} else if (memo.graphType == 'dateofyear') {
 +
 
 +
//addDataToDateOfYearChart(memo);
 +
 
 +
}  
 
  
 
  
 
   data = {};
 
   data = {};
Rivi 299: Rivi 372:
 
  } // ObsesReady
 
  } // ObsesReady
 
 
 
 
 +
 +
function addDataToDateOfYearChart( memo ) {
 +
 +
// do X axis min and max for this chart type
 +
memo.options.hAxis.minValue = new Date( memo.obsMinDateMs );
 +
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 );
 +
memo.options.hAxis.maxValue.setMonth(11);
 +
memo.options.hAxis.maxValue.setDate(31);
 +
memo.options.hAxis.viewWindow.max = memo.options.hAxis.maxValue;
 +
 +
memo.options.vAxis.ticks = [];
 +
 +
//memo.options.hAxis.gridlines.units = { years: { format: [ 'yyyy' ] } };
 +
//memo.options.hAxis.ticks = [];
 +
 +
// 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.gridlines = { 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 = maxD.getFullYear(); mx = mx - 12; }
 +
 +
startOfMonth = new Date( yx, mx, 1 );
 +
middleOfMonth = new Date( yx, mx, 15 );
 +
 +
// ticks
 +
memo.options.vAxis.ticks.push( { v: middleOfMonth, f: i18n['months'][mx]['long'][memo.lang] } );
 +
 +
// gridlines except for first
 +
memo.vAxisGridlines = [];
 +
if (mi > 0) {
 +
memo.vAxisGridlines.push( new Date( startOfMonth.getTime() ) );
 +
}
 +
}
 +
 +
// data columns
 +
memo.data.addColumn( 'date', 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 } } );
 +
 +
// scatter series
 +
memo.options.series[0] = { type: 'scatter', pointType: 'circle', pointSize: 9, color: '#3366cc'  };
 +
 +
// linear 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' };
 +
 +
// data columns for vAxis gridlines
 +
for (g=0; g < memo.vAxisGridlines.length; g++) {
 +
memo.data.addColumn( 'date', 'vAxis gridline_' + g );
 +
memo.options.series[g+1] = { type: 'line', pointSize: 0, lineWidth: 1, color: '#fff', XlineDashStyle: [3, 3], visibleInLegend: false };
 +
}
 +
 +
// add data
 +
noc = memo.data.getNumberOfColumns();
 +
 +
// add obses
 +
for (var o in memo.obsesA) {
 +
dataRow = [];
 +
 +
// fill row with nulls
 +
for (var i=0; i<noc; i++) { dataRow.push( null ); }
 +
 +
centerOfYear = new Date( memo.obsesA[o].datetime.getTime() );
 +
centerOfYear.setMonth(6);
 +
centerOfYear.setDate(1);
 +
 +
dataRow[0] = centerOfYear;
 +
dataRow[1] = memo.obsesA[o].compareDate;
 +
dataRow[2] = memo.obsesA[o].style;
 +
// annotation
 +
dataRow[4] = memo.obsesA[o].popup;
 +
 +
memo.dataA.push( dataRow );
 +
}
 +
 +
// add gridlines
 +
for (g=0; g < memo.vAxisGridlines.length; g++) {
 +
 +
dataRow1 = [];
 +
dataRow2 = [];
 +
 +
// fill rows with nulls
 +
for (var i=0; i<noc; i++) { dataRow1.push( null ); dataRow2.push( null ); }
 +
 +
dataRow1[0] = memo.options.hAxis.minValue;
 +
dataRow2[0] = memo.options.hAxis.maxValue;
 +
 +
dataRow1[5+g] = memo.vAxisGridlines[g];
 +
dataRow2[5+g] = memo.vAxisGridlines[g];
 +
 +
memo.dataA.push( dataRow1 );
 +
memo.dataA.push( dataRow2 );
 +
}
 +
 +
drawChart(memo);
 +
 +
}
 
 
 
 
 
  memo.fullscreenEl.on( 'click', function() {
 
  memo.fullscreenEl.on( 'click', function() {

Nykyinen versio 2. marraskuuta 2021 kello 12.48

Noudettu kohteesta ”https://www.jarviwiki.fi/w/index.php?title=Widget:XJwCharts&oldid=952431”




Suomen ympäristökeskuskus SYKE on perustanut ja ylläpitää Järvi-meriwiki-palvelua.
Järvi-meriwikiä kehitettiin vuosina 2010-2013 EU Life+ rahoitetussa GisBloom-hankkeessa.
Maa- ja vesitekniikan tuki ry osallistui palvelun perustamisen ja kehittämisen rahoittamiseen.
Creative Commons Nimeä
Powered by MediaWiki
Powered by Semantic MediaWiki

Tykkää ja seuraa