Visualizing Financial Market Data With Django, Bokeh & AlphaVantage API - 拾光赋-拾光赋

Visualizing Financial Market Data With Django, Bokeh & AlphaVantage API

5年前发布

05315

As a web developer and a beginner enthusiast about applying data-science concepts to finance, I was searching for a way a show data with Django. I notice that there are not enough resources about so I decided to share how you can do it.
In this post, We will build a web app with Django to visualize with Bokeh the market data about EUR/USD.
I assume that you understand Python programming language and Django.
You’ll also need an API key from AlphaVantage. They provide free Real-Time data about stock, forex and crypto markets.

Step 1: Set up the environment

We need to create an isolated Python environment. For this tutorial, I will use virtualenv.


<span>mkdir </span>RealFx
<span>cd </span>RealFx
virtualenv <span>--python</span><span>=</span>/usr/bin/python3.8 <span>env source env</span>/bin/activate
<span>mkdir </span>RealFx
<span>cd </span>RealFx
virtualenv <span>--python</span><span>=</span>/usr/bin/python3.8 <span>env source env</span>/bin/activate


mkdir RealFx
cd RealFx
virtualenv --python=/usr/bin/python3.8 env source env/bin/activate

Enter fullscreen mode Exit fullscreen mode

Now, we’ll install the packages and create the Django app.


pip <span>install </span>django bokeh pandas 
django-admin startproject RealFx <span>.</span>
django-admin startapp mysite
pip <span>install </span>django bokeh pandas 
django-admin startproject RealFx <span>.</span>
django-admin startapp mysite


pip install django bokeh pandas 
django-admin startproject RealFx .
django-admin startapp mysite

Enter fullscreen mode Exit fullscreen mode

Don’t forget to add the app to your project settings.


<span>#RealFx/settings.py </span>
<span># Application definition </span>
<span>INSTALLED_APPS</span> <span>=</span> <span>[</span>
    <span>'</span><span>django.contrib.admin</span><span>'</span><span>,</span>
    <span>'</span><span>django.contrib.auth</span><span>'</span><span>,</span>
    <span>'</span><span>django.contrib.contenttypes</span><span>'</span><span>,</span>
    <span>'</span><span>django.contrib.sessions</span><span>'</span><span>,</span>
    <span>'</span><span>django.contrib.messages</span><span>'</span><span>,</span>
    <span>'</span><span>django.contrib.staticfiles</span><span>'</span><span>,</span>
    <span>#others app </span>    <span>'</span><span>mysite</span><span>'</span><span>,</span>
<span>]</span>
<span>#RealFx/settings.py </span>
<span># Application definition </span>
<span>INSTALLED_APPS</span> <span>=</span> <span>[</span>
    <span>'</span><span>django.contrib.admin</span><span>'</span><span>,</span>
    <span>'</span><span>django.contrib.auth</span><span>'</span><span>,</span>
    <span>'</span><span>django.contrib.contenttypes</span><span>'</span><span>,</span>
    <span>'</span><span>django.contrib.sessions</span><span>'</span><span>,</span>
    <span>'</span><span>django.contrib.messages</span><span>'</span><span>,</span>
    <span>'</span><span>django.contrib.staticfiles</span><span>'</span><span>,</span>

    <span>#others app </span>    <span>'</span><span>mysite</span><span>'</span><span>,</span>
<span>]</span>


#RealFx/settings.py 
# Application definition 
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    #others app     'mysite',
]

Enter fullscreen mode Exit fullscreen mode

Start the server.


python manage.py runserver
python manage.py runserver


python manage.py runserver

Enter fullscreen mode Exit fullscreen mode

Step 2 : Utilities functions

To visualize data with Django & Bokeh, we first need to make an API call to AlphaVantage API. Then, we are going to convert the JSON response into dataframe pandas format that we’ll use with Bokeh in your view.
As you see, it’s already a lot of things and one function can’t handle that.
So in mysite app folder, create a file utils.py. Let’s add the first function.


