FSharpChart and WPF

Article
10/11/2011

The new version of FSharp.Chart (formely FSharpChart) can now be found on GitHib at: https://fsharp.github.io/FSharp.Charting/

In the recent version of FSharpChart several examples are given around using FSharpChart and Windows Presentation Foundation (WPF).

The first sample is included in the sample script file SampleChartingForms.fsx. This sample demonstrates how to render a FSharpChart using WPF from within a fsx script file:

// standard WPF DLLs
#r "WindowsBase"
#r "PresentationCore"
#r "PresentationFramework"
#r "WindowsFormsIntegration" // WPF/Forms integration DLL
#r "System.Xaml" // needed only because of F# IntelliSense issue...

open MSDN.FSharp
open System.Windows

// create a chart
let area = Charting.FSharpChart.Area [for x in 1 .. 10 -> sprintf "Column %i" x, x*x]
// create a WPF host control containing it
let host = new Forms.Integration.WindowsFormsHost(Child = new Charting.ChartControl(area))
// create and show a WPF form with the control
let wnd = Window(Content = host, Title = "WPF/Forms Interop", Visibility = Visibility.Visible)

Thanks to Keith Battocchi for this code snippet.

The second sample is a WPF project that demonstrates how to use FSharpChart through Windows Forms Integration. A sample is given with and without the use of a XAML file. Thanks to Ryan Simpson for these samples.

The code to render a FSharpChart without XAML is very similar to that of the scripting sample:

let getChartControl =
    let chart =
        FSharpChart.Combine
            [ FSharpChart.Line([ for f in 0.0 .. 0.1 .. 10.0 -> sin f ], Name = "Sin Wave")
              FSharpChart.Line([ for f in 0.0 .. 0.1 .. 10.0 -> cos f ], Name = "Cosine Wave") ]
            |> FSharpChart.WithArea.AxisX(MajorGrid = Grid(LineColor = Color.LightGray))
            |> FSharpChart.WithArea.AxisY(Minimum = -1.0, Maximum = 1.0, MajorGrid = Grid(LineColor = Color.LightGray))
            |> FSharpChart.WithMargin(5.0f, 5.0f, 5.0f, 5.0f)

new ChartControl(chart, Dock = DockStyle.Fill)

// Sample without the use of XAML
let mainNoXaml() =

    let formsHost = new WindowsFormsHost(Child = getChartControl)
    let graphWindow = new Window(Content = formsHost, Title = "Chart Sin/Cosine")

    let wpfApp = new System.Windows.Application()
    wpfApp.Run(graphWindow) |> ignore

// Application Entry Point
[<STAThread>]
do
mainNoXaml()

When using a XAML file things are a little different.

Firstly one has to define the XAML that will be loaded:

The idea is that the WindowsFormsHost element is defined with the ChartControl:

let mainWithXaml() =

let (?) (window : Window) name = window.FindName name |> unbox

let uri = new System.Uri("/FSharp.Charting.Wpf;component/FSharpChartWpf.xaml", UriKind.Relative)
let window = Application.LoadComponent(uri) :?> Window

let formsHost : WindowsFormsHost = window?chartHost
formsHost.Child <- getChartControl

let wpfApp = new System.Windows.Application()
wpfApp.Run(window) |> ignore

As you can see rendering a FSharpChart is easily rendered within a WPF application.

Share via

FSharpChart and WPF

Additional resources