Ero sivun ”Widget:XJwCharts” versioiden välillä
Järvi-meriwikistä
| Rivi 123: | Rivi 123: | ||
memo.dataTable.addRows( table ); | memo.dataTable.addRows( table ); | ||
| + | |||
| + | // margin settings | ||
| + | memo.margins = { top: 0, right: 25, bottom: 60, left: 60 }; | ||
memo.options = { | memo.options = { | ||
| Rivi 132: | Rivi 135: | ||
memo.chart = new google.visualization.CandlestickChart( memo.chartEl[0] ); | memo.chart = new google.visualization.CandlestickChart( memo.chartEl[0] ); | ||
memo.chart.draw( memo.dataTable, memo.options); | memo.chart.draw( memo.dataTable, memo.options); | ||
| + | |||
memo.widgetEl.find( '.jwloading' ).remove(); | memo.widgetEl.find( '.jwloading' ).remove(); | ||
| + | memo.fullscreenEl.fadeIn( "slow" ); | ||
}); | }); | ||
| + | |||
| + | |||
| + | memo.fullscreenEl.on( 'click', function() { | ||
| + | |||
| + | var elem = memo.widgetEl[0]; | ||
| + | |||
| + | if (!!document.fullscreenElement) { | ||
| + | |||
| + | //memo.options.chartArea = { top: memo.margins.top, left: memo.margins.left, width: (memo.container.width() - memo.margins.left - memo.margins.right), height: (memo.container.height() - memo.margins.top - memo.margins.bottom), backgroundColor: { fill: '#daf0fa', stroke: '#fff', strokeWidth: 6 }}; | ||
| + | |||
| + | if (document.exitFullscreen) { | ||
| + | document.exitFullscreen(); | ||
| + | } else if (document.mozCancelFullScreen) { /* Firefox */ | ||
| + | document.mozCancelFullScreen(); | ||
| + | } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */ | ||
| + | document.webkitExitFullscreen(); | ||
| + | } else if (document.msExitFullscreen) { /* IE/Edge */ | ||
| + | document.msExitFullscreen(); | ||
| + | } | ||
| + | |||
| + | } else { | ||
| + | |||
| + | if (elem.requestFullscreen) { | ||
| + | elem.requestFullscreen(); | ||
| + | } else if (elem.mozRequestFullScreen) { /* Firefox */ | ||
| + | elem.mozRequestFullScreen(); | ||
| + | } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */ | ||
| + | elem.webkitRequestFullscreen(); | ||
| + | } else if (elem.msRequestFullscreen) { /* IE/Edge */ | ||
| + | elem.msRequestFullscreen(); | ||
| + | } | ||
| + | |||
| + | } | ||
| + | |||
| + | doResize(); | ||
| + | |||
| + | }); | ||
| + | |||
| + | function doResize() { | ||
| + | |||
| + | var w = memo.widgetEl.width(); | ||
| + | var l = Math.max( memo.margins.left, 0.1*w ); | ||
| + | var r = memo.margins.right; | ||
| + | var h = memo.widgetEl.height(); | ||
| + | var t = Math.max( memo.margins.top, 0.1*h ); | ||
| + | var b = Math.max( memo.margins.bottom, 0.15*h ); | ||
| + | |||
| + | if (!!document.fullscreenElement) { r += 24; } | ||
| + | |||
| + | if (!!document.fullscreenElement) { | ||
| + | memo.options.chartArea = { top: memo.margins.top*2, left: memo.margins.left*2, width: (memo.container.width() - memo.margins.left*2 - memo.margins.right - 24), height: (memo.container.height() - memo.margins.top*2 - memo.margins.bottom*2), backgroundColor: { fill: '#daf0fa', stroke: '#fff', strokeWidth: 6 }}; | ||
| + | } else { | ||
| + | memo.options.chartArea = { top: memo.margins.top, left: memo.margins.left, width: (memo.container.width() - memo.margins.left - memo.margins.right), height: (memo.container.height() - memo.margins.top - memo.margins.bottom), backgroundColor: { fill: '#daf0fa', stroke: '#fff', strokeWidth: 6 }}; | ||
| + | } | ||
| + | memo.options.chartArea = { top: t, left: l, width: (w - l - r), height: (h - t - b), backgroundColor: { fill: '#daf0fa', stroke: '#fff', strokeWidth: 6 }}; | ||
| + | |||
| + | 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' ); } | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | // move current observations to top | ||
| + | gEl = jQuery( document.getElementById(memo.id) ).find( 'svg' ).append( 'g' ); | ||
| + | |||
| + | //jQuery( document.getElementById(memo.id) ).find( 'circle[stroke-width="3"]' ).detach().appendTo( gEl ); | ||
| + | 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 ) ); }); | ||
| + | //jQuery( document.getElementById(memo.id) ).find( 'circle[fill="#3366cc"]' ).each( function() { jQuery( this ).parent().append( jQuery( this ) ); }); | ||
| + | //jQuery( document.getElementById(memo.id) ).find( 'path[stroke="#3366cc"]' ).each( function() { jQuery( this ).parent().append( jQuery( this ) ); }); | ||
| + | |||
| + | |||
| + | jQuery( document.getElementById(memo.id) ).find( 'text[text-anchor="start"]:contains("' + i18n[memo.obscode].title[memo.lang] + '")' ).attr( 'y', (t-10).toString() ); | ||
| + | |||
| + | if (!!document.fullscreenElement) { | ||
| + | memo.fullscreenEl.css( 'margin-top', ( t-35 ).toString() + 'px' ).css( 'margin-right', '7px' ); | ||
| + | memo.downloadEl.css( 'margin-top', ( t-35 ).toString() + 'px' ).css( 'margin-right', '7px' ); | ||
| + | |||
| + | } else { | ||
| + | memo.fullscreenEl.css( 'margin-top', '0px' ).css( 'margin-right', '0px' ); | ||
| + | memo.downloadEl.css( 'margin-top', '0px' ).css( 'margin-right', '0px' ); | ||
| + | } | ||
}); | }); | ||
