{"id":6068,"date":"2024-11-22T12:11:16","date_gmt":"2024-11-22T12:11:16","guid":{"rendered":"https:\/\/eodhd.com\/financial-academy\/?p=6068"},"modified":"2025-02-05T14:37:47","modified_gmt":"2025-02-05T14:37:47","slug":"anychart-integration-for-the-financial-trading-dashboard-with-python-django","status":"publish","type":"post","link":"https:\/\/eodhd.com\/financial-academy\/building-stocks-apps-examples\/anychart-integration-for-the-financial-trading-dashboard-with-python-django","title":{"rendered":"AnyChart integration for the Financial Trading Dashboard with Python Django"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Please note, API data availability depends on your subscription plan. Some data isn’t included in the free plan. Visit our pricing page<\/a> to find the package that fits your needs.<\/p>\n\n\n\n

This article builds upon the previous two in the series, \u201cBuild a Financial Trading Dashboard with Python Django<\/a>\u201d and \u201cEnhancing the Financial Trading Dashboard with Python Django<\/a>\u201d<\/em>.<\/p>\n\n\n\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’s 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\n\n\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\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\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\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Register & Get Data<\/span><\/a><\/p>\n\n\n\n\n\n\n

Updating the View<\/h2>\n\n\n\n

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

\n
\n \n
def fetch_historical_data(request, market, interval):\n    now = datetime.now()\n\n    if interval in [\"m\", \"w\", \"d\"]:\n        end_date = now.date().isoformat()\n        start_date = (now - timedelta(days=300)).date().isoformat()\n    else:\n        end_date = now.strftime(\"%Y-%m-%dT%H:%M\")\n        start_date = (now - timedelta(hours=300)).strftime(\"%Y-%m-%dT%H:%M\")\n\n    start_date = request.GET.get(\"from\", start_date)\n    end_date = request.GET.get(\"to\", end_date)\n\n    def parse_datetime(dt_str):\n        try:\n            return datetime.strptime(dt_str, \"%Y-%m-%dT%H:%M:%S\")\n        except ValueError:\n            try:\n                return datetime.strptime(dt_str, \"%Y-%m-%dT%H:%M\")\n            except ValueError:\n                return datetime.strptime(dt_str, \"%Y-%m-%d\")\n\n    start_date_parsed = parse_datetime(start_date)\n    end_date_parsed = parse_datetime(end_date)\n\n    if interval in [\"m\", \"w\", \"d\"]:\n        start_date = start_date_parsed.strftime(\"%Y-%m-%d\")\n        end_date = end_date_parsed.strftime(\"%Y-%m-%d\")\n    else:\n        start_date_unix = int(start_date_parsed.timestamp())\n        end_date_unix = int(end_date_parsed.timestamp())\n\n    endpoint = \"eod\" if interval in [\"m\", \"w\", \"d\"] else \"intraday\"\n    interval_type = \"period\" if interval in [\"m\", \"w\", \"d\"] else \"interval\"\n\n    if interval not in [\"m\", \"w\", \"d\"]:\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\"\n    else:\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\"\n\n    print(url)\n    response = requests.get(url)\n    data = response.json()\n\n    def format_unix_timestamp(unix_ts):\n        return datetime.utcfromtimestamp(unix_ts).strftime(\"%Y-%m-%d %H:%M:%S\")\n\n    for entry in data:\n        if \"date\" in entry:\n            entry[\"timestamp\"] = entry.pop(\"date\")\n        elif \"datetime\" in entry:\n            datetime_value = entry.pop(\"datetime\")\n            try:\n                entry[\"timestamp\"] = format_unix_timestamp(int(datetime_value))\n            except ValueError:\n                entry[\"timestamp\"] = datetime_value\n\n    if not data or \"error\" in data:\n        data = []\n\n    raw_data = data\n    historical_data_json = json.dumps(data)\n\n    return render(\n        request,\n        \"historical\/historical_data.html\",\n        {\n            \"market\": market,\n            \"interval\": interval,\n            \"historical_data\": raw_data,  # Raw Python data for the table\n            \"historical_data_json\": historical_data_json,  # JSON for the script\n            \"start_date\": (\n                start_date\n                if interval in [\"m\", \"w\", \"d\"]\n                else start_date_parsed.strftime(\"%Y-%m-%dT%H:%M\")\n            ),\n            \"end_date\": (\n                end_date\n                if interval in [\"m\", \"w\", \"d\"]\n                else end_date_parsed.strftime(\"%Y-%m-%dT%H:%M\")\n            ),\n        },\n    )<\/code><\/pre>\n\n                <\/div>\n                
\n