Upgrade from 2.1.8 to 9.0.1 scroller issue

[ebwaked]

Hi we are upgrading our highstock to 9.0.1 from 2.1.8. At first I got an error stating "Cannot read property 'prototype' of undefined"

Code: Select all

H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed, x, index) {
                    var scroller = this,
                        chart = scroller.chart,
                        renderer = chart.renderer,
                        elementsToDestroy = scroller.elementsToDestroy,
                        handles = scroller.handles,
                        handlesOptions = scroller.navigatorOptions.handles,
                        attr = {
                            fill: handlesOptions.backgroundColor,
                            stroke: handlesOptions.borderColor,
                            'stroke-width': 1
                        },
                        tempElem;
                });
                

So after some digging I saw something to suggest changing Scroller to navigator. When I do that further down the code I get "Cannot read property 'xAxis' of undefined"

Code: Select all

var xAxisIndex = chart.xAxis.length,
                        yAxisIndex = chart.yAxis.length;

Unfortunately our file for building out this chart is over 10,000 lines of code so I makes it really hard to setup a fiddle. Can you help me debug what could be the issue please?

[sebastian.h]

Hi,
Welcome to our forum and thanks for contacting us with your question.

Some options may be deprecated but in general most should fit.
The most sensible way in my opinion would be to check where the error crashes and compare it with the actual API documentation.

Are there any custom additions or wrappers in your code? This scroller looks like this, but I'm not sure.

Do you have many reported bugs in the console?
It can be difficult to suggest more without checking your configuration.

I'm waiting for news from you.
Best regards.

[ebwaked]

image_2021_03_24T17_14_27_074Z.png (55.11 KiB) Viewed 1880 times

this is where we get the error "Uncaught TypeError: Cannot read property 'prototype' of undefined" @ line 1826

we changed

Code: Select all

