LChart: displaying charts in F# – Part II - Luca Bolognese

LChart: displaying charts in F# – Part II

Luca -

☕ 2 min. read

In the pre­vi­ous post on my old blog I showed how to dis­play sim­ple charts with LChart. In this one we’ll talk about more com­plex charts. I wanted to de­fine a lit­tle lan­guage for graphs for the sake of cre­at­ing a more com­plex chart in a sin­gle line of code. Remember, the sce­nario here is: I got some data, I want to dis­play it quickly in the fsi. The lan­guage has two op­er­a­tors: +’ and ++’.

+’ al­lows you to to su­per­im­pose things on a chart as in the fol­low­ing ex­am­ple.

lc.scatter(y) + lc.line(y) |> display

Notice how I can su­per­im­pose two graphs of a dif­fer­ent type and dis­play the re­sult.


Notice on the up­per right cor­ner a bizarre (Series1, Series2) leg­end. What I wanted to do, but did­n’t get around to do, was to al­low a syn­tax like

lc.scatter(y) + lc.line(y) + lc.legend(“Players”) |> display

It should be rel­a­tively triv­ial to add it to the code. Also no­tice that the y’ pa­ra­me­ter in the sec­ond chart is not needed. Data flows freely from left to right. So you can write the equiv­a­lent code be­low. This is a fea­ture that caused all sort of grief. With hind­sight it’s not worth the has­sle. That’s why you al­ways need to write your code at least twice to get it right.

lc.scatter(y) + lc.line() |> display 

Some other, more elab­o­rate charts fol­lows. Notice how data flows from left to right un­til I in­tro­duce a new vari­able (i.e. the two­plot  in­struc­tions plot dif­fer­ent box­plots)

lc.scatter(y, markerSize = 10) + lc.column() + lc.boxplot() + lc.line()  + lc.column(x) + lc.boxplot()|> display


Things would be bet­ter with names for axis, ti­tles and such. I’m not in­clud­ing them for the sake of sim­plic­ity.

lc.scatter(y, markerSize = 10) + lc.column() + (lc.line(x)  + lc.column()) + lc.scatter(markerSize = 20) |> display


If you re­mem­ber the pre­vi­ous post, we talked about box­plots and how you gen­er­ally want to have more than one on a graph. You can do that with the +’ op­er­a­tor and get this ugly chart. More work is needed here.

lc.boxplot(y = y, xname = "Players", yname = "Ratings", title = "Players' Ratings", color = Color.Blue, whiskerPercentile = 5, percentile = 30,
    showAverage = false, showMedian = false, showUnusualValues = true) +  lc.boxplot(y = x) |> display

++’ al­lows you to cre­ate new charts be­low the chart you al­ready have as in:

let h = [1.;2.5;3.1;4.;4.8;6.0;7.5;8.;9.1;15.]
let w = h |> (fun h -> h * 1.2)
lc.line(h) + lc.column() ++ lc.line(w) ++ lc.bubble() |> display


Notice the left to right flow­ing of in­for­ma­tion here as well. In the next in­stall­ment we’ll take a look at how things are im­ple­mented and why it’s all wrong.

0 Webmentions

These are webmentions via the IndieWeb and