Skip to main content
Question

Chart creation through PythonCaller?

  • December 12, 2024
  • 6 replies
  • 74 views

thecompanydog
Contributor
Forum|alt.badge.img+2

Hello, I’m trying to create a custom chart (waterfall, combination, etc.) and I couldn’t find a transformer that could accomplish this other than PythonCaller. I’m having trouble integrating my code within FME (2022 version) which requires me to use a few packages to execute. Has anyone been able to accomplish this? I’ve already reviewed the existing FME material out there.

6 replies

redgeographics
Celebrity
Forum|alt.badge.img+50

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.


s.jager
Influencer
Forum|alt.badge.img+16
  • Influencer
  • December 13, 2024

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


thecompanydog
Contributor
Forum|alt.badge.img+2
redgeographics wrote:

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.

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


s.jager
Influencer
Forum|alt.badge.img+16
  • Influencer
  • December 16, 2024

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.


redgeographics
Celebrity
Forum|alt.badge.img+50
thecompanydog wrote:

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

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: [{

                stacked: true

            }], 

            yAxes: [{

                stacked: true

            }]

        }

    }

});

  </script>

  </div>

 

And that ends up looking like this:

 


s.jager
Influencer
Forum|alt.badge.img+16
  • Influencer
  • December 16, 2024
redgeographics wrote:

Yeah, it's a lot of work within AttributeManagers as it turns out.

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.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings