Back to Questions
2.0k
views6
comments
Can you provide a sample for using HighCharts with dynamic data?
websharperhighcharts

... Thanks!

.

Your best bet is to consult the HighChart website for such samples and translate those to F#. If you are having trouble with the relevant WebSharper extension, open a new issue here with details, e.g. what code you tried, links to the original JavaScript code, and any error message you encountered. Thanks!

By on 4/1/2015 6:04 AM ()

I tried to translate high chart sample

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/dynamic-update/

the problem i met:

  1. how to get this pointer in websharper
  2. when i tried to remove series or add point ( chart.Series.[0].remove() or chart.Series.[0].addpoint ) , there is not any reponse.

below is my code. Thanks

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

Div [] |>! 
OnAfterRender (fun el ->
    Highcharts.Highcharts.Create(WebSharper.JQuery.JQuery.Of el.Body,
        Highcharts.HighchartsCfg(
            Chart = Highcharts.ChartCfg(
                        Events = Highcharts.ChartEventsCfg(
                            Load = WebSharper.JavaScript.FuncWithArgs(fun x -> ())
                        )
            ),
            Title = Highcharts.TitleCfg(
                Text = "Monthly Average Temperature",
                X = -20.
            ),
            Subtitle = Highcharts.SubtitleCfg(
                Text = "Source: WorldClimate.com",
                X = -20.
            ),        
            XAxis = Highcharts.XAxisCfg(
                Categories = [| 
                    "Jan"; "Feb"; "Mar"; "Apr"; "May"; "Jun"; 
                    "Jul"; "Aug"; "Sep"; "Oct"; "Nov"; "Dec" 
                |]
            ),
            YAxis = Highcharts.YAxisCfg(
                Title = Highcharts.YAxisTitleCfg(
                    Text = "Temperature (°C)"        
                ),
                PlotLines = [|
                    Highcharts.YAxisPlotLinesCfg(
                        Value = 0.,
                        Width = 1.,
                        Color = "#808080"
                    )
                |]
            ),
            Tooltip = Highcharts.TooltipCfg(
                ValueSuffix = "°C"    
            ), 
            Legend = Highcharts.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) -> Highcharts.SeriesCfg (Name = c, Data = As d))
            )
        )
    ) |> ignore
) |> ignore
By on 4/1/2015 7:08 PM ()

Can anyone help me?

By on 4/7/2015 5:25 AM ()

Sorry for the delay.

You can get a this reference with the FuncWithThis helper function. In your case (based on the example you linked) it would look something like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// inside Highcharts.HighchartsCfg

Chart = Highcharts.ChartCfg(
            Events = Highcharts.ChartEventsCfg(
                Load = WebSharper.JavaScript.FuncWithThis(fun (this : Chart) -> 
                    let series = this.Series.[0]
                                        
                    let rec loop () =
                        async {
                            do! Async.Sleep 1000
                            let x = Date().GetTime()
                            let y = Math.Round(Math.Random() * 100.)
                            series.AddPoint([|x;y|], true, true)
                            do! loop ()
                        }
                    loop () |> Async.Start
                )
            )
),

You can obviously use JS.SetInterval instead of the async block but this is more convinient if you are dealing with fetching data from XHR requests and such.

As for why addPoint and remove didn't work for you I'm not quite sure. It works in my case. Check the browser console for any error messages.

By on 4/13/2015 3:45 AM ()

it works. but i find the code below can't work with JQueryUI Tab, like

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
75
76
77
78
79
80

let graphStrategy = Div []

Highcharts.Highcharts.Create(WebSharper.JQuery.JQuery.Of graphInstrument.Dom,
    Highcharts.HighchartsCfg(
        Chart = Highcharts.ChartCfg(
                Events = Highcharts.ChartEventsCfg(
                        Load = WebSharper.JavaScript.FuncWithThis(fun (this : Highcharts.Chart) -> 
                                    ()
                                )
                )
        ),
        Title = Highcharts.TitleCfg(
            Text = "Monthly Average Temperature",
            X = -20.
        ),
        Subtitle = Highcharts.SubtitleCfg(
            Text = "Source: WorldClimate.com",
            X = -20.
        ),        
        XAxis = Highcharts.XAxisCfg(
            Categories = [| 
                "Jan"; "Feb"; "Mar"; "Apr"; "May"; "Jun"; 
                "Jul"; "Aug"; "Sep"; "Oct"; "Nov"; "Dec" 
            |]
        ),
        YAxis = Highcharts.YAxisCfg(
            Title = Highcharts.YAxisTitleCfg(
                Text = "Temperature (°C)"        
            ),
            PlotLines = [|
                Highcharts.YAxisPlotLinesCfg(
                    Value = 0.,
                    Width = 1.,
                    Color = "#808080"
                )
            |]
        ),
        Tooltip = Highcharts.TooltipCfg(
            ValueSuffix = "°C"    
        ), 
        Legend = Highcharts.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) -> Highcharts.SeriesCfg (Name = c, Data = As d))
        )
    )
) |> ignore

(* ... *)

let tabElems = 
    [              
        "Performace", performace
        "Detail", detail
        "Track", tracking
        "About", debug
    ]

let tabs = WebSharper.JQueryUI.Tabs.New(tabElems, new WebSharper.JQueryUI.TabsConfiguration())
By on 4/14/2015 7:13 AM ()

Could you please provide a bit more context like error messages and what's not working? What is the expected result and what di you get insetad? I can't really work with the above code as it has a lot of missing parts.

By on 4/17/2015 1:27 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