<span>#mysite/utils.py </span><span>import</span> <span>requests</span>
<span>import</span> <span>pandas</span> <span>as</span> <span>pd</span>
<span>def</span> <span>get_data</span><span>(</span><span>from_symbol</span><span>,</span> <span>to_symbol</span><span>,</span> <span>API_KEY</span><span>):</span>
    <span>r</span> <span>=</span> <span>requests</span><span>.</span><span>get</span><span>(</span><span>'</span><span>https://www.alphavantage.co/query?function=FX_DAILY&from_symbol=</span><span>'</span> <span>+</span> <span>from_symbol</span> <span>+</span> <span>'</span><span>&to_symbol=</span><span>'</span> <span>+</span> <span>to_symbol</span> <span>+</span> <span>'</span><span>&apikey=</span><span>'</span> <span>+</span> <span>API_KEY</span><span>)</span>
    <span>dataIntraday</span> <span>=</span> <span>r</span><span>.</span><span>json</span><span>()</span>
    <span>return</span> <span>dataIntraday</span><span>[</span><span>'</span><span>Time Series FX (Daily)</span><span>'</span><span>]</span>
<span>#mysite/utils.py </span><span>import</span> <span>requests</span>
<span>import</span> <span>pandas</span> <span>as</span> <span>pd</span>
<span>def</span> <span>get_data</span><span>(</span><span>from_symbol</span><span>,</span> <span>to_symbol</span><span>,</span> <span>API_KEY</span><span>):</span>
    <span>r</span> <span>=</span> <span>requests</span><span>.</span><span>get</span><span>(</span><span>'</span><span>https://www.alphavantage.co/query?function=FX_DAILY&from_symbol=</span><span>'</span> <span>+</span> <span>from_symbol</span> <span>+</span> <span>'</span><span>&to_symbol=</span><span>'</span> <span>+</span> <span>to_symbol</span> <span>+</span> <span>'</span><span>&apikey=</span><span>'</span> <span>+</span> <span>API_KEY</span><span>)</span>

    <span>dataIntraday</span> <span>=</span> <span>r</span><span>.</span><span>json</span><span>()</span>

    <span>return</span> <span>dataIntraday</span><span>[</span><span>'</span><span>Time Series FX (Daily)</span><span>'</span><span>]</span>


#mysite/utils.py import requests
import pandas as pd
def get_data(from_symbol, to_symbol, API_KEY):
    r = requests.get('https://www.alphavantage.co/query?function=FX_DAILY&from_symbol=' + from_symbol + '&to_symbol=' + to_symbol + '&apikey=' + API_KEY)

    dataIntraday = r.json()

    return dataIntraday['Time Series FX (Daily)']

Enter fullscreen mode Exit fullscreen mode

The second function will use pandas to convert the dictionary returned (dataIntraday[‘Time Series FX (Daily)’]) of get_data() in dataframe pandas format.


<span>#mysite/utils.py </span><span>def</span> <span>convert_to_df</span><span>(</span><span>data</span><span>):</span>
    <span>"""</span><span>Convert the result JSON in pandas dataframe</span><span>"""</span>
    <span>df</span> <span>=</span> <span>pd</span><span>.</span><span>DataFrame</span><span>.</span><span>from_dict</span><span>(</span><span>data</span><span>,</span> <span>orient</span><span>=</span><span>'</span><span>index</span><span>'</span><span>)</span>
    <span>df</span> <span>=</span> <span>df</span><span>.</span><span>reset_index</span><span>()</span>
    <span>#Rename columns </span>
    <span>df</span> <span>=</span> <span>df</span><span>.</span><span>rename</span><span>(</span><span>index</span><span>=</span><span>str</span><span>,</span> <span>columns</span><span>=</span><span>{</span><span>"</span><span>index</span><span>"</span><span>:</span> <span>"</span><span>date</span><span>"</span><span>,</span> <span>"</span><span>1. open</span><span>"</span><span>:</span> <span>"</span><span>open</span><span>"</span><span>,</span>
    <span>"</span><span>2. high</span><span>"</span><span>:</span> <span>"</span><span>high</span><span>"</span><span>,</span> <span>"</span><span>3. low</span><span>"</span><span>:</span> <span>"</span><span>low</span><span>"</span><span>,</span> <span>"</span><span>4. close</span><span>"</span><span>:</span> <span>"</span><span>close</span><span>"</span><span>})</span>
    <span>#Change to datetime </span>
    <span>df</span><span>[</span><span>'</span><span>date</span><span>'</span><span>]</span> <span>=</span> <span>pd</span><span>.</span><span>to_datetime</span><span>(</span><span>df</span><span>[</span><span>'</span><span>date</span><span>'</span><span>])</span>
    <span>#Sort data according to date </span>
    <span>df</span> <span>=</span> <span>df</span><span>.</span><span>sort_values</span><span>(</span><span>by</span><span>=</span><span>[</span><span>'</span><span>date</span><span>'</span><span>])</span>
    <span>#Change the datatype </span>
    <span>df</span><span>.</span><span>open</span> <span>=</span> <span>df</span><span>.</span><span>open</span><span>.</span><span>astype</span><span>(</span><span>float</span><span>)</span>
    <span>df</span><span>.</span><span>close</span> <span>=</span> <span>df</span><span>.</span><span>close</span><span>.</span><span>astype</span><span>(</span><span>float</span><span>)</span>
    <span>df</span><span>.</span><span>high</span> <span>=</span> <span>df</span><span>.</span><span>high</span><span>.</span><span>astype</span><span>(</span><span>float</span><span>)</span>
    <span>df</span><span>.</span><span>low</span> <span>=</span> <span>df</span><span>.</span><span>low</span><span>.</span><span>astype</span><span>(</span><span>float</span><span>)</span>
    <span>#Checks </span>    <span>df</span><span>.</span><span>head</span><span>()</span>
    <span>df</span><span>.</span><span>info</span><span>()</span>
    <span>return</span> <span>df</span>
