Text DisplayObject not working

Custom Indicators
1

I’m trying to get working the Text example I see here: Text | Tradovate Custom Indicators

However, any method or attribute I reference after “d.” throws and error. For instance:

d.isLast is not a function TypeError: d.isLast is not a function at myTest.map (eval at execute (https://cdn.trad…

If I comment out the use of “isLast”, I get error on anything else I’m referencing from “d”. What is the basic thing I’m missing here? Code below:

const predef = require("./tools/predef");
const meta = require("./tools/meta");
const lodash = require("lodash");
const EMA = require("./tools/EMA");
const MMA = require("./tools/MMA");
const SMA = require("./tools/SMA");
const trueRange = require("./tools/trueRange");

class myTest {
    //in this example map returns a global text label at the last bar's
    //index on the X-axis and 40 pixels above the price 3900 in the Y-axis.  
   
     map(d) {
        return {
            graphics: d.isLast() && {
                items: [
                    {
                        tag: 'Text',
                        key: 'myLabel',
                        point: {
                            x: du(d.index()),
                            y: op(du(3900), "-", px(40))
                        },
                        text: '-> 3900',
                        style: { fill: '#f00' },
                        textAlignment: 'centerMiddle',
                        global: true,
                        origin: {     //<- indicates (0,0) is (right, top) oriented
                            cs: 'grid',
                            h: 'right',
                            v: 'top'
                        }
                    }]
            }
        };
     }
}

module.exports = {
    name: "myTest",
    description: "myTest",
    title: "[Test] myTest",
    tags: ["Test"],
    calculator: myTest,
    params: { },
};
2

Hi @aLuckyFourteen

Are you trying this in the beta version of the trader or in the current production version?

3

Thanks for the reply. I’m logged in via the browser so I assume the latest official production release?

4

The graphics changes have only been progressed to our Beta version of the trader so far. If you would like to experiment, you can access the beta version:

We anticipate these going to the production release on the weekend of 03/06 - 03/07

5

Ah ha, well that makes a lot of sense now. Thanks! I’m on the beta site now and the “isLast” and other “d.” related errors have gone away, but now getting:

du is not defined ReferenceError: du is not defined at myTest.map (eval at execute (https://beta-trader.tradovate…

and

op is not defined ReferenceError: op is not defined at myTest.map (eval at execute (https://beta-trader.tradovate…

Thanks for your help.

6

You may need to add the following to your indicator:

const { px, du, op, min } = require("./tools/graphics");
7

Thank you. That got rid of the errors, however, I can’t get anything to show on the screen. I’ve tried Text and Shapes, done some debugging via the console to make sure things aren’t error-ing and are running, but can’t seem to get anything to print no matter what I try. Any thoughts based on my code posted above?

8

Scratch that, I discovered that I had to add the font attributes and now the text shows up.

style: { fontSize: 18, fontWeight: "bold", fill: "#ffffff" },

9

I still can’t get this to work even with the changes. Anyone else been able to?

10

Hi @TedR, did you also switch from the latest release to the beta version as @BWeis mentioned above?

11

Yes, trying in the beta version. Pretty much same code.

const predef = require("./tools/predef");
const meta = require("./tools/meta");
const lodash = require("lodash");
const EMA = require("./tools/EMA");
const MMA = require("./tools/MMA");
const SMA = require("./tools/SMA");
const trueRange = require("./tools/trueRange");
const { px, du, op, min } = require("./tools/graphics");

class myTest {
    //in this example map returns a global text label at the last bar's
    //index on the X-axis and 40 pixels above the price 3900 in the Y-axis.  
   
     map(d) {
        return {
            graphics: d.isLast() && {
                items: [
                    {
                        tag: 'Text',
                        key: 'myLabel',
                        point: {
                            x: du(d.index()),
                            y: op(du(4075), "-", px(40))
                        },
                        text: '-> 4075',
                        style: { fontSize: 18, fontWeight: "bold", fill: "f3ff14" },
                        textAlignment: 'centerMiddle',
                        global: true,
                        origin: {     //<- indicates (0,0) is (right, top) oriented
                            cs: 'grid',
                            h: 'right',
                            v: 'top'
                        }
                    }]
            }
        };
     }
}

module.exports = {
    name: "myTest",
    description: "myTest",
    title: "[Test] myTest",
    tags: ["Test"],
    calculator: myTest,
    params: { }
};
12

This might sound silly but try adding a hashtag at your style object’s fill field. like this fill: "#f3ff14". Its the only thing I can see in your code that stands out to me.

13

Yeah, saw that as well. Still doesn’t work.

14

Hm, I’m not seeing anything necessarily wrong with the code, otherwise. Are you sure that du(4075) is within your chart’s Y range?

15

Also, Can you confirm you are applying the indicator to the “Chart” module? This functionality is not supported in “Legacy Chart”

16

Brian,

Do you & the Tradovate team have a fully functioning TEXT/graphics/displayObject example indicator that we could reference in building our own custom indicators?

Thanks,
John

17

Check out this document:

https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.text.html

Make sure you set your Y value to something reasonable within the scale of your chart and you should be able to see it.

18

Thank you. I saw that one & that is why I am asking if you have a fully functional EXAMPLE indicator. My attempts have not worked so far, so I was hoping to review one that works to tweak into what I am trying to accomplish.

https://tradovate.github.io/custom-indicators/modules/graphics_displayobject.html
https://tradovate.github.io/custom-indicators/pages/Tutorial/Graphics.html

19

Try this one - Graphics | Tradovate Custom Indicators

That guide walks through building a graphics-module-enabled indicator, text is a large part of it. I’m pretty sure each step is fully functional.

20

@John_Rayburn You can add something simple like this:

const predef = require("./tools/predef");
const meta = require("./tools/meta");
const lodash = require("lodash");
const EMA = require("./tools/EMA");
const MMA = require("./tools/MMA");
const SMA = require("./tools/SMA");
const trueRange = require("./tools/trueRange");
const { px, du, op, min } = require("./tools/graphics");

class myTest {
    //in this example map returns a global text label at the last bar's
    //index on the X-axis and 40 pixels above the price 4075 in the Y-axis.  
   
     map(d) {
        return {
            graphics: d.isLast() && {
                items: [
                    {
                        tag: 'Text',
                        key: 'myLabel',
                        point: {
                            x: du(d.index()),
                            y: op(du(4075), "-", px(40))
                        },
                        text: '-> 4075',
                        style: { fontSize: 18, fontWeight: "bold", fill: "f3ff14" },
                        textAlignment: 'centerMiddle',
                        global: true,
                    }]
            }
        };
     }
}

module.exports = {
name: "myTest",
description: "myTest",
title: "[Test] myTest",
tags: ["Test"],
calculator: myTest,
params: { }
};

When you apply it to an ES Chart (with 4075 price in the visible area) it will display like this:

image
image3228×2052 498 KB