Dash html linking of 2 separate documents

Dash Python
1

I used my limited knowledge on python and requirements of the work I am doing to make a dash layout of a scatter ternanry diagram, initially using plotly and then switching it to dash. I followed chris’ step by step guide on the forum post below as well as the user guide but was unable to link both documents.

https://imgur.com/R304XMM
I created the index, main and app1 and app2 as it was shown in the user guide, but for some reason when I want to go a different page, i.e. 80C or 65C, the address used to change but the page didnt.
I am a little new to this, hence would like your help regarding the posting of code and how to do it, however, it is very similar to the ones in the user guide.

dash80 layout:
app.layout = dh.Div([
dcc.Graph(
id=‘plot’,
figure={
‘data’: data,
‘layout’: lay
}
),
#dcc.Location(id=‘url’,refresh=False),
dh.Br(),
dcc.Link(‘Go to 65°C’,href=‘/dash65.py’),
])

dash65 layout:
app.layout = dh.Div([
dcc.Graph(
id=‘plot’,
figure={
‘data’: data,
‘layout’: lay
}
),
#dcc.Location(id=‘url’,refresh=False),
dh.Br(),
dcc.Link(‘Go to 80°C’,href=‘/dash80.py’),
dh.Label(‘Enter the data to be added\n’),
dh.Label(‘PLA concentration\n’),
dcc.Input(
placeholder=‘\n\n\n’,
type=‘number’,
value=k,
id=‘PLA’
),
dh.Label(‘DMSO concentration\n’),
dcc.Input(
placeholder=‘\n\n\n’,
type=‘number’,
value=k,
id=‘DMSO’
),
dh.Label(‘EtOH concentration\n’),
dcc.Input(
placeholder=‘\n\n\n’,
type=‘number’,
value=k,
id=‘EtOH’
),
])
would be nice if you could help this noobie out :smiley:

2

@deeptanshu - Can you post a full example? These examples only include the layout of the applications, not the callback. The callback is where the content actually gets updated on the page itself. http://plot.ly/dash/urls has several examples that illustrate how this works. I recommend copying and pasting the last example on that page, verifying that it works for you, and then modifying it to your own needs.

3

Hi Chris,
I was busy this week, hence couldn’t try your suggestion out earlier. However, I have tried it out now, and yet I face the same issue.
Here I am posting the same code in its entireity.
#my code
import plotly.plotly as py
import plotly.graph_objs as go
import numpy as np
import pandas as pd
import dash_core_components as dcc
import dash_html_components as dh
from dash.dependencies import Input, Output
from app import app
ctr0 = ctr1 = ctr2 = ctr3 = 0
b = pd.read_excel(‘H:\PLA data\sort PLA.xlsx’,sheetname = ‘Input new data’)
book = b.sort_values([‘Solution description’],ascending=True)
L = len(book.index)

PLA = np.zeros(L)
DMSO = np.zeros(L)
EtOH = np.zeros(L)
Color = np.zeros(L)

for i in xrange(L):
PLA[i]=book.loc[i,‘PLA, g’]
DMSO[i]=book.loc[i,‘DMSO, g’]
EtOH[i]=book.loc[i,‘Ethanol, g’]
Color[i]=book.loc[i,‘Solution description’]

for j in range(len(PLA)):
if Color[j]==0:
ctr0+=1
if Color[j]==1:
ctr1+=1
if Color[j]==2:
ctr2+=1
if Color[j]==3:
ctr3+=1
c1=ctr0+ctr1
c2=ctr1+ctr2+ctr0
c3=ctr2+ctr3+ctr1+ctr0
ctr0=ctr0

def getPLA(ctr,ct,c):
k=0
store = np.zeros©
while (k<c):
store[k] = PLA[k+ctr]
format(store[k],’.2f’)
k+=1
return store.tolist()

def getEtOH(ctr,ct,c):
k=0
store = np.zeros©
while (k<c):
store[k] = EtOH[k+ctr]
format(store[k],’.2f’)
k+=1
return store.tolist()

