File size: 1,960 Bytes
dd17a04 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
const DEFAULT_LAYOUT = {
title: {
text: 'Plot Title',
font: {
size: 19
},
y: 0.87
},
xaxis: {
title: {
text: 'X-axis',
font: {
size: 15
}
},
tickfont: {
size: 14
},
showgrid: false,
mirror: true,
ticks: 'outside',
showline: true,
},
yaxis: {
title: {
text: 'Y-axis',
font: {
size: 15
}
},
showgrid: false,
mirror: true,
ticks: 'outside',
showline: true,
tickfont: {
size: 14
}
},
legend: {
orientation: 'v',
xanchor: 'right',
yanchor: 'bottom',
x: 1,
y: 0,
font: {
size: 14
},
bgcolor: 'rgba(0,0,0,0)',
}
}
document.addEventListener('DOMContentLoaded', function() {
const plotElements = document.querySelectorAll('[id^="plot-"]');
plotElements.forEach((elem) => {
const plotName = `${elem.id.replace('plot-', '')}`;
fetch(`data/plots/${plotName}.json`)
.then(response => response.json())
.then(data => {
const traces = [];
for (const key in data.data) {
const trace = {
x: data.data[key].x,
y: data.data[key].y,
type: 'scatter',
mode: 'lines',
line: {
width: 2.5
},
name: data.data[key].label
};
traces.push(trace);
}
const layout = _.merge(DEFAULT_LAYOUT, data.layout);
console.log(layout);
Plotly.newPlot(elem, traces, layout);
})
.catch(error => console.error('Error loading the data:', error));
})
}); |