Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

First Attempt in creating a simple app!

Hello guys! I am very new to plotly and dash and I am very happy that finally it seems that python has it’s own “shiny” like library. I just want to experiment and to make a simple app that the user inputs two numbers and the app returns their sum, but I can’t do it. This is what I recieve:
image

And this is my code:

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

app = dash.Dash()
app.layout = html.Div([

html.Div([html.H1('First Dash Experiment')]),

dcc.Input(id='Input1', type="number"),

dcc.Input(id='Input2', type="number"),

html.P(id='my-div')

])

@app.callback(
dash.dependencies.Output(‘my-div’, component_property=‘children’),
[dash.dependencies.Input(‘Input1’, ‘value’),
dash.dependencies.Input(‘Input2’, ‘value’)])
def update_graph(In1, In2):
return ‘Their sum is {}’.format(int(In1 + In2))

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

The problem is you are adding two strings ‘2’ + ‘3’. This will just append the strings and give you ‘23’.
You should convert both of the inputs to int first and then sum them:

@app.callback(
dash.dependencies.Output(‘my-div’, component_property=‘children’),
[dash.dependencies.Input(‘Input1’, ‘value’),
dash.dependencies.Input(‘Input2’, ‘value’)])
def update_graph(In1, In2):
    return ‘Their sum is {}’.format(int(In1) + int(In2))

Hey @Le_Koul - Welcome to Dash!

It looks like these inputs are being treated as strings, even though type="number" (see issue https://github.com/plotly/dash/issues/124).

For now, try converting to a float with float(In1) + float(In2)