How make a random grid of charts?

Dash Python
1

I have two random variables
rows, cols = 3, 2
and I want to make 3x2 table to show and update some charts inside each field
how can I do that?I can just add them with two for loops as static charts but I need to update them with not equal timeperiods and I cant!
Its my static minimal code for it but its not working too!! :):

from datetime import datetime
from time import sleep
import ccxt
import dash
import pandas as pd
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import configparser
import  numpy as np

###########################################################################
def load_df(exchange, market, tf, limit):
    ohlcv = None
    while ohlcv is None:
        try:
            ohlcv = exchange.fetch_ohlcv(symbol=market, timeframe=tf, limit=limit)
        except Exception as e:
            # raise
            print(e)
            sleep(1)
    df = pd.DataFrame(ohlcv, columns=['Date', 'Open', 'High', 'Low', 'Close', 'Volume'])
    df['Date'] = [datetime.fromtimestamp(float(time) / 1000) for time in df['Date']]
    df.index = pd.DatetimeIndex(df['Date'])
    # df = heikin_ashi(df)
    return df


###########################################################################
# Load Config
config = configparser.ConfigParser()
config.read('./config.ini')
config_file_uri = config['DEFAULT']['configfile']
config.read(config_file_uri)

###########################################################################
exchanges = list(ccxt.exchanges)
print(exchanges)
markets = {}
timeframes = {}
widget_chart = {}
listbox_exchange = {}
listbox_market = {}
listbox_timeframe = {}
listbox_type = {}
spinbox_limit = {}
button_maximize = {}
###########################################################################

app = dash.Dash(__name__)

###########################################################################
output = []
for row in range(int(config['DEFAULT']['rows'])):
    for col in range(int(config['DEFAULT']['cols'])):
        # Load Panel Configuration
        section = f"{row}x{col}"
        pconf = config[section]
        exchange = getattr(ccxt, pconf['exchange'])({'enableRateLimit': True})
        # exchange.set_sandbox_mode(True)
        limit = int(pconf['limit'])
        chart_type = pconf['type']
        market = pconf['market']
        timeframe = pconf['timeframe']
        df = load_df(exchange, market=market, tf=timeframe, limit=limit)

        output.append(
            html.Div(
                children=[

                    dcc.Input(id='row'+section,type="number", value=row,disabled=True),
                    dcc.Input(id='col'+section,type="number", value=col,disabled=True),
                    dcc.Input(id='exchange'+section,type="text", value=pconf['exchange']),
                    dcc.Input(id='limit'+section,type="number", value=limit),
                    dcc.Input(id='chart_type'+section,type="text", value=chart_type),
                    dcc.Input(id='market'+section,type="text", value=market),
                    dcc.Input(id='timeframe'+section,type="text", value=timeframe),
                    dcc.Graph(id='chart'+section,figure={'data': [
                        go.Candlestick(
                            x=df['Date'],
                            open=df['Open'],
                            high=df['High'],
                            low=df['Low'],
                            close=df['Close']
                        )
                    ]}),
                    dcc.Interval(
                        id='interval-component'+section,
                        interval=1 * 1000 * 6,  # in milliseconds
                        n_intervals=0
                    )
                ]
            )
        )


        ###########################################################################
        # Fill Exchanges Data
        if pconf['exchange'] not in markets:
            markets[pconf['exchange']] = list(exchange.load_markets())
            # print(pconf['exchange'], markets[pconf['exchange']])

        if pconf['exchange'] not in timeframes:
            timeframes[pconf['exchange']] = list(exchange.timeframes)
            # print(pconf['exchange'], timeframes[pconf['exchange']])

app.layout = html.Div(children=output)


if __name__ == '__main__':
    app.run_server(debug=True)
2

this below? I don’t quite understand you mean by random. If you mean to generate some components dynamically, you can write some list comprehensions.
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/

3

thank you for help.
By random I meant that the user might send different rows and columns to the program each time.
For example 2x5 or 3x3 and I will make the spacific table and add charts as compomments.
But the problem is here I can add similar component multiple times with defferent names but when I want to it’s very complicated job to make costume intervals to them.
I need to add this charts and refresh them with one interval.its very hard!

4

This may help you.

fluid ( boolean | string ; optional): If True the container-fluid class will be applied, and the Container will expand to fill available space. A non-fluid container resizes responsively to a fixed width at the different breakpoints. You can also set the fluid property to one of the Bootstrap breakpoints: “sm”, “md”, “lg”, “xl” or “xxl”, so that the container fluidly expands to fill the screen until the specified breakpoint, then resize responsively at higher breakpoints.

5

Problem is not that…i can use tables too. My problem is that I can add figures but cant update them whit new data in time intervals.
Yes I can make for example 3charts with defferent intervals and defferent callback functions to update them but it’s not done able when I generated them with for loops! Cuz the names are defferent and Its very complicated you know?

Its completely a backend problem.
We can make static charts programaticly with for loops but we cant update all of them with one dcc.interval function that can get inputs and etc!
Cuz inputs names are changing and everything will change too I dont want to make 3x3=9 callback function to update them cuz maybe user just need 2x2=4 chart and/or less or more…!!!

6

how about this?

1 Like
7

Beautiful :heart_eyes: Im going to try
Thanks! I think it can do my job