def getDMSO(ctr,ct,c):
k=0
store = np.zeros©
while (k<c):
store[k] = DMSO[k+ctr]
format(store[k],’.2f’)
k+=1
return store.tolist()

def getText(a,rho,size): #(color,pore density, pore size)
text = []
if (a==0):
text = 'Liquid Solution’
if (a==1):
text = 'Two - Liquid Solution’
if (a==2):
text = 'Solid - Liquid Solution’
if (a==3):
text = ‘Gel’

Liquid_Solution = {
“a”: [i for i in getPLA(0,ctr0,ctr0)],
“asrc”: “deeptanshu:19:5206a2”,
“b”: [i for i in getDMSO(0,ctr0,ctr0)],
“bsrc”: “deeptanshu:19:71c2df”,
“c”: [i for i in getEtOH(0,ctr0,ctr0)],
“csrc”: “deeptanshu:19:9e2788”,
“marker”: {
“color”: “#1F77B4”,
“line”: {“width”: 2},
“size”: 14,
“symbol”: 200
},
“mode”: “markers”,
“name” : ‘Liquid Solution’,
“opacity” : 0.7,
“text”: [‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,‘liquid solution’,],
“textsrc”: “deeptanshu:19:b28dd3”,
“type”: “scatterternary”
}
Two_Liquid_Solution = {
“a”: [i for i in getPLA(ctr0,c1,ctr1)],
“asrc”: “deeptanshu:19:5206a2”,
“b”: [i for i in getDMSO(ctr0,c1,ctr1)],
“bsrc”: “deeptanshu:19:71c2df”,
“c”: [i for i in getEtOH(ctr0,c1,ctr1)],
“csrc”: “deeptanshu:19:9e2788”,
“marker”: {
“color”: “#D62728”,
“line”: {“width”: 2},
“size”: 14,
“symbol”: 200
},
“mode”: “markers”,
“name” : ‘Two Liquid Solution’,
“opacity” : 0.7,
“text”: [‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’,‘2 Liqiuid solution’],
“textsrc”: “deeptanshu:19:b28dd3”,
“type”: “scatterternary”
}
Solid_Liquid_Solution = {
“a”: [i for i in getPLA(c1,c2,ctr2)],
“asrc”: “deeptanshu:19:5206a2”,
“b”: [i for i in getDMSO(c1,c2,ctr2)],
“bsrc”: “deeptanshu:19:71c2df”,
“c”: [i for i in getEtOH(c1,c2,ctr2)],
“csrc”: “deeptanshu:19:9e2788”,
“marker”: {
“color”: “#2CA02C”,
“line”: {“width”: 2},
“size”: 14,
“symbol”: 200
},
“mode”: “markers”,
“name” : ‘Solid-Liquid Solution’,
“hoveron” : “points+fills”,
“opacity” : 0.8,
“text”: [‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’,‘Solid-Liquid Solution’],
“textsrc”: “deeptanshu:19:b28dd3”,
“type”: “scatterternary”
}
Gel = {
“a”: [i for i in getPLA(c2,c3,ctr3)],
“asrc”: “deeptanshu:19:5206a2”,
“b”: [i for i in getDMSO(c2,c3,ctr3)],
“bsrc”: “deeptanshu:19:71c2df”,
“c”: [i for i in getEtOH(c2,c3,ctr3)],
“csrc”: “deeptanshu:19:9e2788”,
“marker”: {
“color”: “#444444”,
“line”: {“width”: 2},
“size”: 14,
“symbol”: 200
},
“mode”: “markers”,
“name” : ‘Gel’,
“opacity” : 0.96,
“hoveron” : “points+fills”,
“text”: [‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’,‘Gel’],
“textsrc”: “deeptanshu:19:b28dd3”,
“type”: “scatterternary”
}

data = [Liquid_Solution,Two_Liquid_Solution,Solid_Liquid_Solution,Gel]

