jweir/sparkline/4.0.0

Sparkline

This library is for generating inline graphs, called sparklines.

Definition

sparkline : Size -> List (Param a) -> Svg a

The entry point to create a graph. See Param.

type Param a
= Bar Float DataSet
| Dot DataSet
| Line DataSet
| Area DataSet
| Domain DataSet
| Label (LabelSet a)
| ZeroLine
| Independent (Param a)
| Style (List (Attribute a)) (Param a)

Drawing a sparkline occurs by passing params

      -- data is tuples with (x,y) values as floats
      data = [(0,0),(5,10),(10,12)]
      data2 = [(0,-5),(7,2),(12,14)]


      sparkline
          (100,10,5,5)    -- the width, height, top/bottom margin, left/right margin
          [ Line data ]   -- type of graph to draw with the data

Multiple params can be included to have muliple graphs. Each will have its data scaled relatively to one another. The graphs are drawn in the order they are given. So last graph will be drawn on top.

      sparkline
          (100,10,5,5)    -- the width, height, top/bottom margin, left/right margin
          [ Line data
          , Line data2
          ]

The three types of graphs are

  • Line creates a line graph
  • Area creates a graph meant to be filled
  • Dot draws a dot at each point. Set the radius of the dot by styling it |> Style [Svg.r "3"]
  • Bar <BarWidth> Draws a bar graph. This requires defining what the width of the bar.
  • Label plots text on the graph

There are also some options which can be applied to each graph:

  • Domain includes the given data into the graph's domain. This is useful when creating multiple graphs that need to have the same scale.
  • Independent will scale this graph's dataset separately from the rest of the graphs.
  • Style allows applying Svg.Attribute styles to the rendered svg.

Finally there is the ZeroLine param which will draw a line at the 0 y axis for the data. This does not apply to any graphs rendered with Independent.

**Examples*

See Example.elm for more examples.

    -- style a ZeroLine to be very light
    sparkline
        ( 200, 5, 5, 5 )
        [ ZeroLine |> Style [ Svg.strokeWidth "0.5", Svg.stroke "rgba(0,0,0,0.3)" ]
        , Bar 20 [ ( 0, 2 ) , ( 10, 30 ) , ( 20, 10 ) ]
        ]


    -- graph the datasets to not be relative to one another.  The params can be piped.
    sparkline
        ( 200, 10, 5, 5 )
        [ Line data |> Independent
        , Line data2 |> Independent
        ]

Data types

type alias Point =
( Float, Float )

Tuple of (x,y) value

type alias DataSet =
List Point

The data to be rendered.

type alias LabelSet a =
List ( Point, List (Attribute a), Text )

The data and text to use for labeling

type alias Size =
{ width : Float
, height : Float
, marginLR : Float
, marginTB : Float
}

Defines the size of the graph (width, height, leftRightMargin, topBottomMargin)