Highcharts Demo

author(s): Torstein Hønsi

by lakshmipathi

HTML

<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/highcharts-more.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>

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

JavaScript

function linearDataToRenko(data, change) {
    var renkoData = [],
        prevPrice = data[0][1],
        prevTrend = 0, // 0 - no trend, 1 - uptrend, 2 - downtrend
        length = data.length,
        currentPrice,
        i = 1,
        j;
    var markAbove = prevPrice + change,
        markBelow = prevPrice - change;

    debugger;

    for (; i < length; i++) {
        currentPrice = data[i][1];
        
        if (currentPrice > markAbove  ) {
            // Up trend

            if (prevTrend === 2) {
                prevPrice += change;
            }

            for (j = 0; j < (currentPrice - prevPrice) / change; j++) {
                renkoData.push({
                    x: data[i][0] + j,
                    y: prevPrice,
                    low: prevPrice,
                    high: prevPrice + change
                });
                prevPrice += change;
            }

            prevTrend = 1;

            markAbove = prevPrice + change,
                markBelow = prevPrice - change;

        } else if (currentPrice < markBelow && currentPrice != null) {

            if (prevTrend === 1) {
                prevPrice -= change;
            }
            // Down trend
            for (j = 0; j < (prevPrice - currentPrice) / change; j++) {
                renkoData.push({
                    x: data[i][0] + j,
                    y: prevPrice,
                    low: prevPrice - change,
                    high: prevPrice,
                    color: 'black'
                });
                prevPrice -= change;
            }

            prevTrend = 2;

            markAbove = prevPrice + change,
                markBelow = prevPrice - change;
        }

    }
    return renkoData;
}

$.getJSON('https://www.highcharts.com/samples/data/aapl-c.json', function(data) {
  // Create the chart
  Highcharts.stockChart('container', {


    rangeSelector: {
      selected: 1
    },

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

   ...