Elm : How to Plot linear graph with Timestamp

Question

[
    {
        "timestamp": "2020-04-01T09:47:13+08:00",
        "value": 5.2
    },
    {
        "timestamp": "2020-04-01T09:47:21+08:00",
        "value": 17.7
    },
    {
        "timestamp": "2020-04-01T09:47:21+08:00",
        "value": 27.7
    }
]

If i have timestamp and value like above data in JSON, i would like to use it to plot a linear time graph but i have no idea how to deal with the conversion of ISO format timestamp ... Hence , i am not able to modify the X axis into time like 0623 etc...

I had made a simple ellie-app with format Time.Posix. Any help is appreciate...

ellie-app -> https://ellie-app.com/8RrXJW68WP6a1

Answer 1

What about using https://github.com/rtfeldman/elm-iso8601-date-strings/tree/1.1.3? Then it comes down to using it like the following:

import Iso8601
import Maybe.Extra as ME

times =
 [
   ("2015-12-01T03:00:00+03:00", 2.5)
   ,("2016-01-01T03:00:00+03:00", 2)
   ,("2016-01-08T03:00:00+03:00", 3.5)
   ,("2016-01-15T03:00:00+03:00", 2)
   ,("2016-01-22T03:00:00+03:00", 3)
   ,("2016-02-01T03:00:00+03:00", 1)
   ,("2016-03-01T03:00:00+03:00", 1.2)
  ]

processTime : (String, Float) -> Maybe (Time.Posix, Float)
processTime (ts, s) =
  Maybe.map (\t -> (t, s)) (Result.toMaybe (Iso8601.toTime ts))


parsedTimes :  Maybe (List (Time.Posix, Float))
parsedTimes = ME.combine (List.map processTime times)


main =
  case parsedTimes of
    Just ts ->
      view ts
    Nothing ->
      Html.text "hello"

Or on Ellie: https://ellie-app.com/8RKfbqWmdcfa1