{source}<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG">
</script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
.chart {
width: 100%;
height: auto;
margin-bottom: 20px;
}
</style>

<div id="chart" class="chart"></div>
<script>
// Funkcja do pobierania danych z API NOAA
async function fetchData(url) {
const response = await fetch(url, Headers ={
'Cache-Control': 'no-cache'
});
const data = await response.json();
return data;
}
const tickvals = [5e-8, 5e-7, 5e-6, 5e-5, 5e-4];
// Opcje wykresu
const layoutOptions = {
title: {
text: 'GOES X-RAY FLUX',
font: {
//family: 'serif',
color: 'blue',
//bold: true,
size: 18
},
},
xaxis: {
title: '$\\text{Time}$',
type: 'date',
showgrid: true,
showline: false,
zeroline: false,
gridcolor: 'rgba(0, 0, 0, 0.15)',
//gridwidth: 1,
},
yaxis: {
title: '$\\text{Flux}\\; [\\frac{W} {m^{2}}]$',
type: 'log',
//autorange: true,
gridwidth: 1,
zeroline: false,
showgrid: true,
gridcolor: 'rgba(0, 0, 0, 0.15)',
range: [-9, -3],
tickvals: [1e-9, 1e-8, 1e-7, 1e-6, 1e-5, 1e-4, 1e-3],
},
yaxis2: {
title: '$\\text{Xray Flare Class}$',
type: 'log',
tickmode: 'array',
//autorange: true,
zeroline: false,
overlaying: 'y',
side: 'right',
tickvals: [3.16e-8, 3.16e-7, 3.16e-6, 3.16e-5, 3.16e-4],
//ticktext: ['1e-9', '1e-8', '1e-7', '1e-6', '1e-5'],
//tickvals: [1e-8, 1e-7, 1e-6, 1e-5, 1e-4],
//tickvals: tickvals.map(x => Math.log10(x)),
ticktext: ['A', 'B', 'C', 'M', 'X'],
//tickformat: '.0s',
range: [-9, -3],
//gridwidth: 0,
showgrid: false,
},
legend: {
"orientation": "h",
x: 0,
y: 1.2
},


};

// Funkcja do generowania danych i wykresów
async function generateDataAndChart(restyleData = true) {
const apiUrlGeos18 = 'https://services.swpc.noaa.gov/json/goes/primary/xrays-3-day.json';
const apiUrlGeos16 = 'https://services.swpc.noaa.gov/json/goes/secondary/xrays-3-day.json';

const dataGeos18 = await fetchData(apiUrlGeos18);
const dataGeos16 = await fetchData(apiUrlGeos16);

const traces = [];

// GEOS-18, fale długie
const x18Long = dataGeos18.filter(record => record.energy === "0.05-0.4nm" && record.flux !== 0).map(record => Date.parse(record.time_tag));
const y18Long = dataGeos18.filter(record => record.energy === "0.05-0.4nm" && record.flux !== 0).map(record => record.flux);
const trace18Long = {
x: x18Long,
y: y18Long,
mode: 'lines',
type: 'scatter',
width: 1,
name: 'GEOS-18 long'
};
traces.push(trace18Long);

// GEOS-18, fale krótkie
const x18Short = dataGeos18.filter(record => record.energy === "0.1-0.8nm" && record.flux !== 0).map(record => Date.parse(record.time_tag));
const y18Short = dataGeos18.filter(record => record.energy === "0.1-0.8nm" && record.flux !== 0).map(record => record.flux);
const trace18Short = {
x: x18Short,
y: y18Short,
mode: 'lines',
type: 'scatter',
width: 1,
yaxis: 'y2',
name: 'GEOS-18 short'
};
traces.push(trace18Short);

// GEOS-16, fale długie
const x16Long = dataGeos16.filter(record => record.energy === "0.05-0.4nm" && record.flux !== 0).map(record => Date.parse(record.time_tag));
const y16Long = dataGeos16.filter(record => record.energy === "0.05-0.4nm" && record.flux !== 0).map(record => record.flux);
const trace16Long = {
x: x16Long,
y: y16Long,
mode: 'lines',
type: 'scatter',
width: 1,
name: 'GEOS-16 long'
};
traces.push(trace16Long);

// GEOS-16, fale krótkie
const x16Short = dataGeos16.filter(record => record.energy === "0.1-0.8nm" && record.flux !== 0).map(record => Date.parse(record.time_tag));
const y16Short = dataGeos16.filter(record => record.energy === "0.1-0.8nm" && record.flux !== 0).map(record => record.flux);
const trace16Short = {
x: x16Short,
y: y16Short,
y2: y16Short,
mode: 'lines',
type: 'scatter',
width: 1,
name: 'GEOS-16 short'
};
traces.push(trace16Short);

const container = document.getElementById('chart');
if (restyleData) {
Plotly.newPlot(container, traces, layoutOptions);
 
}
else
{
Plotly.newPlot(container, traces, layoutOptions);
}
}
generateDataAndChart(false);
setInterval(generateDataAndChart, 10000);
</script>
<div style="text-align: center;">
<h3 style="color: blue;">NOAA SOLAR SYNOPTIC MAP</h3>
<a href="https://services.swpc.noaa.gov/images/synoptic-map.jpg" target="_blank">
<img style="max-width: 80%; height: auto; text-align: center;" src="https://services.swpc.noaa.gov/images/synoptic-map.jpg"
alt="synoptic-map" title="Click to enlarge!">
</a>
</div>{/source}Courtesy of NASA/SDO and the AIA, EVE, and HMI science teams.