<span>#mysite/utils.py </span><span>def</span> <span>convert_to_df</span><span>(</span><span>data</span><span>):</span>
    <span>"""</span><span>Convert the result JSON in pandas dataframe</span><span>"""</span>

    <span>df</span> <span>=</span> <span>pd</span><span>.</span><span>DataFrame</span><span>.</span><span>from_dict</span><span>(</span><span>data</span><span>,</span> <span>orient</span><span>=</span><span>'</span><span>index</span><span>'</span><span>)</span>

    <span>df</span> <span>=</span> <span>df</span><span>.</span><span>reset_index</span><span>()</span>

    <span>#Rename columns </span>
    <span>df</span> <span>=</span> <span>df</span><span>.</span><span>rename</span><span>(</span><span>index</span><span>=</span><span>str</span><span>,</span> <span>columns</span><span>=</span><span>{</span><span>"</span><span>index</span><span>"</span><span>:</span> <span>"</span><span>date</span><span>"</span><span>,</span> <span>"</span><span>1. open</span><span>"</span><span>:</span> <span>"</span><span>open</span><span>"</span><span>,</span>
    <span>"</span><span>2. high</span><span>"</span><span>:</span> <span>"</span><span>high</span><span>"</span><span>,</span> <span>"</span><span>3. low</span><span>"</span><span>:</span> <span>"</span><span>low</span><span>"</span><span>,</span> <span>"</span><span>4. close</span><span>"</span><span>:</span> <span>"</span><span>close</span><span>"</span><span>})</span>

    <span>#Change to datetime </span>
    <span>df</span><span>[</span><span>'</span><span>date</span><span>'</span><span>]</span> <span>=</span> <span>pd</span><span>.</span><span>to_datetime</span><span>(</span><span>df</span><span>[</span><span>'</span><span>date</span><span>'</span><span>])</span>

    <span>#Sort data according to date </span>
    <span>df</span> <span>=</span> <span>df</span><span>.</span><span>sort_values</span><span>(</span><span>by</span><span>=</span><span>[</span><span>'</span><span>date</span><span>'</span><span>])</span>

    <span>#Change the datatype </span>
    <span>df</span><span>.</span><span>open</span> <span>=</span> <span>df</span><span>.</span><span>open</span><span>.</span><span>astype</span><span>(</span><span>float</span><span>)</span>
    <span>df</span><span>.</span><span>close</span> <span>=</span> <span>df</span><span>.</span><span>close</span><span>.</span><span>astype</span><span>(</span><span>float</span><span>)</span>
    <span>df</span><span>.</span><span>high</span> <span>=</span> <span>df</span><span>.</span><span>high</span><span>.</span><span>astype</span><span>(</span><span>float</span><span>)</span>
    <span>df</span><span>.</span><span>low</span> <span>=</span> <span>df</span><span>.</span><span>low</span><span>.</span><span>astype</span><span>(</span><span>float</span><span>)</span>

    <span>#Checks </span>    <span>df</span><span>.</span><span>head</span><span>()</span>
    <span>df</span><span>.</span><span>info</span><span>()</span>

    <span>return</span> <span>df</span>


