sjurgis/eso.html

## eso.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive CSV Plotter</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <h2>Upload CSV File</h2>
    <input type="file" id="csvFileInput" accept=".csv" onchange="handleFile()"/>
    <div id="plotDiv"></div>
    <script>
        function handleFile() {
            const fileInput = document.getElementById('csvFileInput');
            const file = fileInput.files[0];
            Papa.parse(file, {
                complete: function(results) {
                    plotData(results.data);
                },
                header: true
            });
        }

        function plotData(data) {
            const headers = data[0];
            const generationData = [];
            const usageData = [];

            // Assuming CSV has columns 'Time', 'Direction', and 'Amount'
            for(let row of data) {
                if(row['Energijos tipas'] === 'P-') {
                    generationData.push({x: row['Data, valanda'], y: parseFloat(row['Kiekis, kWh'])});
                } else if(row['Energijos tipas'] === 'P+') {
                    usageData.push({x: row['Data, valanda'], y: -parseFloat(row['Kiekis, kWh'])}); // Negative for visualization purposes
                }
            }

            const traces = [
                {
                    x: generationData.map(point => point.x),
                    y: generationData.map(point => point.y),
                    fill: 'tozeroy',
                    type: 'scatter',
                    mode: 'lines',
                    name: 'Generation (P-)',
                    line: {color: 'green'},
                },
                {
                    x: usageData.map(point => point.x),
                    y: usageData.map(point => point.y),
                    fill: 'tozeroy',
                    type: 'scatter',
                    mode: 'lines',
                    name: 'Usage (P+)',
                    line: {color: 'red'},
                }
            ];

            Plotly.newPlot('plotDiv', traces, {title: 'CSV Data Visualization'});
        }
    </script>
</body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Interactive CSV Plotter</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	</head>
	<body>
	<h2>Upload CSV File</h2>
	<input type="file" id="csvFileInput" accept=".csv" onchange="handleFile()"/>
	<div id="plotDiv"></div>
	<script>
	function handleFile() {
	const fileInput = document.getElementById('csvFileInput');
	const file = fileInput.files[0];
	Papa.parse(file, {
	complete: function(results) {
	plotData(results.data);
	},
	header: true
	});
	}

	function plotData(data) {
	const headers = data[0];
	const generationData = [];
	const usageData = [];

	// Assuming CSV has columns 'Time', 'Direction', and 'Amount'
	for(let row of data) {
	if(row['Energijos tipas'] === 'P-') {
	generationData.push({x: row['Data, valanda'], y: parseFloat(row['Kiekis, kWh'])});
	} else if(row['Energijos tipas'] === 'P+') {
	usageData.push({x: row['Data, valanda'], y: -parseFloat(row['Kiekis, kWh'])}); // Negative for visualization purposes
	}
	}

	const traces = [
	{
	x: generationData.map(point => point.x),
	y: generationData.map(point => point.y),
	fill: 'tozeroy',
	type: 'scatter',
	mode: 'lines',
	name: 'Generation (P-)',
	line: {color: 'green'},
	},
	{
	x: usageData.map(point => point.x),
	y: usageData.map(point => point.y),
	fill: 'tozeroy',
	type: 'scatter',
	mode: 'lines',
	name: 'Usage (P+)',
	line: {color: 'red'},
	}
	];

	Plotly.newPlot('plotDiv', traces, {title: 'CSV Data Visualization'});
	}
	</script>
	</body>
	</html>