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 II: Imports and Axes

Eleanor Holley 20 January, 2021 | 2 min read

This is the second in a series of blog posts dealing with LineChart in Elm. In the previous post, I outlined how to grab the timezone as a prerequisite for time-based linecharts. In this post, I will begin to write the chart module I'm trying to use in Chicago Test Out by defining my imports and creating a custom axis.

Imports and Aliases

LineChart requires a lot of imports. For my own convenience, I'm going to leave them here.

import Html exposing (..)
import LineChartimport LineChart.Colors as Colors
import LineChart.Junk as Junk
import LineChart.Area as Area
import LineChart.Axis as Axis
import LineChart.Axis.Line as AxisLine
import LineChart.Axis.Range as Range
import LineChart.Axis.Ticks as Ticks
import LineChart.Axis.Title as Title
import LineChart.Junk as Junk
import LineChart.Dots as Dots
import LineChart.Grid as Grid
import LineChart.Dots as Dots
import LineChart.Line as Line
import LineChart.Colors as Colors
import LineChart.Events as Events
import LineChart.Legends as Legends
import LineChart.Container as Container
import LineChart.Interpolation as Interpolation
import LineChart.Axis.Intersection as Intersection
import Msg exposing (..)
import Time

The aliases are not only convenient, but are an established convention in the documentation, so they're a good idea if you'd like to copy and paste code.

Defining a View Model

Line charts are typed according to a model, and axes are configured according to specific fields within that model. It's a good design, but a consequence of that is that it often requires a generic data viewmodel specifically for the chart. (For example, let's say I have a list of records and each record represents a day. If I define the Y axis to be the number of ICU beds for that day, it cannot also be used to show the number of ventilators in use for that day.)

For this line chart, I'm definitely going to want multiple lines on the chart,and even if I didn't, it would probably be a good practice to leave that option open to extension, so let's create that model:

type alias ChartModel = { date: Float , val: Float }

While I expect the date to display as a date, the line charts library will ultimately handle that conversion–it expects a float. val is a generic name for a wrapper around any float value.

Defining an Axis

One of the reasons why I'm writing this series is that the examples in the documentation use a lot of the defaults for the library. These are great if you're trying to get a quick sense for how the library works without being overwhelmed by choices right off the bat. This series aims to be a little more in-depth and a little more oriented toward real-world usage, so I'm going to assume a certain amount of customization.

xAxisConfig : Time.Zone -> Axis.Config ChartModel msg
xAxisConfig zone = Axis.custom 
{ title = Title.default "Time" 
, variable = Just << .date 
, pixels = 1000 
, range = Range.default 
, axisLine = AxisLine.rangeFrame Colors.black 
, ticks = Ticks.time zone 5 
}

This code is fairly self-explanatory, and I'm mainly including it as copypasta for myself for the future. Basically, it's a function that takes a time zone and spits out an axis based on the .date property of our ChartModel. Also note that I'm not using the default ticks because I have found that doesn't work well with time as an axis. (The letters overlap a great deal.)

If your imports are alright, you should once again have a program in a compiling state. Next, we'll work on defining lines.

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