Problem with composite charts

[wilburforce83]

@gwatts

I have an issue with rendering a single value baseline on top of a line chart. It is basically placing the second line at the bottom of the sparkline plot even if the values are in the middle of the first dataset.

I have managed to replicate it here, soI knowit'snot code related, any help is greatly appreciated!:

https://jsfiddle.net/fh9m4gb3/2/

                    $("#sparkline").sparkline(stream, {

                        spotColor: color,
                        type: 'line',
                        width: '100%',
                        height: '100%',
                        lineColor: color,
                        fillColor: '#BABABA40',
                        minSpotColor: '#C90000',
                        maxSpotColor: '#002AB3',
                        spotRadius: 4,
                        disableHighlight: true,
                        disableTooltips: true,
                        changeRangeMin: changeMinimum,
                        chartRangeMax: chartRangeMaximum,
                        drawNormalOnTop: false

                    });

                    if (winLossBarrier != 'no open trade') {
                        tradeLine = [winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier
                        ]

                        $("#sparkline").sparkline(tradeLine, {

                            spotColor: false,
                            type: 'line',
                            width: '100%',
                            height: '100%',
                            lineColor: '#002AB3',
                            fillColor: false,
                            minSpotColor: false,
                            maxSpotColor: false,
                            spotRadius: 4,
                            disableHighlight: true,
                            disableTooltips: false,
                            changeRangeMin: changeMinimum,
                            chartRangeMax: chartRangeMaximum,
                            composite: true,

                            drawNormalOnTop: false

                        });

[wilburforce83]

they share the same changeRangeMin + chartRangeMax asI tried to fixusing #181

[ny86p]

Was this ever resolved/figured out?

[wilburforce83]

Was this ever resolved/figured out?

It was a while ago now. I think I ended up using a variable colour either side of the baseline. I was trying to show a strike point on a trading app, so instead I render the chart with green when in profit and red when out of the money.

In short I think I went for a different approach. Sorry I could be of more help!

[ny86p]

Makes sense, thanks! My use case is fairly similar, so variable color could be a good approach for me.

[wilburforce83]

Makes sense, thanks! My use case is fairly similar, so variable color could be a good approach for me.

I'm not sure if it'll help you but this is my code for it. I am not a clean coder, so don't judge, more hack n slash til it works!!!!! but it might help you if its a similar use case:

api.events.on('tick', function (response) {

    ticks.push(response.tick.quote)
    lastTick = response.tick.quote * 1;
    lastEpoch = response.tick.epoch * 1;

    lastSecond = lastEpoch % 60;
    // Sparkline rendering

var length = 150;
    var normalRange = null; // this forces the normal range to fill the whole chart in my case 150 ticks
    var normalRange2 = null; // this forces the normal range to fill the whole chart in my case 150 ticks
    var color;
    var barrierColour;
    var drawontop;

    if (tradeInProgress === false) {
        normalRange = Math.max(...ticks.slice(-length));
        normalRange2 = Math.min(...ticks.slice(-length));
        color = 'orange';
        barrierColour = '#ffff';
        drawontop = false;
    }

    if (callOrPut == 'PUT' && winLossBarrier != 'no open trade') {
        // console.log('Main If Triggered PUT'+tradeBarrierNo)
        drawontop = true;
        // console.log('No barrier PUT')
        if (lastTick < winLossBarrier) {

            color = 'green';
            normalRange = winLossBarrier;
            normalRange2 = Math.min(...ticks.slice(-length));
            barrierColour = '#C6ECC940';

        } else if (lastTick > winLossBarrier) {
            color = 'red'
            normalRange2 = winLossBarrier;
            normalRange = Math.max(...ticks.slice(-length));
            barrierColour = '#EEB5B540';

        }

    }

    if (callOrPut == 'CALL' && winLossBarrier != 'no open trade') {
        // console.log('Main If Triggered CALL')
        normalRange2 = winLossBarrier;
        normalRange = Math.max(...ticks.slice(-length));
        // console.log('No barrier CALL')
        if (lastTick > winLossBarrier) {

            color = 'green';
            normalRange2 = winLossBarrier;
            normalRange = Math.max(...ticks.slice(-length));

            barrierColour = '#C6ECC940';

        } else if (lastTick < winLossBarrier) {
            color = 'red'
            normalRange = winLossBarrier;
            normalRange2 = Math.min(...ticks.slice(-length));

            barrierColour = '#EEB5B540';
        }

    }

    $("#sparkline").sparkline(ticks.slice(-length), {

        spotColor: color,
        type: 'line',
        width: '100%',
        height: '100%',
        lineColor: color,
        fillColor: '#BABABA40',
        minSpotColor: '#C90000',
        maxSpotColor: '#002AB3',
        spotRadius: 2,
        disableHighlight: true,
        disableTooltips: true,
        normalRangeMax: normalRange,
        normalRangeMin: normalRange2,
        normalRangeColor: barrierColour,
        drawNormalOnTop: drawontop

    });

});

My data comes from a subscription so I render the chart on each tick.

[wilburforce83]

you can see it working here: https://webtrader.binarybottrading.eu/ just click save to ignore the API token request, you be able to place a trade but you can see the chart and view the source

[ny86p]

Haha no judgement here! This is very helpful thankyou!!