Ero sivun ”Widget:XJwCharts” versioiden välillä
Järvi-meriwikistä
Rivi 5: | Rivi 5: | ||
<script type="text/javascript" src="https://www.jarviwiki.fi/citobsjs/jwapi.js"></script> | <script type="text/javascript" src="https://www.jarviwiki.fi/citobsjs/jwapi.js"></script> | ||
− | <script type="text/javascript"> | + | <script type="text/javascript"> |
google.charts.load( 'current', { 'packages':[ 'corechart' ], 'language': 'fi' } ); | google.charts.load( 'current', { 'packages':[ 'corechart' ], 'language': 'fi' } ); | ||
Rivi 19: | Rivi 19: | ||
function readytogo() { | function readytogo() { | ||
− | + | ||
− | + | jQuery( '.jwChart' ).each( function() { | |
+ | |||
+ | var now = new Date(); | ||
+ | |||
+ | var chartEl = jQuery( this ); | ||
+ | if ( typeof chartEl.prop( 'id' ) == 'undefined' ) { chartEl.prop( 'id', 'jwChart_' + now.getTime() ); | ||
− | + | var jw = new jwApi(); | |
− | + | jw.loadObses( { 'obscode': 'ice', 'siteid': '284245', 'custom': '[[Jäätilanne::2||5]]' }, function( o ) { | |
− | + | //console.log( jw ); | |
− | + | var data = {}; | |
− | + | var firstW = 3000; lastW = 0; | |
− | + | var firstF = 500; var lastB = -500; | |
− | + | var cnewyear = new Date( now.getFullYear()+1, 0, 1 ); | |
− | + | for ( var o in jw.obsList ) { | |
− | + | var obs = jw.obs[ jw.obsList [ o ] ]; | |
− | + | obs.data = JSON.parse( obs.printouts.DataJSON ); | |
− | + | if ( obs.obsdatetime.getMonth() > -1 && obs.obsdatetime.getMonth() < 8 ) { | |
− | + | obs.winter = obs.obsdatetime.getFullYear()-1; | |
− | + | obs.comparedate = new Date( now.getFullYear()+1, obs.obsdatetime.getMonth(), obs.obsdatetime.getDate() ); | |
− | + | } else { | |
− | + | obs.winter = obs.obsdatetime.getFullYear(); | |
− | + | obs.comparedate = new Date( now.getFullYear(), obs.obsdatetime.getMonth(), obs.obsdatetime.getDate() ); | |
− | + | } | |
− | + | var days = ( obs.comparedate.getTime() - cnewyear.getTime() ) / ( 1000*60*60*24 ); | |
− | + | firstW = Math.min( firstW, obs.winter ); lastW = Math.max( lastW, obs.winter ); | |
− | + | firstF = Math.min( firstF, days ); lastB = Math.max( lastB, days ); | |
+ | |||
+ | if ( typeof data[ obs.winter ] == 'undefined' ) { data[ obs.winter ] = { 'winter': obs.winter }; } | ||
− | + | if ( obs.data.cat == 2 ) { | |
+ | data[ obs.winter ].freeze = obs.comparedate; //days; | ||
+ | } else if ( obs.data.cat == 5 ) { | ||
+ | data[ obs.winter ].breakup = obs.comparedate; //days; | ||
+ | } | ||
− | + | //console.log( winter ); | |
− | + | ||
− | + | //var freezeD = new Date( 2021', obs.obsdatetime.getMonth(), obs.obsdatetime.getDate() ); | |
− | + | //var freezeD = new Date( 2021', obs.obsdatetime.getMonth(), obs.obsdatetime.getDate() ); | |
− | |||
− | + | //row = [ winter ] | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | } | |
− | + | var table = []; | |
− | + | firstW = Math.floor( firstW/10 ) * 10; | |
− | + | lastW = Math.floor( lastW/10+1 ) * 10; | |
− | + | for ( var y=firstW; y<(lastW+1); y++ ) { | |
− | + | if ( typeof data[y] != 'undefined' && typeof data[y].freeze != 'undefined' && typeof data[y].breakup != 'undefined' ) { | |
− | + | //row = [ y, data[y].freeze, data[y].freeze, data[y].breakup, data[y].breakup ]; | |
− | + | icedays = Math.round( ( data[y].breakup.getTime() - data[y].freeze.getTime() ) / ( 1000*60*60*24 ) ); | |
− | + | row = [ y, data[y].freeze, data[y].freeze, data[y].breakup, data[y].breakup,'Jääpeiteaika: ' + icedays + ' päivää' ]; | |
− | + | } else { | |
− | + | row = [ y, null, null, null, null, 'tooltip' ]; | |
− | + | } | |
− | + | table.push( row ); | |
− | + | } | |
− | + | var dataTable = new google.visualization.DataTable(); | |
− | + | dataTable.addColumn('number', 'Winter'); | |
− | + | dataTable.addColumn('date', 'Freezing'); | |
− | + | dataTable.addColumn('date', 'Freezing'); | |
− | + | dataTable.addColumn('date', 'Ice break-up'); | |
− | + | dataTable.addColumn('date', 'Ice break-up'); | |
− | + | dataTable.addColumn({role: 'tooltip'}); | |
− | + | dataTable.addRows( table ); | |
− | + | var options = { | |
− | + | legend: 'none', | |
− | + | hAxis: { slantedText: false, maxAlternation: 1, format: '####' }, | |
− | + | vAxis: { format: 'MMM' } | |
− | + | }; | |
− | + | //var chart = new google.visualization.CandlestickChart( document.getElementById( 'chart_div' ) ); | |
+ | var chart = new google.visualization.CandlestickChart( chartEl[0] ); | ||
− | + | chart.draw( dataTable, options); | |
− | + | }); | |
− | + | }); | |
− | |||
} | } |