Bug with amcharts(?): Preview works but page view does not

fleh

Dear Mango devs,

I wanted to try out amcharts, found an example I liked and copied it onto a page. The preview looks perfect but the full-page view remains empty. I properly saved the page before attempting to view it.

Usually, providing minimum working examples requires some work, but not this time! Just copy the self-contained example code from here and you shall see.

I am on the latest production release (3.6.4) on Opensuse 15.1 and open-jdk with all updates installed.

Thanks for your attention,
Frank

Jared Wiltshire

@fleh said in Bug with amcharts(?): Preview works but page view does not:

Usually, providing minimum working examples requires some work, but not this time! Just copy the self-contained example code from here and you shall see.

If you copy and paste that example into a Mango page then sure, maybe it will work. But if you look at the code you will see that it is loading AmCharts v4 Javascript libraries within the page. I would highly recommend not to do this, Mango ships with AmCharts v3 libraries. If you load v3 and v4 like you are doing you are sure to run into problems.

The correct way to do this is to create your own AngularJS component in a user module. Please see the help site and search the forum, I have provided a lot of examples like this in the past.

fleh

Thanks a lot for your swift and clarifying reply, @Jared-Wiltshire! It still surprises me how great your level of support is and how much the documentation lacks.

I watched the video from here and read the documentation on this page and it does not say anywhere that only AmCharts v3 is supported. :-/

Angular is still intimidating for me, unfortunately. I think I'll give D3.js a go first before scripting stuff with an EOL library. Are there known gotcha's that a user starting out this route should know about?

Thanks again for your help!

MattFox

@fleh said in Bug with amcharts(?): Preview works but page view does not:

Are there known gotcha's that a user starting out this route should know about?

Be prepared to know that you won't be able to leverage the same kind of support using something not everyone else does. For javascript we may be able to assist however, you'll still have to utilise AngularJS as per Jared's instruction to keep everything running as a nice, tight, black box. Even if you load the D3 library externally, you should only enforce scripts within angularJS controllers/components etc.

Angular is still intimidating for me

And for me sometimes, if not a lil frustrating but that doesn't mean there aren't people here who can't assist.

@fleh said in Bug with amcharts(?): Preview works but page view does not:

I think I'll give D3.js a go first before scripting stuff with an EOL library.

I wouldn't got that far, it is in LTS mode now. It's stable and solid and the angularJS blog clearly states:

All AngularJS applications that work now, will continue to work in the future. All published versions of AngularJS, on npm, bower, CDNs, etc will continue to be available.

Besides I believe it is normal practise to review software every 2-3 years to see if the direction is correct and if not, what can be done to improve/correct systems. So even I may consider taking on Vue after this, but that can be debated on at another time.

Jared Wiltshire

@mattfox said in Bug with amcharts(?): Preview works but page view does not:

I wouldn't got that far, it is in LTS mode now. It's stable and solid and the angularJS blog clearly states:

He was referring to AmCharts I believe, not AngularJS.

Jared Wiltshire

@fleh said in Bug with amcharts(?): Preview works but page view does not:

Thanks a lot for your swift and clarifying reply, @Jared-Wiltshire! It still surprises me how great your level of support is and how much the documentation lacks.

Yep, I agree the documentation is lacking. It is an area we are working to improve.

@fleh said in Bug with amcharts(?): Preview works but page view does not:

watched the video from here and read the documentation on this page and it does not say anywhere that only AmCharts v3 is supported. :-/

It was written before AmCharts v4 was released. I'll update the article to make this clear.

@fleh said in Bug with amcharts(?): Preview works but page view does not:

Angular is still intimidating for me, unfortunately. I think I'll give D3.js a go first before scripting stuff with an EOL library. Are there known gotcha's that a user starting out this route should know about?

I'll give you a quick example.

I would recommend looking at the heat map component as this is currently our only component that uses d3 - https://github.com/infiniteautomation/ma-dashboards/tree/main/UI/web-src/ngMango/components/heatMap

