Graph

Graph is a bare-bones package for rendering data as line and bar charts.

lineChart : GraphAttributes -> List Point -> Html msg


barChart : GraphAttributes -> List Float -> Html msg

For a demo, see https://jxxcarlson.github.io/app/gamblers_ruin.html

Line Chart Example

Let

data =
    [(0,0), (10, 10), (20,0), (30,15), (40,0)]


graphAttributes =
     {   graphHeight = 100
       , graphWidth = 400
       , options = [ ]
     }


lineChart graphAttributes data

For more control over the part of the data displayed, use lineChartWithDataWindow. To customize the appearance of the graph, use the options field -- change the color of the line, place tick marks on the x and y axes. For example, one could say options = [Color "blue"].

Bar Chart Example

Let

data = [5, 10, 20, 30, 20, 20, 5]


graphAttributes =
    {   graphHeight = 100
      , graphWidth = 400
      , options = [Color "rgb(200,0,0)", DeltaX 15,  XTickmarks 2, YTickmarks 5]
    }


barChart graphAttributes data

lineChart : GraphAttributes -> List Point -> Html msg

Render a list of points to Html as a line chart using the parameters of GraphAttributes.

lineChartWithDataWindow : DataWindow -> GraphAttributes -> List Point -> Html msg

Render a list of points to Html as a line chart using the parameters of GraphAttributes and DataWindow.

barChart : GraphAttributes -> List Float -> Html msg

Render a list of numbers to Html as a bar chart using the parameters of GraphAttributes and DataWindow. If desired, the data window can be set from the list of points using getDataWindow.

type alias Point =

( Float, Float )

The data to be graphed by Graph.asHtml is a List Point.

type alias DataWindow =

{ xMax : Float

, xMin : Float

, yMax : Float

, yMin : Float

}

A DataWindow is a rectangle which determines the x and y ranges of the data to be displayed..

type alias GraphAttributes =

{ graphHeight : Float

, graphWidth : Float

, options : List Option

}

A GraphAttributes value defines the size on the screen occupied by the graph and the color of the line.

type Option

= Color String

| XTickmarks Int

| YTickmarks Int

| DeltaX Float

Use the options field to customize the line chart. Examples: (1) [Color "blue"] makes the charted line blue (2) [Color "blue", XTickmarks 10, YTickmarks 5] places 10 tick marks along the x-axis and 5 tick marks along the y-axis, (3) options = [ ] produces a bare-bones graph.

The DeltaX option is used to specify the distnce from the leading edge of one bar to the next in bar graph.

lineChartAsSVG : GraphAttributes -> List Point -> Svg msg

Render a list of points to SVG as a line chart using the parameters of GraphAttributes.

lineChartAsSVGWithDataWindow : DataWindow -> GraphAttributes -> List Point -> Svg msg

Render a list of points to Svg as a line chart using the parameters of GraphAttributes and DataWindow.

barChartAsSVG : GraphAttributes -> List Float -> Svg msg

Render a list of numbers to Svg as a bar chart using the parameters of GraphAttributes and DataWindow. If desired, the data window can be set from the list of points using getDataWindow.

Modules

Graph

jxxcarlson/elm-graph/1.0.0

Graph

Modules