Summary statistics display

Dash Python
1

Good day guys
I wanted to inquire, is it possible to create an app using dash that can display values computed from the back end, say I want to create an app to track some quantities, how they are changing. The presentation would be more of
Average Age : 25.2 Average Weight : 67kg
Blood Pressure: 140/80 Average Height : 1.76m

where the words are hard coded and wont change but the values will change with time as more data is uploaded. There will be graphs above or below representing these changes, but then values such as average will need to be displayed so that someone can easily look at them and be able to make sense of the plots.

2

Of course! In addition to changing the data associated with a Graph object (as in the Dash guide), you can change other properties of target elements in the frontend. In your case you want to change the children property. You can inject either a component (such as html.Div() or html.P(), or you can just inject text, which is all you need at a mimimum for your use case. Just create a callback that targets the children property of the element you want to update with the dynamic text. Then your callback just needs to return something like "Average Age : {} Average Weight : {}kg".format(age, weight)

3

Thanks a lot, but was looking for more of a guide on it, its my first time to do front end development. I am seeing what you are saying about the update function but then how it will be displayed on the canvas is a bit of the challenge for me.
suppose the setting is of the form
`import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output’

app= dash.Dash()
app.layout=html.Div([])
`@app.callback(Output(‘my-children’, ‘figure’), [Input(‘my-dropdown’, ‘value’)])’

The question is how do i set up the html.Div() or html.P()

4

The best place is to start is the walk-throughs in the tutorial:

https://plot.ly/dash/getting-started

5

Yep, the very first example on part 2 of the Dash Intro has an example of how to update the contents of an element in the page with dynamic text.

Note that the return value of a callback targeting the children property of an element can be a string as in that example – in which case it will become the text of that element, or it can be a Dash layout tree (eg html.Div([html.H2('hello'), html.P('foo')])) in which case it will be inserted into the DOM inside the target element.

6

I think there is another “problem” with the use case you described.
The concept of Dash is to store the application state in the browser. But your application should be driven by your backend service (providing the data you mentioned).
You cannot trigger the update of a graph in a Dash application without having an user interaction. The only way to achieve something similar is to use the interval component . But also in this case your backend will not update your frontend. The frontend will refresh with the latest data from the backend.
If this is not a problem for you, Dash will be an easy and quick solution for your problem.

7

Thank you guys, it worked now working on arranging the data in the correct format. the output thats displayed, the font and creating a new line, had tried using \n but not a viable option, any suggestions

8

@HansG Note that you can also serve the latest data on page load by setting app.layout to be a function. See the last example in Live Updates | Dash for Python Documentation | Plotly. This doesn’t require any user interaction.

9

wanted to ask on how to create space between text and how to move text to the next line, tried python \n but not responding, which is the other way

10

To display the text, ended up creating a function that returned the printed text in a Div, like
def text():
return html.Div([
html.Div(‘text’)
])

11

You essentially use the same approach you’d use with HTML/CSS in order to position things, it’s just that you’re doing it on the Python side, and then it’s all converted into HTML on the client through the magic of Dash’s JSON serialisation plus the React app.

So you can use <p> tags to put text within different paragraphs:

html.Div([
   html.P("line one"),
   html.P("line two"),
])

Or you can use other block elements, such as a <div>, but apply styles such as margin-top etc to provide more control:

html.Div([
   html.Div("line one"),
   html.Div("line two", style={'marginTop':'2em'}),
])

Doing some kind of intro to HTML/CSS tutorial will get you going on the right path.

12

The major challenge though would be aligning the text. making sure it mantains some form of predefined format. At the end might opt to create a table,

13

There are definitely ways to align elements with CSS, but yeah. creating a table within your Dash layout might be the most straightforward way.

14

Hello, recently I was experimenting with how to display summary statistics but only for the selected data on dash-table-experiment. I’m using selected_row_indices in dash-table-experiment to define which row contains the data and then define the column of what value you want load. Here’s what I do:

For example, finding mean of only selected data:

html.Div(id='mean')

with this callback

@app.callback(Output('mean', 'children'), 
                    [Input('datatable', 'selected_row_indices')])
    def update_datatable(selected_row_indices):
        a=[]
        for i in (selected_row_indices):
            a.extend([i])
        selected = df.loc[a,'KOMP_1']    
        mean = np.mean(selected)
        return 'Mean = "{}"'.format(mean)

Hope it helps :slight_smile:

2 Likes
15

would you please tell me like now, i am going to find the sum of the “Sales” column of a data frame “df” in the backend, so, how should i set up the dashboard?

i understand i will have the line below for the output,
html.Div(id='sum')

but how do i set the callback?

@app.callback(Output('sum', 'children'), 
                     [Input('df', 'Sales')])
     def get_sum('Sales'):
         sum = df["Sales"].sum
         return 'Grand Total = "{}"'.format(sum)

,

but it shows error