import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import { FlexChart, Palettes } from '@grapecity/wijmo.chart';
import { InputDate } from '@grapecity/wijmo.input';
import { isArray } from '@grapecity/wijmo';
import { getData } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
// create the chart
let theChart = new FlexChart('#theChart', {
itemsSource: getData(),
bindingX: 'date',
chartType: 'Candlestick',
series: [
{ binding: 'high,low,open,close', name: 'Alphabet Inc' }
],
legend: {
position: 'None'
}
});
//
// create the month filter
let data = theChart.itemsSource, minDate = data[data.length - 1].date, maxDate = data[0].date;
//
let theMonth = new InputDate('#theMonth', {
placeholder: 'Select Month',
selectionMode: 'Month',
min: new Date(minDate.getFullYear(), minDate.getMonth(), 1),
max: new Date(maxDate.getFullYear(), maxDate.getMonth() + 1, 0),
format: 'MMMM yyyy',
isRequired: false,
valueChanged: (s) => {
// reset the chart zoom
applyZoom(theChart, null);
//
// apply filter to chart data
theChart.collectionView.filter = (item) => {
if (theMonth.value == null) {
return true; // no filter
}
//
return (item.date.getFullYear() == theMonth.value.getFullYear()) &&
(item.date.getMonth() == theMonth.value.getMonth());
};
}
});
theMonth.value = maxDate;
theChart.palette = getRandomPalette();
//
document.querySelector('#btnResetFilter').addEventListener('click', () => {
theMonth.value = null;
});
//
// zoom with the mouse wheel
theChart.hostElement.addEventListener('wheel', e => {
if (e.ctrlKey) {
let center = theChart.pointToData(e.clientX, e.clientY);
applyZoom(theChart, e.deltaY > 0 ? 1.1 : .9, center);
e.preventDefault();
}
});
//
// zoom logic
document.querySelector('#btnZoomIn').addEventListener('click', () => applyZoom(theChart, .9));
document.querySelector('#btnZoomOut').addEventListener('click', () => applyZoom(theChart, 1.1));
document.querySelector('#btnResetZoom').addEventListener('click', () => applyZoom(theChart, null));
//
// apply a zoom factor to the chart (keeping the center constant)
function applyZoom(chart, factor, center) {
applyZoomAxis(chart.axisX, factor, center ? center.x : null);
applyZoomAxis(chart.axisY, factor, center ? center.y : null);
}
//
function applyZoomAxis(axis, factor, center) {
if (!factor) { // reset
axis.min = axis.max = null;
}
else {
let min = (axis.min != null ? axis.min : axis.actualMin).valueOf(), max = (axis.max != null ? axis.max : axis.actualMax).valueOf();
//
if (center == null) {
center = (min + max) / 2;
}
//
axis.min = center - (center - min) * factor;
axis.max = center + (max - center) * factor;
}
}
}
//
function getRandomPalette() {
let palettes = Object.keys(Palettes).filter(prop => isArray(Palettes[prop]));
let rand = Math.floor(Math.random() * palettes.length);
//
return Palettes[palettes[rand]];
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo FlexChart Filter and Wheel Zoom</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<p>
<b>Filter: </b>
<input id="theMonth">
<button id="btnResetFilter" class="btn btn-default">Reset</button>
</p>
<p>
<b>Zoom: </b>
<button id="btnZoomIn" class="btn btn-default">In</button>
<button id="btnZoomOut" class="btn btn-default">Out</button>
<button id="btnResetZoom" class="btn btn-default">Reset</button>
<span>You can also zoom with ctrl+mouse wheel.</span>
</p>
<div id="theChart"></div>
</div>
</body>
</html>
//
export function getData() {
return [
{ date: new Date(2017, 2, 23), open: 841.39, high: 841.69, low: 833, close: 839.65, vol: 3287669 },
{ date: new Date(2017, 2, 22), open: 849.48, high: 855.35, low: 847, close: 849.8, vol: 1366749 },
{ date: new Date(2017, 2, 21), open: 870.06, high: 873.47, low: 847.69, close: 850.14, vol: 2537978 },
{ date: new Date(2017, 2, 20), open: 869.48, high: 870.34, low: 864.66, close: 867.91, vol: 1542199 },
{ date: new Date(2017, 2, 17), open: 873.68, high: 874.42, low: 868.37, close: 872.37, vol: 1868252 },
{ date: new Date(2017, 2, 16), open: 870.53, high: 872.71, low: 867.52, close: 870, vol: 1104452 },
{ date: new Date(2017, 2, 15), open: 867.94, high: 869.88, low: 861.3, close: 868.39, vol: 1332885 },
{ date: new Date(2017, 2, 14), open: 863.75, high: 867.58, low: 860.13, close: 865.91, vol: 1061692 },
{ date: new Date(2017, 2, 13), open: 860.83, high: 867.13, low: 860.82, close: 864.58, vol: 1166605 },
{ date: new Date(2017, 2, 10), open: 862.7, high: 864.23, low: 857.61, close: 861.4, vol: 1336585 },
{ date: new Date(2017, 2, 9), open: 853.69, high: 860.71, low: 852.67, close: 857.84, vol: 1347697 },
{ date: new Date(2017, 2, 8), open: 853.12, high: 856.93, low: 851.25, close: 853.64, vol: 1029834 },
{ date: new Date(2017, 2, 7), open: 847.26, high: 853.33, low: 845.52, close: 851.15, vol: 1038696 },
{ date: new Date(2017, 2, 6), open: 846.86, high: 848.94, low: 841.17, close: 847.27, vol: 1047872 },
{ date: new Date(2017, 2, 3), open: 848.94, high: 850.82, low: 844.7, close: 849.08, vol: 1006612 },
{ date: new Date(2017, 2, 2), open: 856.31, high: 856.49, low: 848.72, close: 849.85, vol: 1250938 },
{ date: new Date(2017, 2, 1), open: 851.38, high: 858, low: 849.02, close: 856.75, vol: 1818671 },
{ date: new Date(2017, 1, 28), open: 847.35, high: 848.83, low: 841.44, close: 844.93, vol: 1383119 },
{ date: new Date(2017, 1, 27), open: 844.95, high: 850.67, low: 843.01, close: 849.67, vol: 1010333 },
{ date: new Date(2017, 1, 24), open: 847.65, high: 848.36, low: 842.96, close: 847.81, vol: 1346189 },
{ date: new Date(2017, 1, 23), open: 851.08, high: 852.62, low: 842.5, close: 851, vol: 1386681 },
{ date: new Date(2017, 1, 22), open: 848, high: 853.79, low: 846.71, close: 851.36, vol: 1224889 },
{ date: new Date(2017, 1, 21), open: 847.99, high: 852.2, low: 846.55, close: 849.27, vol: 1261062 },
{ date: new Date(2017, 1, 17), open: 841.31, high: 846.94, low: 839.78, close: 846.55, vol: 1461210 },
{ date: new Date(2017, 1, 16), open: 838.5, high: 842.69, low: 837.26, close: 842.17, vol: 1005084 },
{ date: new Date(2017, 1, 15), open: 838.81, high: 841.77, low: 836.22, close: 837.32, vol: 1357185 },
{ date: new Date(2017, 1, 14), open: 839.77, high: 842, low: 835.83, close: 840.03, vol: 1363345 },
{ date: new Date(2017, 1, 13), open: 837.7, high: 841.74, low: 836.25, close: 838.96, vol: 1295708 },
{ date: new Date(2017, 1, 10), open: 832.95, high: 837.15, low: 830.51, close: 834.85, vol: 1415128 },
{ date: new Date(2017, 1, 9), open: 831.73, high: 831.98, low: 826.5, close: 830.06, vol: 1194238 },
{ date: new Date(2017, 1, 8), open: 830.53, high: 834.25, low: 825.11, close: 829.88, vol: 1302225 },
{ date: new Date(2017, 1, 7), open: 825.5, high: 831.92, low: 823.29, close: 829.23, vol: 1666605 },
{ date: new Date(2017, 1, 6), open: 820.92, high: 822.39, low: 814.29, close: 821.62, vol: 1350875 },
{ date: new Date(2017, 1, 3), open: 823.13, high: 826.13, low: 819.35, close: 820.13, vol: 1528095 },
{ date: new Date(2017, 1, 2), open: 815, high: 824.56, low: 812.05, close: 818.26, vol: 1689179 },
{ date: new Date(2017, 1, 1), open: 824, high: 824, low: 812.25, close: 815.24, vol: 2251047 },
{ date: new Date(2017, 0, 31), open: 819.5, high: 823.07, low: 813.4, close: 820.19, vol: 2020180 },
{ date: new Date(2017, 0, 30), open: 837.06, high: 837.23, low: 821.03, close: 823.83, vol: 3516933 },
{ date: new Date(2017, 0, 27), open: 859, high: 867, low: 841.9, close: 845.03, vol: 3752497 },
{ date: new Date(2017, 0, 26), open: 859.05, high: 861, low: 850.52, close: 856.98, vol: 3493251 },
{ date: new Date(2017, 0, 25), open: 853.55, high: 858.79, low: 849.74, close: 858.45, vol: 1662148 },
{ date: new Date(2017, 0, 24), open: 846.98, high: 851.52, low: 842.28, close: 849.53, vol: 1688375 },
{ date: new Date(2017, 0, 23), open: 831.61, high: 845.54, low: 828.7, close: 844.43, vol: 2457377 },
{ date: new Date(2017, 0, 20), open: 829.09, high: 829.24, low: 824.6, close: 828.17, vol: 1306183 },
{ date: new Date(2017, 0, 19), open: 829, high: 833, low: 823.96, close: 824.37, vol: 1070454 },
{ date: new Date(2017, 0, 18), open: 829.8, high: 829.81, low: 824.08, close: 829.02, vol: 1027698 },
{ date: new Date(2017, 0, 17), open: 830, high: 830.18, low: 823.2, close: 827.46, vol: 1440905 },
{ date: new Date(2017, 0, 13), open: 831, high: 834.65, low: 829.52, close: 830.94, vol: 1290182 },
{ date: new Date(2017, 0, 12), open: 828.38, high: 830.38, low: 821.01, close: 829.53, vol: 1350308 },
{ date: new Date(2017, 0, 11), open: 826.62, high: 829.9, low: 821.47, close: 829.86, vol: 1325394 },
{ date: new Date(2017, 0, 10), open: 827.07, high: 829.41, low: 823.14, close: 826.01, vol: 1197442 },
{ date: new Date(2017, 0, 9), open: 826.37, high: 830.43, low: 821.62, close: 827.18, vol: 1408924 },
{ date: new Date(2017, 0, 6), open: 814.99, high: 828.96, low: 811.5, close: 825.21, vol: 2017097 },
{ date: new Date(2017, 0, 5), open: 807.5, high: 813.74, low: 805.92, close: 813.02, vol: 1340535 },
{ date: new Date(2017, 0, 4), open: 809.89, high: 813.43, low: 804.11, close: 807.77, vol: 1515339 },
{ date: new Date(2017, 0, 3), open: 800.62, high: 811.44, low: 796.89, close: 808.01, vol: 1959033 },
{ date: new Date(2016, 11, 30), open: 803.21, high: 803.28, low: 789.62, close: 792.45, vol: 1735879 },
{ date: new Date(2016, 11, 29), open: 802.33, high: 805.75, low: 798.14, close: 802.88, vol: 1057392 },
{ date: new Date(2016, 11, 28), open: 813.33, high: 813.33, low: 802.44, close: 804.57, vol: 1214756 },
{ date: new Date(2016, 11, 27), open: 808.68, high: 816, low: 805.8, close: 809.93, vol: 975962 },
{ date: new Date(2016, 11, 23), open: 808.01, high: 810.97, low: 805.11, close: 807.8, vol: 765537 },
{ date: new Date(2016, 11, 22), open: 809.1, high: 811.07, low: 806.03, close: 809.68, vol: 1132119 },
{ date: new Date(2016, 11, 21), open: 815.72, high: 815.72, low: 805.1, close: 812.2, vol: 1459628 },
{ date: new Date(2016, 11, 20), open: 813.37, high: 816.49, low: 811, close: 815.2, vol: 1271883 },
{ date: new Date(2016, 11, 19), open: 809.28, high: 816.22, low: 804.5, close: 812.5, vol: 1263581 },
{ date: new Date(2016, 11, 16), open: 818.31, high: 819.2, low: 808.12, close: 809.84, vol: 2598866 },
{ date: new Date(2016, 11, 15), open: 817.36, high: 823, low: 812, close: 815.65, vol: 1769719 },
{ date: new Date(2016, 11, 14), open: 815.92, high: 824.26, low: 812.78, close: 817.89, vol: 1799654 },
{ date: new Date(2016, 11, 13), open: 812.39, high: 824.3, low: 811.94, close: 815.34, vol: 2128210 },
{ date: new Date(2016, 11, 12), open: 804.82, high: 811.35, low: 804.53, close: 807.9, vol: 1628602 },
{ date: new Date(2016, 11, 9), open: 799.3, high: 809.95, low: 798.05, close: 809.45, vol: 1904463 },
{ date: new Date(2016, 11, 8), open: 792.95, high: 799, low: 787.9, close: 795.17, vol: 1612531 },
{ date: new Date(2016, 11, 7), open: 779.95, high: 792, low: 773.53, close: 791.47, vol: 2029415 },
{ date: new Date(2016, 11, 6), open: 780.19, high: 785.28, low: 773.32, close: 776.18, vol: 1734099 },
{ date: new Date(2016, 11, 5), open: 770, high: 780, low: 766.97, close: 778.22, vol: 1688473 },
{ date: new Date(2016, 11, 2), open: 761.9, high: 770.5, low: 759, close: 764.46, vol: 1718846 },
{ date: new Date(2016, 11, 1), open: 778.55, high: 778.6, low: 753.36, close: 764.33, vol: 2867074 },
{ date: new Date(2016, 10, 30), open: 789.1, high: 791.51, low: 773.14, close: 775.88, vol: 2279054 },
{ date: new Date(2016, 10, 29), open: 788.38, high: 796.44, low: 785.34, close: 789.44, vol: 1561981 },
{ date: new Date(2016, 10, 28), open: 778.35, high: 799.74, low: 778.1, close: 785.79, vol: 2575432 },
{ date: new Date(2016, 10, 25), open: 782.61, high: 782.9, low: 778.19, close: 780.23, vol: 613549 },
{ date: new Date(2016, 10, 23), open: 789.52, high: 789.52, low: 772.65, close: 779, vol: 1312981 },
{ date: new Date(2016, 10, 22), open: 788.99, high: 793.77, low: 783.74, close: 785, vol: 1394174 },
{ date: new Date(2016, 10, 21), open: 778.1, high: 786.55, low: 776.3, close: 784.8, vol: 1630835 },
{ date: new Date(2016, 10, 18), open: 787.17, high: 791.29, low: 775.35, close: 775.97, vol: 1806264 },
{ date: new Date(2016, 10, 17), open: 782.5, high: 788.9, low: 779.85, close: 786.16, vol: 1533679 },
{ date: new Date(2016, 10, 16), open: 770.42, high: 783.5, low: 766.33, close: 779.98, vol: 1798360 },
{ date: new Date(2016, 10, 15), open: 765.47, high: 780.24, low: 765.22, close: 775.16, vol: 2943889 },
{ date: new Date(2016, 10, 14), open: 771.76, high: 771.78, low: 743.59, close: 753.22, vol: 3688274 },
{ date: new Date(2016, 10, 11), open: 776.81, high: 777.29, low: 765.54, close: 771.75, vol: 3592641 },
{ date: new Date(2016, 10, 10), open: 810, high: 810.06, low: 768.23, close: 780.29, vol: 5909609 },
{ date: new Date(2016, 10, 9), open: 801.83, high: 811.71, low: 792.04, close: 805.59, vol: 3098510 },
{ date: new Date(2016, 10, 8), open: 802.03, high: 816.04, low: 799.62, close: 811.98, vol: 1769069 },
{ date: new Date(2016, 10, 7), open: 794.95, high: 805, low: 792.9, close: 802.03, vol: 1992570 },
{ date: new Date(2016, 10, 4), open: 771.3, high: 788.48, low: 771, close: 781.1, vol: 1970603 },
{ date: new Date(2016, 10, 3), open: 784.5, high: 790, low: 778.63, close: 782.19, vol: 2175216 },
{ date: new Date(2016, 10, 2), open: 806.76, high: 806.76, low: 785, close: 788.42, vol: 2350736 },
{ date: new Date(2016, 10, 1), open: 810.87, high: 813.96, low: 798.26, close: 805.48, vol: 2355890 },
{ date: new Date(2016, 9, 31), open: 822.43, high: 822.63, low: 808, close: 809.9, vol: 2242679 },
{ date: new Date(2016, 9, 28), open: 829.94, high: 839, low: 817, close: 819.56, vol: 4354884 },
{ date: new Date(2016, 9, 27), open: 823.01, high: 826.58, low: 814.61, close: 817.35, vol: 2973486 },
{ date: new Date(2016, 9, 26), open: 827.12, high: 827.71, low: 816.35, close: 822.1, vol: 1794868 },
{ date: new Date(2016, 9, 25), open: 838.5, high: 838.5, low: 825.3, close: 828.55, vol: 1890712 },
{ date: new Date(2016, 9, 24), open: 830.09, high: 837.94, low: 829.04, close: 835.74, vol: 1447616 },
{ date: new Date(2016, 9, 21), open: 820, high: 824.29, low: 818.31, close: 824.06, vol: 1615814 },
{ date: new Date(2016, 9, 20), open: 827.56, high: 828.46, low: 820.55, close: 821.63, vol: 1393870 },
{ date: new Date(2016, 9, 19), open: 824.52, high: 829.81, low: 823.2, close: 827.09, vol: 1500142 },
{ date: new Date(2016, 9, 18), open: 814.21, high: 828.81, low: 813.33, close: 821.49, vol: 2289265 },
{ date: new Date(2016, 9, 17), open: 805.99, high: 813.49, low: 803.83, close: 806.84, vol: 1056367 },
{ date: new Date(2016, 9, 14), open: 807.45, high: 810.09, low: 802.32, close: 804.6, vol: 1111934 },
{ date: new Date(2016, 9, 13), open: 806.07, high: 806.56, low: 798.62, close: 804.08, vol: 1368981 },
{ date: new Date(2016, 9, 12), open: 811.96, high: 814.5, low: 808.55, close: 811.77, vol: 907876 },
{ date: new Date(2016, 9, 11), open: 814.17, high: 819.86, low: 807.37, close: 809.57, vol: 1721575 },
{ date: new Date(2016, 9, 10), open: 803.93, high: 817.38, low: 802.24, close: 814.17, vol: 1496115 },
{ date: new Date(2016, 9, 7), open: 805.93, high: 805.94, low: 796.82, close: 800.71, vol: 1163899 },
{ date: new Date(2016, 9, 6), open: 804.08, high: 806.94, low: 800.51, close: 803.08, vol: 1099909 },
{ date: new Date(2016, 9, 5), open: 806, high: 808.5, low: 800.71, close: 801.23, vol: 1213820 },
{ date: new Date(2016, 9, 4), open: 805, high: 806.5, low: 799.67, close: 802.79, vol: 1258706 },
{ date: new Date(2016, 9, 3), open: 802.55, high: 803.54, low: 796.23, close: 800.38, vol: 1489212 },
{ date: new Date(2016, 8, 30), open: 803.6, high: 808.09, low: 801.5, close: 804.06, vol: 1660201 },
{ date: new Date(2016, 8, 29), open: 807.23, high: 813.91, low: 800.86, close: 802.64, vol: 1349974 },
{ date: new Date(2016, 8, 28), open: 804.08, high: 810.25, low: 802.78, close: 810.06, vol: 1470280 },
{ date: new Date(2016, 8, 27), open: 801.83, high: 813.49, low: 801.83, close: 810.73, vol: 1367271 },
{ date: new Date(2016, 8, 26), open: 809.82, high: 810.08, low: 800.45, close: 802.65, vol: 1472732 },
{ date: new Date(2016, 8, 23), open: 815.14, high: 817, low: 812.73, close: 814.96, vol: 1411673 },
{ date: new Date(2016, 8, 22), open: 810, high: 819.06, low: 807.71, close: 815.95, vol: 1759290 },
{ date: new Date(2016, 8, 21), open: 801.26, high: 805.91, low: 796.03, close: 805.03, vol: 1348476 },
{ date: new Date(2016, 8, 20), open: 800, high: 802.75, low: 798.26, close: 799.78, vol: 1050041 },
{ date: new Date(2016, 8, 19), open: 801.11, high: 803.99, low: 793.56, close: 795.39, vol: 1149522 },
{ date: new Date(2016, 8, 16), open: 799.02, high: 799.02, low: 793.62, close: 797.97, vol: 2130571 },
{ date: new Date(2016, 8, 15), open: 790.01, high: 803.64, low: 788.66, close: 801.23, vol: 1566360 },
{ date: new Date(2016, 8, 14), open: 787.53, high: 796.33, low: 787.53, close: 790.46, vol: 1313912 },
{ date: new Date(2016, 8, 13), open: 794.01, high: 795.79, low: 784.33, close: 788.72, vol: 1809044 },
{ date: new Date(2016, 8, 12), open: 784.52, high: 800.17, low: 783.5, close: 798.82, vol: 1863737 },
{ date: new Date(2016, 8, 9), open: 798.77, high: 801.75, low: 788.05, close: 788.48, vol: 1887633 },
{ date: new Date(2016, 8, 8), open: 805.22, high: 808.42, low: 801.01, close: 802.84, vol: 1177660 },
{ date: new Date(2016, 8, 7), open: 807.93, high: 810.6, low: 803.72, close: 807.99, vol: 1145724 },
{ date: new Date(2016, 8, 6), open: 798.39, high: 810.89, low: 795.43, close: 808.02, vol: 1989537 },
{ date: new Date(2016, 8, 2), open: 795.27, high: 797.1, low: 793.26, close: 796.87, vol: 1347368 },
{ date: new Date(2016, 8, 1), open: 791.98, high: 792.89, low: 786.33, close: 791.4, vol: 1303460 },
{ date: new Date(2016, 7, 31), open: 789.6, high: 791.57, low: 787.2, close: 789.85, vol: 1071420 },
{ date: new Date(2016, 7, 30), open: 792.88, high: 798, low: 789.47, close: 791.92, vol: 1167413 },
{ date: new Date(2016, 7, 29), open: 793.05, high: 798.52, low: 790.32, close: 795.82, vol: 773698 },
{ date: new Date(2016, 7, 26), open: 792.49, high: 799.4, low: 789.41, close: 793.22, vol: 1248881 },
{ date: new Date(2016, 7, 25), open: 792, high: 794.72, low: 787.23, close: 791.3, vol: 1202680 },
{ date: new Date(2016, 7, 24), open: 796.86, high: 798.46, low: 790.76, close: 793.6, vol: 1284437 },
{ date: new Date(2016, 7, 23), open: 800.48, high: 801, low: 795.99, close: 796.59, vol: 917513 },
{ date: new Date(2016, 7, 22), open: 798.51, high: 799.3, low: 794.33, close: 796.95, vol: 853365 },
{ date: new Date(2016, 7, 19), open: 799.79, high: 801.23, low: 796.88, close: 799.65, vol: 1120763 },
{ date: new Date(2016, 7, 18), open: 805.36, high: 808, low: 801.63, close: 802.75, vol: 865160 },
{ date: new Date(2016, 7, 17), open: 800, high: 805.63, low: 796.3, close: 805.42, vol: 1066070 },
{ date: new Date(2016, 7, 16), open: 803.5, high: 804.26, low: 797, close: 801.19, vol: 1057897 },
{ date: new Date(2016, 7, 15), open: 807.21, high: 811.36, low: 804.03, close: 805.96, vol: 930074 },
{ date: new Date(2016, 7, 12), open: 805.09, high: 807.19, low: 803.64, close: 807.05, vol: 897283 },
{ date: new Date(2016, 7, 11), open: 810.47, high: 813.88, low: 806, close: 808.2, vol: 1282274 },
{ date: new Date(2016, 7, 10), open: 807.05, high: 810.88, low: 806.49, close: 808.49, vol: 918514 },
{ date: new Date(2016, 7, 9), open: 804.49, high: 813.33, low: 804.06, close: 807.48, vol: 1607685 },
{ date: new Date(2016, 7, 8), open: 806, high: 807.6, low: 801.69, close: 805.23, vol: 1221609 },
{ date: new Date(2016, 7, 5), open: 800.11, high: 807.22, low: 797.81, close: 806.93, vol: 1807271 },
{ date: new Date(2016, 7, 4), open: 798.24, high: 800.2, low: 793.92, close: 797.25, vol: 1076031 },
{ date: new Date(2016, 7, 3), open: 796.47, high: 799.54, low: 793.02, close: 798.92, vol: 1461025 },
{ date: new Date(2016, 7, 2), open: 797.33, high: 802.32, low: 794.53, close: 800.12, vol: 1996354 },
{ date: new Date(2016, 7, 1), open: 786.67, high: 807.49, low: 785.04, close: 800.94, vol: 3029658 },
{ date: new Date(2016, 6, 29), open: 797.71, high: 803.94, low: 790, close: 791.34, vol: 5090527 },
{ date: new Date(2016, 6, 28), open: 768.84, high: 768.97, low: 759.09, close: 765.84, vol: 3673221 },
{ date: new Date(2016, 6, 27), open: 758.97, high: 764.45, low: 755.93, close: 761.97, vol: 1608589 },
{ date: new Date(2016, 6, 26), open: 757.52, high: 759.26, low: 752.75, close: 757.65, vol: 1189573 },
{ date: new Date(2016, 6, 25), open: 757.68, high: 759.82, low: 754.07, close: 757.52, vol: 1073310 },
{ date: new Date(2016, 6, 22), open: 757.32, high: 759.45, low: 752.66, close: 759.28, vol: 1046024 },
{ date: new Date(2016, 6, 21), open: 757, high: 758.15, low: 751.52, close: 754.41, vol: 953053 },
{ date: new Date(2016, 6, 20), open: 754.05, high: 760.64, low: 754.05, close: 757.08, vol: 1125117 },
{ date: new Date(2016, 6, 19), open: 749.87, high: 756.59, low: 748.49, close: 753.41, vol: 1521795 },
{ date: new Date(2016, 6, 18), open: 737.91, high: 755.14, low: 736.51, close: 753.2, vol: 1934900 },
{ date: new Date(2016, 6, 15), open: 741, high: 741, low: 734.64, close: 735.63, vol: 1617087 },
{ date: new Date(2016, 6, 14), open: 733.94, high: 736.14, low: 730.59, close: 735.8, vol: 1070351 },
{ date: new Date(2016, 6, 13), open: 735.52, high: 735.52, low: 729.02, close: 729.48, vol: 1021827 },
{ date: new Date(2016, 6, 12), open: 731.92, high: 735.6, low: 727.5, close: 732.51, vol: 1328680 },
{ date: new Date(2016, 6, 11), open: 719.42, high: 728.93, low: 718.86, close: 727.2, vol: 1441113 },
{ date: new Date(2016, 6, 8), open: 710.56, high: 717.9, low: 708.11, close: 717.78, vol: 1497323 },
{ date: new Date(2016, 6, 7), open: 710.11, high: 710.17, low: 700.67, close: 707.26, vol: 1058698 },
{ date: new Date(2016, 6, 6), open: 699.84, high: 713, low: 699, close: 708.97, vol: 1445126 },
{ date: new Date(2016, 6, 5), open: 705.01, high: 708.12, low: 699.13, close: 704.89, vol: 1422028 },
{ date: new Date(2016, 6, 1), open: 705.1, high: 712.53, low: 703.73, close: 710.25, vol: 1549160 },
{ date: new Date(2016, 5, 30), open: 697.65, high: 703.77, low: 694.9, close: 703.53, vol: 2112513 },
{ date: new Date(2016, 5, 29), open: 694.26, high: 699.5, low: 692.68, close: 695.19, vol: 2156218 },
{ date: new Date(2016, 5, 28), open: 691.37, high: 692.74, low: 684.85, close: 691.26, vol: 1912280 },
{ date: new Date(2016, 5, 27), open: 682.49, high: 683.32, low: 672.66, close: 681.14, vol: 2919486 },
{ date: new Date(2016, 5, 24), open: 690.17, high: 705, low: 684.91, close: 685.2, vol: 4771780 },
{ date: new Date(2016, 5, 23), open: 710.55, high: 714.88, low: 700.25, close: 714.87, vol: 2125028 },
{ date: new Date(2016, 5, 22), open: 714.05, high: 714.21, low: 705.88, close: 710.47, vol: 1452884 },
{ date: new Date(2016, 5, 21), open: 710.05, high: 715.38, low: 704.66, close: 708.88, vol: 1515918 },
{ date: new Date(2016, 5, 20), open: 710.31, high: 715.87, low: 705.41, close: 706.13, vol: 2282725 },
{ date: new Date(2016, 5, 17), open: 721.39, high: 721.39, low: 701.12, close: 704.25, vol: 4113085 },
{ date: new Date(2016, 5, 16), open: 727.96, high: 730.39, low: 715.54, close: 724.25, vol: 2250083 },
{ date: new Date(2016, 5, 15), open: 734.92, high: 737.15, low: 731.31, close: 732.19, vol: 1161701 },
{ date: new Date(2016, 5, 14), open: 729.31, high: 736, low: 726.5, close: 733.25, vol: 1329176 },
{ date: new Date(2016, 5, 13), open: 729.82, high: 739, low: 729.82, close: 731.88, vol: 1167736 },
{ date: new Date(2016, 5, 10), open: 735.95, high: 739.64, low: 730.51, close: 733.19, vol: 1452456 },
{ date: new Date(2016, 5, 9), open: 737.07, high: 743.93, low: 736.5, close: 742.52, vol: 958963 },
{ date: new Date(2016, 5, 8), open: 739.5, high: 743.81, low: 735.76, close: 742.93, vol: 1615727 },
{ date: new Date(2016, 5, 7), open: 733.27, high: 736.71, low: 730.8, close: 731.09, vol: 1215741 },
{ date: new Date(2016, 5, 6), open: 738.5, high: 738.5, low: 728.29, close: 730.06, vol: 1499648 },
{ date: new Date(2016, 5, 3), open: 741.49, high: 741.49, low: 733.91, close: 735.86, vol: 1230376 },
{ date: new Date(2016, 5, 2), open: 746.1, high: 747.3, low: 737, close: 744.27, vol: 1695824 },
{ date: new Date(2016, 5, 1), open: 748.47, high: 751.37, low: 744.34, close: 748.46, vol: 1039847 },
{ date: new Date(2016, 4, 31), open: 748.76, high: 753.48, low: 745.57, close: 748.85, vol: 2124248 },
{ date: new Date(2016, 4, 27), open: 737.51, high: 747.91, low: 737.01, close: 747.6, vol: 1738913 },
{ date: new Date(2016, 4, 26), open: 736, high: 741.1, low: 733, close: 736.93, vol: 1298295 },
{ date: new Date(2016, 4, 25), open: 735, high: 739.89, low: 732.6, close: 738.1, vol: 1610773 },
{ date: new Date(2016, 4, 24), open: 719.85, high: 734.2, low: 719.64, close: 733.03, vol: 1890195 },
{ date: new Date(2016, 4, 23), open: 719.98, high: 723.5, low: 716.94, close: 717.25, vol: 1233407 },
{ date: new Date(2016, 4, 20), open: 716.46, high: 727.7, low: 715.01, close: 721.71, vol: 1722506 },
{ date: new Date(2016, 4, 19), open: 718.3, high: 720.5, low: 710.3, close: 715.31, vol: 1495741 },
{ date: new Date(2016, 4, 18), open: 718.5, high: 725.57, low: 715.02, close: 721.78, vol: 1620691 },
{ date: new Date(2016, 4, 17), open: 731.06, high: 735.85, low: 718, close: 720.19, vol: 1667998 },
{ date: new Date(2016, 4, 16), open: 724.32, high: 732.68, low: 720, close: 730.3, vol: 1124220 },
{ date: new Date(2016, 4, 13), open: 726.62, high: 731.29, low: 723.51, close: 724.83, vol: 1241301 },
{ date: new Date(2016, 4, 12), open: 732, high: 735.37, low: 724.27, close: 728.07, vol: 1352779 },
{ date: new Date(2016, 4, 11), open: 740.52, high: 740.8, low: 727.9, close: 730.55, vol: 1484998 },
{ date: new Date(2016, 4, 10), open: 734.96, high: 740, low: 731.61, close: 739.38, vol: 1627899 },
{ date: new Date(2016, 4, 9), open: 726.7, high: 734.29, low: 723.5, close: 729.13, vol: 1898866 },
{ date: new Date(2016, 4, 6), open: 712.2, high: 725.99, low: 711.95, close: 725.18, vol: 1982458 },
{ date: new Date(2016, 4, 5), open: 715, high: 717.55, low: 709.45, close: 714.71, vol: 1479828 },
{ date: new Date(2016, 4, 4), open: 706.77, high: 715.05, low: 704.05, close: 711.37, vol: 1610174 },
{ date: new Date(2016, 4, 3), open: 712.5, high: 713.37, low: 707.33, close: 708.44, vol: 1922797 },
{ date: new Date(2016, 4, 2), open: 711.92, high: 715.41, low: 706.36, close: 714.41, vol: 1672285 },
{ date: new Date(2016, 3, 29), open: 704.12, high: 712.11, low: 703.78, close: 707.88, vol: 2906358 },
{ date: new Date(2016, 3, 28), open: 723.29, high: 729.26, low: 703.2, close: 705.06, vol: 3114203 },
{ date: new Date(2016, 3, 27), open: 725.32, high: 727.15, low: 709.08, close: 721.46, vol: 3289534 },
{ date: new Date(2016, 3, 26), open: 744.42, high: 745.59, low: 720.32, close: 725.37, vol: 2754324 },
{ date: new Date(2016, 3, 25), open: 735.35, high: 744.88, low: 735.1, close: 742.21, vol: 2469163 },
{ date: new Date(2016, 3, 22), open: 743.91, high: 753.92, low: 730.37, close: 737.77, vol: 6978506 },
{ date: new Date(2016, 3, 21), open: 777.31, high: 781.68, low: 771.55, close: 780, vol: 3326803 },
{ date: new Date(2016, 3, 20), open: 779.16, high: 779.66, low: 771.27, close: 774.92, vol: 1706231 },
{ date: new Date(2016, 3, 19), open: 790.5, high: 790.95, low: 770.27, close: 776.25, vol: 2191366 },
{ date: new Date(2016, 3, 18), open: 780.19, high: 788.55, low: 777.61, close: 787.68, vol: 1669701 },
{ date: new Date(2016, 3, 15), open: 775.5, high: 780.93, low: 774.93, close: 780, vol: 1555865 },
{ date: new Date(2016, 3, 14), open: 775.36, high: 779.61, low: 773.22, close: 775.39, vol: 1348011 },
{ date: new Date(2016, 3, 13), open: 770.31, high: 775.75, low: 764.59, close: 771.91, vol: 1768980 },
{ date: new Date(2016, 3, 12), open: 758.43, high: 764.92, low: 751.56, close: 764.32, vol: 1366559 },
{ date: new Date(2016, 3, 11), open: 765.45, high: 767.22, low: 757.34, close: 757.54, vol: 1584036 },
{ date: new Date(2016, 3, 8), open: 765.87, high: 767.13, low: 755.77, close: 759.47, vol: 1171738 },
{ date: new Date(2016, 3, 7), open: 765.32, high: 769.36, low: 757.5, close: 760.12, vol: 1254028 },
{ date: new Date(2016, 3, 6), open: 757.84, high: 768.42, low: 756.3, close: 768.07, vol: 1257118 },
{ date: new Date(2016, 3, 5), open: 758.13, high: 762.87, low: 755.6, close: 758.57, vol: 1222147 },
{ date: new Date(2016, 3, 4), open: 769.51, high: 772.44, low: 761.78, close: 765.12, vol: 1343934 },
{ date: new Date(2016, 3, 1), open: 757.16, high: 770.04, low: 755.2, close: 769.67, vol: 1581222 },
{ date: new Date(2016, 2, 31), open: 768.34, high: 769.08, low: 758.25, close: 762.9, vol: 1623821 },
{ date: new Date(2016, 2, 30), open: 768.21, high: 777.31, low: 767.58, close: 768.34, vol: 2017229 },
{ date: new Date(2016, 2, 29), open: 753.68, high: 767.18, low: 748.29, close: 765.89, vol: 1987121 },
{ date: new Date(2016, 2, 28), open: 756.17, high: 758.3, low: 752.04, close: 753.28, vol: 1082515 }
];
}
.wj-flexchart {
height: 300px;
}
.zoom-box {
position: absolute;
display: none;
background-color: rgba(85, 85, 85, 0.05);
border: 2px dashed #808080;
pointer-events: none;
}
body {
margin-bottom: 24pt;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'jszip': 'npm:jszip/dist/jszip.js',
'@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js',
'@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js',
'@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles',
'@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures',
'@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js',
'@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js',
'@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js',
'@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js',
'@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js',
'@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js',
'@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js',
'@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js',
'@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js',
'@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js',
'@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js',
'@grapecity/wijmo.chart.map': 'npm:@grapecity/wijmo.chart.map/index.js',
'@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js',
'@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js',
'@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js',
'@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js',
'@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js',
'@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js',
'@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js',
'@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js',
'@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js',
'@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js',
'@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js',
'@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js',
'@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js',
'@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js',
'@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js',
'@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js',
'@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js',
'@grapecity/wijmo.rest': 'npm:@grapecity/wijmo.rest/index.js',
'@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js',
'@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js',
'@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js',
'@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js',
'@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js',
'@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js',
'@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js',
'@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js',
'@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js',
'@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js',
'@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js',
'@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