You should not use the import/export syntax within a user module, Use the AMD require() syntax instead (as per the example I will post shortly).

Jared Wiltshire

As promised, here's a d3 chart using a user module. It doesn't do much useful, but it shows how to do the basics -

define(['angular', 'require', 'd3'], function(angular, require, d3) {
    'use strict';

    const userModule = angular.module('userModule', ['maUiApp']);

    class ChartController {
        static get $$ngIsClass() { return true; };
        static get $inject() { return ['$element']; };
        
        constructor($element) {
            this.$element = $element;
        }
        
        $onChanges(changes) {
            if (changes.pointValues) {
                this.updateSvg();
            }
        }
        
        updateSvg() {
            const svg = d3.select(this.$element[0]).select('svg');
            
            // bind our point values to circle elements, using the timestamp property
            const circles = svg.selectAll('circle')
                .data(this.pointValues || [], pv => pv.timestamp);
            
            // remove circles which no longer exist in the point values array
            circles.exit().remove();
            
            // add new circles for new point values
            const newCircles = circles.enter()
                .append('circle')
                    .attr('fill', 'red');
            
            // modify existing and new circles according to the point values
            circles.merge(newCircles)
                .attr('cx', pv => pv.timestamp / 1000 % 600)
                .attr('cy', pv => pv.timestamp % 600)
                .attr('r', pv => pv.value * 5)
        }
    }

    userModule.component('myChart', {
        controller: ChartController,
        template: '<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600"></svg>',
        bindings: {
            pointValues: '<?'
        }
    });
    
    return userModule;
}); // define

fleh

Apologies for criticizing your documentation in such a broad way -- I actually wanted to emphasize how much I appreciate your forum support. Many help pages are really good and the coverage with video tutorials is excellent to get an overview. It's just that I spent quite a bit of time on issues already which where incomplete or missed critical info. For example, the help pages for egauge, egauge datapoint, Environment Canada Data Point, ""Environment Canada"", M Bus, and M Bus datapoint simply went AWOL...

Thanks for the hint, that I would be leaving the common route with D3.js, @MattFox. This is certainly not optimal and I would actually like to avoid such a situation. I also agree with you about re-evaluating the fit of software. But everyone's time is limited and I just want to avoid learning a short-lived tool. (On the amcharts homepage it says: How long are you planning on supporting amCharts 3? - We will continue making bug fixes until end of 2019. Less than 5 months.).

Most important for me are two visualisations I have yet to create. The movement of AGVs discussed in an older thread and an exploded pie chart (the example linked above). Both seem to require more flexibility than amcharts3 has to offer. Hence I would have to learn another tool anyway.

Thanks for the user module @Jared-Wiltshire! It does not work when copying it into a new page for me, but I'll go through it line-by-line to see what its purpose is. Have a nice weekend, y'all!

Jared Wiltshire

@fleh said in Bug with amcharts(?): Preview works but page view does not:

I actually wanted to emphasize how much I appreciate your forum support. Many help pages are really good and the coverage with video tutorials is excellent to get an overview.

Thanks!

@fleh said in Bug with amcharts(?): Preview works but page view does not:

I spent quite a bit of time on issues already which where incomplete or missed critical info. For example, the help pages for egauge, egauge datapoint, Environment Canada Data Point, ""Environment Canada"", M Bus, and M Bus datapoint simply went AWOL..

I will check up on those. I am not sure that the Environment Canada DS is still supported, it is a very niche data source that can easily be replaced with a HTTP data source.

@fleh said in Bug with amcharts(?): Preview works but page view does not:

Thanks for the user module @Jared-Wiltshire! It does not work when copying it into a new page for me, but I'll go through it line-by-line to see what its purpose is. Have a nice weekend, y'all!

It doesn't go directly into the page markup, you save it into a .js file and reference it from UI Settings -
https://help.infiniteautomation.com/getting-started-with-a-user-module

Basically it defines a new component, then you use the component inside your page. e.g.

<my-chart point-values="pointvalues"></my-chart>