Python Django Financial Trading Dashboard – Integration von AnyChart JS-Charts

Wir freuen uns, einen hilfreichen Artikel zu EODHD-APIs zu teilen, in dem Michael Whittle, ein erfahrener Entwickler und Top-Medium-Autor, zeigt, wie er unsere JavaScript-Charting-Bibliothek in sein Python-Django-basiertes Handels-Dashboard integriert hat.

Er bespricht insbesondere seine Erfahrungen bei der Migration einer Baumkarte von D3.js zu AnyChart und erklärt, warum er sich für unsere Lösung zur Implementierung eines Aktiendiagramms entschieden hat, wobei er den intuitiven Code und die erweiterte Funktionalität hervorhebt.

Lesen Sie weiter, um zu erfahren, wie Sie Ihre Finanzdatenvisualisierungen in Python-Django-Webanwendungen mit AnyChart JS Charts verbessern können.

---

Dieser Artikel baut auf den beiden vorherigen Artikeln der Serie auf: „Erstellen eines Finanzhandels-Dashboards mit Python Django“ und „Verbesserung des Finanzhandels-Dashboards mit Python Django“.

Zuerst habe ich die Treemap auf der Landingpage mit der D3.js-Bibliothek erstellt. Obwohl es gut funktionierte, wollte ich andere Diagrammoptionen erkunden und habe daher sowohl Chart.js als auch AnyChart evaluiert. Letztendlich habe ich beschlossen, die Treemap von D3.js nach AnyChart zu migrieren. Obwohl das visuelle Erscheinungsbild der Diagramme recht ähnlich ist, fand ich den Code von AnyChart deutlich intuitiver und leichter zu verstehen. Darüber hinaus finde ich persönlich, dass die AnyChart-Baumkarte etwas mehr Funktionalität bietet und ausgefeilter aussieht. Allerdings gefiel mir auch die Ästhetik von Chart.js, was nach wie vor eine praktikable Option ist.

Im vorherigen Artikel habe ich eine Seite erstellt, auf der die historischen Daten eines Marktes angezeigt werden, die mithilfe einer Bootstrap-Datentabelle übersichtlich dargestellt werden. Für diesen Artikel wollte ich über der Tabelle ein ansprechendes Aktiendiagramm einfügen. Ich habe noch einmal über die drei Diagrammbibliotheken nachgedacht, war aber besonders beeindruckt von der Art und Weise, wie AnyChart die Daten präsentierte, und von der Funktionalität, die es bot. In diesem Artikel wird erläutert, wie dies erreicht wurde.

Endlich habe ich eine weitere nützliche Funktion von Bootstrap entdeckt. Im vorherigen Artikel habe ich gezeigt, wie man eine Schaltfläche „Nach Excel exportieren“ hinzufügt. Ebenso können Sie mit nur einer Codezeile auch eine Schaltfläche „Drucken“ hinzufügen. Diese Funktion übernimmt die Daten aus der Bootstrap-Tabelle und präsentiert sie in einem druckfreundlichen Format.

Schneller Sprung:

1. Aktualisieren der Ansicht
2. Aktualisieren der Vorlage – index.html
3. Aktualisieren der Vorlage – Historical_data.html
4. Zusammenfassung
5. Nächste Schritte

Aktualisieren der Ansicht

Ich musste nur eine Änderung an einer Ansicht vornehmen, damit das Aktiendiagramm mit historischen Daten funktioniert.

def fetch_historical_data(request, market, interval):
  now = datetime.now()

  if interval in ["m", "w", "d"]:
    end_date = now.date().isoformat()
    start_date = (now - timedelta(days=300)).date().isoformat()
  else:
    end_date = now.strftime("%Y-%m-%dT%H:%M")
    start_date = (now - timedelta(hours=300)).strftime("%Y-%m-%dT%H:%M")

  start_date = request.GET.get("from", start_date)
  end_date = request.GET.get("to", end_date)

  def parse_datetime(dt_str):
    try:
      return datetime.strptime(dt_str, "%Y-%m-%dT%H:%M:%S")
    except ValueError:
      try:
        return datetime.strptime(dt_str, "%Y-%m-%dT%H:%M")
      except ValueError:
        return datetime.strptime(dt_str, "%Y-%m-%d")

  start_date_parsed = parse_datetime(start_date)
  end_date_parsed = parse_datetime(end_date)

  if interval in ["m", "w", "d"]:
    start_date = start_date_parsed.strftime("%Y-%m-%d")
    end_date = end_date_parsed.strftime("%Y-%m-%d")
  else:
    start_date_unix = int(start_date_parsed.timestamp())
    end_date_unix = int(end_date_parsed.timestamp())

  endpoint = "eod" if interval in ["m", "w", "d"] else "intraday"
  interval_type = "period" if interval in ["m", "w", "d"] else "interval"

  if interval not in ["m", "w", "d"]:
    url = f"https://eodhd.com/api/{endpoint}/{market}?{interval_type}={interval}&from={start_date_unix}&to={end_date_unix}&api_token={settings.EODHD_API_TOKEN}&fmt=json"
  else:
    url = f"https://eodhd.com/api/{endpoint}/{market}?{interval_type}={interval}&from={start_date}&to={end_date}&api_token={settings.EODHD_API_TOKEN}&fmt=json"

  print(url)
  response = requests.get(url)
  data = response.json()

  def format_unix_timestamp(unix_ts):
    return datetime.utcfromtimestamp(unix_ts).strftime("%Y-%m-%d %H:%M:%S")

  for entry in data:
    if "date" in entry:
      entry["timestamp"] = entry.pop("date")
    elif "datetime" in entry:
      datetime_value = entry.pop("datetime")
      try:
        entry["timestamp"] = format_unix_timestamp(int(datetime_value))
      except ValueError:
        entry["timestamp"] = datetime_value

  if not data or "error" in data:
    data = []

  raw_data = data
  historical_data_json = json.dumps(data)

  return render(
    request,
    "historical/historical_data.html",
    {
      "market": market,
      "interval": interval,
      "historical_data": raw_data,  # Raw Python data for the table
      "historical_data_json": historical_data_json,  # JSON for the script
      "start_date": (
        start_date
        if interval in ["m", "w", "d"]
        else start_date_parsed.strftime("%Y-%m-%dT%H:%M")
      ),
      "end_date": (
        end_date
        if interval in ["m", "w", "d"]
        else end_date_parsed.strftime("%Y-%m-%dT%H:%M")
      ),
    },
  )

