If I understand correctly, this is what I would do:

Let's say you currently have your Html file as a template MyTemplate, which you instantiate like this:

1
2
3
4
Content.Page(
    MyTemplate()
        .Doc()
)

You can add a hole in your Html file where the chart must be:

1
<div ws-replace="MyChart"></div>

and write some client-side code to create a chart based on input data (I'm assuming you added WebSharper.ChartJs as a NuGet package):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[<JavaScript>]
module ClientChart =
    open WebSharper.JavaScript
    open WebSharper.ChartJs
    open WebSharper.UI.Html
    open WebSharper.UI.Client

    let MakeChart (data: float[]) =
        let data =
            ChartData(
                [|
                    BarChartDataSet(Data = data, Label = "Languages")
                |],
                Labels = [| "F#"; "JS"; "C#" |]
            )
        let create = ChartCreate("bar", data, CommonChartConfig())
        canvas [
            attr.width "600"
            attr.height "400"
            on.afterRender (fun el -> Chart(el, create) |> ignore)
        ] []

Then you can put this chart in the template using the client function:

1
2
3
4
5
6
7
let data = [| 10.; 5.; 8. |]

Content.Page(
    MyTemplate()
        .MyChart(client <@ ClientChart.MakeChart data @>)
        .Doc()
)

You can pass anything that needs to be generated on the server side as argument to MakeChart, as long as it's not client-side only values (for example you can't pass a value of type ChartData, because it will fail to create on the server).

By on 2/15/2018 9:06 AM ()

Thanks Loïc, it works but on the other hand other parts of web pages stopped working.

On the same web page where I put chart there is data table:

http://webapplayers.com/homer_admin-v2.0/datatables.html

as the table is generated on server through template, the only code is needed:

$('#dataTable').dataTable();

this code is put to appui.js script which is loaded as the last script on every web page, it contains quite a lot of code to initialize different parts of ui components used by web template.

after adding

.. (client @ Client.ProfitChart profitByTypes @)

datatable is not initialized, it is missing paging and other types of features supported by javascript.

I noticed such behavior on another page, where tab ui component does not work correctly.

By on 2/16/2018 5:36 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