Kagi Chart to observe trends in Stock Prices.
** Check out the open source library on
** Author
- Arpit Narechania
- arpitnarechania@gmail.com
Kagi Chart to observe trends in Stock Prices.
** Check out the open source library on
** Author
var data = [ | |
{ | |
"date": "2015-01-02", | |
"close": 109.330002 | |
}, | |
{ | |
"date": "2015-01-05", | |
"close": 106.25 | |
}, | |
{ | |
"date": "2015-01-06", | |
"close": 106.260002 | |
}, | |
{ | |
"date": "2015-01-07", | |
"close": 107.75 | |
}, | |
{ | |
"date": "2015-01-08", | |
"close": 111.889999 | |
}, | |
{ | |
"date": "2015-01-09", | |
"close": 112.010002 | |
}, | |
{ | |
"date": "2015-01-12", | |
"close": 109.25 | |
}, | |
{ | |
"date": "2015-01-13", | |
"close": 110.220001 | |
}, | |
{ | |
"date": "2015-01-14", | |
"close": 109.800003 | |
}, | |
{ | |
"date": "2015-01-15", | |
"close": 106.82 | |
}, | |
{ | |
"date": "2015-01-16", | |
"close": 105.989998 | |
}, | |
{ | |
"date": "2015-01-20", | |
"close": 108.720001 | |
}, | |
{ | |
"date": "2015-01-21", | |
"close": 109.550003 | |
}, | |
{ | |
"date": "2015-01-22", | |
"close": 112.400002 | |
}, | |
{ | |
"date": "2015-01-23", | |
"close": 112.980003 | |
}, | |
{ | |
"date": "2015-01-26", | |
"close": 113.099998 | |
}, | |
{ | |
"date": "2015-01-27", | |
"close": 109.139999 | |
}, | |
{ | |
"date": "2015-01-28", | |
"close": 115.309998 | |
}, | |
{ | |
"date": "2015-01-29", | |
"close": 118.900002 | |
}, | |
{ | |
"date": "2015-01-30", | |
"close": 117.160004 | |
}, | |
{ | |
"date": "2015-02-02", | |
"close": 118.629997 | |
}, | |
{ | |
"date": "2015-02-03", | |
"close": 118.650002 | |
}, | |
{ | |
"date": "2015-02-04", | |
"close": 119.559998 | |
}, | |
{ | |
"date": "2015-02-05", | |
"close": 119.940002 | |
}, | |
{ | |
"date": "2015-02-06", | |
"close": 118.93 | |
}, | |
{ | |
"date": "2015-02-09", | |
"close": 119.720001 | |
}, | |
{ | |
"date": "2015-02-10", | |
"close": 122.019997 | |
}, | |
{ | |
"date": "2015-02-11", | |
"close": 124.879997 | |
}, | |
{ | |
"date": "2015-02-12", | |
"close": 126.459999 | |
}, | |
{ | |
"date": "2015-02-13", | |
"close": 127.080002 | |
}, | |
{ | |
"date": "2015-02-17", | |
"close": 127.830002 | |
}, | |
{ | |
"date": "2015-02-18", | |
"close": 128.720001 | |
}, | |
{ | |
"date": "2015-02-19", | |
"close": 128.449997 | |
}, | |
{ | |
"date": "2015-02-20", | |
"close": 129.5 | |
}, | |
{ | |
"date": "2015-02-23", | |
"close": 133 | |
}, | |
{ | |
"date": "2015-02-24", | |
"close": 132.169998 | |
}, | |
{ | |
"date": "2015-02-25", | |
"close": 128.789993 | |
}, | |
{ | |
"date": "2015-02-26", | |
"close": 130.419998 | |
}, | |
{ | |
"date": "2015-02-27", | |
"close": 128.460007 | |
}, | |
{ | |
"date": "2015-03-02", | |
"close": 129.089996 | |
}, | |
{ | |
"date": "2015-03-03", | |
"close": 129.360001 | |
}, | |
{ | |
"date": "2015-03-04", | |
"close": 128.539993 | |
}, | |
{ | |
"date": "2015-03-05", | |
"close": 126.410004 | |
}, | |
{ | |
"date": "2015-03-06", | |
"close": 126.599998 | |
}, | |
{ | |
"date": "2015-03-09", | |
"close": 127.139999 | |
}, | |
{ | |
"date": "2015-03-10", | |
"close": 124.510002 | |
}, | |
{ | |
"date": "2015-03-11", | |
"close": 122.239998 | |
}, | |
{ | |
"date": "2015-03-12", | |
"close": 124.449997 | |
}, | |
{ | |
"date": "2015-03-13", | |
"close": 123.589996 | |
}, | |
{ | |
"date": "2015-03-16", | |
"close": 124.949997 | |
}, | |
{ | |
"date": "2015-03-17", | |
"close": 127.040001 | |
}, | |
{ | |
"date": "2015-03-18", | |
"close": 128.470001 | |
}, | |
{ | |
"date": "2015-03-19", | |
"close": 127.5 | |
}, | |
{ | |
"date": "2015-03-20", | |
"close": 125.900002 | |
}, | |
{ | |
"date": "2015-03-23", | |
"close": 127.209999 | |
}, | |
{ | |
"date": "2015-03-24", | |
"close": 126.690002 | |
}, | |
{ | |
"date": "2015-03-25", | |
"close": 123.379997 | |
}, | |
{ | |
"date": "2015-03-26", | |
"close": 124.239998 | |
}, | |
{ | |
"date": "2015-03-27", | |
"close": 123.25 | |
}, | |
{ | |
"date": "2015-03-30", | |
"close": 126.370003 | |
}, | |
{ | |
"date": "2015-03-31", | |
"close": 124.43 | |
}, | |
{ | |
"date": "2015-04-01", | |
"close": 124.25 | |
}, | |
{ | |
"date": "2015-04-02", | |
"close": 125.32 | |
}, | |
{ | |
"date": "2015-04-06", | |
"close": 127.349998 | |
}, | |
{ | |
"date": "2015-04-07", | |
"close": 126.010002 | |
}, | |
{ | |
"date": "2015-04-08", | |
"close": 125.599998 | |
}, | |
{ | |
"date": "2015-04-09", | |
"close": 126.559998 | |
}, | |
{ | |
"date": "2015-04-10", | |
"close": 127.099998 | |
}, | |
{ | |
"date": "2015-04-13", | |
"close": 126.849998 | |
}, | |
{ | |
"date": "2015-04-14", | |
"close": 126.300003 | |
}, | |
{ | |
"date": "2015-04-15", | |
"close": 126.779999 | |
}, | |
{ | |
"date": "2015-04-16", | |
"close": 126.169998 | |
}, | |
{ | |
"date": "2015-04-17", | |
"close": 124.75 | |
}, | |
{ | |
"date": "2015-04-20", | |
"close": 127.599998 | |
}, | |
{ | |
"date": "2015-04-21", | |
"close": 126.910004 | |
}, | |
{ | |
"date": "2015-04-22", | |
"close": 128.619995 | |
}, | |
{ | |
"date": "2015-04-23", | |
"close": 129.669998 | |
}, | |
{ | |
"date": "2015-04-24", | |
"close": 130.279999 | |
}, | |
{ | |
"date": "2015-04-27", | |
"close": 132.649994 | |
}, | |
{ | |
"date": "2015-04-28", | |
"close": 130.559998 | |
}, | |
{ | |
"date": "2015-04-29", | |
"close": 128.639999 | |
}, | |
{ | |
"date": "2015-04-30", | |
"close": 125.150002 | |
}, | |
{ | |
"date": "2015-05-01", | |
"close": 128.949997 | |
}, | |
{ | |
"date": "2015-05-04", | |
"close": 128.699997 | |
}, | |
{ | |
"date": "2015-05-05", | |
"close": 125.800003 | |
}, | |
{ | |
"date": "2015-05-06", | |
"close": 125.010002 | |
}, | |
{ | |
"date": "2015-05-07", | |
"close": 125.260002 | |
}, | |
{ | |
"date": "2015-05-08", | |
"close": 127.620003 | |
}, | |
{ | |
"date": "2015-05-11", | |
"close": 126.32 | |
}, | |
{ | |
"date": "2015-05-12", | |
"close": 125.870003 | |
}, | |
{ | |
"date": "2015-05-13", | |
"close": 126.010002 | |
}, | |
{ | |
"date": "2015-05-14", | |
"close": 128.949997 | |
}, | |
{ | |
"date": "2015-05-15", | |
"close": 128.770004 | |
}, | |
{ | |
"date": "2015-05-18", | |
"close": 130.190002 | |
}, | |
{ | |
"date": "2015-05-19", | |
"close": 130.070007 | |
}, | |
{ | |
"date": "2015-05-20", | |
"close": 130.059998 | |
}, | |
{ | |
"date": "2015-05-21", | |
"close": 131.389999 | |
}, | |
{ | |
"date": "2015-05-22", | |
"close": 132.539993 | |
}, | |
{ | |
"date": "2015-05-26", | |
"close": 129.619995 | |
}, | |
{ | |
"date": "2015-05-27", | |
"close": 132.039993 | |
}, | |
{ | |
"date": "2015-05-28", | |
"close": 131.779999 | |
}, | |
{ | |
"date": "2015-05-29", | |
"close": 130.279999 | |
}, | |
{ | |
"date": "2015-06-01", | |
"close": 130.539993 | |
}, | |
{ | |
"date": "2015-06-02", | |
"close": 129.960007 | |
}, | |
{ | |
"date": "2015-06-03", | |
"close": 130.119995 | |
}, | |
{ | |
"date": "2015-06-04", | |
"close": 129.360001 | |
}, | |
{ | |
"date": "2015-06-05", | |
"close": 128.649994 | |
}, | |
{ | |
"date": "2015-06-08", | |
"close": 127.800003 | |
}, | |
{ | |
"date": "2015-06-09", | |
"close": 127.419998 | |
}, | |
{ | |
"date": "2015-06-10", | |
"close": 128.880005 | |
}, | |
{ | |
"date": "2015-06-11", | |
"close": 128.589996 | |
}, | |
{ | |
"date": "2015-06-12", | |
"close": 127.169998 | |
}, | |
{ | |
"date": "2015-06-15", | |
"close": 126.919998 | |
}, | |
{ | |
"date": "2015-06-16", | |
"close": 127.599998 | |
}, | |
{ | |
"date": "2015-06-17", | |
"close": 127.300003 | |
}, | |
{ | |
"date": "2015-06-18", | |
"close": 127.879997 | |
}, | |
{ | |
"date": "2015-06-19", | |
"close": 126.599998 | |
}, | |
{ | |
"date": "2015-06-22", | |
"close": 127.610001 | |
}, | |
{ | |
"date": "2015-06-23", | |
"close": 127.029999 | |
}, | |
{ | |
"date": "2015-06-24", | |
"close": 128.110001 | |
}, | |
{ | |
"date": "2015-06-25", | |
"close": 127.5 | |
}, | |
{ | |
"date": "2015-06-26", | |
"close": 126.75 | |
}, | |
{ | |
"date": "2015-06-29", | |
"close": 124.529999 | |
}, | |
{ | |
"date": "2015-06-30", | |
"close": 125.43 | |
}, | |
{ | |
"date": "2015-07-01", | |
"close": 126.599998 | |
}, | |
{ | |
"date": "2015-07-02", | |
"close": 126.440002 | |
}, | |
{ | |
"date": "2015-07-06", | |
"close": 126 | |
}, | |
{ | |
"date": "2015-07-07", | |
"close": 125.690002 | |
}, | |
{ | |
"date": "2015-07-08", | |
"close": 122.57 | |
}, | |
{ | |
"date": "2015-07-09", | |
"close": 120.07 | |
}, | |
{ | |
"date": "2015-07-10", | |
"close": 123.279999 | |
}, | |
{ | |
"date": "2015-07-13", | |
"close": 125.660004 | |
}, | |
{ | |
"date": "2015-07-14", | |
"close": 125.610001 | |
}, | |
{ | |
"date": "2015-07-15", | |
"close": 126.82 | |
}, | |
{ | |
"date": "2015-07-16", | |
"close": 128.509995 | |
}, | |
{ | |
"date": "2015-07-17", | |
"close": 129.619995 | |
}, | |
{ | |
"date": "2015-07-20", | |
"close": 132.070007 | |
}, | |
{ | |
"date": "2015-07-21", | |
"close": 130.75 | |
}, | |
{ | |
"date": "2015-07-22", | |
"close": 125.220001 | |
}, | |
{ | |
"date": "2015-07-23", | |
"close": 125.160004 | |
}, | |
{ | |
"date": "2015-07-24", | |
"close": 124.5 | |
}, | |
{ | |
"date": "2015-07-27", | |
"close": 122.769997 | |
}, | |
{ | |
"date": "2015-07-28", | |
"close": 123.379997 | |
}, | |
{ | |
"date": "2015-07-29", | |
"close": 122.989998 | |
}, | |
{ | |
"date": "2015-07-30", | |
"close": 122.370003 | |
}, | |
{ | |
"date": "2015-07-31", | |
"close": 121.300003 | |
}, | |
{ | |
"date": "2015-08-03", | |
"close": 118.440002 | |
}, | |
{ | |
"date": "2015-08-04", | |
"close": 114.639999 | |
}, | |
{ | |
"date": "2015-08-05", | |
"close": 115.400002 | |
}, | |
{ | |
"date": "2015-08-06", | |
"close": 115.129997 | |
}, | |
{ | |
"date": "2015-08-07", | |
"close": 115.519997 | |
}, | |
{ | |
"date": "2015-08-10", | |
"close": 119.720001 | |
}, | |
{ | |
"date": "2015-08-11", | |
"close": 113.489998 | |
}, | |
{ | |
"date": "2015-08-12", | |
"close": 115.239998 | |
}, | |
{ | |
"date": "2015-08-13", | |
"close": 115.150002 | |
}, | |
{ | |
"date": "2015-08-14", | |
"close": 115.959999 | |
}, | |
{ | |
"date": "2015-08-17", | |
"close": 117.160004 | |
}, | |
{ | |
"date": "2015-08-18", | |
"close": 116.5 | |
}, | |
{ | |
"date": "2015-08-19", | |
"close": 115.010002 | |
}, | |
{ | |
"date": "2015-08-20", | |
"close": 112.650002 | |
}, | |
{ | |
"date": "2015-08-21", | |
"close": 105.760002 | |
}, | |
{ | |
"date": "2015-08-24", | |
"close": 103.120003 | |
}, | |
{ | |
"date": "2015-08-25", | |
"close": 103.739998 | |
}, | |
{ | |
"date": "2015-08-26", | |
"close": 109.690002 | |
}, | |
{ | |
"date": "2015-08-27", | |
"close": 112.919998 | |
}, | |
{ | |
"date": "2015-08-28", | |
"close": 113.290001 | |
}, | |
{ | |
"date": "2015-08-31", | |
"close": 112.760002 | |
}, | |
{ | |
"date": "2015-09-01", | |
"close": 107.720001 | |
}, | |
{ | |
"date": "2015-09-02", | |
"close": 112.339996 | |
}, | |
{ | |
"date": "2015-09-03", | |
"close": 110.370003 | |
}, | |
{ | |
"date": "2015-09-04", | |
"close": 109.269997 | |
}, | |
{ | |
"date": "2015-09-08", | |
"close": 112.309998 | |
}, | |
{ | |
"date": "2015-09-09", | |
"close": 110.150002 | |
}, | |
{ | |
"date": "2015-09-10", | |
"close": 112.57 | |
}, | |
{ | |
"date": "2015-09-11", | |
"close": 114.209999 | |
}, | |
{ | |
"date": "2015-09-14", | |
"close": 115.309998 | |
}, | |
{ | |
"date": "2015-09-15", | |
"close": 116.279999 | |
}, | |
{ | |
"date": "2015-09-16", | |
"close": 116.410004 | |
}, | |
{ | |
"date": "2015-09-17", | |
"close": 113.919998 | |
}, | |
{ | |
"date": "2015-09-18", | |
"close": 113.449997 | |
}, | |
{ | |
"date": "2015-09-21", | |
"close": 115.209999 | |
}, | |
{ | |
"date": "2015-09-22", | |
"close": 113.400002 | |
}, | |
{ | |
"date": "2015-09-23", | |
"close": 114.32 | |
}, | |
{ | |
"date": "2015-09-24", | |
"close": 115 | |
}, | |
{ | |
"date": "2015-09-25", | |
"close": 114.709999 | |
}, | |
{ | |
"date": "2015-09-28", | |
"close": 112.440002 | |
}, | |
{ | |
"date": "2015-09-29", | |
"close": 109.059998 | |
}, | |
{ | |
"date": "2015-09-30", | |
"close": 110.300003 | |
}, | |
{ | |
"date": "2015-10-01", | |
"close": 109.580002 | |
}, | |
{ | |
"date": "2015-10-02", | |
"close": 110.379997 | |
}, | |
{ | |
"date": "2015-10-05", | |
"close": 110.779999 | |
}, | |
{ | |
"date": "2015-10-06", | |
"close": 111.309998 | |
}, | |
{ | |
"date": "2015-10-07", | |
"close": 110.779999 | |
}, | |
{ | |
"date": "2015-10-08", | |
"close": 109.5 | |
}, | |
{ | |
"date": "2015-10-09", | |
"close": 112.120003 | |
}, | |
{ | |
"date": "2015-10-12", | |
"close": 111.599998 | |
}, | |
{ | |
"date": "2015-10-13", | |
"close": 111.790001 | |
}, | |
{ | |
"date": "2015-10-14", | |
"close": 110.209999 | |
}, | |
{ | |
"date": "2015-10-15", | |
"close": 111.860001 | |
}, | |
{ | |
"date": "2015-10-16", | |
"close": 111.040001 | |
}, | |
{ | |
"date": "2015-10-19", | |
"close": 111.730003 | |
}, | |
{ | |
"date": "2015-10-20", | |
"close": 113.769997 | |
}, | |
{ | |
"date": "2015-10-21", | |
"close": 113.760002 | |
}, | |
{ | |
"date": "2015-10-22", | |
"close": 115.5 | |
}, | |
{ | |
"date": "2015-10-23", | |
"close": 119.080002 | |
}, | |
{ | |
"date": "2015-10-26", | |
"close": 115.279999 | |
}, | |
{ | |
"date": "2015-10-27", | |
"close": 114.550003 | |
}, | |
{ | |
"date": "2015-10-28", | |
"close": 119.269997 | |
}, | |
{ | |
"date": "2015-10-29", | |
"close": 120.529999 | |
}, | |
{ | |
"date": "2015-10-30", | |
"close": 119.5 | |
}, | |
{ | |
"date": "2015-11-02", | |
"close": 121.18 | |
}, | |
{ | |
"date": "2015-11-03", | |
"close": 122.57 | |
}, | |
{ | |
"date": "2015-11-04", | |
"close": 122 | |
}, | |
{ | |
"date": "2015-11-05", | |
"close": 120.919998 | |
}, | |
{ | |
"date": "2015-11-06", | |
"close": 121.059998 | |
}, | |
{ | |
"date": "2015-11-09", | |
"close": 120.57 | |
}, | |
{ | |
"date": "2015-11-10", | |
"close": 116.769997 | |
}, | |
{ | |
"date": "2015-11-11", | |
"close": 116.110001 | |
}, | |
{ | |
"date": "2015-11-12", | |
"close": 115.720001 | |
}, | |
{ | |
"date": "2015-11-13", | |
"close": 112.339996 | |
}, | |
{ | |
"date": "2015-11-16", | |
"close": 114.18 | |
}, | |
{ | |
"date": "2015-11-17", | |
"close": 113.690002 | |
}, | |
{ | |
"date": "2015-11-18", | |
"close": 117.290001 | |
}, | |
{ | |
"date": "2015-11-19", | |
"close": 118.779999 | |
}, | |
{ | |
"date": "2015-11-20", | |
"close": 119.300003 | |
}, | |
{ | |
"date": "2015-11-23", | |
"close": 117.75 | |
}, | |
{ | |
"date": "2015-11-24", | |
"close": 118.879997 | |
}, | |
{ | |
"date": "2015-11-25", | |
"close": 118.029999 | |
}, | |
{ | |
"date": "2015-11-27", | |
"close": 117.809998 | |
}, | |
{ | |
"date": "2015-11-30", | |
"close": 118.300003 | |
}, | |
{ | |
"date": "2015-12-01", | |
"close": 117.339996 | |
}, | |
{ | |
"date": "2015-12-02", | |
"close": 116.279999 | |
}, | |
{ | |
"date": "2015-12-03", | |
"close": 115.199997 | |
}, | |
{ | |
"date": "2015-12-04", | |
"close": 119.029999 | |
}, | |
{ | |
"date": "2015-12-07", | |
"close": 118.279999 | |
}, | |
{ | |
"date": "2015-12-08", | |
"close": 118.230003 | |
}, | |
{ | |
"date": "2015-12-09", | |
"close": 115.620003 | |
}, | |
{ | |
"date": "2015-12-10", | |
"close": 116.169998 | |
}, | |
{ | |
"date": "2015-12-11", | |
"close": 113.18 | |
}, | |
{ | |
"date": "2015-12-14", | |
"close": 112.480003 | |
}, | |
{ | |
"date": "2015-12-15", | |
"close": 110.489998 | |
}, | |
{ | |
"date": "2015-12-16", | |
"close": 111.339996 | |
}, | |
{ | |
"date": "2015-12-17", | |
"close": 108.980003 | |
}, | |
{ | |
"date": "2015-12-18", | |
"close": 106.029999 | |
}, | |
{ | |
"date": "2015-12-21", | |
"close": 107.330002 | |
}, | |
{ | |
"date": "2015-12-22", | |
"close": 107.230003 | |
}, | |
{ | |
"date": "2015-12-23", | |
"close": 108.610001 | |
}, | |
{ | |
"date": "2015-12-24", | |
"close": 108.029999 | |
}, | |
{ | |
"date": "2015-12-28", | |
"close": 106.82 | |
}, | |
{ | |
"date": "2015-12-29", | |
"close": 108.739998 | |
}, | |
{ | |
"date": "2015-12-30", | |
"close": 107.32 | |
}, | |
{ | |
"date": "2015-12-31", | |
"close": 105.260002 | |
}, | |
{ | |
"date": "2016-01-04", | |
"close": 105.349998 | |
}, | |
{ | |
"date": "2016-01-05", | |
"close": 102.709999 | |
}, | |
{ | |
"date": "2016-01-06", | |
"close": 100.699997 | |
}, | |
{ | |
"date": "2016-01-07", | |
"close": 96.449997 | |
}, | |
{ | |
"date": "2016-01-08", | |
"close": 96.959999 | |
}, | |
{ | |
"date": "2016-01-11", | |
"close": 98.529999 | |
}, | |
{ | |
"date": "2016-01-12", | |
"close": 99.959999 | |
}, | |
{ | |
"date": "2016-01-13", | |
"close": 97.389999 | |
}, | |
{ | |
"date": "2016-01-14", | |
"close": 99.519997 | |
}, | |
{ | |
"date": "2016-01-15", | |
"close": 97.129997 | |
}, | |
{ | |
"date": "2016-01-19", | |
"close": 96.660004 | |
}, | |
{ | |
"date": "2016-01-20", | |
"close": 96.790001 | |
}, | |
{ | |
"date": "2016-01-21", | |
"close": 96.300003 | |
}, | |
{ | |
"date": "2016-01-22", | |
"close": 101.419998 | |
}, | |
{ | |
"date": "2016-01-25", | |
"close": 99.440002 | |
}, | |
{ | |
"date": "2016-01-26", | |
"close": 99.989998 | |
}, | |
{ | |
"date": "2016-01-27", | |
"close": 93.419998 | |
}, | |
{ | |
"date": "2016-01-28", | |
"close": 94.089996 | |
}, | |
{ | |
"date": "2016-01-29", | |
"close": 97.339996 | |
}, | |
{ | |
"date": "2016-02-01", | |
"close": 96.43 | |
}, | |
{ | |
"date": "2016-02-02", | |
"close": 94.480003 | |
}, | |
{ | |
"date": "2016-02-03", | |
"close": 96.349998 | |
}, | |
{ | |
"date": "2016-02-04", | |
"close": 96.599998 | |
}, | |
{ | |
"date": "2016-02-05", | |
"close": 94.019997 | |
}, | |
{ | |
"date": "2016-02-08", | |
"close": 95.010002 | |
}, | |
{ | |
"date": "2016-02-09", | |
"close": 94.989998 | |
}, | |
{ | |
"date": "2016-02-10", | |
"close": 94.269997 | |
}, | |
{ | |
"date": "2016-02-11", | |
"close": 93.699997 | |
}, | |
{ | |
"date": "2016-02-12", | |
"close": 93.989998 | |
}, | |
{ | |
"date": "2016-02-16", | |
"close": 96.639999 | |
}, | |
{ | |
"date": "2016-02-17", | |
"close": 98.120003 | |
}, | |
{ | |
"date": "2016-02-18", | |
"close": 96.260002 | |
}, | |
{ | |
"date": "2016-02-19", | |
"close": 96.040001 | |
}, | |
{ | |
"date": "2016-02-22", | |
"close": 96.879997 | |
}, | |
{ | |
"date": "2016-02-23", | |
"close": 94.690002 | |
}, | |
{ | |
"date": "2016-02-24", | |
"close": 96.099998 | |
}, | |
{ | |
"date": "2016-02-25", | |
"close": 96.760002 | |
}, | |
{ | |
"date": "2016-02-26", | |
"close": 96.910004 | |
}, | |
{ | |
"date": "2016-02-29", | |
"close": 96.690002 | |
}, | |
{ | |
"date": "2016-03-01", | |
"close": 100.529999 | |
}, | |
{ | |
"date": "2016-03-02", | |
"close": 100.75 | |
}, | |
{ | |
"date": "2016-03-03", | |
"close": 101.5 | |
}, | |
{ | |
"date": "2016-03-04", | |
"close": 103.010002 | |
}, | |
{ | |
"date": "2016-03-07", | |
"close": 101.870003 | |
}, | |
{ | |
"date": "2016-03-08", | |
"close": 101.029999 | |
}, | |
{ | |
"date": "2016-03-09", | |
"close": 101.120003 | |
}, | |
{ | |
"date": "2016-03-10", | |
"close": 101.169998 | |
}, | |
{ | |
"date": "2016-03-11", | |
"close": 102.260002 | |
}, | |
{ | |
"date": "2016-03-14", | |
"close": 102.519997 | |
}, | |
{ | |
"date": "2016-03-15", | |
"close": 104.580002 | |
}, | |
{ | |
"date": "2016-03-16", | |
"close": 105.970001 | |
}, | |
{ | |
"date": "2016-03-17", | |
"close": 105.800003 | |
}, | |
{ | |
"date": "2016-03-18", | |
"close": 105.919998 | |
}, | |
{ | |
"date": "2016-03-21", | |
"close": 105.910004 | |
}, | |
{ | |
"date": "2016-03-22", | |
"close": 106.720001 | |
}, | |
{ | |
"date": "2016-03-23", | |
"close": 106.129997 | |
}, | |
{ | |
"date": "2016-03-24", | |
"close": 105.669998 | |
}, | |
{ | |
"date": "2016-03-28", | |
"close": 105.190002 | |
}, | |
{ | |
"date": "2016-03-29", | |
"close": 107.68 | |
}, | |
{ | |
"date": "2016-03-30", | |
"close": 109.559998 | |
}, | |
{ | |
"date": "2016-03-31", | |
"close": 108.989998 | |
}, | |
{ | |
"date": "2016-04-01", | |
"close": 109.989998 | |
}, | |
{ | |
"date": "2016-04-04", | |
"close": 111.120003 | |
}, | |
{ | |
"date": "2016-04-05", | |
"close": 109.809998 | |
}, | |
{ | |
"date": "2016-04-06", | |
"close": 110.959999 | |
}, | |
{ | |
"date": "2016-04-07", | |
"close": 108.540001 | |
}, | |
{ | |
"date": "2016-04-08", | |
"close": 108.660004 | |
}, | |
{ | |
"date": "2016-04-11", | |
"close": 109.019997 | |
}, | |
{ | |
"date": "2016-04-12", | |
"close": 110.440002 | |
}, | |
{ | |
"date": "2016-04-13", | |
"close": 112.040001 | |
}, | |
{ | |
"date": "2016-04-14", | |
"close": 112.099998 | |
}, | |
{ | |
"date": "2016-04-15", | |
"close": 109.849998 | |
}, | |
{ | |
"date": "2016-04-18", | |
"close": 107.480003 | |
}, | |
{ | |
"date": "2016-04-19", | |
"close": 106.910004 | |
}, | |
{ | |
"date": "2016-04-20", | |
"close": 107.129997 | |
}, | |
{ | |
"date": "2016-04-21", | |
"close": 105.970001 | |
}, | |
{ | |
"date": "2016-04-22", | |
"close": 105.68 | |
}, | |
{ | |
"date": "2016-04-25", | |
"close": 105.080002 | |
}, | |
{ | |
"date": "2016-04-26", | |
"close": 104.349998 | |
}, | |
{ | |
"date": "2016-04-27", | |
"close": 97.82 | |
}, | |
{ | |
"date": "2016-04-28", | |
"close": 94.830002 | |
}, | |
{ | |
"date": "2016-04-29", | |
"close": 93.739998 | |
}, | |
{ | |
"date": "2016-05-02", | |
"close": 93.639999 | |
}, | |
{ | |
"date": "2016-05-03", | |
"close": 95.18 | |
}, | |
{ | |
"date": "2016-05-04", | |
"close": 94.190002 | |
}, | |
{ | |
"date": "2016-05-05", | |
"close": 93.239998 | |
}, | |
{ | |
"date": "2016-05-06", | |
"close": 92.720001 | |
}, | |
{ | |
"date": "2016-05-09", | |
"close": 92.790001 | |
}, | |
{ | |
"date": "2016-05-10", | |
"close": 93.419998 | |
}, | |
{ | |
"date": "2016-05-11", | |
"close": 92.510002 | |
}, | |
{ | |
"date": "2016-05-12", | |
"close": 90.339996 | |
}, | |
{ | |
"date": "2016-05-13", | |
"close": 90.519997 | |
}, | |
{ | |
"date": "2016-05-16", | |
"close": 93.879997 | |
}, | |
{ | |
"date": "2016-05-17", | |
"close": 93.489998 | |
}, | |
{ | |
"date": "2016-05-18", | |
"close": 94.559998 | |
}, | |
{ | |
"date": "2016-05-19", | |
"close": 94.199997 | |
}, | |
{ | |
"date": "2016-05-20", | |
"close": 95.220001 | |
}, | |
{ | |
"date": "2016-05-23", | |
"close": 96.43 | |
}, | |
{ | |
"date": "2016-05-24", | |
"close": 97.900002 | |
}, | |
{ | |
"date": "2016-05-25", | |
"close": 99.620003 | |
}, | |
{ | |
"date": "2016-05-26", | |
"close": 100.410004 | |
}, | |
{ | |
"date": "2016-05-27", | |
"close": 100.349998 | |
}, | |
{ | |
"date": "2016-05-31", | |
"close": 99.860001 | |
}, | |
{ | |
"date": "2016-06-01", | |
"close": 98.459999 | |
}, | |
{ | |
"date": "2016-06-02", | |
"close": 97.720001 | |
}, | |
{ | |
"date": "2016-06-03", | |
"close": 97.919998 | |
}, | |
{ | |
"date": "2016-06-06", | |
"close": 98.629997 | |
}, | |
{ | |
"date": "2016-06-07", | |
"close": 99.029999 | |
}, | |
{ | |
"date": "2016-06-08", | |
"close": 98.940002 | |
}, | |
{ | |
"date": "2016-06-09", | |
"close": 99.650002 | |
}, | |
{ | |
"date": "2016-06-10", | |
"close": 98.830002 | |
}, | |
{ | |
"date": "2016-06-13", | |
"close": 97.339996 | |
}, | |
{ | |
"date": "2016-06-14", | |
"close": 97.459999 | |
}, | |
{ | |
"date": "2016-06-15", | |
"close": 97.139999 | |
}, | |
{ | |
"date": "2016-06-16", | |
"close": 97.550003 | |
}, | |
{ | |
"date": "2016-06-17", | |
"close": 95.330002 | |
}, | |
{ | |
"date": "2016-06-20", | |
"close": 95.099998 | |
}, | |
{ | |
"date": "2016-06-21", | |
"close": 95.910004 | |
}, | |
{ | |
"date": "2016-06-22", | |
"close": 95.550003 | |
}, | |
{ | |
"date": "2016-06-23", | |
"close": 96.099998 | |
}, | |
{ | |
"date": "2016-06-24", | |
"close": 93.400002 | |
}, | |
{ | |
"date": "2016-06-27", | |
"close": 92.040001 | |
}, | |
{ | |
"date": "2016-06-28", | |
"close": 93.589996 | |
}, | |
{ | |
"date": "2016-06-29", | |
"close": 94.400002 | |
}, | |
{ | |
"date": "2016-06-30", | |
"close": 95.599998 | |
}, | |
{ | |
"date": "2016-07-01", | |
"close": 95.889999 | |
}, | |
{ | |
"date": "2016-07-05", | |
"close": 94.989998 | |
}, | |
{ | |
"date": "2016-07-06", | |
"close": 95.529999 | |
}, | |
{ | |
"date": "2016-07-07", | |
"close": 95.940002 | |
}, | |
{ | |
"date": "2016-07-08", | |
"close": 96.68 | |
}, | |
{ | |
"date": "2016-07-11", | |
"close": 96.980003 | |
}, | |
{ | |
"date": "2016-07-12", | |
"close": 97.419998 | |
}, | |
{ | |
"date": "2016-07-13", | |
"close": 96.870003 | |
}, | |
{ | |
"date": "2016-07-14", | |
"close": 98.790001 | |
}, | |
{ | |
"date": "2016-07-15", | |
"close": 98.779999 | |
}, | |
{ | |
"date": "2016-07-18", | |
"close": 99.830002 | |
}, | |
{ | |
"date": "2016-07-19", | |
"close": 99.870003 | |
}, | |
{ | |
"date": "2016-07-20", | |
"close": 99.959999 | |
}, | |
{ | |
"date": "2016-07-21", | |
"close": 99.43 | |
}, | |
{ | |
"date": "2016-07-22", | |
"close": 98.660004 | |
}, | |
{ | |
"date": "2016-07-25", | |
"close": 97.339996 | |
}, | |
{ | |
"date": "2016-07-26", | |
"close": 96.669998 | |
}, | |
{ | |
"date": "2016-07-27", | |
"close": 102.949997 | |
}, | |
{ | |
"date": "2016-07-28", | |
"close": 104.339996 | |
}, | |
{ | |
"date": "2016-07-29", | |
"close": 104.209999 | |
}, | |
{ | |
"date": "2016-08-01", | |
"close": 106.050003 | |
}, | |
{ | |
"date": "2016-08-02", | |
"close": 104.480003 | |
}, | |
{ | |
"date": "2016-08-03", | |
"close": 105.790001 | |
}, | |
{ | |
"date": "2016-08-04", | |
"close": 105.870003 | |
}, | |
{ | |
"date": "2016-08-05", | |
"close": 107.480003 | |
}, | |
{ | |
"date": "2016-08-08", | |
"close": 108.370003 | |
}, | |
{ | |
"date": "2016-08-09", | |
"close": 108.809998 | |
}, | |
{ | |
"date": "2016-08-10", | |
"close": 108 | |
}, | |
{ | |
"date": "2016-08-11", | |
"close": 107.93 | |
}, | |
{ | |
"date": "2016-08-12", | |
"close": 108.18 | |
}, | |
{ | |
"date": "2016-08-15", | |
"close": 109.480003 | |
}, | |
{ | |
"date": "2016-08-16", | |
"close": 109.379997 | |
}, | |
{ | |
"date": "2016-08-17", | |
"close": 109.220001 | |
}, | |
{ | |
"date": "2016-08-18", | |
"close": 109.080002 | |
}, | |
{ | |
"date": "2016-08-19", | |
"close": 109.360001 | |
}, | |
{ | |
"date": "2016-08-22", | |
"close": 108.510002 | |
}, | |
{ | |
"date": "2016-08-23", | |
"close": 108.849998 | |
}, | |
{ | |
"date": "2016-08-24", | |
"close": 108.029999 | |
}, | |
{ | |
"date": "2016-08-25", | |
"close": 107.57 | |
}, | |
{ | |
"date": "2016-08-26", | |
"close": 106.940002 | |
}, | |
{ | |
"date": "2016-08-29", | |
"close": 106.82 | |
}, | |
{ | |
"date": "2016-08-30", | |
"close": 106 | |
}, | |
{ | |
"date": "2016-08-31", | |
"close": 106.099998 | |
}, | |
{ | |
"date": "2016-09-01", | |
"close": 106.730003 | |
}, | |
{ | |
"date": "2016-09-02", | |
"close": 107.730003 | |
}, | |
{ | |
"date": "2016-09-06", | |
"close": 107.699997 | |
}, | |
{ | |
"date": "2016-09-07", | |
"close": 108.360001 | |
}, | |
{ | |
"date": "2016-09-08", | |
"close": 105.519997 | |
}, | |
{ | |
"date": "2016-09-09", | |
"close": 103.129997 | |
}, | |
{ | |
"date": "2016-09-12", | |
"close": 105.440002 | |
}, | |
{ | |
"date": "2016-09-13", | |
"close": 107.949997 | |
}, | |
{ | |
"date": "2016-09-14", | |
"close": 111.769997 | |
}, | |
{ | |
"date": "2016-09-15", | |
"close": 115.57 | |
}, | |
{ | |
"date": "2016-09-16", | |
"close": 114.919998 | |
}, | |
{ | |
"date": "2016-09-19", | |
"close": 113.580002 | |
}, | |
{ | |
"date": "2016-09-20", | |
"close": 113.57 | |
}, | |
{ | |
"date": "2016-09-21", | |
"close": 113.550003 | |
}, | |
{ | |
"date": "2016-09-22", | |
"close": 114.620003 | |
}, | |
{ | |
"date": "2016-09-23", | |
"close": 112.709999 | |
}, | |
{ | |
"date": "2016-09-26", | |
"close": 112.879997 | |
}, | |
{ | |
"date": "2016-09-27", | |
"close": 113.089996 | |
}, | |
{ | |
"date": "2016-09-28", | |
"close": 113.949997 | |
}, | |
{ | |
"date": "2016-09-29", | |
"close": 112.18 | |
}, | |
{ | |
"date": "2016-09-30", | |
"close": 113.050003 | |
}, | |
{ | |
"date": "2016-10-03", | |
"close": 112.519997 | |
}, | |
{ | |
"date": "2016-10-04", | |
"close": 113 | |
}, | |
{ | |
"date": "2016-10-05", | |
"close": 113.050003 | |
}, | |
{ | |
"date": "2016-10-06", | |
"close": 113.889999 | |
}, | |
{ | |
"date": "2016-10-07", | |
"close": 114.059998 | |
}, | |
{ | |
"date": "2016-10-10", | |
"close": 116.050003 | |
}, | |
{ | |
"date": "2016-10-11", | |
"close": 116.300003 | |
}, | |
{ | |
"date": "2016-10-12", | |
"close": 117.339996 | |
}, | |
{ | |
"date": "2016-10-13", | |
"close": 116.980003 | |
}, | |
{ | |
"date": "2016-10-14", | |
"close": 117.629997 | |
}, | |
{ | |
"date": "2016-10-17", | |
"close": 117.550003 | |
}, | |
{ | |
"date": "2016-10-18", | |
"close": 117.470001 | |
}, | |
{ | |
"date": "2016-10-19", | |
"close": 117.120003 | |
}, | |
{ | |
"date": "2016-10-20", | |
"close": 117.059998 | |
}, | |
{ | |
"date": "2016-10-21", | |
"close": 116.599998 | |
}, | |
{ | |
"date": "2016-10-24", | |
"close": 117.650002 | |
}, | |
{ | |
"date": "2016-10-25", | |
"close": 118.25 | |
}, | |
{ | |
"date": "2016-10-26", | |
"close": 115.589996 | |
}, | |
{ | |
"date": "2016-10-27", | |
"close": 114.480003 | |
}, | |
{ | |
"date": "2016-10-28", | |
"close": 113.720001 | |
}, | |
{ | |
"date": "2016-10-31", | |
"close": 113.540001 | |
}, | |
{ | |
"date": "2016-11-01", | |
"close": 111.489998 | |
}, | |
{ | |
"date": "2016-11-02", | |
"close": 111.589996 | |
}, | |
{ | |
"date": "2016-11-03", | |
"close": 109.830002 | |
}, | |
{ | |
"date": "2016-11-04", | |
"close": 108.839996 | |
}, | |
{ | |
"date": "2016-11-07", | |
"close": 110.410004 | |
}, | |
{ | |
"date": "2016-11-08", | |
"close": 111.059998 | |
}, | |
{ | |
"date": "2016-11-09", | |
"close": 110.879997 | |
}, | |
{ | |
"date": "2016-11-10", | |
"close": 107.790001 | |
}, | |
{ | |
"date": "2016-11-11", | |
"close": 108.43 | |
}, | |
{ | |
"date": "2016-11-14", | |
"close": 105.709999 | |
}, | |
{ | |
"date": "2016-11-15", | |
"close": 107.110001 | |
}, | |
{ | |
"date": "2016-11-16", | |
"close": 109.989998 | |
}, | |
{ | |
"date": "2016-11-17", | |
"close": 109.949997 | |
}, | |
{ | |
"date": "2016-11-18", | |
"close": 110.059998 | |
}, | |
{ | |
"date": "2016-11-21", | |
"close": 111.730003 | |
}, | |
{ | |
"date": "2016-11-22", | |
"close": 111.800003 | |
}, | |
{ | |
"date": "2016-11-23", | |
"close": 111.230003 | |
}, | |
{ | |
"date": "2016-11-25", | |
"close": 111.790001 | |
}, | |
{ | |
"date": "2016-11-28", | |
"close": 111.57 | |
}, | |
{ | |
"date": "2016-11-29", | |
"close": 111.459999 | |
}, | |
{ | |
"date": "2016-11-30", | |
"close": 110.519997 | |
}, | |
{ | |
"date": "2016-12-01", | |
"close": 109.489998 | |
}, | |
{ | |
"date": "2016-12-02", | |
"close": 109.900002 | |
}, | |
{ | |
"date": "2016-12-05", | |
"close": 109.110001 | |
}, | |
{ | |
"date": "2016-12-06", | |
"close": 109.949997 | |
}, | |
{ | |
"date": "2016-12-07", | |
"close": 111.029999 | |
}, | |
{ | |
"date": "2016-12-08", | |
"close": 112.120003 | |
}, | |
{ | |
"date": "2016-12-09", | |
"close": 113.949997 | |
}, | |
{ | |
"date": "2016-12-12", | |
"close": 113.300003 | |
}, | |
{ | |
"date": "2016-12-13", | |
"close": 115.190002 | |
}, | |
{ | |
"date": "2016-12-14", | |
"close": 115.190002 | |
}, | |
{ | |
"date": "2016-12-15", | |
"close": 115.82 | |
}, | |
{ | |
"date": "2016-12-16", | |
"close": 115.970001 | |
}, | |
{ | |
"date": "2016-12-19", | |
"close": 116.639999 | |
}, | |
{ | |
"date": "2016-12-20", | |
"close": 116.949997 | |
}, | |
{ | |
"date": "2016-12-21", | |
"close": 117.059998 | |
}, | |
{ | |
"date": "2016-12-22", | |
"close": 116.290001 | |
}, | |
{ | |
"date": "2016-12-23", | |
"close": 116.519997 | |
}, | |
{ | |
"date": "2016-12-27", | |
"close": 117.260002 | |
}, | |
{ | |
"date": "2016-12-28", | |
"close": 116.760002 | |
}, | |
{ | |
"date": "2016-12-29", | |
"close": 116.730003 | |
}, | |
{ | |
"date": "2016-12-30", | |
"close": 115.82 | |
}, | |
{ | |
"date": "2017-01-03", | |
"close": 116.150002 | |
}, | |
{ | |
"date": "2017-01-04", | |
"close": 116.019997 | |
}, | |
{ | |
"date": "2017-01-05", | |
"close": 116.610001 | |
}, | |
{ | |
"date": "2017-01-06", | |
"close": 117.910004 | |
}, | |
{ | |
"date": "2017-01-09", | |
"close": 118.989998 | |
}, | |
{ | |
"date": "2017-01-10", | |
"close": 119.110001 | |
}, | |
{ | |
"date": "2017-01-11", | |
"close": 119.75 | |
}, | |
{ | |
"date": "2017-01-12", | |
"close": 119.25 | |
}, | |
{ | |
"date": "2017-01-13", | |
"close": 119.040001 | |
}, | |
{ | |
"date": "2017-01-17", | |
"close": 120 | |
}, | |
{ | |
"date": "2017-01-18", | |
"close": 119.989998 | |
}, | |
{ | |
"date": "2017-01-19", | |
"close": 119.779999 | |
}, | |
{ | |
"date": "2017-01-20", | |
"close": 120 | |
}, | |
{ | |
"date": "2017-01-23", | |
"close": 120.080002 | |
}, | |
{ | |
"date": "2017-01-24", | |
"close": 119.970001 | |
}, | |
{ | |
"date": "2017-01-25", | |
"close": 121.879997 | |
}, | |
{ | |
"date": "2017-01-26", | |
"close": 121.940002 | |
}, | |
{ | |
"date": "2017-01-27", | |
"close": 121.949997 | |
}, | |
{ | |
"date": "2017-01-30", | |
"close": 121.629997 | |
}, | |
{ | |
"date": "2017-01-31", | |
"close": 121.349998 | |
}, | |
{ | |
"date": "2017-02-01", | |
"close": 128.75 | |
}, | |
{ | |
"date": "2017-02-02", | |
"close": 128.529999 | |
}, | |
{ | |
"date": "2017-02-03", | |
"close": 129.080002 | |
}, | |
{ | |
"date": "2017-02-06", | |
"close": 130.289993 | |
}, | |
{ | |
"date": "2017-02-07", | |
"close": 131.529999 | |
}, | |
{ | |
"date": "2017-02-08", | |
"close": 132.039993 | |
}, | |
{ | |
"date": "2017-02-09", | |
"close": 132.419998 | |
}, | |
{ | |
"date": "2017-02-10", | |
"close": 132.119995 | |
}, | |
{ | |
"date": "2017-02-13", | |
"close": 133.289993 | |
}, | |
{ | |
"date": "2017-02-14", | |
"close": 135.020004 | |
}, | |
{ | |
"date": "2017-02-15", | |
"close": 135.509995 | |
}, | |
{ | |
"date": "2017-02-16", | |
"close": 135.350006 | |
}, | |
{ | |
"date": "2017-02-17", | |
"close": 135.720001 | |
}, | |
{ | |
"date": "2017-02-21", | |
"close": 136.699997 | |
}, | |
{ | |
"date": "2017-02-22", | |
"close": 137.110001 | |
}, | |
{ | |
"date": "2017-02-23", | |
"close": 136.529999 | |
} | |
]; |
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Kagi Chart</title> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> | |
<link rel="stylesheet" type="text/css" href="style.css"/> | |
<link rel="stylesheet" type="text/css" | |
href="https://cdn.rawgit.com/arpitnarechania/d3-kagi/f66fcce9/dist/kagi.css"/> | |
</head> | |
<body> | |
<div id="settings" style="display:inline-block;float:left;"> | |
<div class="formElement"> | |
<span>Chart Theme</span> | |
<select id="chartTheme" onchange="changeChartTheme(this)"> | |
<option value="light" selected>Light</option> | |
<option value="dark">Dark</option> | |
</select> | |
</div> | |
<div class="formElement"> | |
<span >Caption</span> | |
<input id="caption" type="text" value="Apple Stock Closing Prices" onchange="changeCaption(this)"> | |
</div> | |
<div class="formElement"> | |
<span >Sub caption</span> | |
<input id="subCaption" type="text" value="2015-01-02 to 2017-02-24" onchange="changeSubCaption(this)"> | |
</div> | |
<div class="formElement"> | |
<span >Reversal Type</span> | |
<select id="reversalType" onchange="changeReversalType(this)"> | |
<option value="diff" selected>Difference</option> | |
<option value="pct">Percentage</option> | |
</select> | |
</div> | |
<div class="formElement"> | |
<span >Reversal Value</span> | |
<input id="reversalValue" type="number" value="5" onchange="changeReversalValue(this)"> | |
</div> | |
<div class="formElement"> | |
<span >Rally Color</span> | |
<input id="rallyColor" type="color" value="#2ecc71" onchange="changeRallyColor(this)"> | |
</div> | |
<div class="formElement"> | |
<span >Rally Thickness</span> | |
<input id="rallyThickness" type="number" value="3" onchange="changeRallyThickness(this)"> | |
</div> | |
<div class="formElement"> | |
<span >Rally Thickness On Hover</span> | |
<input id="rallyThicknessOnHover" type="number" value="5" onchange="changeRallyThicknessOnHover(this)"> | |
</div> | |
<div class="formElement"> | |
<span >Decline Color</span> | |
<input id="declineColor" type="color" value="#e74c3c" onchange="changeDeclineColor(this)"> | |
</div> | |
<div class="formElement"> | |
<span >Decline Thickness</span> | |
<input id="declineThickness" type="number" value="2" onchange="changeDeclineThickness(this)"> | |
</div> | |
<div class="formElement"> | |
<span >Decline Thickness On Hover</span> | |
<input id="declineThicknessOnHover" type="number" value="4" onchange="changeDeclineThicknessOnHover(this)"> | |
</div> | |
<div class="formElement"> | |
<span >Show Breakpoints</span> | |
<input id="breakPoints" type='checkbox' onclick='showBreakPoints(this);' checked> | |
</div> | |
<div class="formElement"> | |
<span >Breakpoints Color</span> | |
<input id="breakPointColor" type="color" value="#3498db" onchange="changeBreakPointColor(this)"> | |
</div> | |
<div class="formElement"> | |
<span >Breakpoint Radius</span> | |
<input id="breakPointRadius" type="number" value="2" onchange="changeBreakPointRadius(this)"> | |
</div> | |
<div class="formElement"> | |
<span >Breakpoint Radius On Hover</span> | |
<input id="breakPointRadiusOnHover" type="number" value="5" onchange="changeBreakPointRadiusOnHover(this)"> | |
</div> | |
<div class="formElement"> | |
<span >Show Breakpoint Text</span> | |
<input id="breakPointText" type='checkbox' onclick='showBreakPointText(this);' checked> | |
</div> | |
<div class="formElement"> | |
<span >Show Breakpoint Tooltips</span> | |
<input id="breakPointTooltips" type='checkbox' onclick='showBreakPointTooltip(this);' checked> | |
</div> | |
<div class="formElement"> | |
<span >Show Range Tooltips</span> | |
<input id="rangeTooltips" type='checkbox' onclick='showRangePointTooltips(this);' checked> | |
</div> | |
<div class="formElement"> | |
<span >Show Legend</span> | |
<input id="legend" type='checkbox' onclick='showLegend(this);' checked> | |
</div> | |
<div class="formElement"> | |
<span >Show Animation</span> | |
<input id="animation" type='checkbox' onclick='showAnimation(this);' checked> | |
</div> | |
<div class="formElement"> | |
<span >Animation Duration (millis)</span> | |
<input id="animDuration" type="number" value="500" onclick='changeAnimDuration(this);'> | |
</div> | |
<div class="formElement"> | |
<span >Animation Ease</span> | |
<select id="animEase" onchange="changeAnimEase(this)"> | |
<option value="linear" selected>linear</option> | |
<option value="quadIn">quadIn</option> | |
<option value="quadOut">quadOut</option> | |
<option value="cubicIn">cubicIn</option> | |
<option value="cubicOut">cubicOut</option> | |
<option value="cubicInOut">cubicInOut</option> | |
<option value="polyIn">polyIn</option> | |
<option value="polyOut">polyOut</option> | |
<option value="polyInOut">polyInOut</option> | |
<option value="sinIn">sinIn</option> | |
<option value="sinOut">sinOut</option> | |
<option value="sinInOut">sinInOut</option> | |
<option value="expIn">expIn</option> | |
<option value="expOut">expOut</option> | |
<option value="expInOut">expInOut</option> | |
<option value="circleIn">circleIn</option> | |
<option value="circleOut">circleOut</option> | |
<option value="circleInOut">circleInOut</option> | |
<option value="bounceIn">bounceIn</option> | |
<option value="bounceOut">bounceOut</option> | |
<option value="bounceInOut">bounceInOut</option> | |
<option value="backIn">backIn</option> | |
<option value="backOut">backOut</option> | |
<option value="backInOut">backInOut</option> | |
<option value="elasticIn">elasticIn</option> | |
<option value="elasticOut">elasticOut</option> | |
<option value="elasticInOut">elasticInOut</option> | |
</select> | |
</div> | |
</div> | |
<div id="kagiChart" style="display:inline-block;float:left;"></div> | |
</body> | |
<script type="text/javascript" src="https://cdn.rawgit.com/arpitnarechania/d3-kagi/f66fcce9/dist/kagi.js"></script> | |
<script type="text/javascript" src="data.js"></script> | |
<script type="text/javascript" src="main.js"></script> | |
</html> |
function changeAnimEase(element){ | |
console.log(element); | |
animEase = element.value; | |
drawChart(); | |
} | |
function changeAnimDuration(element){ | |
animDuration = element.value; | |
drawChart(); | |
} | |
function changeChartTheme(element){ | |
chartTheme = element.value; | |
drawChart(); | |
} | |
function changeReversalType(element){ | |
reversalType = element.value; | |
drawChart(); | |
} | |
function changeReversalValue(){ | |
reversalValue = element.value; | |
drawChart(); | |
} | |
function showBreakPoints(element){ | |
breakPoints = element.checked; | |
drawChart(); | |
} | |
function showLegend(element){ | |
legend = element.checked; | |
drawChart(); | |
} | |
function showBreakPointTooltip(element){ | |
breakPointTooltips = element.checked; | |
drawChart(); | |
} | |
function showBreakPoints(element){ | |
breakPoints = element.checked; | |
drawChart(); | |
} | |
function showBreakPointText(element){ | |
breakPointText = element.checked; | |
drawChart(); | |
} | |
function showAnimation(element){ | |
animation = element.checked; | |
drawChart(); | |
} | |
function showRangePointTooltips(element){ | |
rangeTooltips = element.checked; | |
drawChart(); | |
} | |
function changeCaption(element){ | |
caption = element.value; | |
drawChart(); | |
} | |
function changeSubCaption(element){ | |
subCaption = element.value; | |
drawChart(); | |
} | |
function changeRallyColor(element){ | |
rallyColor = element.value; | |
drawChart(); | |
} | |
function changeRallyThickness(element){ | |
rallyThickness = element.value; | |
drawChart(); | |
} | |
function changeRallyThicknessOnHover(element){ | |
rallyThicknessOnHover = element.value; | |
drawChart(); | |
} | |
function changeDeclineColor(element){ | |
declineColor = element.value; | |
drawChart(); | |
} | |
function changeDeclineThickness(element){ | |
declineThickness = element.value; | |
drawChart(); | |
} | |
function changeDeclineThicknessOnHover(element){ | |
declineThicknessOnHover = element.value; | |
drawChart(); | |
} | |
function changeBreakPointRadius(element){ | |
breakPointRadius = element.value; | |
drawChart(); | |
} | |
function changeBreakPointRadiusOnHover(element){ | |
breakPointRadiusOnHover = element.value; | |
drawChart(); | |
} | |
function changeBreakPointColor(element){ | |
breakPointColor = element.value; | |
drawChart(); | |
} | |
function drawChart(){ | |
var chartElement = document.getElementById("kagiChart"); | |
chartElement.innerHTML=""; | |
var chart_options = { | |
"width":window.innerWidth - document.getElementById("settings").offsetWidth - 25, | |
"height":500, | |
"margin":{top: 75, right: 50, bottom: 100, left: 50}, | |
"chartTheme":chartTheme, | |
"caption": caption, | |
"subCaption": subCaption, | |
"reversalType": reversalType, // use "diff" for difference in value; use "pct" for percentage change | |
"reversalValue": reversalValue, | |
"unit": "$", | |
"isPrecedingUnit":true, | |
"rallyColor": rallyColor, | |
"rallyThickness": rallyThickness, | |
"rallyThicknessOnHover": rallyThicknessOnHover, | |
"declineColor": declineColor, | |
"declineThickness": declineThickness, | |
"declineThicknessOnHover": declineThicknessOnHover, | |
"showBreakPoints":breakPoints, | |
"breakPointColor":breakPointColor, | |
"breakPointRadius":breakPointRadius, | |
"breakPointRadiusOnHover":breakPointRadiusOnHover, | |
"showBreakPointText":breakPointText, | |
"showBreakPointTooltips":breakPointTooltips, | |
"showRangeTooltips":rangeTooltips, | |
"showLegend":legend, | |
"showAnimation":animation, | |
"animationDurationPerTrend":animDuration, // in seconds | |
"animationEase":animEase | |
} | |
KagiChart(data,chart_options); // data is served from data.js | |
} | |
var animEase = document.getElementById("animEase").value; | |
var animDuration = document.getElementById("animDuration").value; | |
var chartTheme = document.getElementById("chartTheme").value; | |
var reversalType = document.getElementById("reversalType").value; | |
var reversalValue = document.getElementById("reversalValue").value; | |
var caption = document.getElementById("caption").value; | |
var subCaption = document.getElementById("subCaption").value; | |
var rallyColor = document.getElementById("rallyColor").value; | |
var rallyThickness = document.getElementById("rallyThickness").value; | |
var rallyThicknessOnHover = document.getElementById("rallyThicknessOnHover").value; | |
var declineColor = document.getElementById("declineColor").value; | |
var declineThickness = document.getElementById("declineThickness").value; | |
var declineThicknessOnHover = document.getElementById("declineThicknessOnHover").value; | |
var breakPointRadius = document.getElementById("breakPointRadius").value; | |
var breakPointColor = document.getElementById("breakPointColor").value; | |
var breakPointRadiusOnHover = document.getElementById("breakPointRadiusOnHover").value; | |
var legend = document.getElementById("legend").checked; | |
var breakPoints = document.getElementById("breakPoints").checked; | |
var breakPointText = document.getElementById("breakPointText").checked; | |
var breakPointTooltips = document.getElementById("breakPointTooltips").checked; | |
var rangeTooltips = document.getElementById("rangeTooltips").checked; | |
var animation = document.getElementById("animation").checked; | |
drawChart(); |
.formElement{ | |
padding:4px; | |
} | |
span{ | |
display: inline-block; | |
width: 100px; | |
} | |
#settings{ | |
padding: 8px; | |
} |