import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
import * as core from '@mescius/wijmo';
import * as input from '@mescius/wijmo.input';
import * as finance from '@mescius/wijmo.chart.finance';
import { getData } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
// create the chart
let data = getData();
let theChart = new finance.FinancialChart('#theChart', {
itemsSource: data,
bindingX: 'date',
chartType: 'Kagi',
series: [
{
binding: 'high,low,open,close',
style: {
stroke: 'rgb(136, 189, 230)'
},
altStyle: {
stroke: 'rgb(136, 189, 230)'
},
name: 'Facebook'
}
],
options: {
kagi: {
reversalAmount: 1,
rangeMode: 'Fixed',
fields: 'Close'
}
},
legend: {
position: 'None'
},
tooltip: {
content: function (ht) {
var date = ht.item && ht.item.date ? ht.item.date : null, content = '';
if (core.isDate(date)) {
date = core.Globalize.formatDate(date, 'MM/dd/yy');
}
if (ht && ht.item) {
content =
'<b>' + ht.name + '</b><br/>' +
'Date: ' + date + '<br/>' +
'Open: ' + core.Globalize.format(ht.item.open, 'n2') + '<br/>' +
'High: ' + core.Globalize.format(ht.item.high, 'n2') + '<br/>' +
'Low: ' + core.Globalize.format(ht.item.low, 'n2') + '<br/>' +
'Close: ' + core.Globalize.format(ht.item.close, 'n2') + '<br/>' +
'Volume: ' + core.Globalize.format(ht.item.volume, 'n0');
}
return content;
}
}
});
//
let revAmount = new input.InputNumber('#inputRevAmount', {
step: 1,
min: 0,
value: 1,
format: 'n0',
valueChanged: function (sender) {
if (sender == null || sender.value < sender.min) {
return;
}
theChart.options.kagi.reversalAmount = sender.value;
theChart.invalidate();
}
});
//
let rangeMode = new input.Menu('#selRangeMode', {
selectedValue: 'Fixed',
itemClicked: function (sender) {
theChart.options.kagi.rangeMode = sender.selectedValue;
var reversalInput = revAmount;
if (sender.selectedValue === 'Percentage') {
reversalInput.format = 'p0';
reversalInput.min = 0;
reversalInput.max = 1;
reversalInput.value = core.clamp(reversalInput.value, 0, .05);
reversalInput.step = 0.05;
}
else if (sender.selectedValue === 'ATR') {
reversalInput.format = 'n0';
reversalInput.min = 2;
reversalInput.max = data.length - 2;
reversalInput.value = core.clamp(reversalInput.value, 14, data.length - 2);
reversalInput.step = 1;
}
else {
reversalInput.format = 'n0';
reversalInput.min = 1;
reversalInput.max = null;
reversalInput.value = 1;
reversalInput.step = 1;
}
updateMenuHeader(rangeMode, 'Range Mode');
theChart.invalidate();
}
});
updateMenuHeader(rangeMode, 'Range Mode');
//
let dataFields = new input.Menu('#selDataFields', {
selectedValue: 'Close',
itemClicked: function (sender) {
theChart.options.kagi.fields = sender.selectedValue;
updateMenuHeader(dataFields, 'Data Fields');
theChart.invalidate();
}
});
updateMenuHeader(dataFields, 'Data Fields');
//
let series = theChart.series[0];
let stroke = new input.InputColor('#inputStroke', {
value: 'rgb(136, 189, 230)',
valueChanged: function (sender) {
let color = sender.value;
series.style.stroke = color;
theChart.invalidate();
}
});
let altStroke = new input.InputColor('#inputAltStroke', {
value: 'rgb(136, 189, 230)',
valueChanged: function (sender) {
let color = sender.value;
series.altStyle.stroke = color;
theChart.invalidate();
}
});
}
// show menu header and current value
function updateMenuHeader(menu, header) {
menu.header = header
? header + ': <b>' + menu.text + '</b>'
: menu.text;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo FlexChart Kagi</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<div id="theChart"></div>
<!-- Settings -->
<div class="panel-group" id="settings">
<div class="panel panel-default">
<div class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-inline">
<li>
<label>Reversal Amount</label>
<input id="inputRevAmount" />
</li>
<li>
<select id="selRangeMode">
<option value="Fixed">Fixed</option>
<option value="ATR">Average True Range</option>
<option value="Percentage">Percentage</option>
</select>
</li>
<li>
<select id="selDataFields">
<option value="High">High</option>
<option value="Low">Low</option>
<option value="Open">Open</option>
<option value="Close">Close</option>
<option value="HighLow">High/Low</option>
<option value="HL2">HL Avg.</option>
<option value="HLC3">HLC Avg.</option>
<option value="HLOC4">HLOC Avg.</option>
</select>
</li>
</ul>
<ul class="list-inline">
<li>
<label>Stroke</label>
<input id="inputStroke" />
</li>
<li>
<label>Alt. Stroke</label>
<input id="inputAltStroke" />
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
// some stock data from Google Finance
export function getData() {
return [
{ "date": "05/18/12", "open": 42.05, "high": 45, "low": 38, "close": 38.23, "volume": 580587742 },
{ "date": "05/21/12", "open": 36.53, "high": 36.66, "low": 33, "close": 34.03, "volume": 168309831 },
{ "date": "05/22/12", "open": 32.61, "high": 33.59, "low": 30.94, "close": 31, "volume": 102053826 },
{ "date": "05/23/12", "open": 31.37, "high": 32.5, "low": 31.36, "close": 32, "volume": 73721135 },
{ "date": "05/24/12", "open": 32.95, "high": 33.21, "low": 31.77, "close": 33.03, "volume": 50275879 },
{ "date": "05/25/12", "open": 32.9, "high": 32.95, "low": 31.11, "close": 31.91, "volume": 37189630 },
{ "date": "05/29/12", "open": 31.48, "high": 31.69, "low": 28.65, "close": 28.84, "volume": 78060799 },
{ "date": "05/30/12", "open": 28.7, "high": 29.55, "low": 27.86, "close": 28.19, "volume": 57267867 },
{ "date": "05/31/12", "open": 28.54, "high": 29.67, "low": 26.83, "close": 29.6, "volume": 111639200 },
{ "date": "06/01/12", "open": 28.89, "high": 29.15, "low": 27.39, "close": 27.72, "volume": 41855500 },
{ "date": "06/04/12", "open": 27.2, "high": 27.65, "low": 26.44, "close": 26.9, "volume": 35230290 },
{ "date": "06/05/12", "open": 26.7, "high": 27.76, "low": 25.75, "close": 25.87, "volume": 42473262 },
{ "date": "06/06/12", "open": 26.07, "high": 27.17, "low": 25.52, "close": 26.81, "volume": 61487019 },
{ "date": "06/07/12", "open": 27, "high": 27.35, "low": 26.15, "close": 26.31, "volume": 26167757 },
{ "date": "06/08/12", "open": 26.55, "high": 27.76, "low": 26.44, "close": 27.1, "volume": 38033420 },
{ "date": "06/11/12", "open": 27.18, "high": 28.07, "low": 26.84, "close": 27, "volume": 28225887 },
{ "date": "06/12/12", "open": 27.48, "high": 27.77, "low": 26.96, "close": 27.4, "volume": 15822414 },
{ "date": "06/13/12", "open": 27.66, "high": 28.1, "low": 27.1, "close": 27.27, "volume": 17118672 },
{ "date": "06/14/12", "open": 27.65, "high": 28.32, "low": 27.38, "close": 28.29, "volume": 16854124 },
{ "date": "06/15/12", "open": 28.5, "high": 30.1, "low": 28.35, "close": 30.01, "volume": 43563739 },
{ "date": "06/18/12", "open": 29.96, "high": 32.08, "low": 29.41, "close": 31.41, "volume": 42978209 },
{ "date": "06/19/12", "open": 31.54, "high": 32.18, "low": 30.7, "close": 31.91, "volume": 30848913 },
{ "date": "06/20/12", "open": 31.92, "high": 31.93, "low": 31.15, "close": 31.6, "volume": 15558921 },
{ "date": "06/21/12", "open": 31.67, "high": 32.5, "low": 31.51, "close": 31.84, "volume": 21875228 },
{ "date": "06/22/12", "open": 32.41, "high": 33.45, "low": 32.06, "close": 33.05, "volume": 74833976 },
{ "date": "06/25/12", "open": 32.86, "high": 33.02, "low": 31.55, "close": 32.06, "volume": 24352818 },
{ "date": "06/26/12", "open": 32.69, "high": 33.44, "low": 32.5, "close": 33.1, "volume": 24858611 },
{ "date": "06/27/12", "open": 32.46, "high": 32.9, "low": 31.9, "close": 32.23, "volume": 28599506 },
{ "date": "06/28/12", "open": 31.96, "high": 32.19, "low": 30.9, "close": 31.36, "volume": 17713292 },
{ "date": "06/29/12", "open": 31.92, "high": 31.99, "low": 30.76, "close": 31.1, "volume": 19526823 },
{ "date": "07/02/12", "open": 31.25, "high": 31.73, "low": 30.55, "close": 30.77, "volume": 14131476 },
{ "date": "07/03/12", "open": 30.91, "high": 31.44, "low": 30.8, "close": 31.2, "volume": 8765498 },
{ "date": "07/05/12", "open": 31.32, "high": 31.62, "low": 31.02, "close": 31.47, "volume": 10036688 },
{ "date": "07/06/12", "open": 31.44, "high": 31.9, "low": 31.26, "close": 31.73, "volume": 10949006 },
{ "date": "07/09/12", "open": 32.1, "high": 32.88, "low": 31.99, "close": 32.17, "volume": 17785180 },
{ "date": "07/10/12", "open": 32.43, "high": 32.48, "low": 31.16, "close": 31.47, "volume": 14276996 },
{ "date": "07/11/12", "open": 31.48, "high": 31.56, "low": 30.55, "close": 30.97, "volume": 13027752 },
{ "date": "07/12/12", "open": 30.7, "high": 31.4, "low": 30.6, "close": 30.81, "volume": 11306636 },
{ "date": "07/13/12", "open": 31.04, "high": 31.07, "low": 30.56, "close": 30.72, "volume": 8117346 },
{ "date": "07/16/12", "open": 30.5, "high": 30.5, "low": 28.21, "close": 28.24, "volume": 24672074 },
{ "date": "07/17/12", "open": 28.48, "high": 28.59, "low": 27.15, "close": 28.09, "volume": 30438551 },
{ "date": "07/18/12", "open": 28.31, "high": 29.29, "low": 28.15, "close": 29.11, "volume": 16841779 },
{ "date": "07/19/12", "open": 29.41, "high": 29.5, "low": 28.63, "close": 29, "volume": 13685031 },
{ "date": "07/20/12", "open": 29, "high": 29.47, "low": 28.72, "close": 28.76, "volume": 11869046 },
{ "date": "07/23/12", "open": 28.12, "high": 29, "low": 28.01, "close": 28.75, "volume": 12393864 },
{ "date": "07/24/12", "open": 28.82, "high": 29.45, "low": 28.1, "close": 28.45, "volume": 11539799 },
{ "date": "07/25/12", "open": 28.39, "high": 29.49, "low": 28.08, "close": 29.34, "volume": 17230154 },
{ "date": "07/26/12", "open": 27.75, "high": 28.23, "low": 26.73, "close": 26.84, "volume": 64597378 },
{ "date": "07/27/12", "open": 23.19, "high": 24.54, "low": 22.28, "close": 23.7, "volume": 123098340 },
{ "date": "07/30/12", "open": 24, "high": 24.04, "low": 23.03, "close": 23.15, "volume": 29285895 },
{ "date": "07/31/12", "open": 23.37, "high": 23.37, "low": 21.61, "close": 21.71, "volume": 56179322 },
{ "date": "08/01/12", "open": 21.5, "high": 21.58, "low": 20.84, "close": 20.88, "volume": 44604365 },
{ "date": "08/02/12", "open": 20.77, "high": 20.84, "low": 19.82, "close": 20.04, "volume": 56374436 },
{ "date": "08/03/12", "open": 20.36, "high": 22.16, "low": 19.9, "close": 21.09, "volume": 80646975 },
{ "date": "08/06/12", "open": 21.39, "high": 22.15, "low": 21.3, "close": 21.92, "volume": 27778038 },
{ "date": "08/07/12", "open": 22.2, "high": 22.45, "low": 20.5, "close": 20.72, "volume": 36782827 },
{ "date": "08/08/12", "open": 20.71, "high": 21.15, "low": 20.22, "close": 20.72, "volume": 29537376 },
{ "date": "08/09/12", "open": 20.75, "high": 21.17, "low": 20.61, "close": 21.01, "volume": 15618515 },
{ "date": "08/10/12", "open": 21.41, "high": 21.82, "low": 21.13, "close": 21.81, "volume": 25794673 },
{ "date": "08/13/12", "open": 22.15, "high": 22.45, "low": 21.4, "close": 21.6, "volume": 24972973 },
{ "date": "08/14/12", "open": 21.41, "high": 21.6, "low": 20.25, "close": 20.38, "volume": 39308634 },
{ "date": "08/15/12", "open": 20.64, "high": 21.41, "low": 20.4, "close": 21.2, "volume": 47860767 },
{ "date": "08/16/12", "open": 20.44, "high": 20.48, "low": 19.69, "close": 19.87, "volume": 157554938 },
{ "date": "08/17/12", "open": 20, "high": 20.08, "low": 19, "close": 19.05, "volume": 129293342 },
{ "date": "08/20/12", "open": 19.05, "high": 20.13, "low": 18.75, "close": 20.01, "volume": 101186524 },
{ "date": "08/21/12", "open": 19.58, "high": 19.98, "low": 19.09, "close": 19.16, "volume": 70640462 },
{ "date": "08/22/12", "open": 19.36, "high": 19.53, "low": 18.96, "close": 19.44, "volume": 49892130 },
{ "date": "08/23/12", "open": 19.5, "high": 19.73, "low": 19.36, "close": 19.44, "volume": 32813310 },
{ "date": "08/24/12", "open": 19.52, "high": 19.68, "low": 19.25, "close": 19.41, "volume": 29622155 },
{ "date": "08/27/12", "open": 19.49, "high": 19.53, "low": 19.1, "close": 19.15, "volume": 20703907 },
{ "date": "08/28/12", "open": 19.1, "high": 19.38, "low": 18.95, "close": 19.34, "volume": 25425786 },
{ "date": "08/29/12", "open": 19.32, "high": 19.38, "low": 19.07, "close": 19.1, "volume": 16124625 },
{ "date": "08/30/12", "open": 19.27, "high": 19.45, "low": 19.06, "close": 19.09, "volume": 30647472 },
{ "date": "08/31/12", "open": 18.68, "high": 18.7, "low": 18.03, "close": 18.06, "volume": 58764170 },
{ "date": "09/04/12", "open": 18.08, "high": 18.27, "low": 17.55, "close": 17.73, "volume": 46622354 },
{ "date": "09/05/12", "open": 18.27, "high": 18.75, "low": 18.18, "close": 18.58, "volume": 60781719 },
{ "date": "09/06/12", "open": 18.74, "high": 19.26, "low": 18.72, "close": 18.96, "volume": 46066347 },
{ "date": "09/07/12", "open": 19.1, "high": 19.42, "low": 18.78, "close": 18.98, "volume": 36371696 },
{ "date": "09/10/12", "open": 19.06, "high": 19.2, "low": 18.55, "close": 18.81, "volume": 24797642 },
{ "date": "09/11/12", "open": 18.92, "high": 19.58, "low": 18.85, "close": 19.43, "volume": 50508126 },
{ "date": "09/12/12", "open": 20.76, "high": 21.16, "low": 20.28, "close": 20.93, "volume": 121583996 },
{ "date": "09/13/12", "open": 20.96, "high": 21.48, "low": 20.61, "close": 20.71, "volume": 65041524 },
{ "date": "09/14/12", "open": 21.13, "high": 22.08, "low": 20.9, "close": 22, "volume": 72819643 },
{ "date": "09/17/12", "open": 22.67, "high": 22.75, "low": 21.5, "close": 21.52, "volume": 50666447 },
{ "date": "09/18/12", "open": 21.6, "high": 21.98, "low": 21.37, "close": 21.87, "volume": 36760449 },
{ "date": "09/19/12", "open": 21.99, "high": 23.37, "low": 21.77, "close": 23.29, "volume": 78782783 },
{ "date": "09/20/12", "open": 23.02, "high": 23.24, "low": 22.54, "close": 22.59, "volume": 57248663 },
{ "date": "09/21/12", "open": 22.97, "high": 23.24, "low": 22.6, "close": 22.86, "volume": 51218097 },
{ "date": "09/24/12", "open": 21.77, "high": 21.98, "low": 20.36, "close": 20.79, "volume": 79105121 },
{ "date": "09/25/12", "open": 21.2, "high": 21.21, "low": 20.22, "close": 20.28, "volume": 46291655 },
{ "date": "09/26/12", "open": 20.14, "high": 20.78, "low": 19.8, "close": 20.62, "volume": 38271878 },
{ "date": "09/27/12", "open": 20.99, "high": 21, "low": 20.16, "close": 20.32, "volume": 30215821 },
{ "date": "09/28/12", "open": 20.57, "high": 21.95, "low": 20.5, "close": 21.66, "volume": 65485921 },
{ "date": "10/01/12", "open": 22.08, "high": 22.59, "low": 21.73, "close": 21.99, "volume": 51262680 },
{ "date": "10/02/12", "open": 22.08, "high": 22.49, "low": 21.82, "close": 22.27, "volume": 29341393 },
{ "date": "10/03/12", "open": 22.3, "high": 22.49, "low": 21.8, "close": 21.83, "volume": 32000079 },
{ "date": "10/04/12", "open": 22.32, "high": 22.4, "low": 21.41, "close": 21.95, "volume": 46894595 },
{ "date": "10/05/12", "open": 21.49, "high": 21.63, "low": 20.88, "close": 20.91, "volume": 40529223 },
{ "date": "10/08/12", "open": 20.62, "high": 20.75, "low": 20.16, "close": 20.4, "volume": 32236628 },
{ "date": "10/09/12", "open": 20.39, "high": 20.55, "low": 19.97, "close": 20.23, "volume": 27161736 },
{ "date": "10/10/12", "open": 19.93, "high": 19.94, "low": 19.45, "close": 19.64, "volume": 39321758 },
{ "date": "10/11/12", "open": 19.88, "high": 19.96, "low": 19.61, "close": 19.75, "volume": 21817227 },
{ "date": "10/12/12", "open": 19.75, "high": 19.8, "low": 19.48, "close": 19.52, "volume": 18809397 },
{ "date": "10/15/12", "open": 19.68, "high": 19.88, "low": 19.49, "close": 19.52, "volume": 20189668 },
{ "date": "10/16/12", "open": 19.68, "high": 19.69, "low": 19.3, "close": 19.48, "volume": 21834687 },
{ "date": "10/17/12", "open": 19.5, "high": 20.48, "low": 19.37, "close": 19.88, "volume": 44074433 },
{ "date": "10/18/12", "open": 19.7, "high": 19.79, "low": 18.89, "close": 18.98, "volume": 52157366 },
{ "date": "10/19/12", "open": 19, "high": 19.06, "low": 18.8, "close": 19, "volume": 34834947 },
{ "date": "10/22/12", "open": 19.2, "high": 19.43, "low": 19.05, "close": 19.32, "volume": 32447005 },
{ "date": "10/23/12", "open": 19.25, "high": 19.8, "low": 19.1, "close": 19.5, "volume": 78381102 },
{ "date": "10/24/12", "open": 24.13, "high": 24.25, "low": 22.85, "close": 23.23, "volume": 228949142 },
{ "date": "10/25/12", "open": 23.29, "high": 23.31, "low": 22.47, "close": 22.56, "volume": 76141922 },
{ "date": "10/26/12", "open": 22.4, "high": 22.88, "low": 21.88, "close": 21.94, "volume": 73259521 },
{ "date": "10/31/12", "open": 20.82, "high": 21.5, "low": 20.73, "close": 21.11, "volume": 99378184 },
{ "date": "11/01/12", "open": 21.08, "high": 21.44, "low": 21.01, "close": 21.21, "volume": 37713887 },
{ "date": "11/02/12", "open": 21.26, "high": 21.69, "low": 21.07, "close": 21.18, "volume": 38344332 },
{ "date": "11/05/12", "open": 21.1, "high": 21.48, "low": 20.92, "close": 21.25, "volume": 31806692 },
{ "date": "11/06/12", "open": 21.24, "high": 21.37, "low": 20.99, "close": 21.17, "volume": 29062642 },
{ "date": "11/07/12", "open": 20.85, "high": 20.95, "low": 20.37, "close": 20.47, &q
