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.
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
}
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
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)
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)
]
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
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.