Hi, Ive been trying to fix these problem for a couple of weeks and not getting anywhere.
-
its a multipage app with app.py (basic). and index.py is where the app is running w/ Navbar (Top and Bottom) with numerous pages (drop downs) in dbc.NavLink(). but callbacks() dont work in dbc.Navbar() … only when i use dcc.link… Can anyone explain how to use callbacks with dbc.NavLink()?? is it possible to use callbacks with dbc or only with dcc??? Its a stock/crypto chart calling from an api and the data wont load… only an empty chart… if i change it to no nav bar and all dcc.link they work… but i need to use a navbar with drop down’s because i have so many pages… i have seen several people with similar problems in the past but didnt understand the solutions given …
-
As I said the app is multipage, it has about 11 pages in the navbar… some with dropdown mulitple pages in the drop downs… the problem is the whole app only works when i click on a page once. Then on the next page click, in the url address bar it adds an app to app/app/app/macro. etc… so each time another app/. so the navigation in the index.py that is set to …if pathname == ‘/apps/macro’: return macro.layout. … wont work because the path is then wrong… Why is it adding a new app each time in the address bar???
-
Another very strange thing is happening. every time i run… python index.py to start the app on my local host… the charts from two of my pages… charts being made from a csv file in the file open on a separate page… so on one page i have a file called… globalsales.py… and in that .py file is 5 charts… each time i run python index.py each of those charts open up in a separate page in my browser! … its crazy… pic below… and it happens 3 times… so it literally opens up 15 or so separate windows with only 1 chart in each page… bizarre! any ideas? screen shot below
4… also, not related to those but really wanting to know if anyone else is using web3.py in a dash app??? Can i hook the app up to an ethereurm blockchain wallet using web3??? I can give the code i use on regular js react apps to hook up… really would be cool if we can use this to do blockchain analytics?? meta mask has really easy code to put in apps to hook the app up to a web3…
I have had someone look at this and we cant figure this out at all… code and pics below…
app.py
///
import dash
import dash_auth
app = dash.Dash(name, suppress_callback_exceptions=True,
meta_tags=[{‘name’: ‘viewport’,
‘content’: ‘width=device-width, initial-scale=1.0’}],
)
)
server = app.server
///////
index.py. below
/////
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import pandas as pd
import plotly.express as px
Connect to main app.py file
from app import app
from app import server
Connect to your app pages (add pages here from apps file, py files)
from apps import vgames, global_sales, macro, nlp, home, live, alpaca, nlpdial, economic, news, socialdata, energy, data
app = dash.Dash(name)
app.layout = html.Div([
dcc.Location(id=‘url’, refresh=False),
dbc.NavbarSimple(
children=[
dbc.NavLink("Home", href="/", active="exact"),
dbc.NavLink("About", href="apps/home", active="exact"),
dbc.DropdownMenu(
[dbc.DropdownMenuItem("DEF",
href="apps/vgames", active="exact"),
dbc.DropdownMenuItem("DS",
href="https://discord.gg/sGt",
external_link=False,),
dbc.DropdownMenuItem("Centralize",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("ETH",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("Bitcoin",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("Binance",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("Transports",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=True,),
dbc.DropdownMenuItem("Technology",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=True,),
dbc.DropdownMenuItem("Telecom",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
],
label="Research",
nav=True,),
dbc.DropdownMenu(
[dbc.DropdownMenuItem("Port",
href="apps/global_sales", active="exact"),
dbc.DropdownMenuItem("Energy",
href="apps/energy", active="exact"),
dbc.DropdownMenuItem("Financials",
href="apps/data", active="exact"),
dbc.DropdownMenuItem("HealthCare",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("Consumer",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("Materials",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("Transports",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=True,),
dbc.DropdownMenuItem("Technology",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=True,),
dbc.DropdownMenuItem("Telecom",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
],
label="EResearch",
nav=True,),
dbc.DropdownMenu(
[dbc.DropdownMenuItem("Data Points",
href="apps/macro", active="exact"),
dbc.DropdownMenuItem("Liquidity",
href="https://discord.gg/sG",
external_link=False,),
dbc.DropdownMenuItem("Calendar",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("Notes",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("FED",
href="apps/economic", active="exact"),
dbc.DropdownMenuItem("China Credit",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("High Yeild",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=True,),
],
label="MResearch",
nav=True,),
dbc.DropdownMenu(
[dbc.DropdownMenuItem("NP Stories",
href="apps/nlp", active="exact"),
dbc.DropdownMenuItem("NP GUAGES",
href="apps/nlpdial", active="exact"),
dbc.DropdownMenuItem("Calendar",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
],
label="NP Research",
nav=True,),
dbc.NavLink("Crypto Charts", href="apps/live",
active="exact", external_link=True),
dbc.NavLink("Stocks Charts", href="apps/alpaca",
active="exact", external_link=True),
dbc.NavLink("NEWS",
href="apps/news", active="exact"),
dbc.NavLink("Social Media",
href="apps/socialdata", active="exact"),
dbc.DropdownMenu(
[dbc.DropdownMenuItem("Twitter", "External relative",
href="https://twitter.com/bull_swap",
external_link=True,),
dbc.DropdownMenuItem("Discord",
href="https://discord.gg/sGtNmZ2e",
external_link=True,),
dbc.DropdownMenuItem("Facebook",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=True,),
dbc.DropdownMenuItem("Facebook",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=True,),
dbc.DropdownMenuItem("Facebook",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=True,),
dbc.DropdownMenuItem("Facebook",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=True,),
dbc.DropdownMenuItem("Facebook",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=True,),
dbc.DropdownMenuItem("Facebook",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=True,),
],
label="Links",
nav=True,)
],
brand="BAnalytics",
color="primary",
dark=True,
),
dbc.Container(id="page-content", className="pt-4"),
# dcc.Interval(id='update', n_intervals=0, interval=1000*5),
dbc.NavbarSimple(
children=[
html.A([
html.Img(
src="https://img.icons8.com/ios-filled/50/fa314a/twitter-circled--v1.png",
style={
'height': '50%',
'width': '50%',
'padding-top': 10,
'padding-right': 0
})
], href="https://twitter.com/bull_swap"),
html.A([
html.Img(
src="https://img.icons8.com/ios-filled/50/fa314a/discord-logo.png",
style={
'height': '50%',
'width': '50%',
'padding-top': 10,
'padding-right': 5
})
], href="https://discord.gg/p4YeNQ9r"),
html.A([
html.Img(
src="https://img.icons8.com/ios-filled/50/fa314a/facebook-circled--v1.png",
style={
'height': '50%',
'width': '50%',
'padding-top': 10,
'padding-right': 5
})
], href="https://www.facebook.com/profile.php?id=100070143875491"),
html.A([
html.Img(
src="https://img.icons8.com/ios-filled/50/fa314a/documents.png",
style={
'height': '50%',
'width': '50',
'padding-top': 10,
'padding-right': 5
})
], href="https://app.gitbook.com/@edwardcapital/"),
], brand="BAnalytics",
color="primary",
dark=True,
fixed='bottom'
)
]
)
@ app.callback(Output(component_id=‘page-content’, component_property=‘children’),
[Input(component_id=‘url’, component_property=‘pathname’)])
def display_page(pathname):
if pathname == ‘/apps/vgames’:
return vgames.layout
if pathname == ‘/apps/global_sales’:
return global_sales.layout
if pathname == ‘/apps/macro’:
return macro.layout
if pathname == ‘/apps/nlp’:
return nlp.layout
if pathname == ‘/apps/home’:
return home.layout
if pathname == ‘/apps/live’:
return live.layout
if pathname == ‘/apps/alpaca’:
return alpaca.layout
if pathname == ‘/apps/nlpdial’:
return nlpdial.layout
if pathname == ‘/apps/economic’:
return economic.layout
if pathname == ‘/apps/news’:
return news.layout
if pathname == ‘/apps/socialdata’:
return socialdata.layout
if pathname == ‘/apps/energy’:
return energy.layout
if pathname == ‘/apps/data’:
return data.layout
else:
return home.layout
return is if nothing, can set to main page
if name == ‘main’:
app.run_server(debug=True)
/////////////
stock chart live.py
/////
import pandas as pd
import plotly
import plotly.express as px
from app import app
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate
import dash_bootstrap_components as dbc
import pandas_datareader.data as web
import datetime
from alpha_vantage.timeseries import TimeSeries
key = ‘4D48RAF3VU2xxxxxx’ # Your API Key
ts = TimeSeries(key, output_format=‘pandas’) # ‘pandas’ or ‘json’ or ‘csv’
tsla_data, tsla_meta_data = ts.get_intraday(
symbol=‘TSLA’, interval=‘1min’, outputsize=‘compact’)
print(tsla_meta_data)
#df = tsla_data.copy()
print(df.head())
#df = df.transpose()
print(df.head())
df.rename(index={“1. open”: “open”, “2. high”: “high”, “3. low”: “low”,
“4. close”: “close”, “5. volume”: “volume”}, inplace=True)
#df = df.reset_index().rename(columns={‘index’: ‘indicator’})
print(df.head())
#df = pd.melt(df, id_vars=[‘indicator’], var_name=‘date’, value_name=‘rate’)
#df = df[df[‘indicator’] != ‘volume’]
print(df[:15])
df.to_csv(“data2.csv”, index=False)
exit()
layout = dbc.Container([
dbc.Row([
dcc.Interval(
id='my_interval',
n_intervals=0, # number of times the interval was activated
interval=120*1000, # update every 2 minutes
),
# empty graph to be populated by line chart
dcc.Graph(id="world_finance"),
], className='mb-15'),
@app.callback(
Output(component_id=‘world_finance’, component_property=‘figure’),
[Input(component_id=‘my_interval’, component_property=‘n_intervals’)]
)
def update_graph(n):
“”“Pull financial data from Alpha Vantage and update graph every 2 minutes”""
tsla_data, tsla_meta_data = ts.get_intraday(
symbol='TSLA', interval='1min', outputsize='compact')
df = tsla_data.copy()
df = df.transpose()
df.rename(index={"1. open": "open", "2. high": "high", "3. low": "low",
"4. close": "close", "5. volume": "volume"}, inplace=True)
df = df.reset_index().rename(columns={'index': 'indicator'})
df = pd.melt(df, id_vars=['indicator'],
var_name='date', value_name='rate')
df = df[df['indicator'] != 'volume']
print(df[:15])
line_chart = px.line(
data_frame=df,
x='date',
y='rate',
color='indicator',
title="Stock: {}".format(tsla_meta_data['2. Symbol'])
)
return (line_chart)
///////////////////
1st screen shot… stock data wont populate the chart with dbc.NavLink.
2nd screen shot… pic of address bar adding app/app/ each time i click on new page…
3rd screen shot… separate window opening displaying 1 chart from my site… it opens like 15 separate windows… look at the address bar in pic… LOL… crazy… every time i refresh or start the page it does this…
Any help would be much appreciated! thx!