#mysite/utils.py def convert_to_df(data):
    """Convert the result JSON in pandas dataframe"""

    df = pd.DataFrame.from_dict(data, orient='index')

    df = df.reset_index()

    #Rename columns 
    df = df.rename(index=str, columns={"index": "date", "1. open": "open",
    "2. high": "high", "3. low": "low", "4. close": "close"})

    #Change to datetime 
    df['date'] = pd.to_datetime(df['date'])

    #Sort data according to date 
    df = df.sort_values(by=['date'])

    #Change the datatype 
    df.open = df.open.astype(float)
    df.close = df.close.astype(float)
    df.high = df.high.astype(float)
    df.low = df.low.astype(float)

    #Checks     df.head()
    df.info()

    return df

Enter fullscreen mode Exit fullscreen mode

Now we can work on the view.

Step 3: Setting up the View

In view of the application, we can now use the power of Bokeh. The chart will be visualized as Japanese candlesticks.


<span>from</span> <span>django.shortcuts</span> <span>import</span> <span>render</span>
<span>from</span> <span>bokeh.plotting</span> <span>import</span> <span>figure</span><span>,</span> <span>output_file</span><span>,</span> <span>show</span>
<span>from</span> <span>bokeh.embed</span> <span>import</span> <span>components</span>
<span>import</span> <span>pandas</span> <span>as</span> <span>pd</span>
<span>from</span> <span>math</span> <span>import</span> <span>pi</span>
<span>import</span> <span>datetime</span>
<span>from</span> <span>.utils</span> <span>import</span> <span>get_data</span><span>,</span> <span>convert_to_df</span>
<span>def</span> <span>homepage</span><span>(</span><span>request</span><span>):</span>
    <span>#We use get_data method from utils </span>
    <span>result</span> <span>=</span> <span>get_data</span><span>(</span><span>'</span><span>EUR</span><span>'</span><span>,</span><span>'</span><span>USD</span><span>'</span><span>,</span> <span>'</span><span>You_own_api_key</span><span>'</span><span>)</span> <span>#Add your own APIKEY </span>
    <span>source</span> <span>=</span> <span>convert_to_df</span><span>(</span><span>result</span><span>)</span>
    <span># These lines are there to color </span>    <span># the red and green bars for down and up days </span>
    <span>increasing</span> <span>=</span> <span>source</span><span>.</span><span>close</span> <span>></span> <span>source</span><span>.</span><span>open</span>
    <span>decreasing</span> <span>=</span> <span>source</span><span>.</span><span>open</span> <span>></span> <span>source</span><span>.</span><span>close</span>
    <span>w</span> <span>=</span> <span>12</span> <span>*</span> <span>60</span> <span>*</span> <span>60</span> <span>*</span> <span>1000</span>
<span>from</span> <span>django.shortcuts</span> <span>import</span> <span>render</span>
<span>from</span> <span>bokeh.plotting</span> <span>import</span> <span>figure</span><span>,</span> <span>output_file</span><span>,</span> <span>show</span>
<span>from</span> <span>bokeh.embed</span> <span>import</span> <span>components</span>
<span>import</span> <span>pandas</span> <span>as</span> <span>pd</span>
<span>from</span> <span>math</span> <span>import</span> <span>pi</span>
<span>import</span> <span>datetime</span>
<span>from</span> <span>.utils</span> <span>import</span> <span>get_data</span><span>,</span> <span>convert_to_df</span>

<span>def</span> <span>homepage</span><span>(</span><span>request</span><span>):</span>

    <span>#We use get_data method from utils </span>
    <span>result</span> <span>=</span> <span>get_data</span><span>(</span><span>'</span><span>EUR</span><span>'</span><span>,</span><span>'</span><span>USD</span><span>'</span><span>,</span> <span>'</span><span>You_own_api_key</span><span>'</span><span>)</span> <span>#Add your own APIKEY </span>
    <span>source</span> <span>=</span> <span>convert_to_df</span><span>(</span><span>result</span><span>)</span>

    <span># These lines are there to color </span>    <span># the red and green bars for down and up days </span>
    <span>increasing</span> <span>=</span> <span>source</span><span>.</span><span>close</span> <span>></span> <span>source</span><span>.</span><span>open</span>
    <span>decreasing</span> <span>=</span> <span>source</span><span>.</span><span>open</span> <span>></span> <span>source</span><span>.</span><span>close</span>
    <span>w</span> <span>=</span> <span>12</span> <span>*</span> <span>60</span> <span>*</span> <span>60</span> <span>*</span> <span>1000</span>


