D3-Kagi

D3-Kagi is an open-source JavaScript library for rendering Kagi charts using the D3.js library.

The Kagi chart is a chart used for tracking price movements and to make decisions on purchasing stock. It is one of the various charts that investors use to make better decisions about stocks. The most important benefit of this chart is that it is independent of time and change of direction occurs only when a specific amount is reached. It was originally developed in Japan during the 1870s when the Japanese stock market started trading. It was used for tracking the price movement of rice and found use in determining the general levels of supply and demand for certain assets.

Check out an Example where you can test various configuration options.

Installation

Download d3-kagi using bower.

bower install d3-kagi --save

To use this library then, simply include d3.js, jquery, kagi.js and kagi.css:

<script src="/path/to/d3.min.js"></script>
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/dist/kagi.css"></script>
<script src="/path/to/dist/kagi.js"></script>

Usage

To use this library, you must create a container element and instantiate a new Kagi chart:

<div id="kagiChart"></div>

Data in .json format

var data = [
  {
    "date": "2015-01-02",
    "close": 109.33
  },
  {
    "date": "2015-01-05",
    "close": 106.25
  },
  {
    "date": "2015-01-06",
    "close": 106.26
  }];

Setting chart parameters

    var chart_options = {
        "caption": "Caption",
        "subCaption": "Sub caption",
        "reversalValue": 25,
        "reversalType": "diff",
        "unit": "$",
        "isPrecedingUnit":true,
        "rallyThickness": "3",
        "rallyThicknessOnHover": "6",
        "declineThickness": "2",
        "declineThicknessOnHover": "4",
        "rallyColor": "#2ecc71",
        "declineColor": "#e74c3c",
        "width":900,
        "height":500,
        "margin":{top: 75, right: 50, bottom: 100, left: 50},
        "showBreakPoints":true,
        "showBreakPointText":true,
        "breakPointColor":"#3498db",
        "breakPointRadius":5,
        "breakPointRadiusOnHover":8,
        "showBreakPointTooltips":true,
        "showRangeTooltips":true,
        "showLegend":true,
        "chartTheme":"dark",
        "showAnimation":true,
        "animationDurationPerTrend":100,
        "animationEase":"linear"
        }

    KagiChart(data,chart_options);

Options

Author

Arpit Narechania [email protected]

License

MIT license.