Linechart graphs misaligned (out of phase)

Dash Python
1

Hi, I’m new on dash and I recently created a real time line chart (with different lines on each one), all the ‘X’ and ‘Y’ axis info come from the same List (different possitions) the X axis the “date” and the Y axis is the value I want to “graph”.

All the information is passed synchronously however one of the lines seems to go ahead the others despite the info source is the same (due It comes from the same List), please see the attached image

DesfaseDash
DesfaseDash819×460 13 KB
DesfaseDash2
DesfaseDash21366×768 229 KB
DesfaseDash3
DesfaseDash31366×768 193 KB 

app = dash.Dash()

#Defino el Layout con parámetro de entrada mediante con un campo de input (mediante la función dcc.input) y un campo de output
app.layout = (html.Div(children=[
    html.Center(html.H2('''Seguimiento a la generación AMOYÁ''')),  # Título general del gráfico completo

        #TABLA CON LAYOUT DE LOS GRÁFICOS DE LINEA DE TIEMPO GENERACIÓN
    html.Div(children=[
        #Aquí creo una tabla con dos filas "Tr" y 1 columna "Th"
        html.Table(
            html.Tr(children=[
                html.Th(children=[
                    html.H3(id='linechart_horario'),  # ID para llamar el output del gráfico
                    dcc.Interval(
                        id='interval-component',  # ID para llamar el input del gráfico
                        interval=1 * 1000,  # Actualiza cada 10 seg in milliseconds
                        n_intervals=0
                    ),]
                ),
]),


@app.callback( #La estructura de un llamado al decorator callback es Output, Inputs (Una Lista), Eventos, en este caso el input es lo que se escribe en el dcc.Input con id "ingreso" y la salida el html.div con id='linechart_horario'
  Output('linechart_horario', 'children'), #Aquí defino la salida se va a dar en el componente del layout llamado "id='linechart_horario'"
  [Input('interval-component', 'n_intervals')] #Recibe el argumento Input el cual es de tipo lista y que corresponde al componente del layout llamado "id='ingreso'"
)
def actualizar_lineChart_horario(n): #Aquí defino la función que es ejecutada por el decorator y que retorna el gráfico resultante

    misDatosMedicion=actualizarMedidas(central) #Llamo a la función que actualiza los datos

    fechas.append(str(misDatosMedicion[0])) #Genero la fecha actual
    listageneracionMWh_ppal.append(misDatosMedicion[4]) #Genero una variable tipo lista con valores aleatorios entre los rangos del slider (valores del límite inferior y superior del slider) y lo agrego a la lista que se pasará al Gráfico timeseries
    listageneracionMWh_resp.append(misDatosMedicion[5]) #Genero una variable tipo lista con valores aleatorios entre los rangos del slider (valores del límite inferior y superior del slider) y lo agrego a la lista que se pasará al Gráfico timeseries
    listalimiteSuperiorHora.append(misDatosMedicion[10]) #Le voy concatenando nuevamente el valor constante de 10 dado que al dcc.Graph hay que pasarle como valores "x" y "y" objetos tipo lista con los valores a imprimir
    listalimiteInferiorHora.append(misDatosMedicion[11])

    print("Generación ppal: "+str(misDatosMedicion[4]))
    print("Generación resp: "+str(misDatosMedicion[5]))
    print("Limite superior hora: "+str(misDatosMedicion[10]))
    print("Limite inferior hora: "+str(misDatosMedicion[11]))
    print("Limite superior minuto: " + str(misDatosMedicion[12]))
    print("Limite inferior minuto: " + str(misDatosMedicion[13]))

    print("Nro de Elementos: "+str(len(listageneracionMWh_ppal)))
    print("Lista límite superior: "+str(listalimiteSuperiorHora))
    print("Todo el vector de datos: "+str(misDatosMedicion))

    nro_elementos=len(listageneracionMWh_ppal) #Nro de elementos ingresados

    if nro_elementos>nroMaximo:
        del listageneracionMWh_ppal[0:nro_elementos-nroMaximo] #Deja en la lista de generacionMWh solo los último elementos según la variable "nroMaximo"
        del listageneracionMWh_resp[0:nro_elementos-nroMaximo] #Deja en la lista de generacionMWh solo los último elementos según la variable "nroMaximo"
        del listalimiteInferiorHora[0:nro_elementos-nroMaximo] #Deja sulo los n ultimos límites inferiores según el nroMaximo de elmentos
        del listalimiteSuperiorHora[0:nro_elementos-nroMaximo] #Deja sulo los n ultimos Superiores inferiores según el nroMaximo de elmentos
        del fechas[0:nro_elementos-nroMaximo]  #Deja solo las n ultimas fechas según el nroMaximo de elmentos

    print("Elementos: "+str(listageneracionMWh_ppal))
    print("Fechas: "+str(fechas))

    grafico=dcc.Graph(id='example-graph',
                      figure={
                          'data': [{'x': fechas, 'y': listageneracionMWh_ppal, 'type': 'line', 'name': 'Principal MWh'},
                                   {'x': fechas, 'y': listageneracionMWh_resp, 'type': 'line', 'name': 'Respaldo MWh'},
                                   {'x': fechas, 'y': listalimiteSuperiorHora, 'type': 'line', 'name': 'Límite Sup.'},
                                   {'x': fechas, 'y': listalimiteInferiorHora, 'type': 'line', 'name': 'Límite Inf.'}],
                          'layout': {'title': 'Generación Horaria'}}
                      )
    return grafico