We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to apply for this job!

Login or register
to publish this job!

Login or register
to save this job!

Login or register
to save interesting jobs!

Login or register
to get access to all your job applications!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Login or register
to save articles!

Engineers who find a new job through WorksHub average a 15% increase in salary 🚀

Blog hero image

Elm Line Charts Part III: Lines and the Chart

Eleanor Holley 21 January, 2021 | 2 min read

This is the last installment of a series describing how to configure an Elm LineChart. In the previous post I used a viewmodel to configure an axis, so this post will cover how to use lists of those viewmodels to plot the rest of the chart.

Converting to the ViewModel

I want this line chart to have three lines based on my ChartModel from the previous post, and I know I'm starting with a model that has a list of Hospitalizations, so I'll start with ways to convert between the two.

icuBeds: List Hospitalization -> List ChartModel
icuBeds days = 
  List.map (\d -> d.icuBedsTotal/d.icuBedsTotalCapacity 
                  |> \ratio -> ratio * 100 
                  |> ChartModel d.date
           ) days

nonIcuBeds: List Hospitalization -> List ChartModel
nonIcuBeds days = 
  List.map(\d ->
    d.acuteNonIcuBedsTotal/d.acuteNonIcuBedsTotalCapacity 
    |> \ratio -> ratio * 100 
    |> ChartModel d.date 
    ) days

ventilators : List Hospitalization -> List ChartModel
ventilators days = List.map (\d ->  
  d.ventilatorsTotal/d.ventilatorsTotalCapacity 
  |> \ratio -> ratio * 100 
  |> ChartModel d.date
  ) days

All I'm doing here is taking different fields from Hospitalization, converting to a percent, and piping out to a ChartModel. I've configured this for each of the three percentages I want on my chart.

Draw the Rest of the Owl

I'm happy with the rest of the defaults and they don't generally need a ton of explanation, so I'm just going to dump this pile of code unceremoniously here so that I can paste it someplace else when I need it.

chart : Time.Zone -> List Hospitalization -> Html Msg
chart zone days = LineChart.viewCustom 
{ x = xAxisConfig zone 
, y = Axis.default 400 "Volume" .val 
, area = Area.default 
, container = Container.default "hospitalization-raw-chart" 
, interpolation = Interpolation.default 
, intersection = Intersection.default 
, legends = Legends.default 
, events = Events.default 
, junk = Junk.default 
, grid = Grid.default 
, line = Line.default 
, dots = Dots.default 
} 
[ LineChart.line Colors.blue Dots.none "ICU Beds" (icuBeds days) 
, LineChart.line Colors.purple Dots.none "Acute Non-ICU Beds" (nonIcuBeds days) 
, LineChart.line Colors.red Dots.none "Ventilators" (ventilators days)
]

As you can see you plug in your time zone and some default values and a list of lines based on the functions defined above and give it a good stir.

In all seriousness, the important thing here is to use viewCustom rather than fiddle with making the numbered signatures work. (One thing I absolutely do not understand is the way that Elm deals with parametric polymorphism by putting numbers in the signatures. Elm, you are flawed and I love you anyway.)

Originally published on webbureaucrat.gitlab.io

Author's avatar
Eleanor Holley
an enthusiastic functional programmer.
    Elm
    ReasonML
    C#
    Scala

Related Issues

cosmos / gaia
  • Started
  • 0
  • 1
  • Intermediate
  • Go
cosmos / gaia
  • Started
  • 0
  • 2
  • Intermediate
  • Go
cosmos / ibc
  • Open
  • 0
  • 0
  • Intermediate
  • TeX
cosmos / ibc
cosmos / ibc
  • Started
  • 0
  • 1
  • Intermediate
  • TeX
viebel / klipse-clj
viebel / klipse-clj
  • Started
  • 0
  • 4
  • Intermediate
  • Clojure
viebel / klipse
  • Started
  • 0
  • 1
  • Intermediate
  • Clojure
viebel / klipse
  • 1
  • 1
  • Intermediate
  • Clojure
viebel / klipse
  • Started
  • 0
  • 4
  • Intermediate
  • Clojure
  • $80

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through WorksHub average a 15% increase in salary.

Start with GitHubStart with Stack OverflowStart with Email