Contributed Examples

[terasakisatoshi]

As well as Interact.jl Contributed Examples JuliaGizmos/Interact.jl#36 , it is good idea to collect examples using Dash.jl.

Here is my example

Code

# Usage: just run this code 
# tested on Julia 1.4 and 1.5 and 1.6-DEV

using Dash
using DashHtmlComponents
using DashCoreComponents
using Plots

function powplot(n)
    p = plot(x -> x^n, label = "y=x^$n", xlims=[0,1])
    figure = (data = Plots.plotly_series(p), layout = Plots.plotly_layout(p))
    figure
end

app =
    dash(external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"])

app.layout = html_div(style = Dict(:width => "50%")) do
    html_h1("Hello Dash"),
    html_div() do
        html_div("slider", style = (width = "10%", display = "inline-block")),
        html_div(dcc_slider(
            id = "slider",
            min = 0,
            max = 9,
            marks = Dict(i => "$i" for i = 0:9),
            value = 1,
        ),style = (width = "70%", display = "inline-block"))
    end,
    html_br(),
    dcc_graph(id = "power", figure = powplot(1))
end

callback!(app, Output("power", "figure"), Input("slider", "value")) do value
    powplot(value)
end

run_server(app)

Result

Updated 2022/3/5

It seems the current Dash.jl does not work the example above.
I've fixed the example as below:

using Dash
using PlotlyJS

#      Status `~/.julia/environments/v1.7/Project.toml`
#  [1b08a953] Dash v1.1.2

function powplot(n)
    x = 0:0.01:1
    y = x .^ n
    p = plot(x, y, mode="lines")
    p.plot 
end

app =
    dash(external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"])

app.layout = html_div(style = Dict(:width => "50%")) do
    html_h1("Hello Dash"),
    html_div() do
        html_div("slider", style = (width = "10%", display = "inline-block")),
        html_div(dcc_slider(
            id = "slider",
            min = 0,
            max = 9,
            marks = Dict(i => "$i" for i = 0:9),
            value = 1,
        ),style = (width = "70%", display = "inline-block"))
    end,
    html_br(),
    dcc_graph(id = "power", figure = powplot(1))
end

callback!(app, Output("power", "figure"), Input("slider", "value")) do value
    powplot(value)
end

run_server(app)

[waralex]

Yes, this is a great idea, thank you!
I have a repository https://github.com/waralex/DashboardsExamples with examples using Dashboards (the progenitor of Dash). I think that after the release of the first version of Dash, I will rewrite all the examples in it using Dash. Maybe after that I will move it out of my github to plotly. @alexcjohnson , what do you think?

[terasakisatoshi]

Hi @waralex , good to know there are lots of examples !!!

I have a repository https://github.com/waralex/DashboardsExamples with examples using Dashboards (the progenitor of Dash).

Here is a more complicated example using PlotlyJS.jl instead of Plots.jl.

Code

# sphere.jl

using Dash
using DashHtmlComponents
using DashCoreComponents

using PlotlyJS

function drawsphere(r, N, camera)
    traces = typeof(scatter3d())[]
    φ = range(0.0, 2π, length = N)
    for θ in range(0, 2π, length = N)
        x = @. r * sin(θ) * cos(φ)
        y = @. r * sin(θ) * sin(φ)
        z = repeat([r * cos(θ)], N)
        push!(
            traces,
            scatter3d(
                x = x,
                y = y,
                z = z,
                showlegend = false,
                mode = "markers",
                marker = attr(color = :blue),
            ),
        )
    end
    layout = Layout(scene = attr(camera = camera))
    p = plot(traces, layout)
    figure =
        (data = getfield.(p.plot.data, :fields), layout = p.plot.layout.fields)
    figure
end

INIT_CAMERA_ATTR = attr(
    up = attr(x = 0, y = 0, z = 1),
    center = attr(x = 0, y = 0, z = 0),
    eye = attr(x = 1.25, y = 1.25, z = 1.25),
    projection = attr(type = "projective"),
)

# Application
app =
    dash(external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"])

# Create Custom Widget
function create_slider(name; value = 0, min = 0, max = 1, step = 0.1)
    return html_div() do
        html_div(
            name,
            style = (width = "20%", display = "inline-block", padding = "2px"),
        ),
        html_div(
            min,
            style = (width = "5%", display = "inline-block", padding = "2px"),
        ),
        html_div(
            dcc_slider(
                id = name,
                min = min,
                max = max,
                step = step,
                value = value,
            ),
            style = (width = "60%", display = "inline-block"),
        ),
        html_div(
            max,
            style = (width = "5%", display = "inline-block", padding = "2px"),
        )
    end
end

md_string = """
  # Dash.jl

  - Dash for Julia - A Julia interface to the Dash ecosystem for creating analytic web applications in Julia.
  No JavaScript required.
  - This example shows how to control camera of PlotlyJS's object.
  See [JavaScript Figure Reference: layout.scene](https://plotly.com/javascript/reference/layout/scene/#layout-scene-camera) for more details. Enjoy Julia with Dash.jl !!!
  """

# Layout
app.layout = html_div() do
    dcc_markdown(md_string),
    html_h3("up"),
    html_div() do
        html_div(style = (width = "70%",)) do
            create_slider("x_up"),
            create_slider("y_up"),
            create_slider("z_up", value = 1)
        end
    end,
    html_h3("center"),
    html_div() do
        html_div(style = (width = "70%",)) do
            create_slider("x_center"),
            create_slider("y_center"),
            create_slider("z_center")
        end
    end,
    html_h3("eye"),
    html_div() do
        html_div(style = (width = "70%",)) do
            create_slider("x_eye", value = 1.25, max = 2),
            create_slider("y_eye", value = 1.25, max = 2),
            create_slider("z_eye", value = 1.25, max = 2)
        end
    end,
    dcc_graph(id = "sphere", figure = drawsphere(2.0, 20, INIT_CAMERA_ATTR))
end

callback!(
    app,
    Output("sphere", "figure"),
    [
        Input("x_up", "value"),
        Input("y_up", "value"),
        Input("z_up", "value"),
        Input("x_center", "value"),
        Input("y_center", "value"),
        Input("z_center", "value"),
        Input("x_eye", "value"),
        Input("y_eye", "value"),
        Input("z_eye", "value"),
    ],
) do up_x, up_y, up_z, center_x, center_y, center_z, eye_x, eye_y, eye_z
    camera = attr(
        up = attr(x = up_x, y = up_y, z = up_z),
        center = attr(x = center_x, y = center_y, z = center_z),
        eye = attr(x = eye_x, y = eye_y, z = eye_z),
        projection = attr(type = "projective"),
    )
    figure = drawsphere(2.0, 20, camera)
    figure
end

run_server(app)

Result

[Moelf]

is it correct to say nearly all plots that can be done with Plots.jl + plotly() backend can be plotted in Dash.jl by using Plots.plotly_series, Plots.plotly_layout technique?

[terasakisatoshi]

In the examples I've tried, it works. Not sure "all" can do 😅

[terasakisatoshi]

I've found If we would like to display image, we can't use Plots.plotly_series technique.
Here is a workaround that uses DashHtmlComponents.html_div(src=...). (However, it is not accurate for some images due to a kind of TypeError.)

Code

# imageviewer.jl

using Base64

using Dash
using DashCoreComponents
using DashHtmlComponents
using ImageShow
using Plots
using TestImages

const remotefiles = [
    "autumn_leaves.png" ,
    "blobs.gif" ,
    "cameraman.tif" ,
    "earth_apollo17.jpg" ,
    "fabio_color_256.png" ,
    "fabio_color_512.png" ,
    "fabio_gray_256.png" ,
    "fabio_gray_512.png" ,
    "hela-cells.tif" ,
    "house.tif" ,
    "jetplane.tif" ,
    "lake_color.tif" ,
    "lake_gray.tif" ,
    "lena_color_256.tif" ,
    "lena_color_512.tif" ,
    "lena_gray_256.tif" ,
    "lena_gray_512.tif" ,
    "lena_gray_16bit.png" ,
    "livingroom.tif" ,
    "lighthouse.png" ,
    "mandril_color.tif" ,
    "mandril_gray.tif" ,
    "mandrill.tiff" ,
    "m51.tif" ,
    "moonsurface.tiff" ,
    "mountainstream.png" ,
    "mri-stack.tif" ,
    "multi-channel-time-series.ome.tif" ,
    "peppers_color.tif" ,
    "peppers_gray.tif" ,
    "pirate.tif" ,
    "toucan.png" ,
    "walkbridge.tif" ,
    "woman_blonde.tif" ,
    "woman_darkhair.tif" ,
]

function encode(io::IOBuffer, img)
    io2=IOBuffer()
    b64pipe=Base64EncodePipe(io2)
    write(io,"data:image/png;base64,")
    show(b64pipe, MIME"image/png"(), img) # will be valid if we load ImageShow.jl
    write(io, read(seekstart(io2)))
end

function encode(file::AbstractString)
    img = testimage(file)
    io = IOBuffer()
    encode(io, img)
    String(take!(io))
end

app = dash(external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"])

app.layout = html_div() do 
    html_h1("ImageViewer using Dash.jl"),
    dcc_dropdown(
        id = "dropdown",
        options = [(label=f, value=f) for f in remotefiles],
        value = "cameraman.tif",
    ),
    html_img(id="viewer", src=encode("cameraman.tif"))
end

callback!(
    app,
    Output("viewer","src"),
    Input("dropdown","value"),
) do filename
    encode(filename)
end

run_server(app)

Result

[terasakisatoshi]

Check CPU Usage using Dash.jl

Real-time update application using dcc_interval

using Dash
using DashCoreComponents
using DashHtmlComponents

using PyCall

py"""
import psutil
"""

using Plots

const SECOND = 1000
interval = 0.5 * SECOND # msec
xmax = 60
tickstep = Int(xmax / interval * SECOND)
cpu_history = zeros(py"psutil.cpu_count(logical=True)")


app =
    dash(external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"])

    app.layout = html_div() do
    html_h1("Check CPU Usage using Dash.jl"),
    html_div("Dash.jl: Julia interface for Dash"),
    dcc_graph(id = "example-graph"),
    dcc_interval(
        id="interval-component",
        interval=interval,
        n_intervals=0,
    )
end

callback!(
    app,
    Output("example-graph","figure"),
    [Input("interval-component","n_intervals")],
) do n
    global cpu_history, interval
    percpu = py"psutil.cpu_percent(percpu=True)"
    cpu_history = hcat(cpu_history, percpu)
    cpu_history = cpu_history[begin:end, max(1,end-tickstep+1):end]
    _, len = cpu_history |> size
    p = plot(
        range(1,step=interval/SECOND,length=len),
        cpu_history',
        xlim=[0, xmax],
        ylim=[0, 100],
        label=:none,
        xticks = 0:10:xmax,
        yticks = 0:25:100,
    )
    figure = (data = Plots.plotly_series(p), layout = Plots.plotly_layout(p))
    figure
end

run_server(app, "127.0.0.1", 8050, debug = true)

[PallHaraldsson]

I like the look of these examples, but they didn't work for me (neither those in the readme), e.g. because of the code stating with the line:

INIT_CAMERA_ATTR = attr(

[..]

ERROR: UndefVarError: attr not defined
Stacktrace:
 [1] top-level scope at REPL[71]:1

I probably have a setup problem but I do neot even find the function here in the repository.

[terasakisatoshi]

@PallHaraldsson Did you install PlotlyJS correctly ? attr is exported by PlotlyJS.

[caseykneale]

Check CPU Usage using Dash.jl

Real-time update application using dcc_interval

Is there anyway to get custom legend labels for this example? IE: Trace 1, Trace 2, Trace 3...? I blew like 2 hrs failing to do so

[terasakisatoshi]

Hi, @caseykneale

How about this code?

    cpu_count = py"psutil.cpu_count(logical=True)"
    label = reshape(["Trace $(c)" for c in 1:cpu_count], 1, cpu_count)
    p = plot(
        range(1,step=interval/SECOND,length=len),
        cpu_history',
        xlim=[0, xmax],
        ylim=[0, 100],
        xticks = 0:10:xmax,
        yticks = 0:25:100,
        label=label,
    )

This will get

note that plot function is exported by Plots.jl (not Dash.jl)

This link https://docs.juliaplots.org/latest/tutorial/#Plot-Attributes might help you.

[caseykneale]

Works well thank you! Seems like we still have the issue of PlotlyJS eating plot margins for x and y axis labels. But that's another issue for another day. Thanks you for explaining how to use the Plots.plot rather then the Dash.plot

[terasakisatoshi]

Compare code A and code B

• We can see the difference between codeA: sum((1,2,3,4)) and codeB sum([1,2,3,4]) and will find that the former is better than latter.
• We'll also find there is a great package named DashBootstrapComponents.jl.

Code

# app.jl
using Dash
using DashHtmlComponents
using DashCoreComponents
using DashBootstrapComponents

using IOCapture
using InteractiveUtils:clipboard

app = dash(external_stylesheets=[dbc_themes.BOOTSTRAP])
# app = dash(external_stylesheets=["https://codepen.io/chriddyp/pen/bWLwgP.css"])
app.layout = dbc_container(className="mxy-auto") do
    html_h1("Compare code A with B?"),
    html_div("Put your code before including codeA and codeB"),
    dcc_textarea(
        id="text-code-common",
        placeholder="common code",
        rows=10,
        style=Dict(:width => "100%"),
    ),
    html_div(id="result-common"),
    dbc_row(
        [
            dbc_col(dcc_textarea(
                id="text-codeA",
                placeholder="codeA",
                value="",
                rows=2,
                style=Dict(:width => "100%"),
            )),
            dbc_col(dcc_textarea(
                id="text-codeB",
                placeholder="codeB",
                value="",
                rows=2,
                style=Dict(:width => "100%"),
            ))
        ],
    ),
    dbc_row(
        [
            dbc_col(dbc_button("Compare", id="button-compare", block=true, color="primary", className="margin-auto", size="sm")),
        ],
    ),
    html_h3("Result", style=Dict("text-align" => "center")),
    dbc_row(
        [
            dbc_col(dcc_textarea(
                id="text-resultA",
                placeholder="resultA",
                value="",
                rows=10,
                readOnly=true,
                style=Dict(:width => "100%"),
            )),
            dbc_col(dcc_textarea(
                id="text-resultB",
                placeholder="resultB",
                value="",
                rows=10,
                readOnly=true,
                style=Dict(:width => "100%"),
            ))
        ],
    ),
    dbc_row(
        [
            dbc_col(dbc_button("Copy result A", id="button-copyA", color="primary")),
            dbc_col(dbc_button("Copy result B", id="button-copyB", color="primary")),
        ],
    ),
    html_div("dummy-resultA", id="dummy-resultA", style=Dict("display" => "none")),
    html_div("dummy-resultB", id="dummy-resultB", style=Dict("display" => "none")),
    html_div("dummy-codeA", id="dummy-codeA", style=Dict("display" => "none")),
    html_div("dummy-codeB", id="dummy-codeB", style=Dict("display" => "none"))
end

# Taken from Literate.jl and modified
function sandbox()
    m = Module(gensym())
    # eval(expr) is available in the REPL (i.e. Main) so we emulate that for the sandbox
    Core.eval(m, :(eval(x) = Core.eval($m, x)))
    # modules created with Module() does not have include defined
    # abspath is needed since this will call `include_relative`
    Core.eval(m, :(include(x) = Base.include($m, abspath(x))))
    # load InteractiveUtils
    Core.eval(m, :(using InteractiveUtils))
    return m
end

sb = sandbox()

callback!(
    app,
    [Output("text-resultA", "value"), Output("text-resultB", "value"), Output("result-common", "children")],
    Input("button-compare", "n_clicks"),
    [State("text-codeA", "value"), State("text-codeB", "value"), State("text-code-common", "value")],
) do n_clicks, vA, vB, vCommon
    if isnothing(n_clicks) || n_clicks == 0
        return (nothing, nothing, nothing)
    end

    cCommon = IOCapture.capture(rethrow=Union{}) do
        include_string(sb, vCommon)
    end
    retC = nothing
    if !isnothing(vCommon) && cCommon.error
        retC = """
        $(sprint(showerror, cCommon.value))
        when executing the following code block
        ```julia
        $vCommon
        ```
        """
        @warn "$retC"
    else
        retC = nothing
    end

    cA = IOCapture.capture(rethrow=Union{}) do
        include_string(sb, vA)
    end
    cB = IOCapture.capture(rethrow=Union{}) do
        include_string(sb, vB)
    end


    if cA.error
        retA = """
        $(sprint(showerror, cA.value))
        when executing the following code block
        ```julia
        $vA
        ```
        """
    else
        retA = cA.output
    end

    if cB.error
        retB = """
        $(sprint(showerror, cB.value))
        when executing the following code block
        ```julia
        $vB
        ```
        """
    else
        retB = cB.output
    end

    return (retA, retB, retC)
end

callback!(
    app,
    Output("dummy-resultA", "children"),
    Input("button-copyA", "n_clicks"),
    State("text-resultA", "value"),
) do n_clicks, value
    if !isnothing(n_clicks) && n_clicks > 0
        return clipboard(value)
    end
end

callback!(
    app,
    Output("dummy-resultB", "children"),
    Input("button-copyB", "n_clicks"),
    State("text-resultB", "value"),
) do n_clicks, value
    if !isnothing(n_clicks) && n_clicks > 0
        return clipboard(value)
    end
end

run_server(app, debug=true)

Usage

• Install Dash, DashCoreComponents, DashHtmlComponents, DashBootstrapComponents and IOCapture
• julia app.jl

Result

Edit

Updated at 2022/08/14

# app.jl
using Dash
using DashBootstrapComponents

using IOCapture
using InteractiveUtils: clipboard

app = dash(external_stylesheets = [dbc_themes.BOOTSTRAP])

app.layout = dbc_container(className = "mxy-auto") do
    html_h1("Compare code A with B?"),
    html_div("Put your code before including codeA and codeB"),
    dcc_textarea(
        id = "text-code-common",
        placeholder = "common code",
        rows = 10,
        style = Dict(:width => "100%"),
    ),
    html_div(id = "result-common"),
    dbc_row([
        dbc_col([
            html_h2("codeA"),
            dcc_textarea(
                id = "text-codeA",
                placeholder = "codeA",
                value = "",
                rows = 2,
                style = Dict(:width => "100%"),
            ),
        ]),
        dbc_col([
            html_h2("codeB"),
            dcc_textarea(
                id = "text-codeB",
                placeholder = "codeB",
                value = "",
                rows = 2,
                style = Dict(:width => "100%"),
            ),
        ]),
    ],),
    dbc_row([
        dbc_col(
            dbc_button(
                "Compare",
                id = "button-compare",
                color = "primary",
                className = "margin-auto",
                size = "sm",
            ),
        ),
    ],),
    html_h3("Result", style = Dict("text-align" => "center")),
    dbc_row([
        dbc_col(
            dcc_textarea(
                id = "text-resultA",
                placeholder = "resultA",
                value = "",
                rows = 10,
                readOnly = true,
                style = Dict(:width => "100%"),
            ),
        ),
        dbc_col(
            dcc_textarea(
                id = "text-resultB",
                placeholder = "resultB",
                value = "",
                rows = 10,
                readOnly = true,
                style = Dict(:width => "100%"),
            ),
        ),
    ],),
    dbc_row([
        dbc_col(dbc_button("Copy result A", id = "button-copyA", color = "primary")),
        dbc_col(dbc_button("Copy result B", id = "button-copyB", color = "primary")),
    ],),
    html_div("dummy-resultA", id = "dummy-resultA", style = Dict("display" => "none")),
    html_div("dummy-resultB", id = "dummy-resultB", style = Dict("display" => "none")),
    html_div("dummy-codeA", id = "dummy-codeA", style = Dict("display" => "none")),
    html_div("dummy-codeB", id = "dummy-codeB", style = Dict("display" => "none"))
end

# Taken from Literate.jl and modified
function sandbox()
    m = Module(gensym())
    # eval(expr) is available in the REPL (i.e. Main) so we emulate that for the sandbox
    Core.eval(m, :(eval(x) = Core.eval($m, x)))
    # modules created with Module() does not have include defined
    # abspath is needed since this will call `include_relative`
    Core.eval(m, :(include(x) = Base.include($m, abspath(x))))
    # load InteractiveUtils
    Core.eval(m, :(using InteractiveUtils))
    return m
end

sb = sandbox()

callback!(
    app,
    [
        Output("text-resultA", "value"),
        Output("text-resultB", "value"),
        Output("result-common", "children"),
    ],
    Input("button-compare", "n_clicks"),
    [
        State("text-codeA", "value"),
        State("text-codeB", "value"),
        State("text-code-common", "value"),
    ],
) do n_clicks, vA, vB, vCommon
    if isnothing(n_clicks) || n_clicks == 0
        return (nothing, nothing, nothing)
    end

    cCommon = IOCapture.capture(rethrow = Union{}) do
        include_string(sb, vCommon)
    end
    retC = nothing
    if !isnothing(vCommon) && cCommon.error
        retC = """
        $(sprint(showerror, cCommon.value))
        when executing the following code block
        ```julia
        $vCommon
        ```
        """
        @warn "$retC"
    else
        retC = nothing
    end

    cA = IOCapture.capture(rethrow = Union{}) do
        include_string(sb, vA)
    end
    cB = IOCapture.capture(rethrow = Union{}) do
        include_string(sb, vB)
    end


    if cA.error
        retA = """
        $(sprint(showerror, cA.value))
        when executing the following code block
        ```julia
        $vA
        ```
        """
    else
        retA = cA.output
    end

    if cB.error
        retB = """
        $(sprint(showerror, cB.value))
        when executing the following code block
        ```julia
        $vB
        ```
        """
    else
        retB = cB.output
    end

    return (retA, retB, retC)
end

callback!(
    app,
    Output("dummy-resultA", "children"),
    Input("button-copyA", "n_clicks"),
    State("text-resultA", "value"),
) do n_clicks, value
    if !isnothing(n_clicks) && n_clicks > 0
        return clipboard(value)
    end
end

callback!(
    app,
    Output("dummy-resultB", "children"),
    Input("button-copyB", "n_clicks"),
    State("text-resultB", "value"),
) do n_clicks, value
    if !isnothing(n_clicks) && n_clicks > 0
        return clipboard(value)
    end
end

run_server(app, debug = true)

[john-waczak]

Is there a way to get the y-axis and the y-ticks to show up?

[jorge-jardim]

Works well thank you! Seems like we still have the issue of PlotlyJS eating plot margins for x and y axis labels. But that's another issue for another day. Thanks you for explaining how to use the Plots.plot rather then the Dash.plot

Is there a way to get the y-axis and the y-ticks to show up?

Im facing the same problem.