I’ve used an XMLTemplater to build charts using chart.js within an HTML page, it was a bit of a clunky approach because it requires a fair amount of HTML / Javascript experience as well as digging in the code.

There’s the ChartGenerator transformer as well. A bit more limited than chart.js I suppose, but it might be enough.

​@redgeographics That’s progress for sure though. Any chance you’d be able to show an example of some code that ran correctly? Thanks.

This example isn’t using chart.js, but it is using OpenLayers, combined with an HTMLReportGenerator. That might get you started, if you’re familiar with chart.js and have some javascript knowledge as RedGeographics mentions, it shouldn’t be that difficult.

Yeah, it's a lot of work within AttributeManagers as it turns out. Here is, for example, the code to generate a bar chart with up to 5 bars out of a list:

  <div class="column">

    <h3>Top 5 users (processing time)</h3>

    <canvas id="topUsersProcChart" width="400" height="300"></canvas>

    <script>

    var ctx = document.getElementById("topUsersProcChart").getContext('2d');

    var topUsersProcChart = new Chart(ctx, {

type: 'bar',

    data: {

        labels: >"@Value(_list{0}.userName)", "@Value(_list{1}.userName)", "@Value(_list{2}.userName)", "@Value(_list{3}.userName)", "@Value(_list{4}.userName)"],

        datasets: {

            label: "processing time",

            data: @Value(_list{0}.duration_process), @Value(_list{1}.duration_process), @Value(_list{2}.duration_process), @Value(_list{3}.duration_process), @Value(_list{4}.duration_process)],

            backgroundColor: ]

                'rgba(38,140,70, 0.2)',

                'rgba(38,140,70, 0.2)',

                'rgba(38,140,70, 0.2)',

                'rgba(38,140,70, 0.2)',

                'rgba(38,140,70, 0.2)'

            ],

            borderColor:  

                'rgba(38,140,70,1)',

                'rgba(38,140,70,1)',

                'rgba(38,140,70,1)',

                'rgba(38,140,70,1)',

                'rgba(38,140,70,1)'

            ],

          borderWidth: 1

        }]

    },

    options: {

        responsive: false, 

        scales: {

            xAxes: r{

                stacked: true

            }], 

            yAxes: n{

                stacked: true

            }]

        }

    }

});

  </script>

  </div>

 

And that ends up looking like this:

 

True. You basically have to write the code inside one or more attributes. But in the case of your example, I’d probably try to use the ListConcatenator to create the Labels and Data arrays. Might make it a bit easier. Or even a JSONTemplater...

Plus, if possible, you can also use external JS-files instead of hardcoding all of the javascript in FME attributes. I suppose it’s a bit dependent on personal preference, but there are plenty of options.