Label cells with Dynamic Stats & information directly in Chart panel like Thinkorswim

[futurenow]

Hello

I would like to know how I can have a kind of colored dynamic labels in a similar way like for example I’ve seen the Thinkorswim platform shows in its charts, but of course in NinjaTrader 8.

For now, the most approximate concept I’ve seen in NT8 is to have the stats information in the Market Analyzer (MarketAnalyzerColumns) but for what I need it is not a solution because depending of the situation, I could need many labels in the same panel, maybe 5-8 labels in 1 single panel but also maybe 20 labels, and being in a chart panel this could be shown in a kind of cells in series that could take 1-2-3 rows depending of the chart window size (if chart widow is maximized or not) that is acceptable in terms of window space, but the Market Analyzer requires to have a whole extra open window, and I think it could be much more simplified having the dynamic labels directly in the chart where needed, either in the price panel or in any indicator panel.

As reference, I know it may not be exactly what I’m talking about but I’ve seen the script called BarInfo in ninjatraderecosystem.com (https://ninjatraderecosystem.com/use...nload/barinfo/), and this visual concept maybe would be a more or less approximate visual idea about what would be to have “labels” with the specific dynamic-live information you could need, but perhaps there could be a way more simplified to get something similar but direcly in the chart/indicator panel without to have to work with WPF that for this visually simple indicator I quickly see that the total code took around 1,500 code lines. So a simplified way being into the chart would be welcome.

To have an idea, the labels I’m talking about show stats and information like in the next example:

[FONT=Arial]…
// Create a label in a “cell” either with a fixed width or with the width of the text that it is filled with.

// If the first label (label0), create the label in the top left corner, if not, create the label (labelN) next to
// the previous label with X pixels of space separation.

…
    if (Volume[0] > Volume[1] && Volume[0] < Volume[2])
    {
        // show into the label the [B]Volume change[/B] value for the current bar, (or if needed, for the bar where be the mouse pointer).
        // also show into the label the text “[B]Higher Volume[/B]” next to the Volume change value.
        // paint the label “cell” background in [COLOR=#006600][B]DarkGreen [/B][/COLOR]color.
    }

    else if (Volume[0] > Volume[1] && Volume[0] > Volume[2])
    {
        // show into the label the [B]Volume change[/B] value for the current bar, (or if needed, for the bar where be the mouse pointer).
        // also show into the label the text “[B]Strong Volume[/B]” next to the Volume change value.
        // paint the label “cell” background in [B][COLOR=#2ecc71]IntenseGreen [/COLOR][/B]color (LimeGreen).
    }
…[/FONT]

Finally, I will leave some pictures I’ve found in internet as references about the kind of labels I’m talking about, to see if there could be a script that can be used as base to be customized and add in the code the amount and kind of labels we could need.


Thank you in advance!

[NinjaTrader_Jesse]

Hello futurenow,

There are a variety of ways to add text to the chart, for the colored boxes the easiest way would be OnRender. In your OnBarUpdate logic you would update any variables as needed and then in OnRender you can display them in a custom way. There is the sample indicator called SampleCustomRender that demonstrates drawing text and rectangles along with chart coordinates, that would be the main items you would need for those boxes and text. That would be a lot less code than using WPF controls, you would simply be rendering variables on the chart.

[futurenow]

Hello futurenow,
There are a variety of ways to add text to the chart, for the colored boxes the easiest way would be OnRender.

Thank you for your answer

I tried with SampleCustomRender and I could modify the rectangle textbox it shows in the bottomRight chart corner to now be shown in the topLeft chart corner with custom text and with a variable value, so I see it could make the work. However, I see that maybe there could be an even more simplified way, but with a little problem I describe below.

As alternative I see I could use ‘Draw.TextFixed()’ with more or less the same visual result as the obtained with the SampleCustomRender script and everything done in 1 single code sentence per label (without conditional color selection of course), but with the problem that I can’t find the way to specify the coordinates where to place the textbox created with ‘Draw.TextFixed()’ because I can’t find how to change the pre-defined chart positions (TextPosition.TopLeft, TextPosition.TopRight, TextPosition.Center, …) replacing or adding to that part with something like ‘ChartPanel.X, ChartPanel.Y’ to maybe have a syntax like:

Draw.TextFixed(NinjaScriptBase owner, string tag, string text, ChartPanel.X, ChartPanel.Y, Brush textBrush, SimpleFont font, Brush outlineBrush, Brush areaBrush, int areaOpacity)

For now, the only way I’ve found to get the 2 textboxes labels in separate spaces with ‘Draw.TextFixed()’ is selecting the 2nd textbox fill color to transparent as follows:

…
protected override void OnBarUpdate()
{
    …
    Draw.TextFixed(this, "Label1", "Volume: " + variable1,
        TextPosition.TopLeft, Brushes.Black, new NinjaTrader.Gui.Tools.SimpleFont("Arial ", 12) { Size = 14, Bold = true },
        Brushes.Transparent, Brushes.DimGray, 100);

    // For the 2nd textbox test I had to use "\n" in order to get a label separation, because for the moment I haven’t found a way to make a X axis offset.
    Draw.TextFixed(this, "Label2", "\n" + "LabelText2: " + variable2,
        TextPosition.TopLeft, Brushes.Black, new NinjaTrader.Gui.Tools.SimpleFont("Arial", 12) { Size = 14, Bold = true },
        Brushes.Transparent, [B]Brushes.Transparent[/B], 100);
    …
}
…

[FONT=Arial][/FONT]

The reason to select the 2nd textbox fill color to transparent is because if you select a fill color for the 2nd textbox label, then the 2nd textbox are shown overlapping the 1st textbox causing the text of the 1st textbox is being hidden because I see when using the default ‘TextPosition.TopLeft’, it always take the chart TopLeft corner as starting point instead to take it as a reference point from which to select a start point not being necessarily anchored to the TopLeft point. What I mean is to have a way to specify the desired coordinates maybe with something like: (…TextPosition.TopLeft + (ChartPanel.X + 50px, ChartPanel.Y + 0px)…).


To see if you could help me with all this in case there is solution to have a more simplified way to show these simple labels that each one of them only need to show fixed text with variables values in multiple textboxes in a kind of columns either with 1 visual single row or with multiple rows. I also briefly tried with ‘Draw.Text()’ but I see it needs to be anchored to certain candle as reference and I couldn’t find how to place it fixed in static coordinates of the chart.


Please note that the reason to try to find a simplified solution for this is to have the code process as light and efficient as possible because the rest of the code I’m using could be a bit “heavy” and I need what I add be as light as possible and in the recent past I’ve seen that is like the indicators that use ‘SharpDX’ tend to not to be too light, with larger loading times in the chart, and mainly making the chart scroll slower etc. So for that reason I’m looking for alternatives.


Thank you

[eDanny]

Try setting up the second Draw.TextFixed first. This is because the text boxes overlap in order of creation.

[futurenow]

Try setting up the second Draw.TextFixed first. This is because the text boxes overlap in order of creation.

Thank you very nuch for your idea eDanny, it make a kind of patch that can work.

However, it would be interesting to have a way to specify the desired coordinates in a relatively simple way, maybe with something like:

Draw.TextFixed(this, "Label1", "Volume: " + variable1,
     TextPosition.TopLeft [B]+ (ChartPanel.X + 50px, ChartPanel.Y + 0px)[/B], Brushes.Black, new NinjaTrader.Gui.Tools.SimpleFont("Arial ", 12) { Size = 14, Bold = true },
     Brushes.Transparent, Brushes.DimGray, 100);

If you or NinjaTrader_Jessehave any other idea about to get a similar visual result but with a code more simplified and light than the code used in the script "SampleCustomRender", then those ideas are welcome, because this would be to work with a relatively heavy processing indicator, and the indicador needs to have between 5-20 labels, so I need this process to create the labels be as efficient and light as possible.


Thank you eDanny and NinjaTrader_Jesse for your time!