Adding data to CandleChart(OHLC) for TeeChart(Javascript/HTML5)

Question

I'm trying to draw a CandleStick chart for a TeeChart JavaScript Version. However I only found the below demo. I'd like to find out how to add series(data) instead of using a addRandom() method. a addRandom() does not explain how to add a actual data.

if you can provide the demo with adding Json data would be wonderful. Thanks in advance.

function draw() {
  Chart1=new Tee.Chart("canvas");
  Chart1.title.text="Candle OHLC";

  var ohlc=new Tee.Candle();
  Chart1.addSeries(ohlc).addRandom(20);

  Chart1.draw();
}

Answer 1

You'll find populating series with JSON examples at the demo here, specially at the Data Sources section.

Candle series should be populated like this:

series.add(DateTime date, double open, double high, double low, double close);

However, with the Javascript version you should create the add function like this:

function draw() {
  Chart1=new Tee.Chart("canvas");
  Chart1.title.text="Candle OHLC";

  var ohlc=new Tee.Candle();
  Chart1.addSeries(ohlc);

  ohlc.add=function(open, close, high, low) {
    var d=this.data;
    var count;

    if (d.open) count=d.open.length+1; else count=1;
    d.values.length=count;
    d.close=d.values;

    if (d.open) d.open.length=count; else d.open=new Array(1);
    if (d.close) d.close.length=count; else d.close=new Array(1);
    if (d.high) d.high.length=count; else d.high=new Array(1);
    if (d.low) d.low.length=count; else d.low=new Array(1);

    d.open[count-1]=open;
    d.close[count-1]=close;
    d.high[count-1]=high;
    d.low[count-1]=low;
  }

  for (var i=0; i<5; i++) {
    var o=25+Math.random()*100;
    var c=o+(Math.random()*25)-12.5;
    ohlc.add(o, c, Math.max(o,c)+Math.random()*15, Math.min(o,c)-Math.random()*15);
  }

  Chart1.draw();
}