Ich würde gerne per Button historische Kurse von der jeweiligen Aktie in ein Chart darstellen wollen. Mein Template sieht so aus:
Code: Alles auswählen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aktienauswahl</title>
<!-- Bootstrap CSS einbinden -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Chart.js einbinden -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.card-deck .card {
margin-bottom: 30px;
}
.historical-chart-container {
display: none;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container my-4">
<a href="{% url 'home' %}" class="btn btn-secondary">Home</a>
<h2 class="text-center mb-4">Wähle 5 Aktien aus dem DAX 40</h2>
<form method="post" class="card-deck">
{% csrf_token %}
{% if form.non_field_errors %}
<div class="alert alert-danger" role="alert">
{% for error in form.non_field_errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
{% for aktie in form.aktien %}
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ aktie.label }} </h5>
<div class="form-check">
{{ aktie }}
<label class="form-check-label" for="{{ aktie.id_for_label }}"></label>
</div>
<!-- Setze das id-Attribut des Buttons auf das ticker_symbol der Aktie -->
<button type="button" class="btn btn-info" onclick="loadHistoricalData(this)" data-ticker-symbol="{{ aktie.ticker_symbol }}">Historische Kurse</button>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:3 %}<div class="w-100"></div>{% endif %}
{% endfor %}
<div class="w-100"></div>
<button type="submit" class="btn btn-primary mt-3">Speichern und weiter</button>
</form>
</div>
<div class="container historical-chart-container">
<canvas id="historicalChart" width="400" height="400"></canvas>
</div>
<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
function loadHistoricalData(element) {
var tickerSymbol = element.getAttribute('data-ticker-symbol');
console.log('Fetching data for:', tickerSymbol);
fetch(`/historische_kurse/${tickerSymbol}/`)
.then(response => response.json())
.then(data => {
var ctx = document.getElementById('historicalChart').getContext('2d');
if(window.historicalChart) {
window.historicalChart.destroy();
}
window.historicalChart = new Chart(ctx, {
type: 'line',
data: {
labels: data.dates, // Daten für die X-Achse
datasets: [{
label: 'Historischer Kurs von ' + buttonId,
data: data.prices, // Historische Kursdaten
backgroundColor: 'rgba(0, 123, 255, 0.2)',
borderColor: 'rgba(0, 123, 255, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: false
}
}
}
});
document.getElementById('historicalChart').style.display = 'block';
})
.catch(error => console.error('Fehler beim Laden der historischen Daten:', error));
}
</script>
</body>
</html>
</body>
</html>
normalerweise müsste nach dem historische_kurse/ *** / bei den sternen der jeweiliger Ticker sein für yfinance. Wenn ich aber manuell oben den Ticker eingebe dann kommen die Daten. Wenn ich manuell den ticker eingebe in dem fretch crashd das chart. Hat jemand ideen ?
