Back to Questions
353
views2
comments
javascript templating
websharpergetting startedui

My web app uses this web templates:

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

and I want to add a chart on one of my web pages. ChartJS needs some javascript to be generated on server side of my websharper app, the chart data itself and creation of chart of course.

My question is, what is the best way to solve this problem. How to "template" javascript code?

.

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 ()

    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