ohri-anurag / easy-charts / LineChart

This module is for creating Line Charts.

NOTE: Go through the Setup section initially. It is required to get the tooltip functionality of this library.

Setup (Model, Msg, init and update)


type ChartModel

Need this for determining if a point on the chart has been hovered on. This should be a part of your model.

type Model =
  { otherData : OtherData
  , chartModel : ChartModel
  }


type ChartMsg

Used to handle tooltips for the line chart. This should be added to your own msg type.

type Msg
  = Msg1 Data1
  | Msg2 Data2
  | ChartMessage ChartMsg

initChartModel : ChartModel

Initial state for ChartModel type. Should be a part of your init.

init : Model
init =
  { otherData = {...}
  , chartModel = initChartModel
  }

updateChartModel : ChartMsg -> ChartModel -> ChartModel

Used to update the ChartModel type. This should be used inside your update function.

update : Msg -> Model -> Model
update msg model =
  case msg of
    ChartMessage chartMsg ->
      { model
      | chartModel = updateChartModel chartMsg model.chartModel
      }
    NoOp -> model

Creating data


type LineChartDataSet

Represents one line of the Line Chart.

createDataSet : String -> List Basics.Float -> TransparentColor -> LineChartDataSet

Create a LineChartDataSet by providing: 1. A label for the dataset 2. A list of values 3. A color which will be used to plot this dataset on the chart. Click here for the color module.

One dataset corresponds to one line on the chart.

import Palette.X11 exposing (black)
import TransparentColor exposing (opaque, fromColor)

serverCost :: LineChartDataSet
serverCost = createDataSet "Server Cost" [ 20.4, 30.2, 10] (fromColor opaque black)


type LineChartData

Represents the data that will be used to draw the Line Chart. Many lines can be drawn in one chart.

createData : List String -> List LineChartDataSet -> LineChartData

Takes a List of string labels, and data sets. Each data set represents a line on the Line Chart.

import Palette.X11 exposing (green, red)
import TransparentColor exposing (opaque, fromColor)

data :: LineChartData
data = createData ["Mon", "Tue", "Wed", "Thu", "Fri"]
  [ createDataSet "Wake up time" [7, 8, 9, 8, 7] (fromColor opaque green)
  , createDataSet "Sleeping time" [23, 22, 21, 22, 23] (fromColor opaque red)
  ]

Plotting

lineChart : LineChartOptions -> LineChartData -> (ChartMsg -> msg) -> ChartModel -> Html msg

Used to draw the line chart. The arguments are: 1. Options to configure the line chart. 2. The data to be displayed on the chart. 3. A msg constructor to convert ChartMsg into your own msg type. 4. The chart model, which should be stored inside your Elm model.

Following code shows how to setup parts 3 and 4.

import LineChart exposing (lineChart)

type Model =
  { otherData : OtherData
  , chartModel : ChartModel
  }

type Msg
  = Msg1 Data1
  | Msg2 Data2
  | ChartMessage ChartMsg

init : Model
init =
  { otherData = {...}
  , chartModel = initChartModel
  }

view : Model -> Html Msg
view model = lineChart defaultLineChartOptions data ChartMessage model.chartModel

update : Msg -> Model -> Model
update msg model =
  case msg of
    ChartMessage chartMsg ->
      { model
      | chartModel = updateChartModel chartMsg model.chartModel
      }
    NoOp -> model

Configuring


type LineChartOptions

Used to configure the line chart.

defaultLineChartOptions : LineChartOptions

Default options for configuring the line chart.

options : LineChartOptions
options =
  setChartWidth 1200 defaultLineChartOptions
  |> setChartHeight 800
  |> setTooltipWidth 200
  |> setTooltipHeight 100
  |> setLabelWidth 200
  |> setLabelHeight 200
  |> setPointRadius 4

setChartWidth : Basics.Int -> LineChartOptions -> LineChartOptions

Set the Chart Width.

setChartHeight : Basics.Int -> LineChartOptions -> LineChartOptions

Set the Chart Height.

setTooltipWidth : Basics.Int -> LineChartOptions -> LineChartOptions

Set the Tooltip Width.

setTooltipHeight : Basics.Int -> LineChartOptions -> LineChartOptions

Set the Tooltip Height.

setLabelWidth : Basics.Int -> LineChartOptions -> LineChartOptions

Set the Label Width.

setLabelRotation : Basics.Int -> LineChartOptions -> LineChartOptions

Set the Label Rotation in degrees.

  1. If you set the label rotation (even if it is 0), label will be rotated from its end, counter-clockwise.
  2. If you don't set the label rotation (by not invoking this function), label will be center aligned with its axis, which is the default.

setValueWidth : Basics.Int -> LineChartOptions -> LineChartOptions

Set the Value Width.

setPointRadius : Basics.Int -> LineChartOptions -> LineChartOptions

Set the point radius on the chart. Hovered points double their radius.

setLegendWidth : Basics.Int -> LineChartOptions -> LineChartOptions

Set the width of one legend key.

setLegendSpacing : Basics.Int -> LineChartOptions -> LineChartOptions

Set the spacing between two legend keys.