HighLowOpenClose Chart

HighLowOpenClose charts are used to describe price movements of a security, derivative, or currency over time. They are similar to candlestick charts, except opening values are displayed using lines to the left, and closing values are displayed using lines lines to the right.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as core from '@grapecity/wijmo'; import * as chart from '@grapecity/wijmo.chart'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create the chart let theChart = new chart.FlexChart('#theChart', { itemsSource: getData(), bindingX: 'date', chartType: 'HighLowOpenClose', series: [ { binding: 'high,low,open,close', name: 'Box Inc' } ], legend: { position: 'None' } }); theChart.palette = getRandomPalette(); // var lm = new chart.LineMarker(theChart, { isVisible: false, lines: 'Both', interaction: 'Move', content: function (ht) { if (ht.item) { let s = `<b>Date</b>: ${core.Globalize.formatDate(ht.item.date, 'yyyy-MM-dd')}`; for (let key in ht.item) { if (key !== 'date') { s += `</br> ${key}: ${ht.item[key]}`; } } return s; } else { return 'No items here...'; } } }); // show the marker when the mouse is over the chart theChart.addEventListener(theChart.hostElement, 'mouseenter', function () { lm.isVisible = true; }); theChart.addEventListener(theChart.hostElement, 'mouseleave', function () { lm.isVisible = false; }); } // function getRandomPalette() { let palettes = Object.getOwnPropertyNames(chart.Palettes) .filter(prop => typeof chart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return chart.Palettes[palettes[rand]]; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart HighLowOpenClose Chart</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"> <div id="theChart"></div> </div> </body> </html> // some stock data from Google Finance export function getData() { return [ { date: new Date(2017, 2, 17), open: 851.61, high: 853.4, low: 847.11, close: 852.12, vol: 1716471 }, { date: new Date(2017, 2, 16), open: 849.03, high: 850.85, low: 846.13, close: 848.78, vol: 977560 }, { date: new Date(2017, 2, 15), open: 847.59, high: 848.63, low: 840.77, close: 847.2, vol: 1381474 }, { date: new Date(2017, 2, 14), open: 843.64, high: 847.24, low: 840.8, close: 845.62, vol: 780198 }, { date: new Date(2017, 2, 13), open: 844, high: 848.68, low: 843.25, close: 845.54, vol: 1223647 }, { date: new Date(2017, 2, 10), open: 843.28, high: 844.91, low: 839.5, close: 843.25, vol: 1704024 }, { date: new Date(2017, 2, 9), open: 836, high: 842, low: 834.21, close: 838.68, vol: 1261517 }, { date: new Date(2017, 2, 8), open: 833.51, high: 838.15, low: 831.79, close: 835.37, vol: 989773 }, { date: new Date(2017, 2, 7), open: 827.4, high: 833.41, low: 826.52, close: 831.91, vol: 1037630 }, { date: new Date(2017, 2, 6), open: 826.95, high: 828.88, low: 822.4, close: 827.78, vol: 1109037 }, { date: new Date(2017, 2, 3), open: 830.56, high: 831.36, low: 825.75, close: 829.08, vol: 896378 }, { date: new Date(2017, 2, 2), open: 833.85, high: 834.51, low: 829.64, close: 830.63, vol: 942476 }, { date: new Date(2017, 2, 1), open: 828.85, high: 836.26, low: 827.26, close: 835.24, vol: 1496540 }, { date: new Date(2017, 1, 28), open: 825.61, high: 828.54, low: 820.2, close: 823.21, vol: 2260769 }, { date: new Date(2017, 1, 27), open: 824.55, high: 830.5, low: 824, close: 829.28, vol: 1101466 }, { date: new Date(2017, 1, 24), open: 827.73, high: 829, low: 824.2, close: 828.64, vol: 1392202 }, { date: new Date(2017, 1, 23), open: 830.12, high: 832.46, low: 822.88, close: 831.33, vol: 1472771 }, { date: new Date(2017, 1, 22), open: 828.66, high: 833.25, low: 828.64, close: 830.76, vol: 987248 }, { date: new Date(2017, 1, 21), open: 828.66, high: 833.45, low: 828.35, close: 831.66, vol: 1262337 }, { date: new Date(2017, 1, 17), open: 823.02, high: 828.07, low: 821.66, close: 828.07, vol: 1611039 }, { date: new Date(2017, 1, 16), open: 819.93, high: 824.4, low: 818.98, close: 824.16, vol: 1287626 }, { date: new Date(2017, 1, 15), open: 819.36, high: 823, low: 818.47, close: 818.98, vol: 1313617 }, { date: new Date(2017, 1, 14), open: 819, high: 823, low: 816, close: 820.45, vol: 1054732 }, { date: new Date(2017, 1, 13), open: 816, high: 820.96, low: 815.49, close: 819.24, vol: 1213324 }, { date: new Date(2017, 1, 10), open: 811.7, high: 815.25, low: 809.78, close: 813.67, vol: 1134976 }, { date: new Date(2017, 1, 9), open: 809.51, high: 810.66, low: 804.54, close: 809.56, vol: 990391 }, { date: new Date(2017, 1, 8), open: 807, high: 811.84, low: 803.19, close: 808.38, vol: 1155990 }, { date: new Date(2017, 1, 7), open: 803.99, high: 810.5, low: 801.78, close: 806.97, vol: 1241221 }, { date: new Date(2017, 1, 6), open: 799.7, high: 801.67, low: 795.25, close: 801.34, vol: 1184483 }, { date: new Date(2017, 1, 3), open: 802.99, high: 806, low: 800.37, close: 801.49, vol: 1463448 } ]; } .wj-flexchart { height: 300px; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, Inject, enableProdMode, NgModule, AfterViewInit, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { DataService } from './app.data'; import * as wjCore from '@grapecity/wijmo'; import * as wjChart from '@grapecity/wijmo.chart'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent implements AfterViewInit { data: any[]; palette: any; lmVisible: boolean; @ViewChild('theChart') theChart: wjChart.FlexChart; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); this.palette = this.getRandomPalette(); this.lmVisible = false; } // ngAfterViewInit() { // show the marker when the mouse is over the chart this.theChart.addEventListener(this.theChart.hostElement, 'mouseenter', () => { this.lmVisible = true; }); this.theChart.addEventListener(this.theChart.hostElement, 'mouseleave', () => { this.lmVisible = false; }); } // getRandomPalette() { let palettes = Object.getOwnPropertyNames(wjChart.Palettes) .filter(prop => typeof wjChart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return wjChart.Palettes[palettes[rand]]; } // markerContent(ht: wjChart.HitTestInfo) { if(ht.item) { let s = `<b>Date</b>: ${wjCore.Globalize.formatDate(ht.item.date, 'yyyy-MM-dd')}`; for(let key in ht.item) { if(key !== 'date') { s += `</br> ${key}: ${ht.item[key]}`; } } return s; } else { return 'No items here...'; } } } // @NgModule({ imports: [WjChartModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart HighLowOpenClose Chart</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <wj-flex-chart #theChart [itemsSource]="data" bindingX="date" chartType="HighLowOpenClose" [palette]="palette" tooltipContent=""> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-series binding="high,low,open,close" name="Box Inc"></wj-flex-chart-series> <wj-flex-line-marker lines="Both" interaction="Move" [isVisible]="lmVisible" [content]="markerContent"></wj-flex-line-marker> </wj-flex-chart> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { return [ { date: new Date(2017, 2, 17), open: 851.61, high: 853.4, low: 847.11, close: 852.12, vol: 1716471 }, { date: new Date(2017, 2, 16), open: 849.03, high: 850.85, low: 846.13, close: 848.78, vol: 977560 }, { date: new Date(2017, 2, 15), open: 847.59, high: 848.63, low: 840.77, close: 847.2, vol: 1381474 }, { date: new Date(2017, 2, 14), open: 843.64, high: 847.24, low: 840.8, close: 845.62, vol: 780198 }, { date: new Date(2017, 2, 13), open: 844, high: 848.68, low: 843.25, close: 845.54, vol: 1223647 }, { date: new Date(2017, 2, 10), open: 843.28, high: 844.91, low: 839.5, close: 843.25, vol: 1704024 }, { date: new Date(2017, 2, 9), open: 836, high: 842, low: 834.21, close: 838.68, vol: 1261517 }, { date: new Date(2017, 2, 8), open: 833.51, high: 838.15, low: 831.79, close: 835.37, vol: 989773 }, { date: new Date(2017, 2, 7), open: 827.4, high: 833.41, low: 826.52, close: 831.91, vol: 1037630 }, { date: new Date(2017, 2, 6), open: 826.95, high: 828.88, low: 822.4, close: 827.78, vol: 1109037 }, { date: new Date(2017, 2, 3), open: 830.56, high: 831.36, low: 825.75, close: 829.08, vol: 896378 }, { date: new Date(2017, 2, 2), open: 833.85, high: 834.51, low: 829.64, close: 830.63, vol: 942476 }, { date: new Date(2017, 2, 1), open: 828.85, high: 836.26, low: 827.26, close: 835.24, vol: 1496540 }, { date: new Date(2017, 1, 28), open: 825.61, high: 828.54, low: 820.2, close: 823.21, vol: 2260769 }, { date: new Date(2017, 1, 27), open: 824.55, high: 830.5, low: 824, close: 829.28, vol: 1101466 }, { date: new Date(2017, 1, 24), open: 827.73, high: 829, low: 824.2, close: 828.64, vol: 1392202 }, { date: new Date(2017, 1, 23), open: 830.12, high: 832.46, low: 822.88, close: 831.33, vol: 1472771 }, { date: new Date(2017, 1, 22), open: 828.66, high: 833.25, low: 828.64, close: 830.76, vol: 987248 }, { date: new Date(2017, 1, 21), open: 828.66, high: 833.45, low: 828.35, close: 831.66, vol: 1262337 }, { date: new Date(2017, 1, 17), open: 823.02, high: 828.07, low: 821.66, close: 828.07, vol: 1611039 }, { date: new Date(2017, 1, 16), open: 819.93, high: 824.4, low: 818.98, close: 824.16, vol: 1287626 }, { date: new Date(2017, 1, 15), open: 819.36, high: 823, low: 818.47, close: 818.98, vol: 1313617 }, { date: new Date(2017, 1, 14), open: 819, high: 823, low: 816, close: 820.45, vol: 1054732 }, { date: new Date(2017, 1, 13), open: 816, high: 820.96, low: 815.49, close: 819.24, vol: 1213324 }, { date: new Date(2017, 1, 10), open: 811.7, high: 815.25, low: 809.78, close: 813.67, vol: 1134976 }, { date: new Date(2017, 1, 9), open: 809.51, high: 810.66, low: 804.54, close: 809.56, vol: 990391 }, { date: new Date(2017, 1, 8), open: 807, high: 811.84, low: 803.19, close: 808.38, vol: 1155990 }, { date: new Date(2017, 1, 7), open: 803.99, high: 810.5, low: 801.78, close: 806.97, vol: 1241221 }, { date: new Date(2017, 1, 6), open: 799.7, high: 801.67, low: 795.25, close: 801.34, vol: 1184483 }, { date: new Date(2017, 1, 3), open: 802.99, high: 806, low: 800.37, close: 801.49, vol: 1463448 } ]; } } body { margin-bottom: 24px; } label { margin-right: 3px; } <template> <div class="container-fluid"> <wj-flex-chart :itemsSource="data" bindingX="date" chartType="HighLowOpenClose" :palette="palette" tooltipContent="" :initialized="initializeChart"> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-series binding="high,low,open,close" name="Box Inc"></wj-flex-chart-series> <wj-flex-chart-line-marker lines="Both" interaction="Move" :isVisible="lmVisible" :content="markerContent"></wj-flex-chart-line-marker> </wj-flex-chart> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.chart'; import '@grapecity/wijmo.vue2.chart.finance'; import { getData } from './data'; import * as wjCore from '@grapecity/wijmo'; import * as wjChart from '@grapecity/wijmo.chart'; let App = Vue.extend({ name: 'app', data: function () { return { data: getData(), palette: this.getRandomPalette(), lmVisible: false } }, methods: { initializeChart: function(flex) { // show the marker when the mouse is over the chart flex.addEventListener(flex.hostElement, 'mouseenter', () => { this.lmVisible = true; }); flex.addEventListener(flex.hostElement, 'mouseleave', () => { this.lmVisible = false; }); }, getRandomPalette: function() { let palettes = Object.getOwnPropertyNames(wjChart.Palettes) .filter(prop => typeof wjChart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return wjChart.Palettes[palettes[rand]]; }, markerContent: function(ht) { if(ht.item) { let s = `<b>Date</b>: ${wjCore.Globalize.formatDate(ht.item.date, 'yyyy-MM-dd')}`; for(let key in ht.item) { if(key !== 'date') { s += `</br> ${key}: ${ht.item[key]}`; } } return s; } else { return 'No items here...'; } } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } label { margin-right: 3px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart HighLowOpenClose Chart</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.vue'); </script> </head> <body> <div id="app"></div> </body> </html> export function getData() { return [ { date: new Date(2017, 2, 17), open: 851.61, high: 853.4, low: 847.11, close: 852.12, vol: 1716471 }, { date: new Date(2017, 2, 16), open: 849.03, high: 850.85, low: 846.13, close: 848.78, vol: 977560 }, { date: new Date(2017, 2, 15), open: 847.59, high: 848.63, low: 840.77, close: 847.2, vol: 1381474 }, { date: new Date(2017, 2, 14), open: 843.64, high: 847.24, low: 840.8, close: 845.62, vol: 780198 }, { date: new Date(2017, 2, 13), open: 844, high: 848.68, low: 843.25, close: 845.54, vol: 1223647 }, { date: new Date(2017, 2, 10), open: 843.28, high: 844.91, low: 839.5, close: 843.25, vol: 1704024 }, { date: new Date(2017, 2, 9), open: 836, high: 842, low: 834.21, close: 838.68, vol: 1261517 }, { date: new Date(2017, 2, 8), open: 833.51, high: 838.15, low: 831.79, close: 835.37, vol: 989773 }, { date: new Date(2017, 2, 7), open: 827.4, high: 833.41, low: 826.52, close: 831.91, vol: 1037630 }, { date: new Date(2017, 2, 6), open: 826.95, high: 828.88, low: 822.4, close: 827.78, vol: 1109037 }, { date: new Date(2017, 2, 3), open: 830.56, high: 831.36, low: 825.75, close: 829.08, vol: 896378 }, { date: new Date(2017, 2, 2), open: 833.85, high: 834.51, low: 829.64, close: 830.63, vol: 942476 }, { date: new Date(2017, 2, 1), open: 828.85, high: 836.26, low: 827.26, close: 835.24, vol: 1496540 }, { date: new Date(2017, 1, 28), open: 825.61, high: 828.54, low: 820.2, close: 823.21, vol: 2260769 }, { date: new Date(2017, 1, 27), open: 824.55, high: 830.5, low: 824, close: 829.28, vol: 1101466 }, { date: new Date(2017, 1, 24), open: 827.73, high: 829, low: 824.2, close: 828.64, vol: 1392202 }, { date: new Date(2017, 1, 23), open: 830.12, high: 832.46, low: 822.88, close: 831.33, vol: 1472771 }, { date: new Date(2017, 1, 22), open: 828.66, high: 833.25, low: 828.64, close: 830.76, vol: 987248 }, { date: new Date(2017, 1, 21), open: 828.66, high: 833.45, low: 828.35, close: 831.66, vol: 1262337 }, { date: new Date(2017, 1, 17), open: 823.02, high: 828.07, low: 821.66, close: 828.07, vol: 1611039 }, { date: new Date(2017, 1, 16), open: 819.93, high: 824.4, low: 818.98, close: 824.16, vol: 1287626 }, { date: new Date(2017, 1, 15), open: 819.36, high: 823, low: 818.47, close: 818.98, vol: 1313617 }, { date: new Date(2017, 1, 14), open: 819, high: 823, low: 816, close: 820.45, vol: 1054732 }, { date: new Date(2017, 1, 13), open: 816, high: 820.96, low: 815.49, close: 819.24, vol: 1213324 }, { date: new Date(2017, 1, 10), open: 811.7, high: 815.25, low: 809.78, close: 813.67, vol: 1134976 }, { date: new Date(2017, 1, 9), open: 809.51, high: 810.66, low: 804.54, close: 809.56, vol: 990391 }, { date: new Date(2017, 1, 8), open: 807, high: 811.84, low: 803.19, close: 808.38, vol: 1155990 }, { date: new Date(2017, 1, 7), open: 803.99, high: 810.5, low: 801.78, close: 806.97, vol: 1241221 }, { date: new Date(2017, 1, 6), open: 799.7, high: 801.67, low: 795.25, close: 801.34, vol: 1184483 }, { date: new Date(2017, 1, 3), open: 802.99, high: 806, low: 800.37, close: 801.49, vol: 1463448 } ]; } import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import "./app.css"; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjCore from "@grapecity/wijmo"; import * as wjChart from "@grapecity/wijmo.react.chart"; import * as wjcChart from "@grapecity/wijmo.chart"; import { getData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData(), palette: this.getRandomPalette(), lmVisible: false }; } render() { return <div className="container-fluid"> <wjChart.FlexChart itemsSource={this.state.data} bindingX="date" chartType="HighLowOpenClose" palette={this.state.palette} tooltipContent="" initialized={this.initializeChart.bind(this)}> <wjChart.FlexChartLegend position="None"></wjChart.FlexChartLegend> <wjChart.FlexChartSeries binding="high,low,open,close" name="Box Inc"></wjChart.FlexChartSeries> <wjChart.FlexChartLineMarker lines="Both" interaction="Move" isVisible={this.state.lmVisible} content={this.markerContent.bind(this)}></wjChart.FlexChartLineMarker> </wjChart.FlexChart> </div>; } initializeChart(flex) { // show the marker when the mouse is over the chart flex.addEventListener(flex.hostElement, 'mouseenter', () => { this.setState({ lmVisible: true }); }); flex.addEventListener(flex.hostElement, 'mouseleave', () => { this.setState({ lmVisible: false }); }); } getRandomPalette() { let palettes = Object.getOwnPropertyNames(wjcChart.Palettes) .filter(prop => typeof wjcChart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return wjcChart.Palettes[palettes[rand]]; } markerContent(ht) { if (ht.item) { let s = `<b>Date</b>: ${wjCore.Globalize.formatDate(ht.item.date, 'yyyy-MM-dd')}`; for (let key in ht.item) { if (key !== 'date') { s += `</br> ${key}: ${ht.item[key]}`; } } return s; } else { return 'No items here...'; } } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Chart Overview</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 id="app"></div> </body> </html> body { margin-bottom: 24px; } label { margin-right: 3px; } export function getData() { return [ { date: new Date(2017, 2, 17), open: 851.61, high: 853.4, low: 847.11, close: 852.12, vol: 1716471 }, { date: new Date(2017, 2, 16), open: 849.03, high: 850.85, low: 846.13, close: 848.78, vol: 977560 }, { date: new Date(2017, 2, 15), open: 847.59, high: 848.63, low: 840.77, close: 847.2, vol: 1381474 }, { date: new Date(2017, 2, 14), open: 843.64, high: 847.24, low: 840.8, close: 845.62, vol: 780198 }, { date: new Date(2017, 2, 13), open: 844, high: 848.68, low: 843.25, close: 845.54, vol: 1223647 }, { date: new Date(2017, 2, 10), open: 843.28, high: 844.91, low: 839.5, close: 843.25, vol: 1704024 }, { date: new Date(2017, 2, 9), open: 836, high: 842, low: 834.21, close: 838.68, vol: 1261517 }, { date: new Date(2017, 2, 8), open: 833.51, high: 838.15, low: 831.79, close: 835.37, vol: 989773 }, { date: new Date(2017, 2, 7), open: 827.4, high: 833.41, low: 826.52, close: 831.91, vol: 1037630 }, { date: new Date(2017, 2, 6), open: 826.95, high: 828.88, low: 822.4, close: 827.78, vol: 1109037 }, { date: new Date(2017, 2, 3), open: 830.56, high: 831.36, low: 825.75, close: 829.08, vol: 896378 }, { date: new Date(2017, 2, 2), open: 833.85, high: 834.51, low: 829.64, close: 830.63, vol: 942476 }, { date: new Date(2017, 2, 1), open: 828.85, high: 836.26, low: 827.26, close: 835.24, vol: 1496540 }, { date: new Date(2017, 1, 28), open: 825.61, high: 828.54, low: 820.2, close: 823.21, vol: 2260769 }, { date: new Date(2017, 1, 27), open: 824.55, high: 830.5, low: 824, close: 829.28, vol: 1101466 }, { date: new Date(2017, 1, 24), open: 827.73, high: 829, low: 824.2, close: 828.64, vol: 1392202 }, { date: new Date(2017, 1, 23), open: 830.12, high: 832.46, low: 822.88, close: 831.33, vol: 1472771 }, { date: new Date(2017, 1, 22), open: 828.66, high: 833.25, low: 828.64, close: 830.76, vol: 987248 }, { date: new Date(2017, 1, 21), open: 828.66, high: 833.45, low: 828.35, close: 831.66, vol: 1262337 }, { date: new Date(2017, 1, 17), open: 823.02, high: 828.07, low: 821.66, close: 828.07, vol: 1611039 }, { date: new Date(2017, 1, 16), open: 819.93, high: 824.4, low: 818.98, close: 824.16, vol: 1287626 }, { date: new Date(2017, 1, 15), open: 819.36, high: 823, low: 818.47, close: 818.98, vol: 1313617 }, { date: new Date(2017, 1, 14), open: 819, high: 823, low: 816, close: 820.45, vol: 1054732 }, { date: new Date(2017, 1, 13), open: 816, high: 820.96, low: 815.49, close: 819.24, vol: 1213324 }, { date: new Date(2017, 1, 10), open: 811.7, high: 815.25, low: 809.78, close: 813.67, vol: 1134976 }, { date: new Date(2017, 1, 9), open: 809.51, high: 810.66, low: 804.54, close: 809.56, vol: 990391 }, { date: new Date(2017, 1, 8), open: 807, high: 811.84, low: 803.19, close: 808.38, vol: 1155990 }, { date: new Date(2017, 1, 7), open: 803.99, high: 810.5, low: 801.78, close: 806.97, vol: 1241221 }, { date: new Date(2017, 1, 6), open: 799.7, high: 801.67, low: 795.25, close: 801.34, vol: 1184483 }, { date: new Date(2017, 1, 3), open: 802.99, high: 806, low: 800.37, close: 801.49, vol: 1463448 } ]; }