lay = {
“height” : 900,
“autosize” : True,
“showlegend”: True,
“annotations”: [
{
“x”: 0.5,
“y”: 1.05,
“font”: {“size”: 25},
“showarrow”: True,
“text”: “Ternary PLA/DMSO/EtOH plot\n at 65°C”
}
],
“ternary”: {
“aaxis”: {
“showgrid”: True,
“color” : “#0f0”,
“showline”: True,
“tickangle”: 0,
“tickcolor”: “#0f0”,
“ticksuffix”: “%”,
“tickfont”: {“size”: 15},
“ticklen”: 10,
“min” : 0.2,
“title”: “PLA”,
“titlefont”: {“size”: 20},
},
“baxis”: {
“showgrid”: True,
“color” : “#000”,
“showline”: True,
“tickangle”: 60,
“tickcolor”: “#000”,
“ticksuffix”: “%”,
“tickfont”: {“size”: 15},
“ticklen”: 10,
“min” : 0.2,
“title”: “
DMSO”,
“titlefont”: {“size”: 20}
},
“caxis”: {
“showgrid”: True,
“color” : “00a”,
“showline”: True,
“tickangle”: -60,
“tickcolor”: “#00a”,
“ticksuffix”: “%”,
“tickfont”: {“size”: 15},
“ticklen”: 10,
“min” : 0.2,
“title”: “
EtOH”,
“titlefont”: {“size”: 20}
},
“sum”: 100
},
“width” : 900
}

app.layout = dh.Div([
dh.Div(id=‘app-1-display-value’),
dcc.Graph(
id=‘plot’,
figure={
‘data’: data,
‘layout’: lay
}
),
#dcc.Location(id=‘url’,refresh=False),
dh.Br(),
dcc.Link(‘Go to 80°C’,href=’/dash80.py’),
dh.Label(‘Enter the data to be added\n’),
dh.Label(‘PLA concentration\n’),
dcc.Input(
placeholder=’\n\n\n’,
type=‘number’,
value=10,
id=‘PLA’
),
dh.Label(‘DMSO concentration\n’),
dcc.Input(
placeholder=’\n\n\n’,
type=‘number’,
value=k,
id=‘DMSO’
),
dh.Label(‘EtOH concentration\n’),
dcc.Input(
placeholder=’\n\n\n’,
type=‘number’,
value=’’,
id=‘EtOH’
),
dh.Button(‘Click Me’, id=‘my-button’),

])

@app.callback(
Output(‘app-1-display-value’, ‘children’),
[Input(‘PLA’, ‘value’)])
def display_value(value):
return ‘You have selected “{}”’.format(value)

if name == ‘main’:
app.run_server(debug=True)

The other file dash80.py is pretty similar to this only that it takes records for its plotting from a different page on the excel workbook. Am I making a categorical mistake somewhere or is there something missing in the code.

4

It’s hard to say without looking deeply into the code. I recommend simplifying the code snippet until you find the issue or starting from the last example from http://plot.ly/dash/urls, verifying that it works for you, and then modifying it to your own needs, and then adding the rest of your app code.

5

Hey Chris, Just a small update, I tried the program code on the dash url, just going to ask you, how do you run the program? I use the prompt, and run using python app1.py but the webpage does not display. How do I run it again :frowning: , again total noob question

6

Hey @chriddyp ,
I was successfully able to run the program but I have this error that fails to load the 2nd page, from whichever page I start from,

WARNING in flask_seasurf [C:\Users\USERNAME\AppData\Local\Continuum\Anaconda2\lib\site-packages\flask_seasurf.py:282]:
Forbidden (CSRF token missing or incorrect.): /_dash-update-component.

and this message repeats itself infinitely. Do I have to update a package further?

7

You’ll need to need to add a secret_key to your server. Try adding this:

import binascii
import os
app.server.secret_key = os.environ.get('secret_key', binascii.hexlify(os.urandom(24)))

This was explained a bit in https://plot.ly/dash/deployment. Note that this line won’t be necessary in future versions of Dash (as per https://github.com/plotly/dash/issues/141)