Get updates via , Github, or RSS | About

Episode 29: Elm Plot Mar 23, 2017

Terezka’s Elm Plot gives you a simple API for drawing charts. You choose the type of chart, give it X and Y values, and Elm Plot handles the dirty work of sizing the chart and drawing the line, points, and bars in SVG.

Charts can be customized as much as you want, or you can stick with the good looking defaults.

Examples

View.elm

plot : Model -> Dict Int Float -> Html Msg
plot model gains =
    Plot.viewSeries
        [ Plot.line (List.map (\{ index, gain } -> Plot.triangle (toFloat index) gain))
        , Plot.line
            (List.map
                (\{ index } ->
                    let
                        gain =
                            Dict.get index gains
                                |> Maybe.withDefault 0

                        color =
                            if gain > 0 then
                                "black"
                            else
                                "red"
                    in
                        Plot.dot (Plot.viewTriangle color) (toFloat index) gain
                )
            )
        ]
        model.days