from django.shortcuts import render
from bokeh.plotting import figure, output_file, show
from bokeh.embed import components
import pandas as pd
from math import pi
import datetime
from .utils import get_data, convert_to_df

def homepage(request):

    #We use get_data method from utils 
    result = get_data('EUR','USD', 'You_own_api_key') #Add your own APIKEY 
    source = convert_to_df(result)

    # These lines are there to color     # the red and green bars for down and up days 
    increasing = source.close > source.open
    decreasing = source.open > source.close
    w = 12 * 60 * 60 * 1000

Enter fullscreen mode Exit fullscreen mode

First, we use the methods of our utils.py file. We then convert the result into dataframe. The last lines are important for coloring and as we want to visualize in half-day.


    <span>TOOLS</span> <span>=</span> <span>"</span><span>pan, wheel_zoom, box_zoom, reset, save</span><span>"</span>
    <span>title</span> <span>=</span> <span>'</span><span>EUR to USD chart</span><span>'</span>
    <span>p</span> <span>=</span> <span>figure</span><span>(</span><span>x_axis_type</span><span>=</span><span>"</span><span>datetime</span><span>"</span><span>,</span> <span>tools</span><span>=</span><span>TOOLS</span><span>,</span> <span>plot_width</span><span>=</span><span>700</span><span>,</span> <span>plot_height</span><span>=</span><span>500</span><span>,</span> <span>title</span> <span>=</span> <span>title</span><span>)</span>
    <span>p</span><span>.</span><span>xaxis</span><span>.</span><span>major_label_orientation</span> <span>=</span> <span>pi</span> <span>/</span> <span>4</span>
    <span>p</span><span>.</span><span>grid</span><span>.</span><span>grid_line_alpha</span> <span>=</span> <span>0.3</span>
    <span>p</span><span>.</span><span>segment</span><span>(</span><span>source</span><span>.</span><span>date</span><span>,</span> <span>source</span><span>.</span><span>high</span><span>,</span> <span>source</span><span>.</span><span>date</span><span>,</span> <span>source</span><span>.</span><span>low</span><span>,</span> <span>color</span><span>=</span><span>"</span><span>black</span><span>"</span><span>)</span>
    <span>TOOLS</span> <span>=</span> <span>"</span><span>pan, wheel_zoom, box_zoom, reset, save</span><span>"</span>

    <span>title</span> <span>=</span> <span>'</span><span>EUR to USD chart</span><span>'</span>

    <span>p</span> <span>=</span> <span>figure</span><span>(</span><span>x_axis_type</span><span>=</span><span>"</span><span>datetime</span><span>"</span><span>,</span> <span>tools</span><span>=</span><span>TOOLS</span><span>,</span> <span>plot_width</span><span>=</span><span>700</span><span>,</span> <span>plot_height</span><span>=</span><span>500</span><span>,</span> <span>title</span> <span>=</span> <span>title</span><span>)</span>
    <span>p</span><span>.</span><span>xaxis</span><span>.</span><span>major_label_orientation</span> <span>=</span> <span>pi</span> <span>/</span> <span>4</span>

    <span>p</span><span>.</span><span>grid</span><span>.</span><span>grid_line_alpha</span> <span>=</span> <span>0.3</span>

    <span>p</span><span>.</span><span>segment</span><span>(</span><span>source</span><span>.</span><span>date</span><span>,</span> <span>source</span><span>.</span><span>high</span><span>,</span> <span>source</span><span>.</span><span>date</span><span>,</span> <span>source</span><span>.</span><span>low</span><span>,</span> <span>color</span><span>=</span><span>"</span><span>black</span><span>"</span><span>)</span>


    TOOLS = "pan, wheel_zoom, box_zoom, reset, save"

    title = 'EUR to USD chart'

    p = figure(x_axis_type="datetime", tools=TOOLS, plot_width=700, plot_height=500, title = title)
    p.xaxis.major_label_orientation = pi / 4

    p.grid.grid_line_alpha = 0.3

    p.segment(source.date, source.high, source.date, source.low, color="black")

