Dash Leaflet Minicharts

Dash Python
1

In dash-leaflet==0.1.23 a new Minichart component has been contributed by @RenaudLN . It makes it easy to draw small, animated charts. I think it looks so cool, so I figured I would share it here :smiley:

Peek 2021-11-08 18-16

from dash import Dash, Output, Input, dcc
import dash_leaflet as dl

# Create example app.
app = Dash(update_title=None)
app.layout = dl.Map([
    dl.TileLayer(),
    dl.Minichart(lat=56.1780842, lon=10.1119354, type="bar", id="bar"),
    dl.Minichart(lat=55.6712474, lon=12.5237848, type="pie", id="pie"),
    dcc.Interval(id="trigger")
], style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"})
# Do animated updates (could also be normal callback, but clientside is more performant).
app.clientside_callback("""
function(n_intervals){
    const fakeData = () => [Math.random(), Math.random(), Math.random(), Math.random(), Math.random()]
    return [fakeData(), fakeData()]
}
""", [Output("bar", "data")], [Output("pie", "data")], Input("trigger", "n_intervals"))

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

http://dash-leaflet.herokuapp.com/#minichart

9 Likes
2

Wow @Emil - so awesome :clap:

1 Like
3

Hi,

Thank you for all your work on dash leaflet, I am getting close to having minicharts working but I dont seem to be able to get the bars for example to scale with my data, in the example you give the data to the minichart in Javascript, I am trying to do it purely in Python like this for example:

mini_chart_out = [100,200, 300]

Output(‘bar_mini’,‘data’)

I’m probably being really dumb but just wondering if I am missing a trick?

thanks very much

matt