XPlot Google: Line and scatter charts

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.

A simple scatter plot

Creating scatter plots (or point charts) is equally easy. The following example generates 1000 points by multiplying two numbers for the X coordinate and two numbers for the Y coordinate:

1: 
2: 
3: 
4: 
5: 

let rnd = new System.Random() 
let next() = rnd.NextDouble() * rnd.NextDouble()
let points = [ for i in 0 .. 1000 -> next(), next() ]

points |> Chart.Scatter 

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.

• XPlot
• Home page
• Get Library via NuGet
• Source Code on GitHub
• License (Apache 2.0)
• Release Notes
• Google Charts
• Points and lines
• Geo charts
• Plotly Charts
• Coming soon
• Documentation
• API Reference
• Google Chart type
• Google Option type
• Google configuration module
• Plotly Graph module
• Plotly Layout type