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!

Ploting time series data

Hi,

I am absolutely fresh with Dash and in the process of converting a Shiny dashboard into one of Dash. While I was using ‘dygraph’ in Shiny I had to find a possibility to do the same in Python. Looking for an example on how to use Plotly to do so I found this one where the plotly class is used.

Looking at the examples in the Dash user Guide the graph_objs class is used, and i was wondering on how I get the example for ‘Time Series With Rangeslider’ from the link above implemented in a Dash-board.

Bests, Thomas

@TomGeo - Awesome!

All of the examples in the Python graphing library construct either a figure or data.

figure is either:

  • figure = {'data': data, 'layout': layout}
  • figure = go.Figure(data=data, layout=layout)

In other words, the graphing library and dash accept both go.* objects (like go.Figure) and just regular dict {} or lists []`

figure is one of the attributes of the dash_core_components.Graph component. So, you just need to pass figure into the Graph component. Here’s an example from the time series link you posted above:

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

import pandas as pd

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")

trace_high = go.Scatter(
    x=df.Date,
    y=df['AAPL.High'],
    name = "AAPL High",
    line = dict(color = '#17BECF'),
    opacity = 0.8)

trace_low = go.Scatter(
    x=df.Date,
    y=df['AAPL.Low'],
    name = "AAPL Low",
    line = dict(color = '#7F7F7F'),
    opacity = 0.8)

data = [trace_high,trace_low]

layout = dict(
    title='Time Series with Rangeslider',
    xaxis=dict(
        rangeselector=dict(
            buttons=list([
                dict(count=1,
                     label='1m',
                     step='month',
                     stepmode='backward'),
                dict(count=6,
                     label='6m',
                     step='month',
                     stepmode='backward'),
                dict(step='all')
            ])
        ),
        rangeslider=dict(),
        type='date'
    )
)

fig = dict(data=data, layout=layout)

# Now here's the Dash part:

dash.layout = html.Div([
    dcc.Graph(id='my-graph', figure=fig)
])
1 Like

@chriddyp - awesome, works pretty well!
Thanks a lot for the prompt help. :smile: