Tableau de bord de trading financier Python Django - Intégration des graphiques AnyChart JS

Nous sommes heureux de partager un article utile que nous avons trouvé sur les API EODHD, dans lequel Michael Whittle, développeur chevronné et auteur de premier plan sur Medium, montre comment il a intégré notre bibliothèque de graphiques JavaScript dans son tableau de bord de trading basé sur Python Django.

Il évoque notamment son expérience de migration d'un treemap de D3.js vers AnyChart et explique pourquoi il a choisi notre solution pour implémenter un graphique boursier, en mettant en avant le code intuitif et les fonctionnalités améliorées.

Poursuivez votre lecture pour découvrir comment vous pouvez améliorer vos visualisations de données financières dans les applications Web Python Django avec AnyChart JS Charts.

---

Cet article s'appuie sur les deux précédents de la série, « Créer un tableau de bord de trading financier avec Python Django » et « Améliorer le tableau de bord de trading financier avec Python Django ».

Au départ, j'ai créé le treemap sur la page de destination en utilisant la bibliothèque D3.js. Même si cela fonctionnait bien, je souhaitais explorer d'autres options de création de graphiques. J'ai donc évalué à la fois Chart.js et AnyChart. Finalement, j'ai décidé de migrer le treemap de D3.js vers AnyChart. Bien que l’apparence visuelle des graphiques soit assez similaire, j’ai trouvé le code d’AnyChart nettement plus intuitif et plus facile à comprendre. De plus, je pense personnellement que le treemap AnyChart offre un peu plus de fonctionnalités et semble plus raffiné. Cela dit, j'ai aussi aimé l'esthétique de Chart.js, qui reste une option viable.

Dans l'article précédent, j'ai créé une page affichant les données historiques d'un marché, présentées soigneusement à l'aide d'un tableau de données Bootstrap. Pour cet article, je souhaitais inclure un graphique boursier attrayant au-dessus du tableau. Une fois de plus, j'ai examiné les trois bibliothèques de graphiques, mais j'ai été particulièrement impressionné par la façon dont AnyChart présentait les données et les fonctionnalités qu'elles offraient. Cet article expliquera comment cela a été réalisé.

Enfin, j'ai découvert une autre fonctionnalité utile disponible dans Bootstrap. Dans l'article précédent, j'ai montré comment ajouter un bouton « Exporter vers Excel ». De même, avec une seule ligne de code, vous pouvez également ajouter un bouton « Imprimer ». Cette fonctionnalité extrait les données de la table Bootstrap et les présente dans un format imprimable.

Saut rapide :

1. Mise à jour de la vue
2. Mise à jour du modèle — index.html
3. Mise à jour du modèle — historic_data.html
4. Résumé
5. Prochaines étapes

Mise à jour de la vue

Je n'ai dû apporter qu'une seule modification à une vue pour que le graphique boursier des données historiques fonctionne.

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")
      ),
    },
  )

Si vous portez une attention particulière au résultat de la fonction, vous remarquerez que j'ai séparé les données en deux parties. Le premier, « historic_data », contient les données brutes renvoyées par l'API, qui sont utilisées pour la table de données Bootstrap. La seconde, « historic_data_json », est une version épurée des données au format JSON, requise pour le graphique boursier AnyChart. Faire fonctionner cela a été en fait assez difficile. Je voulais proposer deux manières de visualiser les données historiques, mais chacune nécessitait les données dans un format différent. Cette approche s'est avérée être une solution efficace.

Mise à jour du modèle - index.html

Comme je l'ai mentionné ci-dessus, mon treemap initial utilisait la bibliothèque D3.js. J'ai évalué les bibliothèques Chart.js et AnyChart. J'ai trouvé que la bibliothèque AnyChart faisait preuve d'initiative et était beaucoup plus jolie et raffinée. J'ai inclus le code converti ci-dessous.

OBTENU

J'ai rencontré l'un des bugs les plus étranges qui m'a laissé perplexe pendant plusieurs jours. Lorsque j'ai initialement converti le code treemap de D3.js en AnyChart, cela a parfaitement fonctionné. Je me suis ensuite concentré sur le graphique boursier des données historiques, mais lorsque je suis revenu à l'arborescence AnyChart, le rendu n'était pas correct. Bien que l'API recevait des données pour 110 indices de marché, seuls 11 s'affichaient.

Pour déboguer cela, j'ai dû réduire le code à ses composants les plus simples. Il s'est avéré que le « problème » était lié à mon inclusion de daily_return comme valeur du treemap. J'ai choisi d'utiliser daily_return au lieu du nombre de constituants car cela créait un dégradé de couleurs plus attrayant visuellement entre les valeurs hautes et basses. Cependant, j’ai découvert que les treemaps nécessitent des nombres positifs comme valeurs pour s’afficher correctement : c’est simplement ainsi qu’ils fonctionnent.

Lorsque je l'ai fait fonctionner, les conditions du marché devaient être exceptionnellement bonnes, car tous les rendements quotidiens étaient positifs. Au moment où j'ai revu le code quelques jours plus tard, certains retours quotidiens étaient négatifs, ce qui n'a entraîné l'affichage que de 11 entrées.

