How Dash Graph communicate With Pandas DataFrame

Dash Python
1

Hi,

I’m new to Dash and doing some tutorials now.
In one of them there are use of Dataframe.index and Dataframe.Close for the x and y axis.
I tried to google it briefly, but didnt find anything helpful…

The underlying behavior is not fully clear to me, and I will appreciate any comment.
A link will be also be great !

The sample code:

d_dcc.Graph(
       id='example-graph',
       figure={
           'data': [
               {'x': df.index, 'y': df.Close, 'type': 'line', 'name': input_data}
           ],
           'layout': {
               'title': str(input_data + " Stock")
           }
       }
   )

Thanks !

2

Hi,

Welcome!

The figure argument of dcc.Graph refers to a figure generated by Plotly (express or graph_object). Please refer to the original documentation on the component for some simple examples.

The way this code snippet generates the figure works, but it is not the easiest one to understand as a beginner. In simple words, this is creating a px.line (from plotly.express) figure and feeding the DataFrame index and “Close” column as x and y, respectively. The rest is just a few adjustments to the legend and title.

2 Likes
3

I think that I dont understand why “df.index” and “df.Close” is used and how they are function…

“df.index” gives a RangeIndex instance, but I didnt find any information about “df.Close”, and dont understand how the axes is given by them …

4

I think that I dont understand why “df.index” and “df.Close” is used and how they are function…

They are just the attribute access of Pandas.

Note that x and y are basically the values of the x and y coordinates of the line plot.

1 Like