Note: Dash.NET is currently considered experimental. If your organization is interested in sponsoring Dash.NET, please get in touch.

Live Updating Components

The DCC.Interval.interval Component

Components in Dash usually update through user interaction like selecting a dropdown, dragging a slider, or hovering over points.

If you're building an application for monitoring, you may want to update components in your application every few seconds or minutes.

The DCC.Interval.interval element allows you to update components on a predefined interval. The n_intervals property is an integer that is automatically incremented every time interval milliseconds pass. You can listen to this variable inside your app's callback to fire the callback on a predefined interval.

This example pulls data from live satellite feeds and updates the graph and the text every second.

open Dash.NET
open System

let dslLayout =
    Html.div [
        Attr.children [
            Html.h1 [ Attr.id "time_display"; Attr.children "The time is:" ]
            Interval.interval "interval_component" [
                Interval.Attr.interval 1000
                Interval.Attr.nIntervals 0
            ]
        ]
    ]

let changeTextCallback =
    Callback.singleOut (
        "interval_component" @. (CustomProperty "n_intervals"),
        "time_display" @. Children,
        fun (nIntervals: int) ->
            "time_display" @. Children => sprintf "The time is: %s" (DateTimeOffset.Now.ToString())
        , PreventInitialCall = false
    )

[<EntryPoint>]
let main args =
    DashApp.initDefault()
    |> DashApp.withLayout dslLayout
    |> DashApp.addCallback changeTextCallback
    |> DashApp.run args

Sign up for Dash Club → Two free cheat sheets plus updates from Chris Parmer and Adam Schroeder delivered to your inbox every two months. Includes tips and tricks, community apps, and deep dives into the Dash architecture. Join now.