Newcomer's questions

Custom Indicators
1

Hey there,

I would like to have a coupe of questions about developing custom indicators.
I tried to find the answers, but I am sure here I will find them faster.

Let’s get to them…
What is the best way to debug a code? I have no syntax errors, but the indicator doesn’t work.

  • some kind of console or something what would give me an output

Every time when I make changes in the code or create a new indicator, I have to restart the app.
Is it normal or I ma doing something wrong?

About indicators…
I noticed I cannot create an indicator like fractals or ZigZag which price is not continuous. (sometimes undefined value)
Its price shown on the data window, but it is not drown on chart. Is it right?

I would like to create one, with only 1 output line (value). Is it possible to change the plotter color if its price below the candle and above?

I hope I wasn’t too long :slight_smile:

2

Hi @Csaba_Csaba,

First of all, welcome to the Tradovate community! I’ll try to answer all of this:

Anytime while writing code you can write console.log('some string') and it will log to the developer’s console, Ctrl + Shift + I on Chrome will open the dev tools in the sidebar.

We have a pretty good amount of documentation on creating Custom Indicators. You can find it all here Introduction | Tradovate Custom Indicators. I’d suggest reading through that, it has a lot of information.

Once you’ve got the basics of using Custom Indicators, look at the graphics module. It allows you to draw pretty much whatever you like to a chart. If price is undefined or NaN you can actually handle that in your code. Just check for undefined or NaN values and do something special in that case.

This should be absolutely possible. Read some of that material, if that doesn’t clarify well enough feel free to ask anything here!

(P.S. Don’t forget to check our library of community developed indicators - there are a lot of them already made. You can access the community library directly from the Tradovate dashboard, look at the control bar on the right hand side.)

3

Thank you for your answers. I have found already some nice indicators, it is getting better :slight_smile:

1 Like
4

Another issue what I would like to solve,
How can I catch the graph objects which was drawn by a custom indicator?
There is a key property, how can I call it?
Or is there a way to clear all graph objects from the chart? (the indicator objects cannot be removed manually)

5

When you say this, do you mean how do you remove indicators from the chart by code for some reason specific to your indicator, or because you just have too many indicators added to your chart and you want to clear it?

If you just mean manually clear the chart, click the “Configure Chart Elements” widget on the chart in question. It looks like a cog. Click the garbage can icon for any elements you want to remove.

6

I meant to clear the chart from graph objects by code.
Eg. I have a text on the top of the last closed bar. Every time it creates the same text, so the texts are overlaping. I would like to remove the last text and recreate it.

image

7

Ah I see. In map(d) you use d.isLast() property to draw only on the last element:

map(d) {
  return {
    graphics: d.isLast() && {
      items: [
        //your elements here... 
      ]
    }
  }
}

Any element you’d like to render only once, add the global field to that object:

//in the graphics items array
items: [
  {
    //some item
    global: true,
    //...
  }
]
8

I see. It solves one of the issue.
I am playing with these graph objects.

I give an example to see the complexity:

I have 2 points “a”’ and “b”. I can draw a line between, no problem.
Now, “a” is in the past and “b” is the last closed bar. (basically a is fixed point and b is moving with each new bar).
There comes 1 extra param, to check if the line would broke (between a and b close < line).

plus the text comes on the top of the line at [lastBar-1] with some calculated params.
I would like to remove the line if it would break. And so the text

So the graph items are stored (returned by the calculator). It would be nice to just clear the chart and create new items, or take them by name (key: “a”) and give new coordinates to them

9

Hmm, try looking through this document. The first part shows how to make a tool to determine if a condition is present…I have a feeling you could reuse some of this code with your own conditions, or use this as a template maybe. It’s a good primer on the graphics module either way. The chart redraws on each update so you should never need to manually clear indicators, but instead determine whether they should draw based on some condition.

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

10

I made an example code.
I would create that line always between a and last b.
I wonder how can I do that.

const predef = require("./tools/predef");
const {du} = require("./tools/graphics");
const meta = require("./tools/meta");

class test {
init() {

 this.aPoint ={x:0, y:0 , isSet: false};

}

map(d,i,history) {
    if(d.isLast()){
        return;
    };
    if(!history.prior()){
        return;
    }
    console.log(i, history.size()-1);
    if(i === history.size()-1){
    if(!this.aPoint.isSet){
        let p = history.get(i);
        //console.log(p.low());
        
        this.aPoint ={
            x:du(i),
            y:du(p.low()),
            isSet: true
        };
    };
    let b = history.get(i)
    let bPoint = {
        x:du(i),
        y:du(b.low())
        
    };
    
    let items = [{
        tag: 'LineSegments',
        key: 'testLine',
        lines: [{
                    tag: 'Line',
                    a: {
                        x: this.aPoint.x,
                        y: this.aPoint.y
                    }, 
                    b: {
                        x: bPoint.x,
                        y: bPoint.y
                    },
                    infiniteStart: false, 
                    infiniteEnd: false
                }],
                lineStyle: {
                    lineWidth: 1,
                    color: "red",
                    lineStyle: 1
                }        
    }];
    console.log(items);
    let res = {
            graphics:{
                 items
               }
        
    }; 
        return res;
    }else return;
    
}

}

module.exports = {
name: “test”,
description: “test”,
calculator: test,
tags: [“test”],
inputType: meta.InputType.BARS,
};
so it does something like on the picture.
image

Instead I would like to remove the previous lines and create only the last always when a new bar is coming

11

in the Market Replay mode, changes in the CodeExplorer after saving are reflected on the indicator immediately (redrawn or recalculated).
This does not happen in the Live or Simulation modes (((

12

I found an addiction!
The graphics window for debugging should be open along with the code explorer those are in bookmarks chart window and the code explorer.
2021-05-06 11.39.24

13

@Csaba_Csaba

You probably figured it out, but in case you didn’t, you just need a global: true property in your LineSegments.

So in the code you provided, it would be:

...

let items = [{
        tag: 'LineSegments',
        key: 'testLine',
        global: true,
        lines: [{
...