Plot

This library aims to allow you to visualize a variety of graphs in an intuitve manner without comprimising flexibility regarding configuration. It is insprired by the elm-html api, using the element attrs children pattern.

This is still in beta! The api might and probably will change!

Definitions

type alias Attribute =

Config -> Config

type Element msg

Represents a child element of the plot.

type alias Point =

( Float, Float )

Convinience type to represent coordinates.

type alias Style =

List ( String, String )

Convinience type to represent style.

Elements

plot : List Attribute -> List (Element msg) -> Svg msg

This is the function processing your entire plot configuration. Pass your attributes and elements to this function and a svg plot will be returned!

plotInteractive :

List Attribute

-> List (Element (Interaction msg))

-> Svg (Interaction msg)

So this is like plot, except the message to is Interaction msg. It's a message wrapping your message, so you can use the build in inteactions (like the hint!) in the plot as well as adding your own. See this example.

xAxis : List (Attribute msg) -> Element msg

yAxis : List (Attribute msg) -> Element msg

hint : List (Attribute msg) -> Maybe Point -> Element msg

Adds a hint to your plot. See this example

Remember to use plotInteractive for the events to be processed!.

verticalGrid : List (Attribute msg) -> Element msg

horizontalGrid : List (Attribute msg) -> Element msg

custom : ((Point -> Point) -> Svg msg) -> Element msg

This element is passed a function which can translate your values into svg coordinates. This way you can build your own serie types. Although if you feel like you're missing something let me know!

Series

scatter : List (Attribute msg) -> List Point -> Element msg

line : List (Attribute msg) -> List Point -> Element msg

area : List (Attribute msg) -> List Point -> Element msg

bars :

List (Attribute msg)

-> List (List (StyleAttribute msg))

-> List Data

-> Element msg

This wraps all your bar series.

Styling and sizes

classes : List String -> Attribute

Adds classes to the svg element.

id : String -> Attribute

Adds an id to the svg element.

margin : ( Int, Int, Int, Int ) -> Attribute

Specify margin around the plot. Useful when your ticks are outside the plot and you would like to add space to see them! Values are in pixels and the format is ( top, right, bottom, left ).

Default: ( 0, 0, 0, 0 )

padding : ( Int, Int ) -> Attribute

Adds padding to your plot, meaning extra space below and above the lowest and highest point in your plot. The unit is pixels and the format is ( bottom, top ).

Default: ( 0, 0 )

size : ( Int, Int ) -> Attribute

Specify the size of your plot in pixels and in the format of ( width, height ).

Default: ( 800, 500 )

style : Style -> Attribute

Adds styles to the svg element.

domainLowest : (Float -> Float) -> Attribute

Alter the domain's lower boundery. The function provided will be passed the lowest y-value present in any of your series and the result will be the lower boundery of your series. So if you would like the lowest boundery to simply be the edge of your series, then set this attribute to the function identity. If you want it to always be -5, then set this attribute to the function always -5.

The default is identity.

Note: If you are using padding as well, the extra padding will still be added outside the domain.

domainHighest : (Float -> Float) -> Attribute

Alter the domain's upper boundery. The function provided will be passed the lowest y-value present in any of your series and the result will be the upper boundery of your series. So if you would like the lowest boundery to always be 10, then set this attribute to the function always 10.

The default is identity.

Note: If you are using padding as well, the extra padding will still be added outside the domain.

rangeLowest : (Float -> Float) -> Attribute

Provide a function to determine the lower boundery of range. See domainLowest and imagine we're talking about the x-axis.

rangeHighest : (Float -> Float) -> Attribute

Provide a function to determine the upper boundery of range. See domainHighest and imagine we're talking about the x-axis.

State

For an example of the update flow see this example.

type State

initialState : State

update : Msg -> State -> State

type Interaction msg

= Internal Msg

| Custom msg

getHoveredValue : State -> Maybe Point

Get the hovered position from state.

terezka/elm-plot/4.0.0