https://github.com/ralfnorthman/elm-zoom-plot

Zoomable line charts with nice time axes.
https://github.com/ralfnorthman/elm-zoom-plot

data-visualization elm elm-lang elm-language line-chart line-charts plot plots visualization zoom zoomable

Last synced: 25 days ago
JSON representation

Zoomable line charts with nice time axes.

• Host: GitHub
• URL: https://github.com/ralfnorthman/elm-zoom-plot
• Owner: RalfNorthman
• License: bsd-3-clause
• Created: 2019-03-18T11:47:22.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-04-20T20:56:19.000Z (over 3 years ago)
• Last Synced: 2024-09-30T05:22:21.027Z (about 1 month ago)
• Topics: data-visualization, elm, elm-lang, elm-language, line-chart, line-charts, plot, plots, visualization, zoom, zoomable
• Language: Elm
• Homepage: https://ralfnorthman.github.io/elm-zoom-plot
• Size: 444 KB
• Stars: 5
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Zoomable Line Charts

The main objective of this package is to draw line charts which have:

* mouse drag zoom

* reasonable time axes

See it in action:

https://ralfnorthman.github.io/elm-zoom-plot/

Sample code:

```elm

import ZoomPlot as Plot

type alias Point =

    { x : Float, y : Float }

myPoints =

    [ Point 11 120

    , Point 12 121

    , Point 13 120.5

    , Point 14 119.5

    ]

type alias Model =

    { plotState : Plot.State Point }

init : Model

init =

    { plotState = Plot.init }

type Msg

    = ToPlot (Plot.Msg Point)

update : Msg -> Model -> Model

update msg model =

    case msg of

        ToPlot plotMsg ->

            { model

                | plotState =

                    Plot.update

                        plotMsg

                        model.plotState

            }

view : Model -> Html Msg

view model =

    Plot.points

        { toMsg = ToPlot

        , data = myPoints

        }

        |> Plot.drawHtml model.plotState

```