Wenn Sie die Ausgabe der Funktion genau beobachten, werden Sie feststellen, dass ich die Daten in zwei Teile aufgeteilt habe. Die erste, „historical_data“, enthält die von der API zurückgegebenen Rohdaten, die für die Bootstrap-Datentabelle verwendet werden. Die zweite, „historical_data_json“, ist eine bereinigte Version der Daten im JSON-Format, die für den AnyChart-Aktienchart erforderlich ist. Es war tatsächlich eine ziemliche Herausforderung, dies zum Laufen zu bringen. Ich wollte zwei Möglichkeiten zur Visualisierung der historischen Daten bereitstellen, aber jede erforderte die Daten in einem anderen Format. Dieser Ansatz erwies sich als effektive Lösung.

Aktualisieren der Vorlage – index.html

Wie ich oben erwähnt habe, verwendete meine erste Treemap die D3.js-Bibliothek. Ich habe sowohl die Chart.js- als auch die AnyChart-Bibliotheken evaluiert. Ich fand die AnyChart-Bibliothek initiativ und sieht viel schöner und ausgefeilter aus. Ich habe den konvertierten Code unten eingefügt.

GOTCHA

Ich bin auf einen der seltsamsten Fehler gestoßen, der mich mehrere Tage lang verwirrt hat. Als ich den Treemap-Code zunächst von D3.js nach AnyChart konvertierte, funktionierte es einwandfrei. Dann verlagerte ich meinen Fokus auf das Aktiendiagramm „Historische Daten“, aber als ich zur AnyChart-Baumkarte zurückkehrte, wurde es nicht richtig gerendert. Obwohl die API Daten für 110 Marktindizes empfing, wurden nur 11 angezeigt.

Um dies zu debuggen, musste ich den Code auf seine einfachsten Komponenten reduzieren. Wie sich herausstellte, hing das „Problem“ mit der Einbeziehung von daily_return als Wert für die Baumkarte zusammen. Ich habe mich für die Verwendung von daily_return anstelle der Anzahl der Bestandteile entschieden, da dadurch ein optisch ansprechenderer Farbverlauf zwischen hohen und niedrigen Werten entsteht. Ich habe jedoch herausgefunden, dass Baumkarten positive Zahlen als Werte benötigen, um korrekt dargestellt zu werden – das ist einfach ihre Funktionsweise.

Als ich es zum ersten Mal zum Laufen brachte, müssen die Marktbedingungen außergewöhnlich gut gewesen sein, da alle täglichen Renditen positiv waren. Als ich den Code ein paar Tage später noch einmal überprüfte, waren einige tägliche Rückgaben negativ, was dazu führte, dass nur 11 Einträge angezeigt wurden.

Um dieses Problem anzugehen, habe ich eine einfache, aber effektive Lösung entwickelt. Ich habe dafür gesorgt, dass der an die Baumkarte übergebene Wert immer absolut (eine positive Zahl) war, und habe diesen Wert aus der Zellenanzeige entfernt. Stattdessen habe ich es zu einem Tooltip hinzugefügt, der beim Bewegen der Maus angezeigt wird. Dadurch konnte die Baumkarte korrekt mit einem angenehmen Farbverlauf gerendert werden, während bei Bedarf immer noch der tatsächliche Wert angezeigt werden konnte.

<kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marktindizes-Baumkarte</title>

  https://cdn.anychart.com/releases/8.13.0/js/anychart-bundle.min.js
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

  <stil>
    Körper {
      Hintergrundfarbe: #343a40;
      Farbe: #ffffff;
    }
    #treemap {
      Breite: 100 %;
      Höhe: 80vh;
      Rand: 0 automatisch;
    }
  


<k>
  <div>



