Home forums Using CanvasJS Help with dynamic data for candlestick

This topic contains 1 reply, has 2 voices, and was last updated by  Indranil Deo 3 months, 4 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #19672

    dockies
    Member

    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”));

    }

    });

    #19679

    Indranil Deo
    Member

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.