Pour résoudre ce problème, j'ai imaginé une solution simple mais efficace. Je me suis assuré que la valeur transmise au treemap était toujours absolue (un nombre positif) et j'ai supprimé cette valeur de l'affichage des cellules. Au lieu de cela, je l'ai ajouté à une info-bulle qui apparaît au survol de la souris. Cela a permis au treemap de s'afficher correctement avec un dégradé de couleurs agréable, tout en permettant d'afficher la valeur réelle en cas de besoin.

<t>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Arborescence des indices de marché</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">

  <style>
    corps {
      couleur d'arrière-plan : #343a40 ;
      couleur : #ffffff ;
    }
    #treemap {
      largeur : 100 % ;
      hauteur : 80vh ;
      marge : 0 automatique ;
    }
  </style>
&Lt;/tête>

<corps>
  <div>



<h3>
  
  
  Mise à jour du modèle — historic_data.html 
</h3>

<p>La partie suivante consistait à ajouter le graphique boursier AnyChart au-dessus du tableau Bootstrap des données historiques. Comme je l'ai mentionné plus haut, j'ai également ajouté le bouton « Imprimer » qui pourrait être pratique.</p>

<p>J'ai trouvé que Chart.js et AnyChart avaient des graphiques riches en fonctionnalités vraiment agréables. J'ai décidé d'utiliser AnyChart parce que je ne voulais pas mélanger les bibliothèques dans l'application, mais j'ai aussi beaucoup aimé l'apparence du graphique.</p>

<p>Ce qui me plaît vraiment, c'est que le graphique est interactif. Vous pouvez effectuer un panoramique, un zoom et la souris sur les points de données pour obtenir des informations supplémentaires. Au début d'une action, vous pouvez également voir les chandeliers représentés visuellement, comme la plupart des applications de trading. Une barre verte si la clôture est supérieure à l'ouverture, et une voiture rouge si la clôture est inférieure à l'ouverture.<br>
</p>
<pre class="brush:php;toolbar:false">


<t>
  <title>Données historiques pour {{ 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">

  <style>
    corps {
      couleur d'arrière-plan : #343a40 ;
      couleur : #ffffff ;
    }

    .tableau {
      couleur d'arrière-plan : #212529 ;
    }

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

    .chart-conteneur {
      marge inférieure : 20 px ;
    }

    .dt-boutons .btn {
      marge droite : 10 px ;
    }

    .page-item.active .page-link {
      indice z : 3 ;
      couleur : #ffffff !important;
      couleur d'arrière-plan : #495057 !important ;
      couleur de la bordure : #495057 !important ;
    }

    .page-lien {
      couleur : #ffffff !important;
      couleur d'arrière-plan : #6c757d !important ;
      couleur de la bordure : #343a40 !important ;
    }

    .page-link : survoler {
      couleur : #adb5bd !important ;
      couleur d'arrière-plan : #5a6268 !important ;
      couleur de la bordure : #343a40 !important ;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
      couleur : #ffffff !important;
      couleur d'arrière-plan : #6c757d !important ;
      bordure : 1px solide #343a40 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
      couleur d'arrière-plan : #5a6268 !important ;
      bordure : 1px solide #343a40 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
      couleur : #ffffff !important;
      couleur d'arrière-plan : #495057 !important ;
      bordure : 1px solide #343a40 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
      couleur d'arrière-plan : #6c757d !important ;
      couleur : #ffffff !important;
    }

    .btn-dark {
      couleur d'arrière-plan : #6c757d !important ;
      couleur de la bordure : #6c757d !important ;
      couleur : #ffffff !important;
    }

    .btn-dark: survol {
      couleur d'arrière-plan : #5a6268 !important ;
      couleur de la bordure : #5a6268 !important ;
    }
  </style>
&Lt;/tête>

<corps>
  <div>



<h3>
  
  
  Résumé 
</h3>

<p>Je trouve le code de la bibliothèque de graphiques JavaScript d'AnyChart simple à lire et à comprendre. Cependant, les graphiques affichent un filigrane « version d’essai ». L'achat d'une licence supprime ce filigrane et offre un support supplémentaire. Malgré cela, la version d'essai a bien fonctionné pour moi.</p>
<h3>
  
  
  Prochaines étapes 
</h3>

<p>Le prochain article de la série explorera l'intégration des données fondamentales et de la capitalisation boursière dans l'application.</p>


<hr>

<p><em><strong>Publié à l'origine sur EODHD.com, un guichet unique pour les API de données financières, sous le titre « Intégration AnyChart pour le tableau de bord de trading financier avec Python Django » en novembre 2024.</strong></em></p>

<p><em><strong>Écrit par Michael Whittle, architecte de solutions, développeur et analyste avec plus de vingt ans d'expérience et auteur de premier plan sur Medium.</strong></em></p>


<hr>

<h2>
  
  
  Liens AnyChart utiles
</h2>

<ul>
<li> Graphique Treemap — Chartopedia
</li>
<li> Graphique boursier — Chartopedia
</li>
<li> Comment créer un graphique Treemap - Tutoriels de création de graphiques JavaScript
</li>
<li> Comment créer un graphique boursier - Tutoriels de graphiques JavaScript
</li>
<li> Python / Django / MySQL — Modèles d'intégration
</li>
<li> Python / Flask / MySQL — Modèles d'intégration
</li>
<li> Solutions commerciales et tableaux de bord
</li>
</ul>


          </div>

            
        </corps></t>