Shimoku docs
Search…
Using the Grid
All the charts shown use a position in the grid. This is an example:
# using the grid - 3 charts in a path
menu_path = 'test/grid'
# bar
data = [
{'date': dt.date(2021, 1, 1), 'x': 5, 'y': 10},
{'date': dt.date(2021, 1, 2), 'x': 6, 'y': 8},
{'date': dt.date(2021, 1, 3), 'x': 4, 'y': 10},
{'date': dt.date(2021, 1, 4), 'x': 7, 'y': 2},
{'date': dt.date(2021, 1, 5), 'x': 3, 'y': 14},
]
shimoku.plt.bar(
data=data,
x='date', y=['x', 'y'],
menu_path=menu_path,
order=0,
rows_size=2, cols_size=5
)
# pie
data_ = [
{'name': 'Matcha Latte', 'value': 78},
{'name': 'Milk Tea', 'value': 17},
{'name': 'Cheese Cocoa', 'value': 18},
{'name': 'Walnut Brownie', 'value': 9},
{'name': 'Buckeye Brownie', 'value': 12},
]
shimoku.plt.pie(
data=data_,
x='name', y='value',
menu_path=menu_path,
order=1,
rows_size=2, cols_size=4,
padding="0,0,0,1",
)
# line
data = [
{'date': dt.date(2021, 1, 1), 'x': 5, 'y': 3},
{'date': dt.date(2021, 1, 2), 'x': 6, 'y': 7},
{'date': dt.date(2021, 1, 3), 'x': 4, 'y': 5},
{'date': dt.date(2021, 1, 4), 'x': 7, 'y': 6},
{'date': dt.date(2021, 1, 5), 'x': 3, 'y': 5},
]
shimoku.plt.line(
data=data,
x='date', y=['x', 'y'],
menu_path=menu_path,
order=2,
rows_size=2, cols_size=12,
padding='1,0,0,0',
)
The first component is a bar, it has order=0, and cols_size=5.
The second component is a pie, with order=1, and cols_size=4. They are in the same row because the total number of column spaces in a row is 12.
The third component is a line chart, order=2, and cols_size=12. It spans all the row, there is a space before the component because a padding='1,0,0,0' introduces this space. The space is introduced in this order: Padding: [ top, right, bottom, left ], for more details see Grid.
The result is:
It may be necessary to scroll down the screen to see all the components.
For more information refer to Grid.
Copy link