Quick View and Dialog Window Chart Freeze

[Pikey4]

Hi,

I had an Issue with a chart within md-dialog freezing. Seemed to be when the chart updated.

Just checked the quick view chart from watchlist page and seems to also happen. Error comes up on console as per below.

Any pointers on how to rectify? I changed the update time to a longer period and seems to be fine until the update happens.

I am not to familiar with errors so hope i have pasted appropriate info??

Thanks.

amcharts.js?v=f6d9ef13ed903242e926:1 

Uncaught TypeError: Cannot read property 'graphs' of undefined
    at e.handleCursorMove (amcharts.js?v=f6d9ef13ed903242e926:1)
    at Object.t.inherits.e.fire (amcharts.js?v=f6d9ef13ed903242e926:1)
    at Object.dispatchMovedEvent (amcharts.js?v=f6d9ef13ed903242e926:1)
    at Object.update (amcharts.js?v=f6d9ef13ed903242e926:1)
    at e.update (amcharts.js?v=f6d9ef13ed903242e926:1)
    at e.update (amcharts.js?v=f6d9ef13ed903242e926:1)
    at A.update (amcharts.js?v=f6d9ef13ed903242e926:1)
    at mangoUi~ngMango.js?v=00ea877bf2b14aa423ab:18
    at mangoUi~ngMango.js?v=00ea877bf2b14aa423ab:18

[Jared Wiltshire]

@pikey4 said in Quick View and Dialog Window Chart Freeze:

I am not to familiar with errors so hope i have pasted appropriate info??

I have seen this one too. I have not been able to pin it down, its coming from deep within our underlying AmCharts library. I can't really offer any solutions unfortunately. I would like to create some new chart components using a different library so stay tuned.

[ThomasEinasto]

Just a bump on this thread because the problem is still relevant for 3.x versions and probably 4.x if AmCharts 3.x is used there also.

As analyzing the problem I think the problem lies with the API updating some data where graphs gets nulled straight after Mango updates values using <ma-get-point-values>.

For fix basically add try {}catch(e){} method on the underlying loop where the bug happens (handleCursorMove method) and this seems to help with the graph not freezing.

Fix:

Navigate to /mango_root/web/modules/mangoUI/web

Open amcharts.js

search in file for following:

if (this.prevCursorItem != s || c != this.prevMostCloseGraph) {

After this add

try{

Now search in the file for following (should be basically quite close to previous search.

this.prevCursorItem = s

Add after that following

}catch(e){}

Then save the file and update cache as amcharts is cached with a version. Now your chart should not freeze while cursor is on the chart. Basically you can do it with overrides folder also as Mango updates will probably lose the fix.

Pretty printed whole handleCursorMove method with added fix. see Fix start and Fix end comments

handleCursorMove: function(t) {
                    A.AmSerialChart.base.handleCursorMove.call(this, t);
                    var e = t.target
                      , i = this.categoryAxis;
                    if (t.panning)
                        this.handleCursorHide(t);
                    else if (this.chartData && !e.isHidden) {
                        var s, r = this.graphs;
                        if (r)
                            if (s = i.xToIndex(this.rotate ? t.y : t.x),
                            s = this.chartData[s]) {
                                var n, a, o, c;
                                if (e.oneBalloonOnly && e.valueBalloonsEnabled) {
                                    var h = 1 / 0;
                                    for (n = r.length - 1; 0 <= n; n--)
                                        if ((a = r[n]).balloon.enabled && a.showBalloon && !a.hidden) {
                                            if (o = a.valueAxis.id,
                                            o = s.axes[o].graphs[a.id],
                                            e.showNextAvailable && isNaN(o.y) && !(o = this.getNextItem(o)))
                                                continue;
                                            o = o.y,
                                            "top" == a.showBalloonAt && (o = 0),
                                            "bottom" == a.showBalloonAt && (o = this.height);
                                            var l = e.mouseX
                                              , g = e.mouseY;
                                            (o = this.rotate ? Math.abs(l - o) : Math.abs(g - o)) < h && (h = o,
                                            c = a)
                                        }
                                    e.mostCloseGraph = c
                                }
                                if (this.prevCursorItem != s || c != this.prevMostCloseGraph) {
                                    /*start of fix*/
                                    try {
                                        for (h = [],
                                        n = 0; n < r.length; n++)
                                            o = (a = r[n]).valueAxis.id,
                                            o = s.axes[o].graphs[a.id],
                                            e.showNextAvailable && isNaN(o.y) && !(o = this.getNextItem(o)) && a.balloon ? a.balloon.hide() : c && a != c ? (a.showGraphBalloon(o, e.pointer, !1, e.graphBulletSize, e.graphBulletAlpha),
                                            a.balloon.hide(0)) : e.valueBalloonsEnabled ? (a.balloon.showBullet = e.bulletsEnabled,
                                            a.balloon.bulletSize = e.bulletSize / 2,
                                            t.hideBalloons || (a.showGraphBalloon(o, e.pointer, !1, e.graphBulletSize, e.graphBulletAlpha),
                                            a.balloon.set && h.push({
                                                balloon: a.balloon,
                                                y: a.balloon.pointToY
                                            }))) : (a.currentDataItem = o,
                                            a.resizeBullet(o, e.graphBulletSize, e.graphBulletAlpha));
                                        e.avoidBalloonOverlapping && this.arrangeBalloons(h),
                                        this.prevCursorItem = s
                                        /*end of fix*/
                                    } catch (e) {}
                                }
                                this.prevMostCloseGraph = c
                            }
                        r = A.fitToBounds(t.x, 0, e.width),
                        c = A.fitToBounds(t.y, 0, e.height),
                        i.showBalloon(r, c, e.categoryBalloonDateFormat, t.skip),
                        this.updateLegendValues()
                    }
                },