How to change time frame of the candle stick chart in Highcharts (Highstock)?

Question

I am drawing the candlestick chart using some json data received from bitfinex.com. My json data looks like this: https://api.bitfinex.com/v2/candles/trade:1m:tBTCUSD/hist?start=1515866400000&end=1515883264000 This json data is stored in the DB located on my localhost.

In the topic below the author uses buttons on the chart: 1m, 5m, 30m etc. Highcharts: Ugly Candlesticks I would like to use the same buttons at the same place but for changing the time frame of the chart. The Desired time frame would be 1m, 5m, 15m, 30m, 1h, 1d.

This functionality is well developed at https://www.tradingview.com/chart/Gxv53gcp/ where you can easily change the time frame of the chart from the drop-down menu in the left upper corner.

I am comfortable with building the chart out of different time frames requested from the server. Is there any way to request only 1m timeframe candles from the server, store it in the DB and then somehow force Highstock to render the bigger timeframes? I used this approach while using the default charting library in C# and it worked good. Maybe there is the same feature in Highstock?

Diego Slinger Diego Slinger · Accepted Answer · 2018-01-15T13:03:59

I have found the answer. This feature is called data groping. https://www.highcharts.com/docs/advanced-chart-features/data-grouping

JSfiddle example: http://jsfiddle.net/sqkhp67f/

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function (data) {

    // create the chart
    Highcharts.stockChart('container', {


        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Stock Price'
        },

        series: [{
            type: 'candlestick',
            name: 'AAPL Stock Price',
            //approximation : 'OHLC',
            data: data,
            
            dataGrouping: {
            groupPixelWidth: 20 // Quantity of points to group
            },
					

          
            /*
            dataGrouping: {
                units: [
                    [
                        'week', // unit name
                        [1] // allowed multiples
                    ], [
                        'month',
                        [1, 2, 3, 4, 6]
                    ]
                ]
            }
            */
        }]
    });
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

How to change time frame of the candle stick chart in Highcharts (Highstock)?

1 Answers