Back to Questions
3.6k
views1
comment
Highcharts renders without other HTML elements shown
websharperhighcharts

When I run the code below, the chart will render but the other HTML elements disappear. If I replace the highcharts code with the code from the example, all HTML elements are rendered. What am I doing wrong?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

namespace WorldBank

open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.Html5
open IntelliFactory.WebSharper.Html
open IntelliFactory.WebSharper.JQuery
open IntelliFactory.WebSharper.Highcharts
open IntelliFactory.WebSharper.JQueryUI

[<JavaScript>]
module Chart =
                
    let Chart (country : WBData.Country) =              
               Div[] |>! OnAfterRender (fun el ->                          
                Highcharts.Create(JQuery.Of "Body",
                    HighchartsCfg(
                        Title = TitleCfg(
                            Text = country.Name,
                            X = -20.
                        ),
                        Subtitle = SubtitleCfg(
                            Text = "Source: WorldBank",
                            X = -20.
                        ),        
                        XAxis = XAxisCfg(
                            Categories = country.Years//, Labels = XAxisLabelsCfg(Step = 5.0)
                        ),
                        YAxis = YAxisCfg(
                            Title = YAxisTitleCfg(
                                Text = "%"        
                            ),
                            PlotLines = [|
                                YAxisPlotLinesCfg(
                                    Value = 0.,
                                    Width = 1.,
                                    Color = "#808080"
                                )
                            |]
                        ),
                        Tooltip = TooltipCfg(
                            ValueSuffix = "%"    
                        ), 
                        Legend = LegendCfg(
                            Layout = "vertical",
                            Align = "right",
                            VerticalAlign = "middle",
                            BorderWidth = 0.
                        ),
                        Series = [|
                            SeriesCfg(
                                Name = country.Country,
                                Data = As country.Values
                            )                        
                        |]
                    )
                ) |> ignore
            )

    let Main () =
        let out = Div [P [Text "Chart"]]
        Div [
            out; Input [Attr.Type "button"; Attr.Value"Show Chart"]
            |>! OnClick (fun _ _ ->
                 async {
                    let! country = Remoting.cData()
                    do out.Clear()
                    return out.Append(Chart country)
                 } |> Async.Start)
            ]

type ChartControl() =
    inherit Web.Control()
        [<JavaScript>]
        override this.Body = Chart.Main() :> _
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

namespace WorldBank

open IntelliFactory.Html
open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.Sitelets

type Action = | Home

module Skin =
    open System.Web

    type Page =
        {
            Title : string
            Body : list<Content.HtmlElement>
        }

    let MainTemplate =
        Content.Template<Page>("~/Main.html")
            .With("title", fun x -> x.Title)
            .With("body", fun x -> x.Body)

    let WithTemplate body : Content<Action> =
        Content.WithTemplate MainTemplate <| fun context ->
            {   
                Title = "Highcharts Test"
                Body = body context

            }

module Site =
    
    let HomePage =
        Skin.WithTemplate <| fun ctx ->
            let welcome = P [Text "Welcome"]
            [
                welcome
                Div [new ChartControl()]
            ]

[<Sealed>]
type EmptyWebsite() =
    interface IWebsite<Action> with
        member this.Actions = [ Action.Home ]
        member this.Sitelet = Sitelet.Content "/" Action.Home Site.HomePage

type Global() =
    inherit System.Web.HttpApplication()

    member g.Application_Start(sender: obj, args: System.EventArgs) =
        ()

[<assembly: Website(typeof<EmptyWebsite>)>]
do ()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

namespace WorldBank
open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.Html
open IntelliFactory.WebSharper.JQuery


module WBData = 
    open FSharp.Data
    let data = WorldBankData.GetDataContext()
    
    let us =  data.Countries.``United States``.Indicators.``School enrollment, tertiary (% gross)``
    let uk =  data.Countries.``United Kingdom``.Indicators.``School enrollment, tertiary (% gross)``


    type Country = {
                    Years : int[]
                    Values : float[]
                    Name : string
                    Country : string            
                   }     

    let US = { Years = Seq.toArray us.Years
               Values = Seq.toArray us.Values
               Name = us.Name
               Country = data.Countries.``United States``.Name
             }
    
    let UK = { Years = Seq.toArray uk.Years
               Values = Seq.toArray uk.Values
               Name = uk.Name
               Country = data.Countries.``United Kingdom``.Name
             }
1
2
3
4
5
6
7
8
9
10
11

namespace WorldBank

open IntelliFactory.WebSharper
open WBData

module Remoting =
    
    [<Rpc>]
    let cData() = async {
                        return WBData.US
                        }
.

This is because on line 15 of your client-side code, you pass JQuery.Of "Body" to HighCharts, which prompts it to use the element with tag name "body" as container. You probably want to do this instead:

1
2

HighCharts.Create(JQuery.Of el.Body,
    etc...

This will tell HighCharts to use the div as container.

By on 5/22/2014 1:34 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper