Well, now I see :-) I can simply produce the json for the function!

1
$.getJSON("mps.json", function(mps) {
By on 3/8/2018 1:05 AM ()

That's an option. Otherwise, if you want to feed the data from an F# SPA, you can do something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
namespace MyProject

// open ...

[<JavaScript>]
module Client =
    type MyData = { color: string; shape: string }

    let myData =
        [|
            { color = "blue"; shape = "circle" }
            { color = "red"; shape = "triangle" }
        |]

and then call it from JavaScript:

1
2
3
4
5
6
7
8
9
    $(function(){
        $("#output").pivotUI(
            MyProject.Client.myData(),
            {
                rows: ["color"],
                cols: ["shape"]
            }
        );
     });
By on 3/8/2018 1:31 AM ()

Excellent! Thank you! That was exactly the WebSharper-specific answer I was looking for!

I'm going to try it soon. Cheers

By on 3/8/2018 2:14 AM ()

Note that you might not always be able to do it like this. For example, if your F# code retrieves the data asynchronously from a server, then you won't be able to define a top-level value of type MyData[]. In this case you can switch things around: define the rendering as a function in JavaScript, and then call that function from F#.

1
2
3
4
5
6
7
8
9
    function showPivot(data) {
        $("#output").pivotUI(
            data,
            {
                rows: ["color"],
                cols: ["shape"]
            }
        );
    }
1
2
3
4
5
6
7
8
9
10
module Client =
    type MyData = { color: string; shape: string }

    [<SPAEntryPoint>]
    let Main() =
        async {
            let! data = // retrieve data from wherever...
            JS.Inline("showPivot($0)", data)
        }
        |> Async.Start
By on 3/8/2018 6:48 AM ()

OK! Perfect! This works!

(Notice that I don't have async in my code yet)

Thanks again for your help, very much appreciated

By on 3/8/2018 8:15 AM ()

Ok, also this seems to be working!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	function showExtendedPivot(data) {
		var derivers = $.pivotUtilities.derivers;
        var renderers = $.extend($.pivotUtilities.renderers,
            $.pivotUtilities.c3_renderers);
		
	            $("#output").pivotUI(data, {
                renderers: renderers,
                rendererName: "Horizontal Stacked Bar Chart",
                rowOrder: "value_z_to_a", colOrder: "value_z_to_a",
                rendererOptions: {
                    c3: { data: {colors: {
                        Liberal: '#dc3912', Conservative: '#3366cc', NDP: '#ff9900',
                        Green:'#109618'
                    }}}
                }
            });
    }
By on 3/8/2018 8:20 AM ()

If data is retrieved by a type provider, at that point it can't all be translated to javascript and it is not a spa.

By on 3/8/2018 8:43 AM ()
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