Enter fullscreen mode Exit fullscreen mode

As we are dealing with time-series data, it’s desirable to have an axis that can display labels that’s are appropriate to different dates and time scales.


    <span>p</span><span>.</span><span>vbar</span><span>(</span><span>source</span><span>.</span><span>date</span><span>[</span><span>increasing</span><span>],</span> <span>w</span><span>,</span> <span>source</span><span>.</span><span>open</span><span>[</span><span>increasing</span><span>],</span> <span>source</span><span>.</span><span>close</span><span>[</span><span>increasing</span><span>],</span>
        <span>fill_color</span><span>=</span><span>"</span><span>#D5E1DD</span><span>"</span><span>,</span> <span>line_color</span><span>=</span><span>"</span><span>black</span><span>"</span>
    <span>)</span>
    <span>p</span><span>.</span><span>vbar</span><span>(</span><span>source</span><span>.</span><span>date</span><span>[</span><span>decreasing</span><span>],</span> <span>w</span><span>,</span> <span>source</span><span>.</span><span>open</span><span>[</span><span>decreasing</span><span>],</span> <span>source</span><span>.</span><span>close</span><span>[</span><span>decreasing</span><span>],</span> 
        <span>fill_color</span><span>=</span><span>"</span><span>#F2583E</span><span>"</span><span>,</span> <span>line_color</span><span>=</span><span>"</span><span>black</span><span>"</span>
    <span>)</span>
    <span>script</span><span>,</span> <span>div</span> <span>=</span> <span>components</span><span>(</span><span>p</span><span>)</span>
    <span>return</span> <span>render</span><span>(</span><span>request</span><span>,</span><span>'</span><span>pages/base.html</span><span>'</span><span>,{</span><span>'</span><span>script</span><span>'</span><span>:</span><span>script</span><span>,</span> <span>'</span><span>div</span><span>'</span><span>:</span><span>div</span> <span>})</span>
    <span>p</span><span>.</span><span>vbar</span><span>(</span><span>source</span><span>.</span><span>date</span><span>[</span><span>increasing</span><span>],</span> <span>w</span><span>,</span> <span>source</span><span>.</span><span>open</span><span>[</span><span>increasing</span><span>],</span> <span>source</span><span>.</span><span>close</span><span>[</span><span>increasing</span><span>],</span>
        <span>fill_color</span><span>=</span><span>"</span><span>#D5E1DD</span><span>"</span><span>,</span> <span>line_color</span><span>=</span><span>"</span><span>black</span><span>"</span>
    <span>)</span>
    <span>p</span><span>.</span><span>vbar</span><span>(</span><span>source</span><span>.</span><span>date</span><span>[</span><span>decreasing</span><span>],</span> <span>w</span><span>,</span> <span>source</span><span>.</span><span>open</span><span>[</span><span>decreasing</span><span>],</span> <span>source</span><span>.</span><span>close</span><span>[</span><span>decreasing</span><span>],</span> 
        <span>fill_color</span><span>=</span><span>"</span><span>#F2583E</span><span>"</span><span>,</span> <span>line_color</span><span>=</span><span>"</span><span>black</span><span>"</span>
    <span>)</span>

    <span>script</span><span>,</span> <span>div</span> <span>=</span> <span>components</span><span>(</span><span>p</span><span>)</span>

    <span>return</span> <span>render</span><span>(</span><span>request</span><span>,</span><span>'</span><span>pages/base.html</span><span>'</span><span>,{</span><span>'</span><span>script</span><span>'</span><span>:</span><span>script</span><span>,</span> <span>'</span><span>div</span><span>'</span><span>:</span><span>div</span> <span>})</span>


    p.vbar(source.date[increasing], w, source.open[increasing], source.close[increasing],
        fill_color="#D5E1DD", line_color="black"
    )
    p.vbar(source.date[decreasing], w, source.open[decreasing], source.close[decreasing], 
        fill_color="#F2583E", line_color="black"
    )

    script, div = components(p)

    return render(request,'pages/base.html',{'script':script, 'div':div })

Enter fullscreen mode Exit fullscreen mode

Step 3: Show the data into the browser