H.wrap(H.Navigator.prototype, 'drawHandle', function (proceed, x, index) {

to this:

Code: Select all

H.wrap(H.Navigator.prototype.drawHandle = function (proceed, x, index) {

I am assuming I need to change

Code: Select all

H.wrap(H.Navigator.prototype, 'init', function (proceed) {

to

Code: Select all

H.wrap(H.Navigator.prototype.init = function (proceed) {

But further down I am trying to access

Code: Select all

var xAxisIndex = chart.xAxis.length

And I get "Uncaught TypeError: Cannot read property 'xAxis' of undefined"

Which is because still in the beginning trying to set the chart like so:

Code: Select all

H.wrap(H.Navigator.prototype.drawHandle = function (proceed, x, index) {
                    var scroller = this,
                        chart = scroller.chart,

still shows the chart is undefined so I cant access chart.xAxis

[KacperMadej]

Scroller was change to Navigator. You are getting error for Scroller and need to change it to Navigator.

H.wrap(H.Navigator.prototype, 'drawHandle', function (proceed, x, index) {

is a good start, but you need to provide other arguments of the function as well (unless you are passing all arguemnts to the proceed function then it doesn't matter - hard to be sure with the little code as was shared).

Navigator.prototype.drawHandle = function (x, index, inverted, verb) {

For sure don't do

H.wrap(H.Navigator.prototype.drawHandle = function (...

beacuse you are just assigning new function for drawHandle and additional confusion is causing placing this in a function call. This is the same as just overwriting the drawHandle funciton and has nothing to do with the wrap function or wrapping the code. Proceed function as argument won't be there as it is added by wrap function.

Please create a minimal demo with the error visible for faster solution or let us know what is wrong with

H.wrap(H.Navigator.prototype, 'drawHandle', function (proceed, x, index) {

[muralikumarmk13]

For me its giving error as
custom-navigator.js:39 Uncaught TypeError: Cannot read property 'push' of undefined
at e.HC.wrap.HC.Navigator.drawHandle (custom-navigator.js:39)
at e.HC.Navigator.render (custom-navigator.js:231)
at d.<anonymous> (VM4463 highstock.js:642)
at d.<anonymous> (VM4463 highstock.js:384)
at Array.forEach (<anonymous>)
at d.onload (VM4463 highstock.js:384)
at d.firstRender (VM4463 highstock.js:384)
at d.<anonymous> (VM4463 highstock.js:353)
at A (VM4463 highstock.js:18)
at d.init (VM4463 highstock.js:351)

[sebastian.h]

Hi muralikumarmk13,
Welcome to our forum and thanks for contacting us!

Could you share your example in the online code editor?
This will help us check these errors and help us better diagnose your case.

I'm waiting for news from you.
Best regards.

[muralikumarmk13]

Hi,

i m not able to create any demo kind of thing now with my project data.
please have a look the scroller code file

(function(HC) {
HC.Navigator.prototype.drawHandle = function(x, index) {
if (this.chart.renderTo.id === "alarmSummaryChart") {
return;
}
var scroller = this,
chart = scroller.chart,
renderer = chart.renderer,
elementsToDestroy = scroller.elementsToDestroy,
handles = scroller.handles,
handlesOptions = /*scroller.navigatorOptions.handles*/{
backgroundColor: '#fdbf50',
borderColor: '#F5F4F1'
},
attr = {
fill: handlesOptions.backgroundColor,
stroke: handlesOptions.borderColor,
'stroke-width': 2
},
tempElem;

// create the elements
if (!scroller.rendered) {
// the group
handles[index] = renderer.g('navigator-handle-' + ['left', 'right'][index])
.css({
cursor: 'ew-resize'
})
.attr({
zIndex: 10 - index
})
.add();

// circle
tempElem = renderer.circle(0, 12, 12)
.attr(attr)
.add(handles[index]);
elementsToDestroy.push(tempElem);

// left arrow
tempElem = renderer.path([
'M', -2, 7,
'L', -7, 12, -2, 17
])
.attr({
stroke: '#F5F4F1',
'stroke-width': 2
})
.add(handles[index]);
elementsToDestroy.push(tempElem);

// right arrow
tempElem = renderer.path([
'M', 2, 7,
'L', 7, 12, 2, 17
])
.attr({
stroke: '#F5F4F1',
'stroke-width': 2
})
.add(handles[index]);
elementsToDestroy.push(tempElem);
}

// Place it
handles[index][chart.isResizing ? 'animate' : 'attr']({
translateX: scroller.scrollerLeft + scroller.scrollbarHeight + parseInt(x, 10),
translateY: scroller.top + scroller.height / 2
});
};

HC.Navigator.prototype.render = function(min, max, pxMin, pxMax) {
if (this.chart.renderTo.id === "alarmSummaryChart") {
return;
}
var scroller = this,
chart = scroller.chart,
renderer = chart.renderer,
navigatorLeft,
navigatorWidth,
scrollerLeft,
scrollerWidth,
navigatorGroup = scroller.navigatorGroup,
scrollbarHeight = scroller.scrollbarHeight,
xAxis = scroller.xAxis,
navigatorOptions = scroller.navigatorOptions,
maskInside = navigatorOptions.maskInside,
height = scroller.height - 6,
top = scroller.top + 15,
navigatorEnabled = scroller.navigatorEnabled,
outlineWidth,
halfOutline,
zoomedMin,
zoomedMax,
outlineHeight = scroller.outlineHeight - scroller.scrollbarHeight - 6,
outlineTop,
rendered = scroller.rendered,
verb,
isNumber = HC.isNumber,
pick = HC.pick,
defined = HC.defined;

// Don't render the navigator until we have data (#486, #4202, #5172). Don't redraw while moving the handles (#4703).
if (!isNumber(min) || !isNumber(max) || (scroller.hasDragged && !defined(pxMin))) {
return;
}

scroller.navigatorLeft = navigatorLeft = pick(
xAxis.left,
chart.plotLeft + scrollbarHeight // in case of scrollbar only, without navigator
);
scroller.navigatorWidth = navigatorWidth = pick(xAxis.len, chart.plotWidth - 2 * scrollbarHeight);
scroller.scrollerLeft = scrollerLeft = navigatorLeft - scrollbarHeight;
scroller.scrollerWidth = scrollerWidth = scrollerWidth = navigatorWidth + 2 * scrollbarHeight;

// Get the pixel position of the handles
pxMin = pick(pxMin, xAxis.translate(min));
pxMax = pick(pxMax, xAxis.translate(max));
if (!isNumber(pxMin) || Math.abs(pxMin) === Infinity) { // Verify (#1851, #2238)
pxMin = 0;
pxMax = scrollerWidth;
}

// Are we below the minRange? (#2618)
if (xAxis.translate(pxMax, true) - xAxis.translate(pxMin, true) < chart.xAxis[0].minRange) {
return;
}

// handles are allowed to cross, but never exceed the plot area
scroller.zoomedMax = Math.min(Math.max(pxMin, pxMax, 0), navigatorWidth);
scroller.zoomedMin = Math.min(Math.max(scroller.fixedWidth ? scroller.zoomedMax - scroller.fixedWidth : Math.min(pxMin, pxMax), 0), navigatorWidth);
scroller.range = scroller.zoomedMax - scroller.zoomedMin;
zoomedMax = Math.round(scroller.zoomedMax);
zoomedMin = Math.round(scroller.zoomedMin);

if (!rendered) {

if (navigatorEnabled) {

// draw the navigator group
scroller.navigatorGroup = navigatorGroup = renderer.g('navigator')
.attr({
zIndex: 3
})
.add();

scroller.leftShade = renderer.rect()
.addClass('highcharts-navigator-mask' + (maskInside ? '-inside' : ''))

.attr({
fill: navigatorOptions.maskFill
})
.css(maskInside && {
cursor: 'ew-resize'
})

.add(navigatorGroup);

if (!maskInside) {
scroller.rightShade = renderer.rect()
.addClass('highcharts-navigator-mask')

.attr({
fill: navigatorOptions.maskFill
})

.add(navigatorGroup);
}


scroller.outline = renderer.path()
.addClass('highcharts-navigator-outline')

.attr({
'stroke-width': navigatorOptions.outlineWidth,
stroke: navigatorOptions.outlineColor
})

.add(navigatorGroup);
}
}

// place elements
if (navigatorEnabled) {
verb = rendered && !scroller.hasDragged ? 'animate' : 'attr';
outlineWidth = scroller.outline.strokeWidth();
halfOutline = outlineWidth / 2;
outlineTop = top + halfOutline;

scroller.leftShade[verb](navigatorOptions.maskInside ? {
x: navigatorLeft + zoomedMin,
y: top,
width: zoomedMax - zoomedMin,
height: height
} : {
x: navigatorLeft,
y: top,
width: zoomedMin,
height: height
});
if (scroller.rightShade) {
scroller.rightShade[verb]({
x: navigatorLeft + zoomedMax,
y: top,
width: navigatorWidth - zoomedMax,
height: height
});
}

scroller.outline[verb]({
d: [
'M',
navigatorLeft + zoomedMin, outlineTop, // left
'L',
navigatorLeft + zoomedMin - halfOutline, outlineTop, // upper left of zoomed range
navigatorLeft + zoomedMin - halfOutline, outlineTop + outlineHeight, // lower left of z.r.
'L',
navigatorLeft + zoomedMax - halfOutline, outlineTop + outlineHeight, // lower right of z.r.
'L',
navigatorLeft + zoomedMax - halfOutline, outlineTop, // upper right of z.r.
navigatorLeft + zoomedMin, outlineTop // left
].concat(navigatorOptions.maskInside ? [
'M',
navigatorLeft + zoomedMin + halfOutline, outlineTop, // upper left of zoomed range
'L',
navigatorLeft + zoomedMax - halfOutline, outlineTop // upper right of z.r.
] : [])
});
// draw handles
scroller.drawHandle(zoomedMin + halfOutline, 0);
scroller.drawHandle(zoomedMax + halfOutline, 1);
}

if (scroller.scrollbar) {

scroller.scrollbar.hasDragged = scroller.hasDragged;

// Keep scale 0-1
scroller.scrollbar.position(
scroller.scrollerLeft,
scroller.top + (navigatorEnabled ? scroller.height : -scroller.scrollbarHeight),
scroller.scrollerWidth,
scroller.scrollbarHeight
);
scroller.scrollbar.setRange(
zoomedMin / navigatorWidth,
zoomedMax / navigatorWidth
);
}
scroller.rendered = true;
}
})(Highcharts);

[sebastian.h]

Hi muralikumarmk13,

Sorry but I'm unable to check your problem.
If you don't want share real project you can create a simplified version with fake data.

Regards.

[ebwaked]

Hi,

We had put the update to highcharts on the back burner for a while but we are back at it. I still have a question as to why when I change from using Scroller to Navigator, 'this' is undefined. We are still on 2.1.8 but have changed the update to 9.3.2 to make sure we are current.

Above you said "Navigator.prototype.drawHandle = function (x, index, inverted, verb) {" should be written with 4 arguments but in the API i dont even see draw handle. Im sorry but I am working with someone elses code they wrote years ago and are no longer at the company so I am just trying to decipher it. https://api.highcharts.com/highstock/navigator
Is draw handle no longer extensible or something?

I can setup an account for you to go through thee code we have on a test site if that is something that could help.
Below I am adding a larger snippet of our code and will add screen shots of what it looks like working and not / where the issue is.

Code: Select all

(function (H) {
                var UNDF; //undefined
                //do not create the handles
                H.wrap(H.Navigator.prototype, 'drawHandle', function (proceed, x, index) {
                    var scroller = this,
                        chart = scroller.chart,
                        renderer = chart.renderer,
                        elementsToDestroy = scroller.elementsToDestroy,
                        handles = scroller.handles,
                        handlesOptions = scroller.navigatorOptions.handles,
                        attr = {
                            fill: handlesOptions.backgroundColor,
                            stroke: handlesOptions.borderColor,
                            'stroke-width': 1
                        },
                        tempElem;


                });

                //cannot change range, constant

                H.wrap(H.Navigator.prototype, 'init', function (proceed) {
                    var math = Math,
                        merge = H.merge,
                        scroller = this,
                        chart = scroller.chart,
                        xAxis,
                        yAxis,
                        scrollbarHeight = scroller.scrollbarHeight,
                        navigatorOptions = scroller.navigatorOptions,
                        height = scroller.height,
                        top = scroller.top,
                        dragOffset,
                        hasDragged,
                        range = 1,
                        baseSeries = scroller.baseSeries;

                    /**
                     * Event handler for the mouse down event.
                     */
                    scroller.mouseDownHandler = function (e) {
                        e = chart.pointer.normalize(e);

                        var zoomedMin = scroller.zoomedMin,
                            zoomedMax = scroller.zoomedMax,
                            top = scroller.top,
                            scrollbarHeight = scroller.scrollbarHeight,
                            scrollerLeft = scroller.scrollerLeft,
                            scrollerWidth = scroller.scrollerWidth,
                            navigatorLeft = scroller.navigatorLeft,
                            navigatorWidth = scroller.navigatorWidth,
                            scrollbarPad = scroller.scrollbarPad,
                            range = scroller.range,
                            chartX = e.chartX,
                            chartY = e.chartY,
                            baseXAxis = chart.xAxis[0],
                            fixedMax,
                            ext,
                            handleSensitivity = H.isTouchDevice ? 10 : 7,
                            left,
                            isOnNavigator;

                        if (chartY > top && chartY < top + height + scrollbarHeight) { // we're vertically inside the navigator
                            isOnNavigator = !scroller.scrollbarEnabled || chartY < top + height;

                            if (chartX > navigatorLeft + zoomedMin - scrollbarPad && chartX < navigatorLeft + zoomedMax + scrollbarPad) {
                                scroller.grabbedCenter = chartX;
                                scroller.fixedWidth = range;

                                dragOffset = chartX - zoomedMin;

                            }


                        }
                    };

                    /**
                     * Event handler for the mouse move event.
                     */
                    scroller.mouseMoveHandler = function (e) {
                        var scrollbarHeight = scroller.scrollbarHeight,
                            navigatorLeft = scroller.navigatorLeft,
                            navigatorWidth = scroller.navigatorWidth,
                            scrollerLeft = scroller.scrollerLeft,
                            scrollerWidth = scroller.scrollerWidth,
                            range = scroller.range,
                            chartX;

                        // In iOS, a mousemove event with e.pageX === 0 is fired when holding the finger
                        // down in the center of the scrollbar. This should be ignored.
                        if (e.pageX !== 0) {

                            e = chart.pointer.normalize(e);
                            chartX = e.chartX;

                            // validation for handle dragging
                            if (chartX < navigatorLeft) {
                                chartX = navigatorLeft;
                            } else if (chartX > scrollerLeft + scrollerWidth - scrollbarHeight) {
                                chartX = scrollerLeft + scrollerWidth - scrollbarHeight;
                            }

                            // drag left handle
                            if (scroller.grabbedLeft) {
                                hasDragged = true;
                                scroller.render(0, 0, chartX - navigatorLeft, scroller.otherHandlePos);

                                // drag right handle
                            } else if (scroller.grabbedRight) {
                                hasDragged = true;
                                scroller.render(0, 0, scroller.otherHandlePos, chartX - navigatorLeft);

                                // drag scrollbar or open area in navigator
                            } else if (scroller.grabbedCenter) {

                                hasDragged = true;
                                if (chartX < dragOffset) { // outside left
                                    chartX = dragOffset;
                                } else if (chartX > navigatorWidth + dragOffset - range) { // outside right
                                    chartX = navigatorWidth + dragOffset - range;
                                }

                                scroller.render(0, 0, chartX - dragOffset, chartX - dragOffset + range);

                            }
                            if (hasDragged && scroller.scrollbarOptions.liveRedraw) {
                                setTimeout(function () {
                                    scroller.mouseUpHandler(e);
                                }, 0);
                            }
                        }
                    };

                    /**
                     * Event handler for the mouse up event.
                     */
                    scroller.mouseUpHandler = function (e) {
                        var ext,
                            fixedMin,
                            fixedMax;

                        if (hasDragged) {
                            // When dragging one handle, make sure the other one doesn't change
                            if (scroller.zoomedMin === scroller.otherHandlePos) {
                                fixedMin = scroller.fixedExtreme;
                            } else if (scroller.zoomedMax === scroller.otherHandlePos) {
                                fixedMax = scroller.fixedExtreme;
                            }

                            ext = xAxis.toFixedRange(scroller.zoomedMin, scroller.zoomedMax, fixedMin, fixedMax);
                            chart.xAxis[0].setExtremes(
                                ext.min,
                                ext.max,
                                true,
                                false, {
                                trigger: 'navigator',
                                triggerOp: 'navigator-drag',
                                DOMEvent: e // #1838
                            });
                        }

                        if (e.type !== 'mousemove') {
                            scroller.grabbedLeft = scroller.grabbedRight = scroller.grabbedCenter = scroller.fixedWidth = scroller.fixedExtreme = scroller.otherHandlePos = hasDragged = dragOffset = null;
                        }

                    };


                    var xAxisIndex = chart.xAxis.length,
                        yAxisIndex = chart.yAxis.length;

                    // make room below the chart
                    chart.extraBottomMargin = scroller.outlineHeight + navigatorOptions.margin;

                    if (scroller.navigatorEnabled) {
                        // an x axis is required for scrollbar also
                        scroller.xAxis = xAxis = new H.Axis(chart, merge({
                            // inherit base xAxis' break and ordinal options
                            breaks: baseSeries && baseSeries.xAxis.options.breaks,
                            ordinal: baseSeries && baseSeries.xAxis.options.ordinal
                        }, navigatorOptions.xAxis, {
                            id: 'navigator-x-axis',
                            isX: true,
                            type: 'datetime',
                            index: xAxisIndex,
                            height: height,
                            offset: 0,
                            offsetLeft: scrollbarHeight,
                            offsetRight: -scrollbarHeight,
                            keepOrdinalPadding: true, // #2436
                            startOnTick: false,
                            endOnTick: false,
                            minPadding: 0,
                            maxPadding: 0,
                            zoomEnabled: false
                        }));

                        scroller.yAxis = yAxis = new H.Axis(chart, merge(navigatorOptions.yAxis, {
                            id: 'navigator-y-axis',
                            alignTicks: false,
                            height: height,
                            offset: 0,
                            index: yAxisIndex,
                            zoomEnabled: false
                        }));

                        // If we have a base series, initialize the navigator series
                        if (baseSeries || navigatorOptions.series.data) {
                            scroller.addBaseSeries();

                            // If not, set up an event to listen for added series
                        } else if (chart.series.length === 0) {

                            H.wrap(chart, 'redraw', function (proceed, animation) {
                                // We've got one, now add it as base and reset chart.redraw
                                if (chart.series.length > 0 && !scroller.series) {
                                    scroller.setBaseSeries();
                                    chart.redraw = proceed; // reset
                                }
                                proceed.call(chart, animation);
                            });
                        }


                        // in case of scrollbar only, fake an x axis to get translation
                    } else {
                        scroller.xAxis = xAxis = {
                            translate: function (value, reverse) {
                                var axis = chart.xAxis[0],
                                    ext = axis.getExtremes(),
                                    scrollTrackWidth = chart.plotWidth - 2 * scrollbarHeight,
                                    min = numExt('min', axis.options.min, ext.dataMin),
                                    valueRange = numExt('max', axis.options.max, ext.dataMax) - min;

                                return reverse ?
                                    // from pixel to value
                                    (value * valueRange / scrollTrackWidth) + min :
                                    // from value to pixel
                                    scrollTrackWidth * (value - min) / valueRange;
                            },
                            toFixedRange: Axis.prototype.toFixedRange
                        };
                    }

                    H.wrap(chart, 'getMargins', function (proceed) {

                        var legend = this.legend,
                            legendOptions = legend.options;

                        proceed.apply(this, [].slice.call(arguments, 1));

                        // Compute the top position
                        scroller.top = top = scroller.navigatorOptions.top || this.chartHeight - scroller.height - scroller.scrollbarHeight - this.spacing[2] - (legendOptions.verticalAlign === 'bottom' && legendOptions.enabled && !legendOptions.floating ? legend.legendHeight + 10 : 0);

                        if (xAxis && yAxis) { // false if navigator is disabled (#904)

                            xAxis.options.top = yAxis.options.top = top;

                            xAxis.setAxisSize();
                            yAxis.setAxisSize();
                        }
                    });


                    scroller.addEvents();
                });
            }(Highcharts));
        };

below is working...you can see 'this' is hydrated....its working because I am using Scroller and not navigator and am running version 2.1.8
https://drive.google.com/file/d/11zEU1t ... sp=sharing

Here I am using navigator now and running 9.3.2 and you can see that 'this' is not hydrated which causes errors now.
https://drive.google.com/file/d/11xfw3t ... sp=sharing

[mateusz.b]

Hi ebwaked,

Sorry for slightly longer response time. I will take a look at your issue and get back with an answer asap.

Regards!

[mateusz.b]

ebwaked,

Some methods are not public, and in such cases you should refer directly to the code. The drawHandle method you can find here:
https://github.com/highcharts/highchart ... #L899-L920

For any further help with this issue I will need you to provide me with a live demo of your chart. I know you have mentioned that it is very complex and consists of many lines of code, but most likely it could be simplified and you can also remove almost all records of your data, leaving a few samples. Just to be on the same page, upgrade from 2.1.8 to 9.0.1 is a huge step, many years of development and many things have changed since then, some methods are deprecated now. Of course we will do our best to deal with this case but if you could provide me with some more details and context it would be much easier. What exactly this custom code does? Perhaps this can be sovled in a different way since Highcharts Stock has grown significantly since then.

Regards!

[ebwaked]

No worries, I appreciate the response.

Ok understood. Thanks, that will help the process.

The custom code is a culmination of many developers working for years building, maintaining and adding features to a stock charting tool with many custom studies, hot keys and analysis tools. I am sure you have solved a few of the issues but I feel due to the depth of features it would be easiest to fix the deprecated functions and when I have more time go through the new features and update accordingly.

I went through the change log looking for any documentation of items that we use that are changing but couldn't find any that were relevant and there were a couple of documents I tried to view but got a 404 error. I know it was a long, long list and I probably missed things but do you happen to have a list of deprecated functions and I could search & replace them as needed?

I can give you access to our test site if that would suffice? And I will, of course try to provide a slimmed down version.

Thanks!

- Ed

[mateusz.b]

Hi ebwaked,

Thanks for the explanation.

All information about deprecated functions can be found in the change log. If you can't find a specific function that seems to be deprecated, then most likely it wasn't public or explicitly posted in our API docs, and thus not listed in the changelog. If you came across any 404 errors in references, then please provide me with the link and we will fix it.

Regarding the issue, you could try to remove all those custom plugins and start with a simple working chart. Then you can add them one by one refactoring and making sure that they are working. Of course it is up to your, but I would start with something like that.

When it comes to the test site, it is hard to tell if it would be sufficien but of course I will give it a try. If it contains any confidential information feel free to send it in private message to me.

Regards!