{"id":18607,"date":"2024-12-03T18:18:01","date_gmt":"2024-12-03T18:18:01","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=18607"},"modified":"2025-08-29T06:15:41","modified_gmt":"2025-08-29T06:15:41","slug":"python-django-financial-dashboard","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2024\/12\/03\/python-django-financial-dashboard\/","title":{"rendered":"Integrating AnyChart JS Charts in Python Django Financial Trading Dashboard"},"content":{"rendered":"

\"Financial<\/a>We are pleased to share\u00a0an insightful article by Michael Whittle, a seasoned solution architect and developer with over 20 years of experience. Originally published on EODHD.com<\/a>, it explores how he integrated our\u00a0JavaScript charting library<\/a> into\u00a0a financial trading dashboard built with Python Django. Michael also shares his experience migrating a treemap from D3.js to AnyChart and explains why he chose\u00a0our solution for implementing a stock chart, highlighting\u00a0the intuitive code and enhanced functionality. Read on to discover how you can elevate your financial data visualizations in Python Django web applications with AnyChart JS Charts.<\/p>\n

<\/p>\n

AnyChart Integration for the Financial Trading Dashboard with Python Django<\/h2>\n

\"JavaScript<\/p>\n

This article builds upon the previous two in the series, \u201cBuild a Financial Trading Dashboard with Python Django<\/a>\u201d<\/em> and \u201cEnhancing the Financial Trading Dashboard with Python Django<\/a>\u201d<\/em>.<\/p>\n

Initially, I created the treemap on the landing page using the D3.js library. While it worked well, I wanted to explore other charting options, so I evaluated both Chart.js and AnyChart. Ultimately, I decided to migrate the treemap from D3.js to AnyChart. Although the visual appearance of the charts is quite similar, I found AnyChart\u2019s code significantly more intuitive and easier to understand. Additionally, I personally feel that the AnyChart<\/a> treemap offers slightly more functionality and appears more polished. That said, I also liked the aesthetic of Chart.js, which remains a viable option.<\/p>\n

In the previous article, I created a page displaying the historical data of a market, presented neatly using a Bootstrap data table. For this article, I wanted to include an appealing stock chart above the table. Once again, I considered the three charting libraries, but I was particularly impressed with the way AnyChart presented the data and the functionality it offered. This article will explain how this was achieved.<\/p>\n

\"JavaScript<\/p>\n

Finally, I discovered another useful feature available in Bootstrap. In the previous article, I demonstrated how to add an \u201cExport to Excel\u201d button. Similarly, with just one line of code, you can also add a \u201cPrint\u201d button. This feature takes the data from the Bootstrap table and presents it in a print-friendly format.<\/p>\n

\"Historical<\/p>\n

\n
Quick jump:<\/strong><\/h5>\n
    \n
  1. Updating the View<\/a><\/li>\n
  2. Updating the Template \u2014 index.html<\/a><\/li>\n
  3. Updating the Template \u2014 historical_data.html<\/a><\/li>\n
  4. Summary<\/a><\/li>\n
  5. Next Steps<\/a><\/li>\n<\/ol>\n<\/blockquote>\n

    Updating the View<\/h3>\n

    I only had to make one change to a view to get the historical data stock chart working.<\/p>\n

    def fetch_historical_data(request, market, interval):\r\n  now = datetime.now()\r\n\r\n  if interval in [\"m\", \"w\", \"d\"]:\r\n    end_date = now.date().isoformat()\r\n    start_date = (now - timedelta(days=300)).date().isoformat()\r\n  else:\r\n    end_date = now.strftime(\"%Y-%m-%dT%H:%M\")\r\n    start_date = (now - timedelta(hours=300)).strftime(\"%Y-%m-%dT%H:%M\")\r\n\r\n  start_date = request.GET.get(\"from\", start_date)\r\n  end_date = request.GET.get(\"to\", end_date)\r\n\r\n  def parse_datetime(dt_str):\r\n    try:\r\n      return datetime.strptime(dt_str, \"%Y-%m-%dT%H:%M:%S\")\r\n    except ValueError:\r\n      try:\r\n        return datetime.strptime(dt_str, \"%Y-%m-%dT%H:%M\")\r\n      except ValueError:\r\n        return datetime.strptime(dt_str, \"%Y-%m-%d\")\r\n\r\n  start_date_parsed = parse_datetime(start_date)\r\n  end_date_parsed = parse_datetime(end_date)\r\n\r\n  if interval in [\"m\", \"w\", \"d\"]:\r\n    start_date = start_date_parsed.strftime(\"%Y-%m-%d\")\r\n    end_date = end_date_parsed.strftime(\"%Y-%m-%d\")\r\n  else:\r\n    start_date_unix = int(start_date_parsed.timestamp())\r\n    end_date_unix = int(end_date_parsed.timestamp())\r\n\r\n  endpoint = \"eod\" if interval in [\"m\", \"w\", \"d\"] else \"intraday\"\r\n  interval_type = \"period\" if interval in [\"m\", \"w\", \"d\"] else \"interval\"\r\n\r\n  if interval not in [\"m\", \"w\", \"d\"]:\r\n    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\"\r\n  else:\r\n    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\"\r\n\r\n  print(url)\r\n  response = requests.get(url)\r\n  data = response.json()\r\n\r\n  def format_unix_timestamp(unix_ts):\r\n    return datetime.utcfromtimestamp(unix_ts).strftime(\"%Y-%m-%d %H:%M:%S\")\r\n\r\n  for entry in data:\r\n    if \"date\" in entry:\r\n      entry[\"timestamp\"] = entry.pop(\"date\")\r\n    elif \"datetime\" in entry:\r\n      datetime_value = entry.pop(\"datetime\")\r\n      try:\r\n        entry[\"timestamp\"] = format_unix_timestamp(int(datetime_value))\r\n      except ValueError:\r\n        entry[\"timestamp\"] = datetime_value\r\n\r\n  if not data or \"error\" in data:\r\n    data = []\r\n\r\n  raw_data = data\r\n  historical_data_json = json.dumps(data)\r\n\r\n  return render(\r\n    request,\r\n    \"historical\/historical_data.html\",\r\n    {\r\n      \"market\": market,\r\n      \"interval\": interval,\r\n      \"historical_data\": raw_data,  # Raw Python data for the table\r\n      \"historical_data_json\": historical_data_json,  # JSON for the script\r\n      \"start_date\": (\r\n        start_date\r\n        if interval in [\"m\", \"w\", \"d\"]\r\n        else start_date_parsed.strftime(\"%Y-%m-%dT%H:%M\")\r\n      ),\r\n      \"end_date\": (\r\n        end_date\r\n        if interval in [\"m\", \"w\", \"d\"]\r\n        else end_date_parsed.strftime(\"%Y-%m-%dT%H:%M\")\r\n      ),\r\n    },\r\n  )\r\n<\/code><\/pre>\n
    If you pay close attention to the function\u2019s output, you\u2019ll notice that I have separated the data into two parts. The first, \u201chistorical_data\u201d, contains the raw data returned by the API, which is used for the Bootstrap data table. The second, \u201chistorical_data_json\u201d, is a sanitised version of the data in JSON format, required for the AnyChart stock chart. Getting this to work was actually quite challenging. I wanted to provide two ways of visualising the historical data, but each required the data in a different format. This approach proved to be an effective solution.<\/p>\n
    Updating the Template \u2014 index.html<\/h3>\n
    As I mentioned above, my initial treemap used the D3.js library. I evaluated both the Chart.js and AnyChart libraries. I found the AnyChart library to be initiative and look a lot nicer and more polished. I\u2019ve included the converted code below.<\/p>\n
    GOTCHA<\/h4>\n
    I encountered one of the strangest bug that had me puzzled for several days. When I initially converted the treemap code from D3.js to AnyChart, it worked flawlessly. I then shifted my focus to the Historical Data stock chart, but when I returned to the AnyChart treemap, it wasn\u2019t rendering properly. Although the API was receiving data for 110 market indices, only 11 were displaying.<\/p>\n
    To debug this, I had to strip the code down to its simplest components. The \u201cproblem,\u201d as it turned out, was related to my inclusion of daily_return<\/em> as the value for the treemap. I chose to use daily_return<\/em> instead of the number of constituents because it created a more visually appealing colour gradient between high and low values. However, I discovered that treemaps require positive numbers as values to render correctly\u2014that\u2019s simply how they work.<\/p>\n
    When I initially got it working, market conditions must have been exceptionally good, as all the daily returns were positive. By the time I revisited the code a few days later, some daily returns were negative, which caused only 11 entries to display.<\/p>\n
    To address this, I devised a simple yet effective solution. I ensured that the value passed to the treemap was always absolute (a positive number) and removed this value from the cell display. Instead, I added it to a tooltip that appears on mouse hover. This allowed the treemap to render correctly with a pleasing colour gradient, while still enabling the actual value to be displayed when needed.<\/p>\n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>Market Indices Treemap<\/title>\r\n\r\n  https:\/\/cdn.anychart.com\/releases\/8.13.0\/js\/anychart-bundle.min.js\r\n  <link href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n  \r\n  <style>\r\n    body {\r\n      background-color: #343a40;\r\n      color: #ffffff;\r\n    }\r\n    #treemap {\r\n      width: 100%;\r\n      height: 80vh;\r\n      margin: 0 auto;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n\r\n<body>\r\n  <div class=\"container mt-5\">\r\n    <form action=\"{% url 'search_market_data' %}\" method=\"get\" class=\"d-flex justify-content-center my-4\">\r\n      <input type=\"text\" name=\"query\" class=\"form-control w-50\" placeholder=\"Search market data...\" required>\r\n      <button type=\"submit\" class=\"btn btn-primary ml-2\">Search<\/button>\r\n    <\/form>\r\n\r\n    <div id=\"treemap\"><\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    const data = [\r\n      { \r\n        name: \"Market Indices\", \r\n        children: [\r\n          {% for index in indices %}\r\n          {\r\n            name: \"{{ index.code }} [{{ index.constituents }}]\",\r\n            value: Math.abs(parseFloat(\"{{ index.daily_return|default:0 }}\")) || 0,\r\n            originalValue: parseFloat(\"{{ index.daily_return|default:0 }}\"),\r\n            id: {{ forloop.counter }},\r\n            link: \"\/constituents\/{{ index.index_id }}\/\",\r\n            description: \"Constituents: {{ index.constituents }}\"\r\n          },\r\n          {% endfor %}\r\n        ]\r\n      }\r\n    ];\r\n\r\n    anychart.onDocumentReady(function() {\r\n      const chart = anychart.treeMap(data, \"as-tree\");\r\n\r\n      chart.background().fill(\"#343a40\");\r\n\r\n      const colorScale = anychart.scales.linearColor();\r\n      colorScale.colors([\"#d73027\", \"#fee08b\", \"#1a9850\"]);\r\n      chart.colorScale(colorScale);\r\n\r\n      chart.labels()\r\n        .fontColor(\"#ffffff\")\r\n        .fontSize(function() {\r\n          return this.getData(\"value\") > 100 ? 16 : 12;\r\n        })\r\n        .hAlign(\"center\")\r\n        .vAlign(\"middle\")\r\n        .format(\"{%name}\");\r\n\r\n      chart.tooltip()\r\n        .useHtml(true)\r\n        .format(function() {\r\n          return `<strong>${this.getData('name')}<\/strong><br>\r\n              Value: ${this.getData('originalValue')}<br>\r\n              Link: <a href=\"${this.getData('link')}\" target=\"_blank\">${this.getData('link')}<\/a>`;\r\n        });\r\n\r\n      chart.hovered()\r\n        .fill(anychart.color.lighten(\"#007bff\", 0.4))\r\n        .stroke(\"#d3d3d3\");\r\n\r\n      chart.listen(\"pointClick\", function(e) {\r\n        const link = e.point.get(\"link\");\r\n        if (link) {\r\n          window.location.href = link;\r\n        }\r\n      });\r\n\r\n      chart.maxDepth(null);\r\n\r\n      chart.padding(10, 10, 10, 10);\r\n      chart.stroke(\"#ffffff\");\r\n      chart.minHeight(5);\r\n      chart.minWidth(5);\r\n\r\n      chart.labels().fontSize(11);\r\n\r\n      chart.data(data);\r\n      chart.container(\"treemap\");\r\n      chart.draw();\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
    Updating the Template \u2014 historical_data.html<\/h3>\n
    The next part was to add the AnyChart stock chart above the historical data Bootstrap table. As I mentioned above, I also added the \u201cPrint\u201d button which could be handy.<\/p>\n
    I found both Chart.js and AnyChart had really pleasant feature rich graphs. I decided to use AnyChart because I didn\u2019t want to mix the libraries in the app, but I also quite liked the way the graph looked.<\/p>\n
    What I really nice is that the graph is interactive. You can pan, zoom, and mouse over the data points for additional information. As a stock start you also can see the candlesticks visually represented like most trading applications. A green bar if the close is higher than the open, and a red car if the close is lower than the open.<\/p>\n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n  <title>Historical Data for {{ market }} ({{ interval }})<\/title>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\r\n\r\n  <link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\">\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdn.datatables.net\/1.10.21\/css\/dataTables.bootstrap4.min.css\">\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdn.datatables.net\/buttons\/1.7.1\/css\/buttons.bootstrap4.min.css\">\r\n\r\n  <style>\r\n    body {\r\n      background-color: #343a40;\r\n      color: #ffffff;\r\n    }\r\n\r\n    .table {\r\n      background-color: #212529;\r\n    }\r\n\r\n    .table th, .table td {\r\n      color: #ffffff;\r\n    }\r\n\r\n    .chart-container {\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    .dt-buttons .btn {\r\n      margin-right: 10px;\r\n    }\r\n\r\n    .page-item.active .page-link {\r\n      z-index: 3;\r\n      color: #ffffff !important;\r\n      background-color: #495057 !important;\r\n      border-color: #495057 !important;\r\n    }\r\n\r\n    .page-link {\r\n      color: #ffffff !important;\r\n      background-color: #6c757d !important;\r\n      border-color: #343a40 !important;\r\n    }\r\n\r\n    .page-link:hover {\r\n      color: #adb5bd !important;\r\n      background-color: #5a6268 !important;\r\n      border-color: #343a40 !important;\r\n    }\r\n\r\n    .dataTables_wrapper .dataTables_paginate .paginate_button {\r\n      color: #ffffff !important;\r\n      background-color: #6c757d !important;\r\n      border: 1px solid #343a40 !important;\r\n    }\r\n\r\n    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\r\n      background-color: #5a6268 !important;\r\n      border: 1px solid #343a40 !important;\r\n    }\r\n\r\n    .dataTables_wrapper .dataTables_paginate .paginate_button.current {\r\n      color: #ffffff !important;\r\n      background-color: #495057 !important;\r\n      border: 1px solid #343a40 !important;\r\n    }\r\n\r\n    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,\r\n    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {\r\n      background-color: #6c757d !important;\r\n      color: #ffffff !important;\r\n    }\r\n\r\n    .btn-dark {\r\n      background-color: #6c757d !important;\r\n      border-color: #6c757d !important;\r\n      color: #ffffff !important;\r\n    }\r\n\r\n    .btn-dark:hover {\r\n      background-color: #5a6268 !important;\r\n      border-color: #5a6268 !important;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n\r\n<body>\r\n  <div class=\"container mt-5\">\r\n    <h2 class=\"mb-4\">Historical Data for {{ market }} ({{ interval }})<\/h2>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"col-12 chart-container\">\r\n        <div id=\"candlestickChart\" style=\"height: 500px; width: 100%;\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"col-12\">\r\n        <table id=\"historicalTable\" class=\"table table-dark table-striped table-bordered\">\r\n          <thead class=\"thead-dark\">\r\n            <tr>\r\n              <th>Timestamp<\/th>\r\n              <th>Open<\/th>\r\n              <th>High<\/th>\r\n              <th>Low<\/th>\r\n              <th>Close<\/th>\r\n              <th>Volume<\/th>\r\n            <\/tr>\r\n          <\/thead>\r\n          <tbody>\r\n            {% for entry in historical_data %}\r\n            <tr>\r\n              <td>{{ entry.timestamp }}<\/td>\r\n              <td>{{ entry.open }}<\/td>\r\n              <td>{{ entry.high }}<\/td>\r\n              <td>{{ entry.low }}<\/td>\r\n              <td>{{ entry.close }}<\/td>\r\n              <td>{{ entry.volume }}<\/td>\r\n            <\/tr>\r\n            {% endfor %}\r\n          <\/tbody>\r\n        <\/table>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <a href=\"javascript:history.back()\" class=\"btn btn-dark mt-4\">Back<\/a>\r\n  <\/div>\r\n\r\n  <script id=\"historicalData\" type=\"application\/json\">\r\n    {{ historical_data_json|safe }}\r\n  <\/script>\r\n\r\n  https:\/\/code.jquery.com\/jquery-3.5.1.min.js\r\n  https:\/\/cdn.datatables.net\/1.10.21\/js\/jquery.dataTables.min.js\r\n  https:\/\/cdn.datatables.net\/1.10.21\/js\/dataTables.bootstrap4.min.js\r\n  https:\/\/cdn.datatables.net\/buttons\/1.7.1\/js\/dataTables.buttons.min.js\r\n  https:\/\/cdn.datatables.net\/buttons\/1.7.1\/js\/buttons.bootstrap4.min.js\r\n  https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.1.3\/jszip.min.js\r\n  https:\/\/cdn.datatables.net\/buttons\/1.7.1\/js\/buttons.html5.min.js\r\n  https:\/\/cdn.datatables.net\/buttons\/1.7.1\/js\/buttons.print.min.js\r\n  https:\/\/cdn.anychart.com\/releases\/8.13.0\/js\/anychart-bundle.min.js\r\n\r\n  <script>\r\n    $(document).ready(function() {\r\n      $('#historicalTable').DataTable({\r\n        paging: true,\r\n        searching: true,\r\n        ordering: true,\r\n        info: true,\r\n        lengthMenu: [10, 25, 50, 100],\r\n        order: [[4, \"desc\"]],\r\n        dom: 'Bfrtip',\r\n        buttons: [\r\n          {\r\n            extend: 'excel',\r\n            text: 'Export to Excel'\r\n          },\r\n          {\r\n            extend: 'print',\r\n            text: 'Print'\r\n          }\r\n        ]\r\n      });\r\n    });\r\n\r\n    document.addEventListener(\"DOMContentLoaded\", function () {\r\n      const rawData = document.getElementById(\"historicalData\").textContent;\r\n      const historicalData = JSON.parse(rawData);\r\n\r\n      const chartData = historicalData.map(entry => [\r\n        entry.timestamp,\r\n        entry.open,\r\n        entry.high,\r\n        entry.low,\r\n        entry.close\r\n      ]);\r\n\r\n      anychart.onDocumentReady(function () {\r\n        const chart = anychart.stock();\r\n\r\n        const table = anychart.data.table();\r\n        table.addData(chartData);\r\n\r\n        const mapping = table.mapAs({\r\n          open: 1,\r\n          high: 2,\r\n          low: 3,\r\n          close: 4\r\n        });\r\n\r\n        const plot = chart.plot(0);\r\n        plot.candlestick(mapping).name('Price');\r\n\r\n        chart.container(\"candlestickChart\");\r\n        chart.draw();\r\n      });\r\n    });\r\n  <\/script>\r\n<\/body>\r\n\r\n<\/html><\/code><\/pre>\n
    Summary<\/h3>\n
    I find the code of AnyChart’s JavaScript charting library<\/a> straightforward to read and understand. However, the graphs display a \u201ctrial version\u201d watermark. The purchasing of a licence removes this watermark and offers additional support. Despite this, the trial version has functioned well for me.<\/p>\n
    Next Steps<\/h3>\n
    The next article in the series will explore incorporating fundamental data and market capitalisation into the application.<\/p>\n
    \n
    Originally published on EODHD.com<\/a>, a one-stop shop for financial data APIs,\u00a0under the title “AnyChart integration for the Financial Trading Dashboard with Python Django<\/a>” in November 2024.<\/strong><\/em><\/p>\n
    Written by Michael Whittle<\/a>, a solution architect, developer, and analyst with over twenty years of experience, and a top author on Medium.<\/strong><\/em><\/p>\n
    \n
    Useful Links<\/h2>\n