XPlot


Google Line Chart

This example shows how to create scatter (point) charts and line charts using the XPlot.GoogleCharts library.

To create a line chart, use Chart.Line. To create a scatter (point) chart, use Chart.Scatter. In both cases, you can also combine multiple charts in the same chart area, simply by calling the functions with a list of lists (rather than with just a plan list of key value pairs)

A simple line chart

The following example calls Chart.Line with a list of key value pairs, created using a simple F# list comprehension:

1: 
Chart.Line [ for x in 0. .. 0.5 .. 6.3 -> x, sin x ]

A smooth function chart

By default, line charts use straight line segments between the points. You can add smoothing by creating Options with curveType="function" as follows:

1: 
2: 
Chart.Line [ for x in 0. .. 0.5 .. 6.3 -> x, sin x ]
|> Chart.WithOptions(Options(curveType = "function"))

You can find more information about other options that you can specify in the documentation for the Options type in the API reference. Another way to explore the available configuration options is to type dot right after the value, i.e. Options(). - and see what fields (lower-case, at the end of the list) are available.

Combining line charts

Finally, you can also pass multiple series of values to both point and line charts. This creates a chart that shows multiple data sets using a different line or point color for each data set. The following example plots sales and expenses of some non-existent company in a single line chart with annotations:

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
let sales = [("2013", 1000); ("2014", 1170); ("2015", 660); ("2016", 1030)]
let expenses = [("2013", 400); ("2014", 460); ("2015", 1120); ("2016", 540)]
 
let options =
  Options
    ( title = "Company Performance", curveType = "function",
      legend = Legend(position = "bottom") )
            
[sales; expenses]
|> Chart.Line
|> Chart.WithOptions options
|> Chart.WithLabels ["Sales"; "Expenses"]

Note that the two inputs are sequences of tuples with X (year) and Y (value) pairs. We then create Options object to specify the title, smooth curve and also the legend of the chart. Then we call Chart.Line followed by Chart.WithOptions and also Chart.WithLabels to provide labels for the two series.

namespace XPlot
namespace XPlot.GoogleCharts
type Chart =
  static member Annotation : data:seq<#seq<DateTime * 'V * string * string>> * ?Labels:seq<string> * ?Options:Options -> GoogleChart (requires 'V :> value)
  static member Annotation : data:seq<DateTime * #value * string * string> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
  static member Area : data:seq<#seq<'K * 'V>> * ?Labels:seq<string> * ?Options:Options -> GoogleChart (requires 'K :> key and 'V :> value)
  static member Area : data:seq<#key * #value> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
  static member Area : data:seq<#value> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
  static member Bar : data:seq<#seq<'K * 'V>> * ?Labels:seq<string> * ?Options:Options -> GoogleChart (requires 'K :> key and 'V :> value)
  static member Bar : data:seq<#key * #value> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
  static member Bar : data:seq<#value> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
  static member Bubble : data:seq<string * #value * #value * #value * #value> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
  static member Bubble : data:seq<string * #value * #value * #value> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
  ...

Full name: XPlot.GoogleCharts.Chart
static member Chart.Line : data:seq<#seq<'K * 'V>> * ?Labels:seq<string> * ?Options:Options -> GoogleChart (requires 'K :> key and 'V :> value)
static member Chart.Line : data:seq<#key * #value> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
static member Chart.Line : data:seq<#value> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
val x : float
val sin : value:'T -> 'T (requires member Sin)

Full name: Microsoft.FSharp.Core.Operators.sin
static member Chart.WithOptions : options:Options -> chart:GoogleChart -> GoogleChart
Multiple items
type Options =
  new : unit -> Options
  member ShouldSerializeaggregationTarget : unit -> bool
  member ShouldSerializeallValuesSuffix : unit -> bool
  member ShouldSerializeallowHtml : unit -> bool
  member ShouldSerializealternatingRowStyle : unit -> bool
  member ShouldSerializeanimation : unit -> bool
  member ShouldSerializeannotations : unit -> bool
  member ShouldSerializeannotationsWidth : unit -> bool
  member ShouldSerializeareaOpacity : unit -> bool
  member ShouldSerializeavoidOverlappingGridLines : unit -> bool
  ...

Full name: XPlot.GoogleCharts.Configuration.Options

--------------------
new : unit -> Options
val sales : (string * int) list

Full name: Google-line-chart.sales
val expenses : (string * int) list

Full name: Google-line-chart.expenses
val options : Options

Full name: Google-line-chart.options
Multiple items
type Legend =
  new : unit -> Legend
  member ShouldSerializealignment : unit -> bool
  member ShouldSerializemaxLines : unit -> bool
  member ShouldSerializenumberFormat : unit -> bool
  member ShouldSerializeposition : unit -> bool
  member ShouldSerializetextStyle : unit -> bool
  member alignment : string
  member maxLines : int
  member numberFormat : string
  member position : string
  ...

Full name: XPlot.GoogleCharts.Configuration.Legend

--------------------
new : unit -> Legend
static member Chart.WithLabels : labels:seq<string> -> chart:GoogleChart -> GoogleChart
Fork me on GitHub