Note that dotnet.highcharts.com isn't related to WebSharper, it is Highchart's own C# implementation.

That being said, here is my WebSharper + F# conversion of the example you linked: http://try.websharper.com/snippet/loic.denuziere/0000J9

By on 3/12/2018 5:50 AM ()

Yes, thank you, it's great to know that it works.

But it's just a chart built from previously created Databases. Is there any way to ADD the data?

1
2
3
4
5
6
7
8
9
10
<html>
<head>
    <title></title>
</head>
<body>
    <intput ws-var="data"></intput>
    <div id="main"></div>
    <!--[BODY]-->
</body>
</html>

What i mean is how to UPDATE the data in this part of you?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
            Series = [|
                SeriesCfg(
                    Name = "Random data",
                    Data =
                        [|
                            let time = Date().GetTime()
                            for i in -19 .. 0 do
                                yield New [
                                    "x" => (time + i * 1000)
                                    "y" => Math.Random()
                                ]
                        |]
                )
            |]
By on 3/15/2018 9:23 AM ()
1
namespace Samples

open WebSharper open WebSharper.JavaScript open WebSharper.JQuery open WebSharper.Highcharts

<JavaScript> module HelloWorld =

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
[<Require(typeof<Resources.Highcharts>)>]
let MakeChart() =
    Highcharts.SetOptions(
        OptionsCfg(Global = GlobalCfg(UseUTC = false))
    ) |> ignore

    Highcharts.Create(JQuery("#main"),
        HighchartsCfg(
            Chart = ChartCfg(
                Type = "spline",
                MarginRight = 10.,
                Events = ChartEventsCfg(
                    Click = FuncWithOnlyThis(fun (this: Chart) ->
                        let series = this.Series.[0]
                        let x = this.XAxis.[0].ToValue
                        let y = this.YAxis.[0].ToValue
                        series.AddPoint((x,y),true,true)
                    )
                )
            ),
            Title = TitleCfg(Text = "Live random data"),
            XAxis = [|
                XAxisCfg(
                    Type = "datetime",
                    TickPixelInterval = 150.
                )
            |],
            YAxis = [|
                YAxisCfg(
                    Title = YAxisTitleCfg(Text = "Value"),
                    PlotLines = [|
                        YAxisPlotLinesCfg(
                            Value = 0.,
                            Width = 1.,
                            Color = "#808080"
                        )
                    |]
                )
            |],
            Tooltip = TooltipCfg(
                Formatter = FuncWithOnlyThis(fun (this: Point) ->
                    "<b>" + this.Series.Name + "</b><br/>" +
                    Highcharts.DateFormat("%Y-%m-%d %H:%M:%S", this.X) + "<br/>" +
                    Highcharts.NumberFormat(this.Y, 2.)
                )
            ),
            Legend = LegendCfg(Enabled = false),
            Exporting = ExportingCfg(Enabled = false),
            Series = [|
                SeriesCfg(
                    Name = "Random data",
                    Data =
                        [|
                            let time = Date().GetTime()
                            for i in -19 .. 0 do
                                yield New [
                                    "x" => (time + i * 1000)
                                    "y" => Math.Random()
                                ]
                        |]
                )
            |]
        )
    )
    |> ignore

let Main = MakeChart()

https://www.highcharts.com/demo/dynamic-click-to-add

Can you change your code in order to ADD point as Demo in this link ?

By on 3/15/2018 8:52 PM ()
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