ohri-anurag / easy-charts / PieChart

This module is used for creating Pie 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 PieModel

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

type Model =
  { otherData : OtherData
  , pieModel : PieModel
  }


type PieMsg

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

type Msg
  = Msg1 Data1
  | Msg2 Data2
  | PieMessage PieMsg

initPieModel : PieModel

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

init : Model
init =
  { otherData = {...}
  , pieModel = initPieModel
  }

updatePieModel : PieMsg -> PieModel -> PieModel

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

update : Msg -> Model -> Model
update msg model =
  case msg of
    PieMessage pieMsg ->
      { model
      | pieModel = updatePieModel pieMsg model.pieModel
      }
    NoOp -> model

Creating data


type PieChartDataSet

Represents one sector of the Pie Chart.

createDataSet : String -> Basics.Float -> TransparentColor -> PieChartDataSet

Create a PieChartDataSet by providing: 1. A label for the dataset 2. A value for the dataset 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 sector on the chart.

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

serverCost :: PieChartDataSet
serverCost = createDataSet "Server Cost" 20.4 (fromColor opaque black)


type PieChartData

Represents the data that will be used to draw the Pie Chart.

createData : List PieChartDataSet -> PieChartData

Takes a List of data sets. Each data set represents a sector on the Pie Chart.

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

data :: PieChartData
data = createData
  [ createDataSet "Delivery Time" 30 (fromColor opaque green)
  , createDataSet "Manufacturing Time" 180 (fromColor opaque red)
  ]

Plotting

pieChart : PieChartOptions -> PieChartData -> (PieMsg -> msg) -> PieModel -> Html msg

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

Following code shows how to setup parts 3 and 4.

import PieChart exposing (pieChart)

type Model =
  { otherData : OtherData
  , pieModel : PieModel
  }

type Msg
  = Msg1 Data1
  | Msg2 Data2
  | PieMessage PieMsg

init : Model
init =
  { otherData = {...}
  , pieModel = initPieModel
  }

view : Model -> Html Msg
view model = pieChart defaultPieChartOptions data PieMessage model.pieModel

update : Msg -> Model -> Model
update msg model =
  case msg of
    PieMessage pieMsg ->
      { model
      | pieModel = updatePieModel pieMsg model.pieModel
      }
    NoOp -> model

Configuring


type PieChartOptions

Used to configure the pie chart.

defaultPieChartOptions : PieChartOptions

Default options for configuring the line chart.

options : PieChartOptions
options =
  setChartWidth 1200 defaultPieChartOptions
  |> setChartHeight 800
  |> setTooltipWidth 200
  |> setTooltipHeight 100

setChartWidth : Basics.Int -> PieChartOptions -> PieChartOptions

Set the Chart Width.

setChartHeight : Basics.Int -> PieChartOptions -> PieChartOptions

Set the Chart Height.

setTooltipWidth : Basics.Int -> PieChartOptions -> PieChartOptions

Set the Tooltip Width.

setTooltipHeight : Basics.Int -> PieChartOptions -> PieChartOptions

Set the Tooltip Height.

setLegendWidth : Basics.Int -> PieChartOptions -> PieChartOptions

Set the width of one legend key.

setLegendSpacing : Basics.Int -> PieChartOptions -> PieChartOptions

Set the spacing between two legend keys.