<h3>
  
  
  Aktualisieren der Vorlage – Historical_data.html 
</h3>

<p>Der nächste Teil bestand darin, das AnyChart-Aktiendiagramm über der Bootstrap-Tabelle mit historischen Daten hinzuzufügen. Wie ich oben erwähnt habe, habe ich auch die Schaltfläche „Drucken“ hinzugefügt, was praktisch sein könnte.</p>

<p>Ich fand, dass sowohl Chart.js als auch AnyChart wirklich angenehme, funktionsreiche Grafiken hatten. Ich habe mich für AnyChart entschieden, weil ich die Bibliotheken in der App nicht vermischen wollte, mir aber auch das Aussehen des Diagramms sehr gut gefallen hat.</p>

<p>Was ich wirklich schön finde, ist, dass die Grafik interaktiv ist. Für zusätzliche Informationen können Sie die Datenpunkte schwenken, zoomen und mit der Maus darüber bewegen. Als Einstieg in die Aktie können Sie die Candlesticks auch visuell dargestellt sehen, wie es bei den meisten Handelsanwendungen der Fall ist. Ein grüner Balken, wenn der Schlusskurs höher als der Eröffnungskurs ist, und ein rotes Auto, wenn der Schlusskurs niedriger als der Eröffnungskurs ist.<br>
</p>
<pre class="brush:php;toolbar:false">


<kopf>
  <title>Historische Daten für {{ Market }} ({{ Interval }})</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, Shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap4.min.css">

  <stil>
    Körper {
      Hintergrundfarbe: #343a40;
      Farbe: #ffffff;
    }

    .Tisch {
      Hintergrundfarbe: #212529;
    }

    .table th, .table td {
      Farbe: #ffffff;
    }

    .chart-container {
      Rand unten: 20px;
    }

    .dt-buttons .btn {
      Rand rechts: 10px;
    }

    .page-item.active .page-link {
      Z-Index: 3;
      Farbe: #ffffff !important;
      Hintergrundfarbe: #495057 !important;
      Rahmenfarbe: #495057 !important;
    }

    .page-link {
      Farbe: #ffffff !important;
      Hintergrundfarbe: #6c757d !important;
      Rahmenfarbe: #343a40 !important;
    }

    .page-link:hover {
      Farbe: #adb5bd !important;
      Hintergrundfarbe: #5a6268 !important;
      Rahmenfarbe: #343a40 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
      Farbe: #ffffff !important;
      Hintergrundfarbe: #6c757d !important;
      Rand: 1px solide #343a40 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
      Hintergrundfarbe: #5a6268 !important;
      Rand: 1px solide #343a40 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
      Farbe: #ffffff !important;
      Hintergrundfarbe: #495057 !important;
      Rand: 1px solide #343a40 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
      Hintergrundfarbe: #6c757d !important;
      Farbe: #ffffff !important;
    }

    .btn-dark {
      Hintergrundfarbe: #6c757d !important;
      Rahmenfarbe: #6c757d !important;
      Farbe: #ffffff !important;
    }

    .btn-dark:hover {
      Hintergrundfarbe: #5a6268 !important;
      Rahmenfarbe: #5a6268 !important;
    }
  


<k>
  <div>



<h3>
  
  
  Zusammenfassung 
</h3>

<p>Ich finde den Code der JavaScript-Diagrammbibliothek von AnyChart einfach zu lesen und zu verstehen. Allerdings wird in den Diagrammen das Wasserzeichen „Testversion“ angezeigt. Durch den Kauf einer Lizenz wird dieses Wasserzeichen entfernt und zusätzlicher Support geboten. Trotzdem hat die Testversion bei mir gut funktioniert.</p>
<h3>
  
  
  Nächste Schritte 
</h3>

<p>Der nächste Artikel der Reihe befasst sich mit der Einbindung von Fundamentaldaten und Marktkapitalisierung in die Anwendung.</p>


<hr>

<p><em><strong>Ursprünglich veröffentlicht auf EODHD.com, einem One-Stop-Shop für Finanzdaten-APIs, unter dem Titel „AnyChart-Integration für das Financial Trading Dashboard mit Python Django“ im November 2024.</strong></em></p>

<p><em><strong>Geschrieben von Michael Whittle, einem Lösungsarchitekten, Entwickler und Analysten mit über zwanzig Jahren Erfahrung und einem Top-Autor auf Medium.</strong></em></p>


<hr>

<h2>
  
  
  Nützliche AnyChart-Links
</h2>

<ul>
<li> Treemap-Diagramm – Chartopedia
</li>
<li> Aktienchart – Chartopedia
</li>
<li> So erstellen Sie ein Treemap-Diagramm – JavaScript-Diagramm-Tutorials
</li>
<li> So erstellen Sie ein Aktiendiagramm – JavaScript-Charting-Tutorials
</li>
<li> Python / Django / MySQL – Integrationsvorlagen
</li>
<li> Python / Flask / MySQL – Integrationsvorlagen
</li>
<li> Geschäftslösungen und Dashboards
</li>
</ul>


          </div>

            
        </k></stil></kopf>