Help with dynamic data for candlestick

[dockies]

Hello,

I am a newbie user of canvasjs. Can someone please help me on how to setup a candlestick with dynamic data.
My candlestick is somehow different with the normal candlestick. Instead of using time or date im using the number of transactions.
The candlestick will be drawn per batch (every 20 transactions) so for to give an example
transaction 1: value: 100 ( open: 100, high: 100, low: 100, close: ”)
transaction 2: value: 150 ( open: 100, high: 150, low: 100, close: ”)
transaction 3: value: 60 ( open: 100, high: 150, low: 60, close: ”)
transaction 4: value: 80 ( open: 100, high: 150, low: 60, close: ”)
transaction 5: value: 160 ( open: 100, high: 160, low: 60, close: ”)
….
transaction 20: value: 130 ( open: 100, high: 160, low: 60, close: 130)

So far i was able to create a candlestick but i realize that the candlestick becomes a mess while moving forward with the data (something is overlapping with the current candlestick)

Here is my code so far:

$(document).ready(function(){
var high = 0;
var low = 0;
var open = 0;
var close = 0;
var batchCounter = 1;
var transactionCount = 20;
var data = [];
var id=””;

var chart = new CanvasJS.Chart(“chartContainer”,
{
title:{
text: “Customized Candle Stick Chart”,
fontFamily: “times new roman”
},
zoomEnabled: true,
exportEnabled: true,
axisY: {
includeZero:false,
title: “Market price”,
prefix: “E ”
},
axisX: {
interval: transactionCount,
intervalType: “number”,
},
data: [
{
type: “candlestick”,
risingColor: “green”,
color: “red”,
dataPoints: data
}
]
});
chart.render();

for(var i=0;i<300;i++){

setTimeout(function(){

if(batchCounter == 21){
batchCounter = 1;
transactionCount = parseInt(transactionCount) + 20;
}

if(batchCounter == 1){
var idGen = new Generator();
var uid = idGen.getId();
id = ‘row_’+uid;
//Add new row if 20 records has been recorded
var row = “<tr id='”+id+”‘><td class=’open’>0</td><td class=’high’>0</td><td class=’low’>0</td><td class=’closing’></td>”;
$(‘#test’).append(row);
}

get_data($(“#”+id));

batchCounter++;

}, 500 + i * 1500);
}

function get_data(_row){

var number = 1 + Math.floor(Math.random() * 96);

//Check if this is the first in the batch
//Everything will be set by first data
if(batchCounter == 1){
_row.find(“td.open”).text(number);
open = number
high = number;
low = number;
_row.find(“td.high”).text(high);
_row.find(“td.low”).text(low);
}else{ //Check for high and low

if(parseFloat(number) > parseFloat(high))
high = number;

if(parseFloat(number) < parseFloat(low))
low = number;

_row.find(“td.high”).text(high);
_row.find(“td.low”).text(low);
}

if(batchCounter == 20){ //Once it reaches 20 it needs to close
_row.find(“td.closing”).text(number);
close = number;
}

data.push({x: transactionCount,y: [high, low, open, close]});
chart.render();
console.log(“trans number:”+batchCounter+” = “+number+” high:”+high+” low:”+low+” row_id:”+_row.attr(“id”));

}

});

[Indranil]

@dockies,

We observed that the code provided by you is incomplete, can you please create a jsfiddle, with the complete code along with your sample data so that we can understand the code better and help you out.

___________
Indranil Deo,
Team CanvasJS