jquery.sparkline
jquery.sparkline copied to clipboard
gwatts
Problem with composite charts
@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
});
they share the same changeRangeMin + chartRangeMax asI tried to fixusing #181
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!
Makes sense, thanks! My use case is fairly similar, so variable color could be a good approach for me.
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.
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