Plot multiple series with different data.

multiple_series_varying_data.elm

import Svg exposing (Svg, linearGradient, stop)
import Svg.Attributes exposing (id, stroke, offset, stopColor, stopOpacity)
import Plot exposing (..)


type alias MyData =
    { areaData : List ( Float, Float )
    , lineData : List ( Float, Float )
    }


data : MyData
data =
  { areaData = [ ( 0, 10 ), ( 2, 12 ), ( 4, 27 ), ( 6, 25 ), ( 8, 46 ) ]
  , lineData = [ ( 0, 12 ), ( 2, 14 ), ( 4, 29 ), ( 6, 27 ), ( 8, 48 ) ]
  }


defs : List (Svg msg)
defs =
  [ linearGradient
    [ id "Gradient" ]
    [ stop [ offset "0%", stopColor "rgba(253, 185, 231, 0.5)" ] []
    , stop [ offset "50%", stopColor "#e4eeff", stopOpacity "0.5" ] []
    , stop [ offset "100%", stopColor "#cfd8ea" ] []
    ]
  ]


drawArea : MyData -> List (DataPoint msg)
drawArea data =
    List.map (\( x, y ) -> clear x y) data.areaData
    

customArea : Series MyData msg
customArea =
  { axis = normalAxis
  , interpolation = Monotone (Just "url(#Gradient)") [ stroke "transparent" ]
  , toDataPoints = drawArea
  }


drawLine : MyData -> List (DataPoint msg)
drawLine data =
    List.map (\( x, y ) -> circle x y) data.lineData


customLine : Series MyData msg
customLine =
  { axis = normalAxis
  , interpolation = None
  , toDataPoints = drawLine
  }


main : Svg.Svg a
main =
  viewSeriesCustom
    { defaultSeriesPlotCustomizations | defs = defs }
    [ customArea
    , customLine
    ]
    data

The first revision is the original gradient example. The second revision is the modified example that plots two different series of data.