-1

I have working dynamically updated areaspline chart that receives new series' points every second. Is it possible to represent the same data in candlestick view (with dynamically updated last candle) without preparing special candlestick data? Maybe some plugin can calculate and generate candlestick data?

Fedor Alexandrovich
  • 147
  • 1
  • 8
  • 1
    One candlestick has 4 values, one area data point has 1 value. How do you expect to generate candlesticks from that? Please show us an example chart. – Sphinxxx Oct 01 '17 at 14:45
  • Well, that was what I asked for. I'm looking for a solution that can automatically calculate this 4 values from the area data period. The calculation is very simple, but I think there can be some ready-made plugin or something. I just want to avoid generating new data feed. Example chart: http://jsfiddle.net/r43nr3L2/ – Fedor Alexandrovich Oct 01 '17 at 18:44
  • That does not really make sense. How do you want to divide one value into four? What algorithm do you want to use? You can for example create OHLC values based on y value. Example: http://jsfiddle.net/bmxyhcoo/. – pawel_d Oct 02 '17 at 12:32
  • Candlestick data contains 4 values: enter, exit, high, low. All of these parameters we can get from a part of series, that equal candlestick period. Or I'm wrong? – Fedor Alexandrovich Oct 02 '17 at 16:03

1 Answers1

3

So you want to group the data points into for example 10 second candlesticks? Yes, it actually can be done by changing the series' type to candlestick and apply dataGrouping.

But now the series expects OHLC data, so we need to convert the data slightly before adding it to the series (see the fakeOHLC() method):

    ...

    series: [{
        name: 'Random data',
        type: 'candlestick',
        dataGrouping: {
            forced: true,
            units: [['second', [10]]]
        },
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -999; i <= 0; i += 1) {
                var point = fakeOHLC(time + i * 1000, Math.round(Math.random() * 100));
                data.push(point);
            }
            return data;
        }())
    }]
});

function fakeOHLC(time, value) {
      return [time, value, value, value, value];
}

http://jsfiddle.net/r43nr3L2/1/

Edit:

A hack to make the x-axis move only when a new candle is drawn, and not on every incoming tick, is to round all time values to the current candle's start time. (See also the discussion on priikone's "Question 3" here: https://forum.highcharts.com/post120232.html)

function fakeOHLC(time, value) {
    time = Math.floor(time/10000) * 10000;
    return [time, value, value, value, value];
}

http://jsfiddle.net/r43nr3L2/2/

Sphinxxx
  • 12,484
  • 4
  • 54
  • 84
  • Works good, but has one bug (or not). When thу candle builds while browser's tab is not active, candles do not show properly - only dashes. And tooltip shows that all 4 parameters (o,h,l,c) of each candle are equal. – Fedor Alexandrovich Oct 08 '17 at 15:04
  • 1
    That's because this example uses `setInterval` to generate the data. Inactive tabs get less CPU time, and `setInterval` will usually fire less frequently. See for example https://stackoverflow.com/questions/5927284/how-can-i-make-setinterval-also-work-when-a-tab-is-inactive-in-chrome or https://stackoverflow.com/questions/23506103/setinterval-slows-down-with-tab-window-inactive – Sphinxxx Oct 09 '17 at 14:04
  • Thank you! I've moved forward with your help. Now i have another difficulty with this method. The overall animation doesn't work for some reason. In your method: http://jsfiddle.net/hwkwtmkq/ But here it does by default: http://jsfiddle.net/ckXaz/8/ – Fedor Alexandrovich Oct 12 '17 at 11:39
  • What do you mean by "overall animation"? That the latest candle gradually changes its size between ticks? Looks like it's caused by `dataGrouping`. In your "AAPL Historical" fiddle, click `1y` on the zoom menu so the data is grouped into weeks, and the candle doesn't animate anymore. – Sphinxxx Oct 12 '17 at 15:01
  • Overall animation is the word used here: http://api.highcharts.com/highstock/chart.animation to describe all animations except initial easing if a chart (if I understood correctly). I need the movement of the last candle and the shifting of the chart left when new candle appears to be more smooth (animated) instead of changing step by step. – Fedor Alexandrovich Oct 12 '17 at 21:03