Skip to content

An open source javascript library to render beautiful Kagi charts using D3.js and pure Javascript

License

Notifications You must be signed in to change notification settings

arpitnarechania/d3-kagi

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Option Description Type Options
width The width of the chart in pixels number 900
height The height of the chart in pixels number 500
margin.top The top margin number 75
margin.bottom The bottom margin number 50
margin.left The left margin number 100
margin.right The right margin number 50
showLegend Whether the legend is to be shown. bool true
caption The chart caption. string 'Caption'
subCaption The chart sub-caption string 'Sub Caption'
chartTheme Some themes for the chart rendering string 'light' (default), 'dark'
reversalType The basis on which the Kagi trend must reverse - difference or percentage string 'diff' (default), 'pct'
reversalValue The reversal value based on which the Kagi trend must reverse number 0.25
rallyColor The color of the Yang lines string 'green'
rallyThickness The thickness of the Yang lines number 3
rallyThicknessOnHover The thickness of the Yang lines when hovered upon number 5
declineColor The color of the Ying lines string 'red'
declineThickness The thickness of the Ying lines number 2
declineThicknessOnHover The thickness of the Ying lines when hovered upon number 4
showBreakPoints Whether to show the points where trend reversal happens bool true
breakPointColor The color of the break points string 'blue'
breakPointRadius The radius of the break points number 3
breakPointRadiusOnHover The radius of the break points when hovered upon number 5
showBreakPointTooltips Whether to show the tooltips when breakpoints are hovered upon bool true
showBreakPointText Whether to show the dates on x axis when trend reversal happens bool true
showRangeTooltips Whether to show the tooltips showing info for a particular trend bool true
unit Unit of the stock price (eg. $ ) string '$'
isPrecedingUnit Is the unit preceding like $ or succeeding like rupee bool true
animationEase The common animation easing functions string 'linear' (default)
animationDurationPerTrend The duration in which a trend must be animated number 500
showAnimation Whether to show animation or not. bool true

Author

Arpit Narechania arpitnarechania@gmail.com

License

MIT license.