Send data to HTML files in Django requires to store our templates files delicately.
In mysite application folder, create a folder templates. Then inside this folder, create another folder mysite (same name as your app). Then create a folder named pages and (We’re almost done ), create HTML file base.html
If you noticed in the view file, the function homepage returns a dictionary of objects.
We need the HTML file to contain a div where the visualization will be displayed and the Bokeh dependencies in the file.
CSS files in the head, and JS files at the end of the code. For the sake of performance.


<span><html></span>
<span><head></span>
    <span><meta</span> <span>http-equiv=</span><span>"Content-Type"</span> <span>content=</span><span>"text/html;charset=UTF-8"</span><span>></span>
    <span><title></span>Financial Data<span></title></span>
    <span><link</span> <span>rel=</span><span>"stylesheet"</span> <span>href=</span><span>"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css"</span> <span>/></span>
<span></head></span>
<span><body></span>
    <span><nav</span> <span>class=</span><span>"navbar hero is-dark is-bold has-text-centered"</span> <span>role=</span><span>"navigation"</span> <span>aria-label=</span><span>"main navigation"</span><span>></span>
        <span><div</span> <span>class=</span><span>"navbar-brand"</span><span>></span>
            <span><a</span> <span>class=</span><span>"navbar-item"</span><span>></span>
                <span><h1</span> <span>class=</span><span>"title has-text-weight-normal is-1 has-text-white"</span><span>></span>
                    Django-Bokeh-AlphaVantage
                <span></h1></span>
            <span></a></span>
        <span></div></span>
    <span></nav></span>
    <span><section</span> <span>class=</span><span>"container"</span><span>></span>
        <span><div</span> <span>class=</span><span>"columns"</span><span>></span>
            <span><div</span> <span>class=</span><span>"column"</span><span>></span>
            <span></div></span>
            <span><div</span> <span>class=</span><span>"column is-6"</span><span>></span>
                {{ div | safe }}
            <span></div></span>
            <span><div</span> <span>class=</span><span>"column"</span><span>></span>
            <span></div></span>
        <span></div></span>
    <span></section></span>
    <span><script </span><span>src=</span><span>"https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.4.0/bokeh.min.js"</span><span>></script></span>
    <span><script </span><span>src=</span><span>"https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.4.0/bokeh-widgets.min.js"</span><span>></script></span>
    {{ script | safe }}
<span></body></span>
<span></html></span>
<span><html></span>

<span><head></span>
    <span><meta</span> <span>http-equiv=</span><span>"Content-Type"</span> <span>content=</span><span>"text/html;charset=UTF-8"</span><span>></span>
    <span><title></span>Financial Data<span></title></span>
    <span><link</span> <span>rel=</span><span>"stylesheet"</span> <span>href=</span><span>"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css"</span> <span>/></span>
<span></head></span>


<span><body></span>
    <span><nav</span> <span>class=</span><span>"navbar hero is-dark is-bold has-text-centered"</span> <span>role=</span><span>"navigation"</span> <span>aria-label=</span><span>"main navigation"</span><span>></span>
        <span><div</span> <span>class=</span><span>"navbar-brand"</span><span>></span>
            <span><a</span> <span>class=</span><span>"navbar-item"</span><span>></span>
                <span><h1</span> <span>class=</span><span>"title has-text-weight-normal is-1 has-text-white"</span><span>></span>
                    Django-Bokeh-AlphaVantage
                <span></h1></span>
            <span></a></span>
        <span></div></span>
    <span></nav></span>
    <span><section</span> <span>class=</span><span>"container"</span><span>></span>
        <span><div</span> <span>class=</span><span>"columns"</span><span>></span>
            <span><div</span> <span>class=</span><span>"column"</span><span>></span>

            <span></div></span>
            <span><div</span> <span>class=</span><span>"column is-6"</span><span>></span>
                {{ div | safe }}
            <span></div></span>
            <span><div</span> <span>class=</span><span>"column"</span><span>></span>

            <span></div></span>
        <span></div></span>
    <span></section></span>


    <span><script </span><span>src=</span><span>"https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.4.0/bokeh.min.js"</span><span>></script></span>
    <span><script </span><span>src=</span><span>"https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.4.0/bokeh-widgets.min.js"</span><span>></script></span>
    {{ script | safe }}
<span></body></span>

<span></html></span>


<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Financial Data</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
</head>


