Skip to content

Commit

Permalink
Plotting in ui
Browse files Browse the repository at this point in the history
ryansurf committed May 25, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent a9ea40c commit b97aaa9
Showing 3 changed files with 90 additions and 4 deletions.
1 change: 1 addition & 0 deletions src/backend/helper.py
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"""
General helper functions
"""
import matplotlib.pyplot as plt, mpld3


def seperate_args(args):
9 changes: 7 additions & 2 deletions src/frontend/index.html
Original file line number Diff line number Diff line change
@@ -21,6 +21,7 @@
font-family: "Poppins", sans-serif;
}
</style>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
</head>


@@ -69,8 +70,12 @@
</form>
</div>
<!-- FORM END -->
<div id="serverResponse" class="h-[50vh] text-white">

<div class="flex flex-col h-[50vh] max-w-xl min-w-96">
<div id="serverResponse" class="text-white flex flex-row justify-center pb-8">
</div>
<div id="plot">
<div id="chartDiv" style="margin:0 auto;"></div>
</div>
</div>
</div>
<script src="script.js"></script>
84 changes: 82 additions & 2 deletions src/frontend/script.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const ipAddress = 'localhost';
// ipAddress = the ip of the machine that is hosting the server
const ipAddress = '192.168.16.6';
const port = 8000;

document.getElementById("reportForm").addEventListener("submit", function(event) {
@@ -44,7 +45,7 @@ document.addEventListener("submit", function() {
.then(response => response.text())
.then(data => {
// Parse the response text to extract the desired information
const lines = data.split('\n'); // Split the response into lines
var lines = data.split('\n'); // Split the response into lines
let extractedData = ''; // Initialize an empty string to store extracted data

// Loop through each line and extract relevant information
@@ -65,7 +66,86 @@ document.addEventListener("submit", function() {
console.error('Error fetching data:', error);
});
}
function getPlotData() {
// Clear arrays before fetching new data
// Make the HTTP GET request
// Get the value of the location input field
var location = document.getElementById("curlInput").value;
fetch(`http://${ipAddress}:${port}?args=fc=7,=location=${encodeURIComponent(location)}`)
.then(response => response.text())
.then(data => {
// Parse the response text to extract the desired information
var lines = data.split('\n'); // Split the response into lines
let dates = []; // Initialize an empty array for dates
let heights = []; // Initialize an empty array for wave heights
let periods = []; // Initialize an empty array for wave periods
// Loop through each line and extract relevant information
lines.forEach(line => {
if (line.startsWith('Date')) {
var fullDate = line.split(':')[1].trim();
var date = fullDate.split(' ')[0]; // Extract the date part only
dates.push(date);
} else if (line.startsWith('Wave Height')) {
var height = parseFloat(line.split(':')[1].trim());
heights.push(height);
} else if (line.startsWith('Wave Period')) {
var period = parseFloat(line.split(':')[1].trim());
periods.push(period);
}
});
// Log the arrays to verify
console.log('Dates:', dates);
console.log('Wave Heights:', heights);
console.log('Wave Periods:', periods);
plot_graph(dates, heights, periods);
})
.catch(error => {
console.error('Error fetching data:', error);
});
}

// Call the function to fetch data and update HTML content when the form is submitted
fetchDataAndUpdateHTML();
getPlotData();
});

function plot_graph(dates, heights, periods) {
var heightPoints = dates.map((date, index) => [date, heights[index]]);
var periodPoints = dates.map((date, index) => [date, periods[index]]);

var chart = JSC.chart('chartDiv', {
debug: true,
type: 'line',
legend_visible: false,
xAxis: {
crosshair_enabled: true,
scale: { type: 'time' }
},
yAxis: {
orientation: 'opposite',
formatString: 'n2'
},
defaultSeries: {
firstPoint_label_text: '<b>%seriesName</b>',
defaultPoint_marker: {
type: 'circle',
size: 8,
fill: 'white',
outline: { width: 2, color: 'currentColor' }
}
},
title_label_text: 'Surf Heights and Periods',
series: [
{
name: 'Heights',
points: heightPoints
},
{
name: 'Periods',
points: periodPoints
}
]
});

}

0 comments on commit b97aaa9

Please sign in to comment.