Multiple Line Charts

Dash Python
1

0

I trying to create a multiple line charts where have one line for each machine and ‘Time’ in on X axis. However I tried a lot of combinations to generate X and Y label. The more closer that I git from expected result is chart below.

  • All Advises are welcome.

This is the dataframe.

df3:
Machine Units Pruduced  Time
K2K02   1900            15
K2K03   311             15
K2K01   5230            17
K2K02   1096            12
K2K03   1082            11
K2K07   587             17...

So i Grouping and unstacking to prepare df to plot graph.

fdr = dff3.groupby(['Time', 'Machine']).sum()
fdr2 = fdr.unstack('Time')
fdr2

This is my code:

import dash_table_experiments
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objects as go
import numpy as np
import dash_table_experiments as dash_table
import dash
from dash.dependencies import Input, Output
import dash_table
import pandas as pd
import plotly_express as px
import plotly.offline as pyo

dff3 = pd.read_csv('df3.csv', encoding='latin-1', low_memory=False)
dff3
fdr = dff3.groupby(['Time', 'Machine']).sum()
fdr2 = fdr.unstack('Time')
fdr2

app = dash.Dash()

app.layout = html.Div([ 

dcc.Graph(
        id = 'GrapGo',
        figure = {
            'data' : [
                go.Scatter(

                x = fdr2.index,
                y = fdr2.loc[rowname],
                mode = "markers+lines",
                name = rowname
                )for rowname in fdr2.index


            ],
            'layout' : go.Layout(
                title = "Grafico com go",
                xaxis = {'title': 'X Label'},
                yaxis = {'title': 'y Label'}

            )
        }
    )

])

if __name__ == '__main__':
    app.run_server()

This is graph i getting.

Unknown-6
Unknown-6700×450 33.3 KB

The expected result is:

07
072444×990 273 KB

2

Hi @ceuzebio, you can use use the plotly.express functions to perform the groupby operations for you. See for example the code below

import plotly.express as px
machines = ['A', 'A', 'A', 'B', 'B', 'B']
units = [200, 100, 300, 150, 250, 200]
time = [1, 2, 3, 1, 2, 3]
fig = px.line(dict(machines=machines, units=units, time=time), x='time', y='units', color='machines')
fig.update_traces(mode='markers+lines')
fig.show()

(you can pass the fig object to dcc.Graph.figure instead of the dictionary above). Also see https://plot.ly/python/plotly-express/ and https://plot.ly/python/px-arguments/. Hope this helps!

1 Like
3

I used a dictionary here but you can pass a dataframe directly to px.line.

1 Like
4

@Emmanuelle Thank you so much,

I make a few manipulations in data and get the expected result with.

#chartd = px.data.
fig = px.scatter(fdr4, x="Time", y="Units Pruduced", color="Machine")
fig.update_traces(mode='lines+markers')
fig.show()

So my question is: Its possible inset this format in to HTML Dash with dash style? if yes do you have any reference to indicate?

Thank you.

5

Yes, if you have a plotly figure object fig, then in your code you pass it to the dcc Graph as follows

dcc.Graph(
        id = 'GrapGo',
        figure = fig)

In the dash docs (https://dash.plot.ly/interactive-graphing) we show how to pass a figure as a dictionary with data and layout keys but in fact you can pass any plotly figure.

2 Likes
6

@Emmanuelle Thank you so much :smiley:

7

Hi Emmanuele,

There is any reference about how i cant make the same char in plotly.graph_objects, i thin that is to easy to style and manipulate componentes.

If you have any one could you please share?

Thank you so much.

1 Like
8

Hi @Emmanuelle,

Can you please provide an example of how you would use plotly.express with a customized layout to pass it to dcc.Graph? I read the docs that you’ve linked but I am not sure where this is explicitly mentioned.

I think that this is what @ceuzebio is asking in his last comment.

9

@Yiannis
This video that I created might help you. Towards the end of the video (19th minute, I think) it shows how to go deeper into Plotly Express and customize some layout.