This library is for generating inline graphs, called sparklines.
sparkline : Size -> List (Param a) -> Svg a
The entry point to create a graph. See Param.
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
|> Style [Svg.r "3"]
There are also some options which can be applied to each graph:
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
]
( Basics.Float, Basics.Float )
Tuple of (x,y) value
List Point
The data to be rendered.
List ( Point
, List (Svg.Attribute a)
, Text
}
The data and text to use for labeling
{ width : Basics.Float
, height : Basics.Float
, marginLR : Basics.Float
, marginTB : Basics.Float
}
Defines the size of the graph (width, height, leftRightMargin, topBottomMargin)