Client.fs

namespace Sample

open WebSharper
open WebSharper.JavaScript
open WebSharper.UI
open WebSharper.UI.Client
open WebSharper.UI.Html
open WebSharper.Highcharts
open WebSharper.JQuery

[<JavaScript>]
module Client =

    [<Require(typeof<Resources.Highcharts>)>]
    let chart () =
        div [on.afterRender (fun el ->
            async {
                let! data = Server.getData ()
                Highcharts.Create(JQuery.Of el,
                    HighchartsCfg(
                        Title = TitleCfg(
                            Text = "Monthly Average Temperature",
                            X = -20.
                        ),
                        Subtitle = SubtitleCfg(
                            Text = "Source: WorldClimate.com",
                            X = -20.
                        ),        
                        XAxis = [|
                            XAxisCfg(
                                Categories = [| 
                                    data
                                |]
                            )
                        |],
                        YAxis = [|
                            YAxisCfg(
                                Title = YAxisTitleCfg(
                                    Text = "Temperature (°C)"        
                                ),
                                PlotLines = [|
                                    YAxisPlotLinesCfg(
                                        Value = 0.,
                                        Width = 1.,
                                        Color = "#808080"
                                    )
                                |]
                            )
                        |],
                        Tooltip = TooltipCfg(
                            ValueSuffix = "°C"    
                        ), 
                        Legend = LegendCfg(
                            Layout = "vertical",
                            Align = "right",
                            VerticalAlign = "middle",
                            BorderWidth = 0.
                        ),
                        Series = (
                            [|
                                "Tokyo", [| 
                                    7.0; 6.9; 9.5; 14.5; 18.2; 21.5; 
                                    25.2; 26.5; 23.3; 18.3; 13.9; 9.6 
                                |]
                                "New York", [| 
                                    -0.2; 0.8; 5.7; 11.3; 17.0; 22.0;
                                    24.8; 24.1; 20.1; 14.1; 8.6; 2.5 
                                |]
                                "Berlin", [| 
                                    -0.9; 0.6; 3.5; 8.4; 13.5; 17.0;
                                    18.6; 17.9; 14.3; 9.0; 3.9; 1.0 
                                |]
                                "London", [| 
                                    3.9; 4.2; 5.7; 8.5; 11.9; 15.2;
                                    17.0; 16.6; 14.2; 10.3; 6.6; 4.8
                                |]
                            |] |> Array.map (fun (c, d) -> SeriesCfg (Name = c, Data = As d))
                        )
                    )
                ) |> ignore
            }
            |> Async.Start
        )] []

    let Main () =
        Doc.Concat [
            chart()
        ]