<body>
    <nav class="navbar hero is-dark is-bold has-text-centered" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item">
                <h1 class="title has-text-weight-normal is-1 has-text-white">
                    Django-Bokeh-AlphaVantage
                </h1>
            </a>
        </div>
    </nav>
    <section class="container">
        <div class="columns">
            <div class="column">

            </div>
            <div class="column is-6">
                {{ div | safe }}
            </div>
            <div class="column">

            </div>
        </div>
    </section>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.4.0/bokeh.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.4.0/bokeh-widgets.min.js"></script>
    {{ script | safe }}
</body>

</html>

Enter fullscreen mode Exit fullscreen mode

Step 5: URLs to views and Final configuration

We must indicate the routes to the views of our application.
Create urls.py in mysite folder and add these lines.


<span>#mysite/urls.py </span><span>from</span> <span>django.urls</span> <span>import</span> <span>path</span>
<span>from</span> <span>.</span> <span>import</span> <span>views</span>
<span>urlpatterns</span> <span>=</span> <span>[</span>
    <span>path</span><span>(</span><span>''</span><span>,</span> <span>views</span><span>.</span><span>homepage</span><span>,</span> <span>name</span><span>=</span><span>'</span><span>homepage</span><span>'</span><span>)</span>
<span>]</span>
<span>#mysite/urls.py </span><span>from</span> <span>django.urls</span> <span>import</span> <span>path</span>
<span>from</span> <span>.</span> <span>import</span> <span>views</span>

<span>urlpatterns</span> <span>=</span> <span>[</span>
    <span>path</span><span>(</span><span>''</span><span>,</span> <span>views</span><span>.</span><span>homepage</span><span>,</span> <span>name</span><span>=</span><span>'</span><span>homepage</span><span>'</span><span>)</span>
<span>]</span>


#mysite/urls.py from django.urls import path
from . import views

urlpatterns = [
    path('', views.homepage, name='homepage')
]

Enter fullscreen mode Exit fullscreen mode

Because we separated the URLs file, we should notify it in the project urls file.


<span>#RealFx/urls </span><span>from</span> <span>django.contrib</span> <span>import</span> <span>admin</span>
<span>from</span> <span>django.urls</span> <span>import</span> <span>path</span><span>,</span> <span>include</span>
<span>urlpatterns</span> <span>=</span> <span>[</span>
    <span>path</span><span>(</span><span>'</span><span>admin/</span><span>'</span><span>,</span> <span>admin</span><span>.</span><span>site</span><span>.</span><span>urls</span><span>),</span>
    <span>#mysite url file </span>    <span>path</span><span>(</span><span>''</span><span>,</span> <span>include</span><span>(</span><span>'</span><span>mysite.urls</span><span>'</span><span>)),</span>
<span>]</span>
<span>#RealFx/urls </span><span>from</span> <span>django.contrib</span> <span>import</span> <span>admin</span>
<span>from</span> <span>django.urls</span> <span>import</span> <span>path</span><span>,</span> <span>include</span>
<span>urlpatterns</span> <span>=</span> <span>[</span>
    <span>path</span><span>(</span><span>'</span><span>admin/</span><span>'</span><span>,</span> <span>admin</span><span>.</span><span>site</span><span>.</span><span>urls</span><span>),</span>
    <span>#mysite url file </span>    <span>path</span><span>(</span><span>''</span><span>,</span> <span>include</span><span>(</span><span>'</span><span>mysite.urls</span><span>'</span><span>)),</span>
<span>]</span>


#RealFx/urls from django.contrib import admin
from django.urls import path, include
urlpatterns = [
    path('admin/', admin.site.urls),
    #mysite url file     path('', include('mysite.urls')),
]

Enter fullscreen mode Exit fullscreen mode

Now we’re done. Let’s see the data.

And Voilà.

Conclusion

In this post, I showed you how to visualize financial data with Django & Bokeh. Every article can be made better, so please leave your suggestions and contributions in the comments below. If you have questions about any of the steps, you are welcome in the comment section.
Check the Github repo.

原文链接：Visualizing Financial Market Data With Django, Bokeh & AlphaVantage API

展开阅读全文

© 版权声明

文章版权声明 1、本网站名称：拾光赋
2、本站永久网址：https://www.blogs.ink
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ：805375623进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

Python（EN）
# python # django # datascience

喜欢就支持一下吧

Be happy for this moment, this moment is your life.

享受当下的快乐，因为这一刻正是你的人生

相关推荐

评论抢沙发

请登录后发表评论

暂无评论内容