Event Annotations

该示例演示了带有范围选择器和注释的烛台图表。

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 * as annotation from '@grapecity/wijmo.chart.annotation'; import * as finance from '@grapecity/wijmo.chart.finance'; import * as interaction from '@grapecity/wijmo.chart.interaction'; import { getData, getAnnotations } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let volYAxis; let data = getData(); // create the chart let theChart = new finance.FinancialChart('#theChart', { itemsSource: data, bindingX: 'date', chartType: 'Candlestick', series: [ { binding: 'high,low,open,close', name: 'HLOC' }, { binding: 'volume', name: 'Volume', chartType: 'Column' } ], legend: { position: 'None' }, axisX: { axisLine: false, format: 'MM/dd/yy' }, axisY: { position: chart.Position.Right }, tooltip: { content: '<b>{date:MMM dd}</b><br/>' + '<table>' + '<tr><td>high</td><td>{high:c}</td><tr/>' + '<tr><td>low</td><td>{low:c}</td><tr/>' + '<tr><td>open</td><td>{open:c}</td><tr/>' + '<tr><td>close</td><td>{close:c}</td><tr/>' + '<tr><td>volume</td><td>{volume:c}</td><tr/>' + '</table>' }, rendered: () => { if (!volYAxis) { var volSeries = theChart.series[1]; volYAxis = new chart.Axis(0); volSeries.axisY = volYAxis; if (volSeries.getValues(0)) { volYAxis.max = Math.max.apply(null, volSeries.getValues(0)) * 8; } } } }); // let al = new annotation.AnnotationLayer(theChart, getAnnotations()); // let rsChart = new finance.FinancialChart('#rsChart', { itemsSource: data, bindingX: 'date', chartType: 'Area', series: [ { binding: 'close', name: 'Box Inc' } ], axisX: { labels: false }, axisY: { majorGrid: false, labels: false }, tooltip: { content: '' }, legend: { position: 'None' }, rendered: function () { // set range if (rs) { var range = findRange(rsChart.axisX.actualMin, rsChart.axisX.actualMax); rs.min = range.min; rs.max = range.max; } } }); let rs = new interaction.RangeSelector(rsChart, { seamless: true, rangeChanged: function () { // update main chart's x & y range theChart.axisX.min = rs.min; theChart.axisX.max = rs.max; let yRange = findYRange(data, rs.min, rs.max); theChart.axisY.min = yRange.min; theChart.axisY.max = yRange.max; theChart.invalidate(); } }); } // helper method to calculate (upper) percentage of total range // the default will show the top 20% of the available range function findRange(min, max, percent) { var pctToShow = core.isNumber(percent) && 0 < percent && percent < 1 ? percent : 0.2, range = { min: NaN, max: NaN }; if (core.isDate(min) && core.isDate(max)) { range.max = max.valueOf(); range.min = (max.valueOf() - min.valueOf()) * (1 - pctToShow) + min.valueOf(); } else if (core.isNumber(min) && core.isNumber(max)) { range.max = max; range.min = (max - min) * (1 - pctToShow) + min; } return range; } // // assumes High, Low, Open, Close, and Volume data // also assumes category axis function findYRange(data, xmin, xmax) { var item, i, ymin = null, ymax = null; for (i = 0; i < data.length; i++) { item = data[i]; let v = item.date.valueOf(); if (xmin > v || v > xmax) { continue; } if (ymax === null || item.close > ymax) { ymax = item.close; } if (ymin === null || item.close < ymin) { ymin = item.close; } } return { min: ymin, max: ymax }; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Event Annotations</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 id="rsChart"></div> </div> </body> </html> import * as core from '@grapecity/wijmo'; export function getAnnotations() { let data = [ { "name": "tradeRange", "type": "Rectangle", "position": 0, "offset": { "x": 0, "y": -80 }, "width": 465, "height": 430, "attachment": 1, "point": { "x": "2014-11-26", "y": 70 }, "style": { "fill": "#669999", "stroke": "#B40431", "fill-opacity": 0.2, "stroke-width": 0.5, "stroke-opacity": 0.2 } }, { "name": "waterMarker", "type": "Text", "attachment": 2, "point": { "x": 0.5, "y": 0.5 }, "text": "wijmo.com", "style": { "fill": "#B45F04", "fill-opacity": 0.1, "stroke": "rgba(124,240,10,0.2)", "font-size": "100px" } }, { "name": "trendLine1", "type": "Line", "attachment": 1, "position": 0, "start": { "x": "2014-05-08", "y": 64 }, "end": { "x": "2014-09-08", "y": 84 }, "style": { "fill": "#FF0040", "stroke": "#3ADF00", "fill-opacity": 2, "stroke-width": 1, "stroke-opacity": 0.5 } }, { "name": "trendLine2", "type": "Line", "attachment": 1, "position": 0, "start": { "x": "2014-05-08", "y": 56 }, "end": { "x": "2014-09-08", "y": 76 }, "style": { "fill": "#FF0040", "stroke": "#3ADF00", "fill-opacity": 2, "stroke-width": 1, "stroke-opacity": 0.5 } }, { "name": "eventa", "type": "Rectangle", "offset": { "x": 0, "y": -10 }, "attachment": 0, "content": "E", "tooltip": "Results of Operations and Financial Condition.", "width": 20, "height": 20, "pointIndex": 73, "style": { "fill": "#01DFD7", "stroke": "#000000", "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1 } }, { "name": "eventb", "type": "Rectangle", "offset": { "x": 0, "y": 10 }, "attachment": 0, "content": "E", "tooltip": "Completion of Acquisition or Disposition of Assets, Change in Directors or Principal.", "width": 20, "height": 20, "pointIndex": 124, "style": { "fill": "#01DFD7", "stroke": "#000000", "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1 } }, { "name": "eventc", "type": "Rectangle", "offset": { "x": 0, "y": -10 }, "attachment": 0, "content": "E", "tooltip": "Facebook Inc Earnings Call scheduled for 5:00 pm ET today.", "width": 20, "height": 20, "pointIndex": 202, "style": { "fill": "#01DFD7", "stroke": "#000000", "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1 } }, { "name": "eventd", "type": "Rectangle", "offset": { "x": 0, "y": -20 }, "attachment": 0, "content": "E", "tooltip": "Coverage initiated on Facebook by Brean Capital.", "width": 20, "height": 20, "pointIndex": 235, "style": { "fill": "#01DFD7", "stroke": "#000000", "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1 } }, { "name": "detailContainer", "type": "Square", "length": 110, "isVisible": false, "point": { "x": 55, "y": 55 }, "style": { "fill": "#CCCC00", "stroke": "#0B2F3A", "stroke-width": 1, "stroke-opacity": 0.4 } }, { "name": "detailLow", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 3, "text": "", "point": { "x": 52, "y": 20 }, "style": { "fill": "#6E6E6E", "font-size": "12px" } }, { "name": "detailHigh", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 3, "text": "", "point": { "x": 52, "y": 40 }, "style": { "fill": "#6E6E6E", "font-size": "12px" } }, { "name": "detailOpen", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 3, "text": "", "point": { "x": 52, "y": 60 }, "style": { "fill": "#6E6E6E", "font-size": "12px" } }, { "name": "detailClose", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 3, "text": "", "point": { "x": 52, "y": 80 }, "style": { "fill": "#6E6E6E", "font-size": "12px" } }, { "name": "detailVolume", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 3, "text": "", "point": { "x": 52, "y": 100 }, "style": { "fill": "#6E6E6E", "font-size": "12px" } }, { "name": "startLine", "type": "Line", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 1, "tooltip": "Previous close", "start": { "x": "2014-4-10", "y": 59.16 }, "end": { "x": "2016-4-10", "y": 59.16 }, "style": { "fill": "#000000", "stroke": "#000000", "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1 } }, { "name": "dividea", "type": "Image", "position": 0, "offset": { "x": 0, "y": -20 }, "width": 20, "height": 20, "seriesIndex": 1, "href": "resources/divide.png", "tooltip": "Dividend", "attachment": 0, "pointIndex": 42 }, { "name": "divideb", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "width": 20, "height": 20, "seriesIndex": 1, "href": "resources/divide.png", "tooltip": "Dividend", "attachment": 0, "pointIndex": 73 }, { "name": "dividec", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "width": 20, "height": 20, "seriesIndex": 1, "href": "resources/divide.png", "tooltip": "Dividend", "attachment": 0, "pointIndex": 92 }, { "name": "divided", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "width": 20, "height": 20, "seriesIndex": 1, "href": "resources/divide.png", "tooltip": "Dividend", "attachment": 0, "pointIndex": 142 }, { "name": "dividee", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "width": 20, "height": 20, "seriesIndex": 1, "href": "resources/divide.png", "tooltip": "Dividend", "attachment": 0, "pointIndex": 202 }, { "name": "newsa", "type": "Text", "position": 0, "offset": { "x": 0, "y": 25 }, "text": "Alibaba Group Holding Ltd (BABA) and ... ", "attachment": 1, "point": { "x": "2015-3-2", "y": 80 } }, { "name": "newsaMarker", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "href": "resources/flag.png", "tooltip": "2015/3/2, Both JPMorgan Chase and Morgan Stanley offered up favorable comments on the social media giant, with JPMorgan citing that Facebook\"s core services accounted for 24% of all smartphone activity in the U.S. The figure was up 2% from reported usage in ...", "width": 14, "heigh": 24, "attachment": 1, "point": { "x": "2015-3-2", "y": 80 } }, { "name": "newsb", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "text": "Facebook Inc to acquire LiveRail.", "attachment": 1, "point": { "x": "2014-7-8", "y": 62 } }, { "name": "newsbMarker", "type": "Image", "position": 0, "offset": { "x": 7, "y": -20 }, "href": "resources/flag.png", "width": 14, "heigh": 24, "attachment": 1, "point": { "x": "2014-7-8", "y": 62 } }, { "name": "trendDesc", "type": "Text", "position": 0, "offset": { "x": 0, "y": -30 }, "text": "Rising wedge", "attachment": 1, "point": { "x": "2014-5-8", "y": 64 }, "style": { "font-size": "20px" } }, { "name": "buyAnno", "type": "Image", "position": 0, "offset": { "x": 0, "y": 15 }, "height": 24, "width": 24, "tooltip": "Bid: $73.59", "attachment": 1, "point": { "x": "2014-10-14", "y": 73 }, "href": "resources/up.png" }, { "name": "sellAnno", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "height": 24, "width": 24, "tooltip": "Offer: $77.74", "attachment": 1, "point": { "x": "2015-1-8", "y": 78 }, "href": "resources/down.png" } ]; for (var i = 0; i < data.length; i++) { if (data[i].start && data[i].start.x) { data[i].start.x = core.Globalize.parseDate(data[i].start.x, 'yyyy-MM-dd'); } if (data[i].end && data[i].end.x) { data[i].end.x = core.Globalize.parseDate(data[i].end.x, 'yyyy-MM-dd'); } if (data[i].attachment === 1 && data[i].point && data[i].point.x) { data[i].point.x = core.Globalize.parseDate(data[i].point.x, 'yyyy-MM-dd'); } } return data; } // some stock data from Google Finance export function getData() { let data = [ { "date": "04/10/14", "open": 63.08, "high": 63.18, "low": 58.68, "close": 59.16, "volume": 114987616 }, { "date": "04/11/14", "open": 57.6, "high": 60.31, "low": 57.31, "close": 58.53, "volume": 91451960 }, { "date": "04/14/14", "open": 60.09, "high": 60.45, "low": 57.78, "close": 58.89, "volume": 72324603 }, { "date": "04/15/14", "open": 59.29, "high": 59.68, "low": 55.88, "close": 59.09, "volume": 108622706 }, { "date": "04/16/14", "open": 59.79, "high": 60.19, "low": 57.74, "close": 59.72, "volume": 78773521 }, { "date": "04/17/14", "open": 59.3, "high": 60.58, "low": 58.72, "close": 58.94, "volume": 88040346 }, { "date": "04/21/14", "open": 59.46, "high": 61.24, "low": 59.15, "close": 61.24, "volume": 60363619 }, { "date": "04/22/14", "open": 62.65, "high": 63.44, "low": 62.22, "close": 63.03, "volume": 60631312 }, { "date": "04/23/14", "open": 63.45, "high": 63.48, "low": 61.26, "close": 61.36, "volume": 96564750 }, { "date": "04/24/14", "open": 63.6, "high": 63.65, "low": 59.77, "close": 60.87, "volume": 138769345 }, { "date": "04/25/14", "open": 59.97, "high": 60.01, "low": 57.57, "close": 57.71, "volume": 92501529 }, { "date": "04/28/14", "open": 58.05, "high": 58.31, "low": 54.66, "close": 56.14, "volume": 107757756 }, { "date": "04/29/14", "open": 56.09, "high": 58.28, "low": 55.84, "close": 58.15, "volume": 75557202 }, { "date": "04/30/14", "open": 57.58, "high": 59.85, "low": 57.16, "close": 59.78, "volume": 76093004 }, { "date": "05/01/14", "open": 60.43, "high": 62.28, "low": 60.21, "close": 61.15, "volume": 82428606 }, { "date": "05/02/14", "open": 61.3, "high": 61.89, "low": 60.18, "close": 60.46, "volume": 54189197 }, { "date": "05/05/14", "open": 59.67, "high": 61.35, "low": 59.18, "close": 61.22, "volume": 46057411 }, { "date": "05/06/14", "open": 60.98, "high": 61.15, "low": 58.49, "close": 58.53, "volume": 55900809 }, { "date": "05/07/14", "open": 58.77, "high": 59.3, "low": 56.26, "close": 57.39, "volume": 78587247 }, { "date": "05/08/14", "open": 57.23, "high": 58.82, "low": 56.5, "close": 56.76, "volume": 61251053 }, { "date": "05/09/14", "open": 56.85, "high": 57.65, "low": 56.38, "close": 57.24, "volume": 52583858 }, { "date": "05/12/14", "open": 57.98, "high": 59.9, "low": 57.98, "close": 59.83, "volume": 48575487 }, { "date": "05/13/14", "open": 59.66, "high": 60.89, "low": 59.51, "close": 59.83, "volume": 48525476 }, { "date": "05/14/14", "open": 59.53, "high": 60.45, "low": 58.95, "close": 59.23, "volume": 47428583 }, { "date": "05/15/14", "open": 59.26, "high": 59.38, "low": 57.52, "close": 57.92, "volume": 56813940 }, { "date": "05/16/14", "open": 58.31, "high": 58.45, "low": 57.31, "close": 58.02, "volume": 47933075 }, { "date": "05/19/14", "open": 57.89, "high": 59.56, "low": 57.57, "close": 59.21, "volume": 43033925 }, { "date": "05/20/14", "open": 59.5, "high": 60.19, "low": 58.18, "close": 58.56, "volume": 53931469 }, { "date": "05/21/14", "open": 58.56, "high": 60.5, "low": 58.25, "close": 60.49, "volume": 58991505 }, { "date": "05/22/14", "open": 60.94, "high": 61.48, "low": 60.4, "close": 60.52, "volume": 54200116 }, { "date": "05/23/14", "open": 60.41, "high": 61.45, "low": 60.15, "close": 61.35, "volume": 38293993 }, { "date": "05/27/14", "open": 61.62, "high": 63.51, "low": 61.57, "close": 63.48, "volume": 55681663 }, { "date": "05/28/14", "open": 63.39, "high": 64.14, "low": 62.62, "close": 63.51, "volume": 47795088 }, { "date": "05/29/14", "open": 63.84, "high": 64.3, "low": 63.51, "close": 63.83, "volume": 42699670 }, { "date": "05/30/14", "open": 63.95, "high": 64.17, "low": 62.56, "close": 63.3, "volume": 45283577 }, { "date": "06/02/14", "open": 63.23, "high": 63.59, "low": 62.05, "close": 63.08, "volume": 35995537 }, { "date": "06/03/14", "open": 62.62, "high": 63.42, "low": 62.32, "close": 62.87, "volume": 32216707 }, { "date": "06/04/14", "open": 62.45, "high": 63.59, "low": 62.07, "close": 63.34, "volume": 36513991 }, { "date": "06/05/14", "open": 63.66, "high": 64.36, "low": 62.82, "close": 63.19, "volume": 47352368 }, { "date": "06/06/14", "open": 63.37, "high": 63.48, "low": 62.15, "close": 62.5, "volume": 42442096 }, { "date": "06/09/14", "open": 62.4, "high": 63.34, "low": 61.79, "close": 62.88, "volume": 37617413 }, { "date": "06/10/14", "open": 63.53, "high": 65.82, "low": 63.5, "close": 65.77, "volume": 69338140 }, { "date": "06/11/14", "open": 65.32, "high": 65.8, "low": 64.9, "close": 65.78, "volume": 44241926 }, { "date": "06/12/14", "open": 65.85, "high": 66.47, "low": 64.06, "close": 64.29, "volume": 55729828 }, { "date": "06/13/14", "open": 64.7, "high": 64.97, "low": 63.83, "close": 64.5, "volume": 29418910 }, { "date": "06/16/14", "open": 64.16, "high": 64.88, "low": 63.75, "close": 64.19, "volume": 31045811 }, { "date": "06/17/14", "open": 64.1, "high": 64.88, "low": 63.93, "close": 64.4, "volume": 27714816 }, { "date": "06/18/14", "open": 64.49, "high": 65.75, "low": 64.05, "close": 65.6, "volume": 35570154 }, { "date": "06/19/14", "open": 65.46, "high": 65.58, "low": 64.21, "close": 64.34, "volume": 34245182 }, { "date": "06/20/14", "open": 64.46, "high": 64.81, "low": 63.35, "close": 64.5, "volume": 46466073 }, { "date": "06/23/14", "open": 64.32, "high": 65.66, "low": 64.22, "close": 65.37, "volume": 34560121 }, { "date": "06/24/14", "open": 65.36, "high": 67.17, "low": 65.27, "close": 65.72, "volume": 57334867 }, { "date": "06/25/14", "open": 65.58, "high": 67.48, "low": 65.57, "close": 67.44, "volume": 44308249 }, { "date": "06/26/14", "open": 68, "high": 68, "low": 66.9, "close": 67.13, "volume": 47713944 }, { "date": "06/27/14", "open": 67.31, "high": 67.7, "low": 66.84, "close": 67.6, "volume": 46460627 }, { "date": "06/30/14", "open": 67.46, "high": 67.92, "low": 67.13, "close": 67.29, "volume": 27201749 }, { "date": "07/01/14", "open": 67.58, "high": 68.44, "low": 67.39, "close": 68.06, "volume": 33243166 }, { "date": "07/02/14", "open": 68.04, "high": 68.3, "low": 65.79, "close": 66.45, "volume": 41895220 }, { "date": "07/03/14", "open": 66.86, "high": 67, "low": 65.76, "close": 66.29, "volume": 25203215 }, { "date": "07/07/14", "open": 66.3, "high": 66.57, "low": 65.12, "close": 65.29, "volume": 28745099 }, { "date": "07/08/14", "open": 65.06, "high": 65.56, "low": 62.21, "close": 62.76, "volume": 68926036 }, { "date": "07/09/14", "open": 63.41, "high": 65.12, "low": 63.15, "close": 64.97, "volume": 51431582 }, { "date": "07/10/14", "open": 63.31, "high": 65.34, "low": 63.05, "close": 64.87, "volume": 44421915 }, { "date": "07/11/14", "open": 65.28, "high": 66.59, "low": 64.79, "close": 66.34, "volume": 39212022 }, { "date": "07/14/14", "open": 67.13, "high": 68.17, "low": 66.9, "close": 67.9, "volume": 38536924 }, { "date": "07/15/14", "open": 67.96, "high": 68.09, "low": 66.26, "close": 67.16, "volume": 44292944 }, { "date": "07/16/14", "open": 67.54, "high": 67.94, "low": 67.07, "close": 67.66, "volume": 29593589 }, { "date": "07/17/14", "open": 67.03, "high": 67.85, "low": 66.04, "close": 66.41, "volume": 38188432 }, { "date": "07/18/14", "open": 66.8, "high": 68.46, "low": 66.16, "close": 68.42, "volume": 42455649 }, { "date": "07/21/14", "open": 68.81, "high": 69.96, "low": 68.5, "close": 69.4, "volume": 49539121 }, { "date": "07/22/14", "open": 69.76, "high": 69.77, "low": 68.61, "close": 69.27, "volume": 40397693 }, { "date": "07/23/14", "open": 69.74, "high": 71.33, "low": 69.61, "close": 71.29, "volume": 78434716 }, { "date": "07/24/14", "open": 75.96, "high": 76.74, "low": 74.51, "close": 74.98, "volume": 124167936 }, { "date": "07/25/14", "open": 74.99, "high": 75.67, "low": 74.66, "close": 75.19, "volume": 45917435 }, { "date": "07/28/14", "open": 75.17, "high": 75.5, "low": 73.85, "close": 74.92, "volume": 41725249 }, { "date": "07/29/14", "open": 74.72, "high": 74.92, "low": 73.42, "close": 73.71, "volume": 41324470 }, { "date": "07/30/14", "open": 74.21, "high": 75.19, "low": 74.13, "close": 74.68, "volume": 36853018 }, { "date": "07/31/14", "open": 74, "high": 74.16, "low": 72.44, "close": 72.65, "volume": 43991772 }, { "date": "08/01/14", "open": 72.22, "high": 73.22, "low": 71.55, "close": 72.36, "volume": 43535314 }, { "date": "08/04/14", "open": 72.36, "high": 73.88, "low": 72.36, "close": 73.51, "volume": 30776819 }, { "date": "08/05/14", "open": 73.51, "high": 73.59, "low": 72.18, "close": 72.69, "volume": 34986147 }, { "date": "08/06/14", "open": 72.02, "high": 73.72, "low": 71.79, "close": 72.47, "volume": 30985533 }, { "date": "08/07/14", "open": 73, "high": 74, "low": 72.7, "close": 73.17, "volume": 38140550 }, { "date": "08/08/14", "open": 73.4, "high": 73.43, "low": 72.56, "close": 73.06, "volume": 27202325 }, { "date": "08/11/14", "open": 73.46, "high": 73.91, "low": 73.06, "close": 73.44, "volume": 24591177 }, { "date": "08/12/14", "open": 73.09, "high": 73.33, "low": 72.22, "close": 72.83, "volume": 27418983 }, { "date": "08/13/14", "open": 73.12, "high": 74.25, "low": 73.05, "close": 73.77, "volume": 29265662 }, { "date": "08/14/14", "open": 73.97, "high": 74.38, "low": 73.69, "close": 74.3, "volume": 22207019 }, { "date": "08/15/14", "open": 74.32, "high": 74.65, "low": 73, "close": 73.63, "volume": 38909161 }, { "date": "08/18/14", "open": 74, "high": 74.72, "low": 73.96, "close": 74.59, "volume": 23973658 }, { "date": "08/19/14", "open": 74.81, "high": 75.58, "low": 74.77, "close": 75.29, "volume": 26678640 }, { "date": "08/20/14", "open": 74.97, "high": 75.18, "low": 74.62, "close": 74.81, "volume": 22916678 }, { "date": "08/21/14", "open": 74.92, "high": 75.19, "low": 74.41, "close": 74.57, "volume": 20101979 }, { "date": "08/22/14", "open": 74.34, "high": 74.73, "low": 73.57, "close": 74.57, "volume": 20897393 }, { "date": "08/25/14", "open": 74.94, "high": 75.28, "low": 74.79, "close": 75.02, "volume": 19734103 }, { "date": "08/26/14", "open": 75, "high": 75.99, "low": 74.73, "close": 75.96, "volume": 23992668 }, { "date": "08/27/14", "open": 75.27, "high": 75.49, "low": 74.46, "close": 74.63, "volume": 36323060 }, { "date": "08/28/14", "open": 74, "high": 74.43, "low": 73.73, "close": 73.86, "volume": 21946738 }, { "date": "08/29/14", "open": 74.3, "high": 74.82, "low": 74.01, "close": 74.82, "volume": 26241162 }, { "date": "09/02/14", "open": 75.01, "high": 76.7, "low": 74.82, "close": 76.68, "volume": 34979438 }, { "date": "09/03/14", "open": 77.14, "high": 77.48, "low": 75.6, "close": 75.83, "volume": 32389102 }, { "date": "09/04/14", "open": 75.89, "high": 76.93, "low": 75.53, "close": 75.95, "volume": 26676444 }, { "date": "09/05/14", "open": 76.1, "high": 77.38, "low": 75.6, "close": 77.26, "volume": 29475854 }, { "date": "09/08/14", "open": 77.26, "high": 78.17, "low": 77.01, "close": 77.89, "volume": 28183156 }, { "date": "09/09/14", "open": 77.59, "high": 78.17, "low": 76.2, "close": 76.67, "volume": 28881803 }, { "date": "09/10/14", "open": 76.52, "high": 77.95, "low": 76.51, "close": 77.43, "volume": 29908606 }, { "date": "09/11/14", "open": 77.13, "high": 78.36, "low": 77.05, "close": 77.92, "volume": 32247724 }, { "date": "09/12/14", "open": 78.02, "high": 78.3, "low": 77.1, "close": 77.48, "volume": 26744356 }, { "date": "09/15/14", "open": 77.15, "high": 77.25, "low": 73.43, "close": 74.58, "volume": 49679130 }, { "date": "09/16/14", "open": 73.52, "high": 76.23, "low": 73.07, "close": 76.08, "volume": 37742482 }, { "date": "09/17/14", "open": 75.96, "high": 77.25, "low": 75.57, "close": 76.43, "volume": 28693348 }, { "date": "09/18/14", "open": 76.77, "high": 77.33, "low": 76.52, "close": 77, "volume": 23030936 }, { "date": "09/19/14", "open": 77.4, "high": 78.3, "low": 76.44, "close": 77.91, "volume": 76671330 }, { "date": "09/22/14", "open": 77, "high": 77.53, "low": 75.95, "close": 76.8, "volume": 31961015 }, { "date": "09/23/14", "open": 76.33, "high": 78.63, "low": 76.04, "close": 78.29, "volume": 36814111 }, { "date": "09/24/14", "open": 78.1, "high": 78.62, "low": 77.51, "close": 78.54, "volume": 30679642 }, { "date": "09/25/14", "open": 78.6, "high": 78.94, "low": 77.13, "close": 77.22, "volume": 37532580 }, { "date": "09/26/14", "open": 77.59, "high": 78.84, "low": 77.33, "close": 78.79, "volume": 28872012 }, { "date": "09/29/14", "open": 78.12, "high": 79.2, "low": 77.91, "close": 79, "volume": 34030635 }, { "date": "09/30/14", "open": 79.35, "high": 79.71, "low": 78.6, "close": 79.04, "volume": 35899444 }, { "date": "10/01/14", "open": 78.78, "high": 78.82, "low": 75.9, "close": 76.55, "volume": 55090157 }, { "date": "10/02/14", "open": 76.57, "high": 77.48, "low": 75.64, "close": 77.08, "volume": 36487612 }, { "date": "10/03/14", "open": 77.76, "high": 78.06, "low": 77.26, "close": 77.44, "volume": 23340173 }, { "date": "10/06/14", "open": 77.19, "high": 77.89, "low": 76.85, "close": 77.56, "volume": 25729191 }, { "date": "10/07/14", "open": 77.05, "high": 77.95, "low": 76.24, "close": 76.29, "volume": 25317488 }, { "date": "10/08/14", "open": 76.18, "high": 77.71, "low": 75.1, "close": 77.52, "volume": 32975514 }, { "date": "10/09/14", "open": 77.28, "high": 77.76, "low": 75.85, "close": 75.91, "volume": 32487174 }, { "date": "10/10/14", "open": 75.59, "high": 76.5, "low": 72.76, "close": 72.91, "volume": 52146162 }, { "date": "10/13/14", "open": 73.23, "high": 74.78, "low": 72.52, "close": 72.99, "volume": 43937638 }, { "date": "10/14/14", "open": 74, "high": 74.18, "low": 72.05, "close": 73.59, "volume": 50299288 }, { "date": "10/15/14", "open": 71.69, "high": 73.8, "low": 70.32, "close": 73.21, "volume": 61528317 }, { "date": "10/16/14", "open": 70.79, "high": 73.35, "low": 70.58, "close": 72.63, "volume": 53529459 }, { "date": "10/17/14", "open": 74.23, "high": 76, "low": 73.75, "close": 75.95, "volume": 76341638 }, { "date": "10/20/14", "open": 75.6, "high": 77.09, "low": 75.38, "close": 76.95, "volume": 34701260 }, { "date": "10/21/14", "open": 77.56, "high": 78.74, "low": 77.15, "close": 78.69, "volume": 32252403 }, { "date": "10/22/14", "open": 78.82, "high": 79.85, "low": 78.01, "close": 78.37, "volume": 41862393 }, { "date": "10/23/14", "open": 79.38, "high": 80.63, "low": 79.01, "close": 80.04, "volume": 35055800 }, { "date": "10/24/14", "open": 80.2, "high": 80.82, "low": 79.32, "close": 80.67, "volume": 32247520 }, { "date": "10/27/14", "open": 80.74, "high": 80.8, "low": 79.76, "close": 80.28, "volume": 30168921 }, { "date": "10/28/14", "open": 80.18, "high": 81.16, "low": 79.57, "close": 80.77, "volume": 74211768 }, { "date": "10/29/14", "open": 75.45, "high": 76.88, "low": 74.78, "close": 75.86, "volume": 106119520 }, { "date": "10/30/14", "open": 75.05, "high": 75.35, "low": 72.9, "close": 74.11, "volume": 83269554 }, { "date": "10/31/14", "open": 74.93, "high": 75.7, "low": 74.45, "close": 74.99, "volume": 44544325 }, { "date": "11/03/14", "open": 75.47, "high": 75.52, "low": 73.7, "close": 73.88, "volume": 40727330 }, { "date": "11/04/14", "open": 74.23, "high": 75.77, "low": 73.65, "close": 75.76, "volume": 39326471 }, { "date": "11/05/14", "open": 76.51, "high": 76.8, "low": 74.42, "close": 74.83, "volume": 35912588 }, { "date": "11/06/14", "open": 74.89, "high": 75.6, "low": 74.31, "close": 75.26, "volume": 21383194 }, { "date": "11/07/14", "open": 75.39, "high": 75.86, "low": 75.02, "close": 75.6, "volume": 20774381 }, { "date": "11/10/14", "open": 75.36, "high": 75.48, "low": 74.61, "close": 75, "volume": 21575126 }, { "date": "11/11/14", "open": 74.95, "high": 74.98, "low": 74.03, "close": 74.61, "volume": 18735123 }, { "date": "11/12/14", "open": 74.28, "high": 75.14, "low": 73.54, "close": 74.72, "volume": 26536609 }, { "date": "11/13/14", "open": 74.74, "high": 75.24, "low": 73.64, "close": 74.25, "volume": 26448451 }, { "date": "11/14/14", "open": 74.27, "high": 74.93, "low": 74.04, "close": 74.88, "volume": 19476878 }, { "date": "11/17/14", "open": 74.88, "high": 75.66, "low": 73.88, "close": 74.24, "volume": 28701191 }, { "date": "11/18/14", "open": 74.45, "high": 74.8, "low": 73.9, "close": 74.34, "volume": 20696643 }, { "date": "11/19/14", "open": 74.01, "high": 74.54, "low": 73.11, "close": 73.33, "volume": 25441163 }, { "date": "11/20/14", "open": 72.8, "high": 73.99, "low": 72.51, "close": 73.6, "volume": 19154862 }, { "date": "11/21/14", "open": 74.5, "high": 74.5, "low": 73.5, "close": 73.75, "volume": 23060382 }, { "date": "11/24/14", "open": 73.54, "high": 74.35, "low": 73.35, "close": 74.01, "volume": 22103831 }, { "date": "11/25/14", "open": 74.21, "high": 75.74, "low": 74.13, "close": 75.63, "volume": 32250205 }, { "date": "11/26/14", "open": 75.53, "high": 77.78, "low": 75.51, "close": 77.62, "volume": 32721585 }, { "date": "11/28/14", "open": 77.67, "high": 78.27, "low": 77.23, "close": 77.7, "volume": 15992035 }, { "date": "12/01/14", "open": 77.26, "high": 77.31, "low": 74.8, "close": 75.1, "volume": 31789866 }, { "date": "12/02/14", "open": 75.33, "high": 75.91, "low": 75.04, "close": 75.46, "volume": 16773884 }, { "date": "12/03/14", "open": 75.38, "high": 75.73, "low": 74.4, "close": 74.88, "volume": 16689857 }, { "date": "12/04/14", "open": 74.83, "high": 75.55, "low": 74.66, "close": 75.24, "volume": 14390520 }, { "date": "12/05/14", "open": 75.8, "high": 76.76, "low": 75.36, "close": 76.36, "volume": 24306446 }, { "date": "12/08/14", "open": 76.18, "high": 77.25, "low": 75.4, "close": 76.52, "volume": 25733853 }, { "date": "12/09/14", "open": 75.2, "high": 76.93, "low": 74.78, "close": 76.84, "volume": 25358584 }, { "date": "12/10/14", "open": 76.65, "high": 77.55, "low": 76.07, "close": 76.18, "volume": 32210532 }, { "date": "12/11/14", "open": 76.52, "high": 78.52, "low": 76.48, "close": 77.73, "volume": 33492661 }, { "date": "12/12/14", "open": 77.16, "high": 78.88, "low": 77.02, "close": 77.83, "volume": 28091617 }, { "date": "12/15/14", "open": 78.46, "high": 78.58, "low": 76.56, "close": 76.99, "volume": 29396532 }, { "date": "12/16/14", "open": 76.19, "high": 77.39, "low": 74.59, "close": 74.69, "volume": 31554593 }, { "date": "12/17/14", "open": 75.01, "high": 76.41, "low": 74.9, "close": 76.11, "volume": 29203904 }, { "date": "12/18/14", "open": 76.89, "high": 78.4, "low": 76.51, "close": 78.4, "volume": 34222081 }, { "date": "12/19/14", "open": 78.75, "high": 80, "low": 78.33, "close": 79.88, "volume": 43334992 }, { "date": "12/22/14", "open": 80.08, "high": 81.89, "low": 80, "close": 81.45, "volume": 31395770 }, { "date": "12/23/14", "open": 82.02, "high": 82.17, "low": 80.4, "close": 80.61, "volume": 19865820 }, { "date": "12/24/14", "open": 81.03, "high": 81.43, "low": 80.75, "close": 80.77, "volume": 7685481 }, { "date": "12/26/14", "open": 81.02, "high": 81.28, "low": 80.51, "close": 80.78, "volume": 10647388 }, { "date": "12/29/14", "open": 80.49, "high": 80.96, "low": 79.71, "close": 80.02, "volume": 14134666 }, { "date": "12/30/14", "open": 79.85, "high": 80.59, "low": 79.1, "close": 79.22, "volume": 14370763 }, { "date": "12/31/14", "open": 79.54, "high": 79.8, "low": 77.86, "close": 78.02, "volume": 20040439 }, { "date": "01/02/15", "open": 78.58, "high": 78.93, "low": 77.7, "close": 78.45, "volume": 18177475 }, { "date": "01/05/15", "open": 77.98, "high": 79.25, "low": 76.86, "close": 77.19, "volume": 26452191 }, { "date": "01/06/15", "open": 77.23, "high": 77.59, "low": 75.36, "close": 76.15, "volume": 27399288 }, { "date": "01/07/15", "open": 76.76, "high": 77.36, "low": 75.82, "close": 76.15, "volume": 22045333 }, { "date": "01/08/15", "open": 76.74, "high": 78.23, "low": 76.08, "close": 78.18, "volume": 23960953 }, { "date": "01/09/15", "open": 78.2, "high": 78.62, "low": 77.2, "close": 77.74, "volume": 21157007 }, { "date": "01/12/15", "open": 77.84, "high": 78, "low": 76.21, "close": 76.72, "volume": 19190194 }, { "date": "01/13/15", "open": 77.23, "high": 78.08, "low": 75.85, "close": 76.45, "volume": 25179561 }, { "date": "01/14/15", "open": 76.42, "high": 77.2, "low": 76.03, "close": 76.28, "volume": 25918564 }, { "date": "01/15/15", "open": 76.4, "high": 76.57, "low": 73.54, "close": 74.05, "volume": 34133974 }, { "date": "01/16/15", "open": 74.04, "high": 75.32, "low": 73.84, "close": 75.18, "volume": 21791529 }, { "date": "01/20/15", "open": 75.72, "high": 76.31, "low": 74.82, "close": 76.24, "volume": 22821614 }, { "date": "01/21/15", "open": 76.16, "high": 77.3, "low": 75.85, "close": 76.74, "volume": 25096737 }, { "date": "01/22/15", "open": 77.17, "high": 77.75, "low": 76.68, "close": 77.65, "volume": 19519458 }, { "date": "01/23/15", "open": 77.65, "high": 78.19, "low": 77.04, "close": 77.83, "volume": 16746503 }, { "date": "01/26/15", "open": 77.98, "high": 78.47, "low": 77.29, "close": 77.5, "volume": 19260820 }, { "date": "01/27/15", "open": 76.71, "high": 76.88, "low": 75.63, "close": 75.78, "volume": 20109977 }, { "date": "01/28/15", "open": 76.9, "high": 77.64, "low": 76, "close": 76.24, "volume": 53306422 }, { "date": "01/29/15", "open": 76.85, "high": 78.02, "low": 74.21, "close": 78, "volume": 61293468 }, { "date": "01/30/15", "open": 78, "high": 78.16, "low": 75.75, "close": 75.91, "volume": 42649491 }, { "date": "02/02/15", "open": 76.11, "high": 76.14, "low": 73.75, "close": 74.99, "volume": 41955258 }, { "date": "02/03/15", "open": 75.19, "high": 75.58, "low": 73.86, "close": 75.4, "volume": 26957714 }, { "date": "02/04/15", "open": 75.09, "high": 76.35, "low": 75.01, "close": 75.63, "volume": 20277368 }, { "date": "02/05/15", "open": 75.71, "high": 75.98, "low": 75.21, "close": 75.62, "volume": 15062573 }, { "date": "02/06/15", "open": 75.68, "high": 75.7, "low": 74.25, "close": 74.47, "volume": 21210994 }, { "date": "02/09/15", "open": 74.05, "high": 74.83, "low": 73.45, "close": 74.44, "volume": 16194322 }, { "date": "02/10/15", "open": 74.85, "high": 75.34, "low": 74.5, "close": 75.19, "volume": 15811344 }, { "date": "02/11/15", "open": 75.09, "high": 76.75, "low": 75.03, "close": 76.51, "volume": 20877427 }, { "date": "02/12/15", "open": 76.86, "high": 76.87, "low": 75.89, "close": 76.23, "volume": 17234976 }, { "date": "02/13/15", "open": 76.46, "high": 76.48, "low": 75.5, "close": 75.74, "volume": 18621860 }, { "date": "02/17/15", "open": 75.3, "high": 76.91, "low": 75.08, "close": 75.6, "volume": 25254400 }, { "date": "02/18/15", "open": 75.94, "high": 76.9, "low": 75.45, "close": 76.71, "volume": 22426421 }, { "date": "02/19/15", "open": 76.99, "high": 79.84, "low": 76.95, "close": 79.42, "volume": 45851177 }, { "date": "02/20/15", "open": 79.55, "high": 80.34, "low": 79.2, "close": 79.9, "volume": 36931698 }, { "date": "02/23/15", "open": 79.96, "high": 80.19, "low": 78.38, "close": 78.84, "volume": 24139056 }, { "date": "02/24/15", "open": 78.5, "high": 79.48, "low": 78.1, "close": 78.45, "volume": 18897133 }, { "date": "02/25/15", "open": 78.5, "high": 80.2, "low": 78.5, "close": 79.56, "volume": 25593800 }, { "date": "02/26/15", "open": 79.88, "high": 81.37, "low": 79.72, "close": 80.41, "volume": 31111891 }, { "date": "02/27/15", "open": 80.68, "high": 81.23, "low": 78.62, "close": 78.97, "volume": 30739197 }, { "date": "03/02/15", "open": 79, "high": 79.86, "low": 78.52, "close": 79.75, "volume": 21662537 }, { "date": "03/03/15", "open": 79.61, "high": 79.7, "low": 78.52, "close": 79.6, "volume": 18634973 }, { "date": "03/04/15", "open": 79.3, "high": 81.15, "low": 78.85, "close": 80.9, "volume": 28126686 }, { "date": "03/05/15", "open": 81.23, "high": 81.99, "low": 81.05, "close": 81.21, "volume": 27825733 }, { "date": "03/06/15", "open": 80.9, "high": 81.33, "low": 79.83, "close": 80, "volume": 24488581 }, { "date": "03/09/15", "open": 79.68, "high": 79.91, "low": 78.63, "close": 79.44, "volume": 18925097 }, { "date": "03/10/15", "open": 78.5, "high": 79.26, "low": 77.55, "close": 77.55, "volume": 23067057 }, { "date": "03/11/15", "open": 77.8, "high": 78.43, "low": 77.26, "close": 77.57, "volume": 20215704 }, { "date": "03/12/15", "open": 78.1, "high": 79.05, "low": 77.91, "close": 78.93, "volume": 16093319 }, { "date": "03/13/15", "open": 78.6, "high": 79.38, "low": 77.68, "close": 78.05, "volume": 18557296 }, { "date": "03/16/15", "open": 77.96, "high": 78.12, "low": 77.36, "close": 78.07, "volume": 19305406 }, { "date": "03/17/15", "open": 78.36, "high": 79.78, "low": 78.34, "close": 79.36, "volume": 22169969 }, { "date": "03/18/15", "open": 79.25, "high": 81.24, "low": 79.17, "close": 80.91, "volume": 36912446 }, { "date": "03/19/15", "open": 81.12, "high": 83, "low": 81, "close": 82.75, "volume": 42099523 }, { "date": "03/20/15", "open": 83.39, "high": 84.6, "low": 83.07, "close": 83.8, "volume": 44466323 }, { "date": "03/23/15", "open": 83.92, "high": 84.96, "low": 83.3, "close": 84.43, "volume": 27357333 }, { "date": "03/24/15", "open": 84.71, "high": 86.07, "low": 84.52, "close": 85.31, "volume": 32576522 }, { "date": "03/25/15", "open": 85.5, "high": 85.52, "low": 82.92, "close": 82.92, "volume": 37436147 }, { "date": "03/26/15", "open": 82.72, "high": 83.77, "low": 82.14, "close": 83.01, "volume": 32794800 }, { "date": "03/27/15", "open": 83.38, "high": 83.95, "low": 82.88, "close": 83.3, "volume": 18372582 }, { "date": "03/30/15", "open": 83.81, "high": 84.34, "low": 82.41, "close": 83.2, "volume": 24527686 }, { "date": "03/31/15", "open": 82.9, "high": 83.5, "low": 82.21, "close": 82.22, "volume": 19734277 }, { "date": "04/01/15", "open": 82.5, "high": 82.72, "low": 80.87, "close": 81.66, "volume": 22058167 }, { "date": "04/02/15", "open": 82.25, "high": 82.56, "low": 81.44, "close": 81.56, "volume": 19664053 }, { "date": "04/06/15", "open": 80.8, "high": 82.81, "low": 80.8, "close": 82.44, "volume": 19062934 }, { "date": "04/07/15", "open": 82.65, "high": 83.42, "low": 82.22, "close": 82.32, "volume": 17467042 }, { "date": "04/08/15", "open": 82.63, "high": 83.1, "low": 81.84, "close": 82.28, "volume": 18966732 }, { "date": "04/09/15", "open": 82.5, "high": 82.8, "low": 81.71, "close": 82.17, "volume": 15927281 }, { "date": "04/10/15", "open": 82.21, "high": 82.61, "low": 81.91, "close": 82.04, "volume": 12529738 } ]; for (var i = 0; i < data.length; i++) { data[i].date = core.Globalize.parseDate(data[i].date, 'MM/dd/yy'); } return data; } .wj-flexchart { height: 300px; } body { margin-bottom: 24pt; } #rsChart { height: 100px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, Inject, enableProdMode, NgModule, ViewChild, AfterViewInit } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { WjChartInteractionModule } from '@grapecity/wijmo.angular2.chart.interaction'; import { WjChartFinanceModule } from '@grapecity/wijmo.angular2.chart.finance'; import { DataService } from './app.data'; import * as wjCore from '@grapecity/wijmo'; import * as wjChart from '@grapecity/wijmo.chart'; import * as wjAnnotation from '@grapecity/wijmo.chart.annotation'; import * as wjChartInteraction from '@grapecity/wijmo.chart.interaction'; import * as wjFinance from '@grapecity/wijmo.chart.finance'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent implements AfterViewInit { data: any[]; tooltip: string; volYAxis: wjChart.Axis; @ViewChild('theChart') theChart: wjFinance.FinancialChart; @ViewChild('rsChart') rsChart: wjFinance.FinancialChart; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); this.tooltip = '<b>{date:MMM dd}</b><br/>' + '<table>' + '<tr><td>high</td><td>{high:c}</td><tr/>' + '<tr><td>low</td><td>{low:c}</td><tr/>' + '<tr><td>open</td><td>{open:c}</td><tr/>' + '<tr><td>close</td><td>{close:c}</td><tr/>' + '<tr><td>volume</td><td>{volume:c}</td><tr/>' + '</table>'; } // ngAfterViewInit() { let al = new wjAnnotation.AnnotationLayer(this.theChart, this.dataService.getAnnotations()); } // render() { let volYAxis = this.volYAxis; if (!volYAxis) { var volSeries = this.theChart.series[1]; volYAxis = new wjChart.Axis(0); volSeries.axisY = volYAxis; if (volSeries.getValues(0)) { volYAxis.max = Math.max.apply(null, volSeries.getValues(0)) * 8; } } } // reRender(rs: wjChartInteraction.RangeSelector, chart: wjFinance.FinancialChart) { // set range if (rs) { var range = this.findRange(chart.axisX.actualMin, chart.axisX.actualMax); rs.min = range.min; rs.max = range.max; } } // rangeChanged (rs: wjChartInteraction.RangeSelector, chart: wjFinance.FinancialChart) { // update main chart's x & y range chart.axisX.min = rs.min; chart.axisX.max = rs.max; let yRange = this.findYRange(this.data, rs.min, rs.max); chart.axisY.min = yRange.min; chart.axisY.max = yRange.max; chart.invalidate(); } // helper method to calculate (upper) percentage of total range // the default will show the top 20% of the available range findRange(min: number, max: number, percent?: number) { var pctToShow = wjCore.isNumber(percent) && 0 < percent && percent < 1 ? percent : 0.2, range = { min: NaN, max: NaN }; if (wjCore.isDate(min) && wjCore.isDate(max)) { range.max = max.valueOf(); range.min = (max.valueOf() - min.valueOf()) * (1 - pctToShow) + min.valueOf(); } else if (wjCore.isNumber(min) && wjCore.isNumber(max)) { range.max = max; range.min = (max - min) * (1 - pctToShow) + min; } return range; } // // assumes High, Low, Open, Close, and Volume data // also assumes category axis findYRange(data: any[], xmin: number, xmax: number) { var item, i, ymin = null, ymax = null; for (i = 0; i < data.length; i++) { item = data[i]; let v = item.date.valueOf(); if (xmin > v || v > xmax) { continue; } if (ymax === null || item.close > ymax) { ymax = item.close; } if (ymin === null || item.close < ymin) { ymin = item.close; } } return { min: ymin, max: ymax }; } } // @NgModule({ imports: [WjChartModule, WjChartInteractionModule, WjChartFinanceModule, 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 Event Annotations</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"> <div class="form-group"> <wj-financial-chart #theChart [itemsSource]="data" bindingX="date" chartType="Candlestick" [tooltipContent]="tooltip" (rendered)="render()"> <wj-financial-chart-series binding="high,low,open,close" name="HLOC"></wj-financial-chart-series> <wj-financial-chart-series binding="volume" name="Volume" chartType="Column"></wj-financial-chart-series> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-axis wjProperty="axisX" [axisLine]="false" format="MM/dd/yy"></wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisY" position="Right"></wj-flex-chart-axis> </wj-financial-chart> <wj-financial-chart id="rsChart" #rsChart tooltipContent="" [itemsSource]="data" bindingX="date" chartType="Area" (rendered)="reRender(selector, rsChart)"> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-axis wjProperty="axisX" [labels]="false"></wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisY" [labels]="false" [majorGrid]="false"></wj-flex-chart-axis> <wj-financial-chart-series binding="close" name="Box Inc"></wj-financial-chart-series> <wj-flex-chart-range-selector #selector [seamless]="true" (rangeChanged)="rangeChanged(selector, theChart)"> </wj-flex-chart-range-selector> </wj-financial-chart> </div> </div> import { Injectable } from '@angular/core'; import * as core from '@grapecity/wijmo'; // @Injectable() export class DataService { getData() { let data = [ { "date": "04/10/14", "open": 63.08, "high": 63.18, "low": 58.68, "close": 59.16, "volume": 114987616 }, { "date": "04/11/14", "open": 57.6, "high": 60.31, "low": 57.31, "close": 58.53, "volume": 91451960 }, { "date": "04/14/14", "open": 60.09, "high": 60.45, "low": 57.78, "close": 58.89, "volume": 72324603 }, { "date": "04/15/14", "open": 59.29, "high": 59.68, "low": 55.88, "close": 59.09, "volume": 108622706 }, { "date": "04/16/14", "open": 59.79, "high": 60.19, "low": 57.74, "close": 59.72, "volume": 78773521 }, { "date": "04/17/14", "open": 59.3, "high": 60.58, "low": 58.72, "close": 58.94, "volume": 88040346 }, { "date": "04/21/14", "open": 59.46, "high": 61.24, "low": 59.15, "close": 61.24, "volume": 60363619 }, { "date": "04/22/14", "open": 62.65, "high": 63.44, "low": 62.22, "close": 63.03, "volume": 60631312 }, { "date": "04/23/14", "open": 63.45, "high": 63.48, "low": 61.26, "close": 61.36, "volume": 96564750 }, { "date": "04/24/14", "open": 63.6, "high": 63.65, "low": 59.77, "close": 60.87, "volume": 138769345 }, { "date": "04/25/14", "open": 59.97, "high": 60.01, "low": 57.57, "close": 57.71, "volume": 92501529 }, { "date": "04/28/14", "open": 58.05, "high": 58.31, "low": 54.66, "close": 56.14, "volume": 107757756 }, { "date": "04/29/14", "open": 56.09, "high": 58.28, "low": 55.84, "close": 58.15, "volume": 75557202 }, { "date": "04/30/14", "open": 57.58, "high": 59.85, "low": 57.16, "close": 59.78, "volume": 76093004 }, { "date": "05/01/14", "open": 60.43, "high": 62.28, "low": 60.21, "close": 61.15, "volume": 82428606 }, { "date": "05/02/14", "open": 61.3, "high": 61.89, "low": 60.18, "close": 60.46, "volume": 54189197 }, { "date": "05/05/14", "open": 59.67, "high": 61.35, "low": 59.18, "close": 61.22, "volume": 46057411 }, { "date": "05/06/14", "open": 60.98, "high": 61.15, "low": 58.49, "close": 58.53, "volume": 55900809 }, { "date": "05/07/14", "open": 58.77, "high": 59.3, "low": 56.26, "close": 57.39, "volume": 78587247 }, { "date": "05/08/14", "open": 57.23, "high": 58.82, "low": 56.5, "close": 56.76, "volume": 61251053 }, { "date": "05/09/14", "open": 56.85, "high": 57.65, "low": 56.38, "close": 57.24, "volume": 52583858 }, { "date": "05/12/14", "open": 57.98, "high": 59.9, "low": 57.98, "close": 59.83, "volume": 48575487 }, { "date": "05/13/14", "open": 59.66, "high": 60.89, "low": 59.51, "close": 59.83, "volume": 48525476 }, { "date": "05/14/14", "open": 59.53, "high": 60.45, "low": 58.95, "close": 59.23, "volume": 47428583 }, { "date": "05/15/14", "open": 59.26, "high": 59.38, "low": 57.52, "close": 57.92, "volume": 56813940 }, { "date": "05/16/14", "open": 58.31, "high": 58.45, "low": 57.31, "close": 58.02, "volume": 47933075 }, { "date": "05/19/14", "open": 57.89, "high": 59.56, "low": 57.57, "close": 59.21, "volume": 43033925 }, { "date": "05/20/14", "open": 59.5, "high": 60.19, "low": 58.18, "close": 58.56, "volume": 53931469 }, { "date": "05/21/14", "open": 58.56, "high": 60.5, "low": 58.25, "close": 60.49, "volume": 58991505 }, { "date": "05/22/14", "open": 60.94, "high": 61.48, "low": 60.4, "close": 60.52, "volume": 54200116 }, { "date": "05/23/14", "open": 60.41, "high": 61.45, "low": 60.15, "close": 61.35, "volume": 38293993 }, { "date": "05/27/14", "open": 61.62, "high": 63.51, "low": 61.57, "close": 63.48, "volume": 55681663 }, { "date": "05/28/14", "open": 63.39, "high": 64.14, "low": 62.62, "close": 63.51, "volume": 47795088 }, { "date": "05/29/14", "open": 63.84, "high": 64.3, "low": 63.51, "close": 63.83, "volume": 42699670 }, { "date": "05/30/14", "open": 63.95, "high": 64.17, "low": 62.56, "close": 63.3, "volume": 45283577 }, { "date": "06/02/14", "open": 63.23, "high": 63.59, "low": 62.05, "close": 63.08, "volume": 35995537 }, { "date": "06/03/14", "open": 62.62, "high": 63.42, "low": 62.32, "close": 62.87, "volume": 32216707 }, { "date": "06/04/14", "open": 62.45, "high": 63.59, "low": 62.07, "close": 63.34, "volume": 36513991 }, { "date": "06/05/14", "open": 63.66, "high": 64.36, "low": 62.82, "close": 63.19, "volume": 47352368 }, { "date": "06/06/14", "open": 63.37, "high": 63.48, "low": 62.15, "close": 62.5, "volume": 42442096 }, { "date": "06/09/14", "open": 62.4, "high": 63.34, "low": 61.79, "close": 62.88, "volume": 37617413 }, { "date": "06/10/14", "open": 63.53, "high": 65.82, "low": 63.5, "close": 65.77, "volume": 69338140 }, { "date": "06/11/14", "open": 65.32, "high": 65.8, "low": 64.9, "close": 65.78, "volume": 44241926 }, { "date": "06/12/14", "open": 65.85, "high": 66.47, "low": 64.06, "close": 64.29, "volume": 55729828 }, { "date": "06/13/14", "open": 64.7, "high": 64.97, "low": 63.83, "close": 64.5, "volume": 29418910 }, { "date": "06/16/14", "open": 64.16, "high": 64.88, "low": 63.75, "close": 64.19, "volume": 31045811 }, { "date": "06/17/14", "open": 64.1, "high": 64.88, "low": 63.93, "close": 64.4, "volume": 27714816 }, { "date": "06/18/14", "open": 64.49, "high": 65.75, "low": 64.05, "close": 65.6, "volume": 35570154 }, { "date": "06/19/14", "open": 65.46, "high": 65.58, "low": 64.21, "close": 64.34, "volume": 34245182 }, { "date": "06/20/14", "open": 64.46, "high": 64.81, "low": 63.35, "close": 64.5, "volume": 46466073 }, { "date": "06/23/14", "open": 64.32, "high": 65.66, "low": 64.22, "close": 65.37, "volume": 34560121 }, { "date": "06/24/14", "open": 65.36, "high": 67.17, "low": 65.27, "close": 65.72, "volume": 57334867 }, { "date": "06/25/14", "open": 65.58, "high": 67.48, "low": 65.57, "close": 67.44, "volume": 44308249 }, { "date": "06/26/14", "open": 68, "high": 68, "low": 66.9, "close": 67.13, "volume": 47713944 }, { "date": "06/27/14", "open": 67.31, "high": 67.7, "low": 66.84, "close": 67.6, "volume": 46460627 }, { "date": "06/30/14", "open": 67.46, "high": 67.92, "low": 67.13, "close": 67.29, "volume": 27201749 }, { "date": "07/01/14", "open": 67.58, "high": 68.44, "low": 67.39, "close": 68.06, "volume": 33243166 }, { "date": "07/02/14", "open": 68.04, "high": 68.3, "low": 65.79, "close": 66.45, "volume": 41895220 }, { "date": "07/03/14", "open": 66.86, "high": 67, "low": 65.76, "close": 66.29, "volume": 25203215 }, { "date": "07/07/14", "open": 66.3, "high": 66.57, "low": 65.12, "close": 65.29, "volume": 28745099 }, { "date": "07/08/14", "open": 65.06, "high": 65.56, "low": 62.21, "close": 62.76, "volume": 68926036 }, { "date": "07/09/14", "open": 63.41, "high": 65.12, "low": 63.15, "close": 64.97, "volume": 51431582 }, { "date": "07/10/14", "open": 63.31, "high": 65.34, "low": 63.05, "close": 64.87, "volume": 44421915 }, { "date": "07/11/14", "open": 65.28, "high": 66.59, "low": 64.79, "close": 66.34, "volume": 39212022 }, { "date": "07/14/14", "open": 67.13, "high": 68.17, "low": 66.9, "close": 67.9, "volume": 38536924 }, { "date": "07/15/14", "open": 67.96, "high": 68.09, "low": 66.26, "close": 67.16, "volume": 44292944 }, { "date": "07/16/14", "open": 67.54, "high": 67.94, "low": 67.07, "close": 67.66, "volume": 29593589 }, { "date": "07/17/14", "open": 67.03, "high": 67.85, "low": 66.04, "close": 66.41, "volume": 38188432 }, { "date": "07/18/14", "open": 66.8, "high": 68.46, "low": 66.16, "close": 68.42, "volume": 42455649 }, { "date": "07/21/14", "open": 68.81, "high": 69.96, "low": 68.5, "close": 69.4, "volume": 49539121 }, { "date": "07/22/14", "open": 69.76, "high": 69.77, "low": 68.61, "close": 69.27, "volume": 40397693 }, { "date": "07/23/14", "open": 69.74, "high": 71.33, "low": 69.61, "close": 71.29, "volume": 78434716 }, { "date": "07/24/14", "open": 75.96, "high": 76.74, "low": 74.51, "close": 74.98, "volume": 124167936 }, { "date": "07/25/14", "open": 74.99, "high": 75.67, "low": 74.66, "close": 75.19, "volume": 45917435 }, { "date": "07/28/14", "open": 75.17, "high": 75.5, "low": 73.85, "close": 74.92, "volume": 41725249 }, { "date": "07/29/14", "open": 74.72, "high": 74.92, "low": 73.42, "close": 73.71, "volume": 41324470 }, { "date": "07/30/14", "open": 74.21, "high": 75.19, "low": 74.13, "close": 74.68, "volume": 36853018 }, { "date": "07/31/14", "open": 74, "high": 74.16, "low": 72.44, "close": 72.65, "volume": 43991772 }, { "date": "08/01/14", "open": 72.22, "high": 73.22, "low": 71.55, "close": 72.36, "volume": 43535314 }, { "date": "08/04/14", "open": 72.36, "high": 73.88, "low": 72.36, "close": 73.51, "volume": 30776819 }, { "date": "08/05/14", "open": 73.51, "high": 73.59, "low": 72.18, "close": 72.69, "volume": 34986147 }, { "date": "08/06/14", "open": 72.02, "high": 73.72, "low": 71.79, "close": 72.47, "volume": 30985533 }, { "date": "08/07/14", "open": 73, "high": 74, "low": 72.7, "close": 73.17, "volume": 38140550 }, { "date": "08/08/14", "open": 73.4, "high": 73.43, "low": 72.56, "close": 73.06, "volume": 27202325 }, { "date": "08/11/14", "open": 73.46, "high": 73.91, "low": 73.06, "close": 73.44, "volume": 24591177 }, { "date": "08/12/14", "open": 73.09, "high": 73.33, "low": 72.22, "close": 72.83, "volume": 27418983 }, { "date": "08/13/14", "open": 73.12, "high": 74.25, "low": 73.05, "close": 73.77, "volume": 29265662 }, { "date": "08/14/14", "open": 73.97, "high": 74.38, "low": 73.69, "close": 74.3, "volume": 22207019 }, { "date": "08/15/14", "open": 74.32, "high": 74.65, "low": 73, "close": 73.63, "volume": 38909161 }, { "date": "08/18/14", "open": 74, "high": 74.72, "low": 73.96, "close": 74.59, "volume": 23973658 }, { "date": "08/19/14", "open": 74.81, "high": 75.58, "low": 74.77, "close": 75.29, "volume": 26678640 }, { "date": "08/20/14", "open": 74.97, "high": 75.18, "low": 74.62, "close": 74.81, "volume": 22916678 }, { "date": "08/21/14", "open": 74.92, "high": 75.19, "low": 74.41, "close": 74.57, "volume": 20101979 }, { "date": "08/22/14", "open": 74.34, "high": 74.73, "low": 73.57, "close": 74.57, "volume": 20897393 }, { "date": "08/25/14", "open": 74.94, "high": 75.28, "low": 74.79, "close": 75.02, "volume": 19734103 }, { "date": "08/26/14", "open": 75, "high": 75.99, "low": 74.73, "close": 75.96, "volume": 23992668 }, { "date": "08/27/14", "open": 75.27, "high": 75.49, "low": 74.46, "close": 74.63, "volume": 36323060 }, { "date": "08/28/14", "open": 74, "high": 74.43, "low": 73.73, "close": 73.86, "volume": 21946738 }, { "date": "08/29/14", "open": 74.3, "high": 74.82, "low": 74.01, "close": 74.82, "volume": 26241162 }, { "date": "09/02/14", "open": 75.01, "high": 76.7, "low": 74.82, "close": 76.68, "volume": 34979438 }, { "date": "09/03/14", "open": 77.14, "high": 77.48, "low": 75.6, "close": 75.83, "volume": 32389102 }, { "date": "09/04/14", "open": 75.89, "high": 76.93, "low": 75.53, "close": 75.95, "volume": 26676444 }, { "date": "09/05/14", "open": 76.1, "high": 77.38, "low": 75.6, "close": 77.26, "volume": 29475854 }, { "date": "09/08/14", "open": 77.26, "high": 78.17, "low": 77.01, "close": 77.89, "volume": 28183156 }, { "date": "09/09/14", "open": 77.59, "high": 78.17, "low": 76.2, "close": 76.67, "volume": 28881803 }, { "date": "09/10/14", "open": 76.52, "high": 77.95, "low": 76.51, "close": 77.43, "volume": 29908606 }, { "date": "09/11/14", "open": 77.13, "high": 78.36, "low": 77.05, "close": 77.92, "volume": 32247724 }, { "date": "09/12/14", "open": 78.02, "high": 78.3, "low": 77.1, "close": 77.48, "volume": 26744356 }, { "date": "09/15/14", "open": 77.15, "high": 77.25, "low": 73.43, "close": 74.58, "volume": 49679130 }, { "date": "09/16/14", "open": 73.52, "high": 76.23, "low": 73.07, "close": 76.08, "volume": 37742482 }, { "date": "09/17/14", "open": 75.96, "high": 77.25, "low": 75.57, "close": 76.43, "volume": 28693348 }, { "date": "09/18/14", "open": 76.77, "high": 77.33, "low": 76.52, "close": 77, "volume": 23030936 }, { "date": "09/19/14", "open": 77.4, "high": 78.3, "low": 76.44, "close": 77.91, "volume": 76671330 }, { "date": "09/22/14", "open": 77, "high": 77.53, "low": 75.95, "close": 76.8, "volume": 31961015 }, { "date": "09/23/14", "open": 76.33, "high": 78.63, "low": 76.04, "close": 78.29, "volume": 36814111 }, { "date": "09/24/14", "open": 78.1, "high": 78.62, "low": 77.51, "close": 78.54, "volume": 30679642 }, { "date": "09/25/14", "open": 78.6, "high": 78.94, "low": 77.13, "close": 77.22, "volume": 37532580 }, { "date": "09/26/14", "open": 77.59, "high": 78.84, "low": 77.33, "close": 78.79, "volume": 28872012 }, { "date": "09/29/14", "open": 78.12, "high": 79.2, "low": 77.91, "close": 79, "volume": 34030635 }, { "date": "09/30/14", "open": 79.35, "high": 79.71, "low": 78.6, "close": 79.04, "volume": 35899444 }, { "date": "10/01/14", "open": 78.78, "high": 78.82, "low": 75.9, "close": 76.55, "volume": 55090157 }, { "date": "10/02/14", "open": 76.57, "high": 77.48, "low": 75.64, "close": 77.08, "volume": 36487612 }, { "date": "10/03/14", "open": 77.76, "high": 78.06, "low": 77.26, "close": 77.44, "volume": 23340173 }, { "date": "10/06/14", "open": 77.19, "high": 77.89, "low": 76.85, "close": 77.56, "volume": 25729191 }, { "date": "10/07/14", "open": 77.05, "high": 77.95, "low": 76.24, "close": 76.29, "volume": 25317488 }, { "date": "10/08/14", "open": 76.18, "high": 77.71, "low": 75.1, "close": 77.52, "volume": 32975514 }, { "date": "10/09/14", "open": 77.28, "high": 77.76, "low": 75.85, "close": 75.91, "volume": 32487174 }, { "date": "10/10/14", "open": 75.59, "high": 76.5, "low": 72.76, "close": 72.91, "volume": 52146162 }, { "date": "10/13/14", "open": 73.23, "high": 74.78, "low": 72.52, "close": 72.99, "volume": 43937638 }, { "date": "10/14/14", "open": 74, "high": 74.18, "low": 72.05, "close": 73.59, "volume": 50299288 }, { "date": "10/15/14", "open": 71.69, "high": 73.8, "low": 70.32, "close": 73.21, "volume": 61528317 }, { "date": "10/16/14", "open": 70.79, "high": 73.35, "low": 70.58, "close": 72.63, "volume": 53529459 }, { "date": "10/17/14", "open": 74.23, "high": 76, "low": 73.75, "close": 75.95, "volume": 76341638 }, { "date": "10/20/14", "open": 75.6, "high": 77.09, "low": 75.38, "close": 76.95, "volume": 34701260 }, { "date": "10/21/14", "open": 77.56, "high": 78.74, "low": 77.15, "close": 78.69, "volume": 32252403 }, { "date": "10/22/14", "open": 78.82, "high": 79.85, "low": 78.01, "close": 78.37, "volume": 41862393 }, { "date": "10/23/14", "open": 79.38, "high": 80.63, "low": 79.01, "close": 80.04, "volume": 35055800 }, { "date": "10/24/14", "open": 80.2, "high": 80.82, "low": 79.32, "close": 80.67, "volume": 32247520 }, { "date": "10/27/14", "open": 80.74, "high": 80.8, "low": 79.76, "close": 80.28, "volume": 30168921 }, { "date": "10/28/14", "open": 80.18, "high": 81.16, "low": 79.57, "close": 80.77, "volume": 74211768 }, { "date": "10/29/14", "open": 75.45, "high": 76.88, "low": 74.78, "close": 75.86, "volume": 106119520 }, { "date": "10/30/14", "open": 75.05, "high": 75.35, "low": 72.9, "close": 74.11, "volume": 83269554 }, { "date": "10/31/14", "open": 74.93, "high": 75.7, "low": 74.45, "close": 74.99, "volume": 44544325 }, { "date": "11/03/14", "open": 75.47, "high": 75.52, "low": 73.7, "close": 73.88, "volume": 40727330 }, { "date": "11/04/14", "open": 74.23, "high": 75.77, "low": 73.65, "close": 75.76, "volume": 39326471 }, { "date": "11/05/14", "open": 76.51, "high": 76.8, "low": 74.42, "close": 74.83, "volume": 35912588 }, { "date": "11/06/14", "open": 74.89, "high": 75.6, "low": 74.31, "close": 75.26, "volume": 21383194 }, { "date": "11/07/14", "open": 75.39, "high": 75.86, "low": 75.02, "close": 75.6, "volume": 20774381 }, { "date": "11/10/14", "open": 75.36, "high": 75.48, "low": 74.61, "close": 75, "volume": 21575126 }, { "date": "11/11/14", "open": 74.95, "high": 74.98, "low": 74.03, "close": 74.61, "volume": 18735123 }, { "date": "11/12/14", "open": 74.28, "high": 75.14, "low": 73.54, "close": 74.72, "volume": 26536609 }, { "date": "11/13/14", "open": 74.74, "high": 75.24, "low": 73.64, "close": 74.25, "volume": 26448451 }, { "date": "11/14/14", "open": 74.27, "high": 74.93, "low": 74.04, "close": 74.88, "volume": 19476878 }, { "date": "11/17/14", "open": 74.88, "high": 75.66, "low": 73.88, "close": 74.24, "volume": 28701191 }, { "date": "11/18/14", "open": 74.45, "high": 74.8, "low": 73.9, "close": 74.34, "volume": 20696643 }, { "date": "11/19/14", "open": 74.01, "high": 74.54, "low": 73.11, "close": 73.33, "volume": 25441163 }, { "date": "11/20/14", "open": 72.8, "high": 73.99, "low": 72.51, "close": 73.6, "volume": 19154862 }, { "date": "11/21/14", "open": 74.5, "high": 74.5, "low": 73.5, "close": 73.75, "volume": 23060382 }, { "date": "11/24/14", "open": 73.54, "high": 74.35, "low": 73.35, "close": 74.01, "volume": 22103831 }, { "date": "11/25/14", "open": 74.21, "high": 75.74, "low": 74.13, "close": 75.63, "volume": 32250205 }, { "date": "11/26/14", "open": 75.53, "high": 77.78, "low": 75.51, "close": 77.62, "volume": 32721585 }, { "date": "11/28/14", "open": 77.67, "high": 78.27, "low": 77.23, "close": 77.7, "volume": 15992035 }, { "date": "12/01/14", "open": 77.26, "high": 77.31, "low": 74.8, "close": 75.1, "volume": 31789866 }, { "date": "12/02/14", "open": 75.33, "high": 75.91, "low": 75.04, "close": 75.46, "volume": 16773884 }, { "date": "12/03/14", "open": 75.38, "high": 75.73, "low": 74.4, "close": 74.88, "volume": 16689857 }, { "date": "12/04/14", "open": 74.83, "high": 75.55, "low": 74.66, "close": 75.24, "volume": 14390520 }, { "date": "12/05/14", "open": 75.8, "high": 76.76, "low": 75.36, "close": 76.36, "volume": 24306446 }, { "date": "12/08/14", "open": 76.18, "high": 77.25, "low": 75.4, "close": 76.52, "volume": 25733853 }, { "date": "12/09/14", "open": 75.2, "high": 76.93, "low": 74.78, "close": 76.84, "volume": 25358584 }, { "date": "12/10/14", "open": 76.65, "high": 77.55, "low": 76.07, "close": 76.18, "volume": 32210532 }, { "date": "12/11/14", "open": 76.52, "high": 78.52, "low": 76.48, "close": 77.73, "volume": 33492661 }, { "date": "12/12/14", "open": 77.16, "high": 78.88, "low": 77.02, "close": 77.83, "volume": 28091617 }, { "date": "12/15/14", "open": 78.46, "high": 78.58, "low": 76.56, "close": 76.99, "volume": 29396532 }, { "date": "12/16/14", "open": 76.19, "high": 77.39, "low": 74.59, "close": 74.69, "volume": 31554593 }, { "date": "12/17/14", "open": 75.01, "high": 76.41, "low": 74.9, "close": 76.11, "volume": 29203904 }, { "date": "12/18/14", "open": 76.89, "high": 78.4, "low": 76.51, "close": 78.4, "volume": 34222081 }, { "date": "12/19/14", "open": 78.75, "high": 80, "low": 78.33, "close": 79.88, "volume": 43334992 }, { "date": "12/22/14", "open": 80.08, "high": 81.89, "low": 80, "close": 81.45, "volume": 31395770 }, { "date": "12/23/14", "open": 82.02, "high": 82.17, "low": 80.4, "close": 80.61, "volume": 19865820 }, { "date": "12/24/14", "open": 81.03, "high": 81.43, "low": 80.75, "close": 80.77, "volume": 7685481 }, { "date": "12/26/14", "open": 81.02, "high": 81.28, "low": 80.51, "close": 80.78, "volume": 10647388 }, { "date": "12/29/14", "open": 80.49, "high": 80.96, "low": 79.71, "close": 80.02, "volume": 14134666 }, { "date": "12/30/14", "open": 79.85, "high": 80.59, "low": 79.1, "close": 79.22, "volume": 14370763 }, { "date": "12/31/14", "open": 79.54, "high": 79.8, "low": 77.86, "close": 78.02, "volume": 20040439 }, { "date": "01/02/15", "open": 78.58, "high": 78.93, "low": 77.7, "close": 78.45, "volume": 18177475 }, { "date": "01/05/15", "open": 77.98, "high": 79.25, "low": 76.86, "close": 77.19, "volume": 26452191 }, { "date": "01/06/15", "open": 77.23, "high": 77.59, "low": 75.36, "close": 76.15, "volume": 27399288 }, { "date": "01/07/15", "open": 76.76, "high": 77.36, "low": 75.82, "close": 76.15, "volume": 22045333 }, { "date": "01/08/15", "open": 76.74, "high": 78.23, "low": 76.08, "close": 78.18, "volume": 23960953 }, { "date": "01/09/15", "open": 78.2, "high": 78.62, "low": 77.2, "close": 77.74, "volume": 21157007 }, { "date": "01/12/15", "open": 77.84, "high": 78, "low": 76.21, "close": 76.72, "volume": 19190194 }, { "date": "01/13/15", "open": 77.23, "high": 78.08, "low": 75.85, "close": 76.45, "volume": 25179561 }, { "date": "01/14/15", "open": 76.42, "high": 77.2, "low": 76.03, "close": 76.28, "volume": 25918564 }, { "date": "01/15/15", "open": 76.4, "high": 76.57, "low": 73.54, "close": 74.05, "volume": 34133974 }, { "date": "01/16/15", "open": 74.04, "high": 75.32, "low": 73.84, "close": 75.18, "volume": 21791529 }, { "date": "01/20/15", "open": 75.72, "high": 76.31, "low": 74.82, "close": 76.24, "volume": 22821614 }, { "date": "01/21/15", "open": 76.16, "high": 77.3, "low": 75.85, "close": 76.74, "volume": 25096737 }, { "date": "01/22/15", "open": 77.17, "high": 77.75, "low": 76.68, "close": 77.65, "volume": 19519458 }, { "date": "01/23/15", "open": 77.65, "high": 78.19, "low": 77.04, "close": 77.83, "volume": 16746503 }, { "date": "01/26/15", "open": 77.98, "high": 78.47, "low": 77.29, "close": 77.5, "volume": 19260820 }, { "date": "01/27/15", "open": 76.71, "high": 76.88, "low": 75.63, "close": 75.78, "volume": 20109977 }, { "date": "01/28/15", "open": 76.9, "high": 77.64, "low": 76, "close": 76.24, "volume": 53306422 }, { "date": "01/29/15", "open": 76.85, "high": 78.02, "low": 74.21, "close": 78, "volume": 61293468 }, { "date": "01/30/15", "open": 78, "high": 78.16, "low": 75.75, "close": 75.91, "volume": 42649491 }, { "date": "02/02/15", "open": 76.11, "high": 76.14, "low": 73.75, "close": 74.99, "volume": 41955258 }, { "date": "02/03/15", "open": 75.19, "high": 75.58, "low": 73.86, "close": 75.4, "volume": 26957714 }, { "date": "02/04/15", "open": 75.09, "high": 76.35, "low": 75.01, "close": 75.63, "volume": 20277368 }, { "date": "02/05/15", "open": 75.71, "high": 75.98, "low": 75.21, "close": 75.62, "volume": 15062573 }, { "date": "02/06/15", "open": 75.68, "high": 75.7, "low": 74.25, "close": 74.47, "volume": 21210994 }, { "date": "02/09/15", "open": 74.05, "high": 74.83, "low": 73.45, "close": 74.44, "volume": 16194322 }, { "date": "02/10/15", "open": 74.85, "high": 75.34, "low": 74.5, "close": 75.19, "volume": 15811344 }, { "date": "02/11/15", "open": 75.09, "high": 76.75, "low": 75.03, "close": 76.51, "volume": 20877427 }, { "date": "02/12/15", "open": 76.86, "high": 76.87, "low": 75.89, "close": 76.23, "volume": 17234976 }, { "date": "02/13/15", "open": 76.46, "high": 76.48, "low": 75.5, "close": 75.74, "volume": 18621860 }, { "date": "02/17/15", "open": 75.3, "high": 76.91, "low": 75.08, "close": 75.6, "volume": 25254400 }, { "date": "02/18/15", "open": 75.94, "high": 76.9, "low": 75.45, "close": 76.71, "volume": 22426421 }, { "date": "02/19/15", "open": 76.99, "high": 79.84, "low": 76.95, "close": 79.42, "volume": 45851177 }, { "date": "02/20/15", "open": 79.55, "high": 80.34, "low": 79.2, "close": 79.9, "volume": 36931698 }, { "date": "02/23/15", "open": 79.96, "high": 80.19, "low": 78.38, "close": 78.84, "volume": 24139056 }, { "date": "02/24/15", "open": 78.5, "high": 79.48, "low": 78.1, "close": 78.45, "volume": 18897133 }, { "date": "02/25/15", "open": 78.5, "high": 80.2, "low": 78.5, "close": 79.56, "volume": 25593800 }, { "date": "02/26/15", "open": 79.88, "high": 81.37, "low": 79.72, "close": 80.41, "volume": 31111891 }, { "date": "02/27/15", "open": 80.68, "high": 81.23, "low": 78.62, "close": 78.97, "volume": 30739197 }, { "date": "03/02/15", "open": 79, "high": 79.86, "low": 78.52, "close": 79.75, "volume": 21662537 }, { "date": "03/03/15", "open": 79.61, "high": 79.7, "low": 78.52, "close": 79.6, "volume": 18634973 }, { "date": "03/04/15", "open": 79.3, "high": 81.15, "low": 78.85, "close": 80.9, "volume": 28126686 }, { "date": "03/05/15", "open": 81.23, "high": 81.99, "low": 81.05, "close": 81.21, "volume": 27825733 }, { "date": "03/06/15", "open": 80.9, "high": 81.33, "low": 79.83, "close": 80, "volume": 24488581 }, { "date": "03/09/15", "open": 79.68, "high": 79.91, "low": 78.63, "close": 79.44, "volume": 18925097 }, { "date": "03/10/15", "open": 78.5, "high": 79.26, "low": 77.55, "close": 77.55, "volume": 23067057 }, { "date": "03/11/15", "open": 77.8, "high": 78.43, "low": 77.26, "close": 77.57, "volume": 20215704 }, { "date": "03/12/15", "open": 78.1, "high": 79.05, "low": 77.91, "close": 78.93, "volume": 16093319 }, { "date": "03/13/15", "open": 78.6, "high": 79.38, "low": 77.68, "close": 78.05, "volume": 18557296 }, { "date": "03/16/15", "open": 77.96, "high": 78.12, "low": 77.36, "close": 78.07, "volume": 19305406 }, { "date": "03/17/15", "open": 78.36, "high": 79.78, "low": 78.34, "close": 79.36, "volume": 22169969 }, { "date": "03/18/15", "open": 79.25, "high": 81.24, "low": 79.17, "close": 80.91, "volume": 36912446 }, { "date": "03/19/15", "open": 81.12, "high": 83, "low": 81, "close": 82.75, "volume": 42099523 }, { "date": "03/20/15", "open": 83.39, "high": 84.6, "low": 83.07, "close": 83.8, "volume": 44466323 }, { "date": "03/23/15", "open": 83.92, "high": 84.96, "low": 83.3, "close": 84.43, "volume": 27357333 }, { "date": "03/24/15", "open": 84.71, "high": 86.07, "low": 84.52, "close": 85.31, "volume": 32576522 }, { "date": "03/25/15", "open": 85.5, "high": 85.52, "low": 82.92, "close": 82.92, "volume": 37436147 }, { "date": "03/26/15", "open": 82.72, "high": 83.77, "low": 82.14, "close": 83.01, "volume": 32794800 }, { "date": "03/27/15", "open": 83.38, "high": 83.95, "low": 82.88, "close": 83.3, "volume": 18372582 }, { "date": "03/30/15", "open": 83.81, "high": 84.34, "low": 82.41, "close": 83.2, "volume": 24527686 }, { "date": "03/31/15", "open": 82.9, "high": 83.5, "low": 82.21, "close": 82.22, "volume": 19734277 }, { "date": "04/01/15", "open": 82.5, "high": 82.72, "low": 80.87, "close": 81.66, "volume": 22058167 }, { "date": "04/02/15", "open": 82.25, "high": 82.56, "low": 81.44, "close": 81.56, "volume": 19664053 }, { "date": "04/06/15", "open": 80.8, "high": 82.81, "low": 80.8, "close": 82.44, "volume": 19062934 }, { "date": "04/07/15", "open": 82.65, "high": 83.42, "low": 82.22, "close": 82.32, "volume": 17467042 }, { "date": "04/08/15", "open": 82.63, "high": 83.1, "low": 81.84, "close": 82.28, "volume": 18966732 }, { "date": "04/09/15", "open": 82.5, "high": 82.8, "low": 81.71, "close": 82.17, "volume": 15927281 }, { "date": "04/10/15", "open": 82.21, "high": 82.61, "low": 81.91, "close": 82.04, "volume": 12529738 } ]; for (var i = 0; i < data.length; i++) { data[i].date = <any>core.Globalize.parseDate(data[i].date, 'MM/dd/yy'); } return data; } // getAnnotations() { let data = [ { "name": "tradeRange", "type": "Rectangle", "position": 0, "offset": { "x": 0, "y": -80 }, "width": 465, "height": 430, "attachment": 1, "point": { "x": "2014-11-26", "y": 70 }, "style": { "fill": "#669999", "stroke": "#B40431", "fill-opacity": 0.2, "stroke-width": 0.5, "stroke-opacity": 0.2 } }, { "name": "waterMarker", "type": "Text", "attachment": 2, "point": { "x": 0.5, "y": 0.5 }, "text": "wijmo.com", "style": { "fill": "#B45F04", "fill-opacity": 0.1, "stroke": "rgba(124,240,10,0.2)", "font-size": "100px" } }, { "name": "trendLine1", "type": "Line", "attachment": 1, "position": 0, "start": { "x": "2014-05-08", "y": 64 }, "end": { "x": "2014-09-08", "y": 84 }, "style": { "fill": "#FF0040", "stroke": "#3ADF00", "fill-opacity": 2, "stroke-width": 1, "stroke-opacity": 0.5 } }, { "name": "trendLine2", "type": "Line", "attachment": 1, "position": 0, "start": { "x": "2014-05-08", "y": 56 }, "end": { "x": "2014-09-08", "y": 76 }, "style": { "fill": "#FF0040", "stroke": "#3ADF00", "fill-opacity": 2, "stroke-width": 1, "stroke-opacity": 0.5 } }, { "name": "eventa", "type": "Rectangle", "offset": { "x": 0, "y": -10 }, "attachment": 0, "content": "E", "tooltip": "Results of Operations and Financial Condition.", "width": 20, "height": 20, "pointIndex": 73, "style": { "fill": "#01DFD7", "stroke": "#000000", "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1 } }, { "name": "eventb", "type": "Rectangle", "offset": { "x": 0, "y": 10 }, "attachment": 0, "content": "E", "tooltip": "Completion of Acquisition or Disposition of Assets, Change in Directors or Principal.", "width": 20, "height": 20, "pointIndex": 124, "style": { "fill": "#01DFD7", "stroke": "#000000", "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1 } }, { "name": "eventc", "type": "Rectangle", "offset": { "x": 0, "y": -10 }, "attachment": 0, "content": "E", "tooltip": "Facebook Inc Earnings Call scheduled for 5:00 pm ET today.", "width": 20, "height": 20, "pointIndex": 202, "style": { "fill": "#01DFD7", "stroke": "#000000", "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1 } }, { "name": "eventd", "type": "Rectangle", "offset": { "x": 0, "y": -20 }, "attachment": 0, "content": "E", "tooltip": "Coverage initiated on Facebook by Brean Capital.", "width": 20, "height": 20, "pointIndex": 235, "style": { "fill": "#01DFD7", "stroke": "#000000", "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1 } }, { "name": "detailContainer", "type": "Square", "length": 110, "isVisible": false, "point": { "x": 55, "y": 55 }, "style": { "fill": "#CCCC00", "stroke": "#0B2F3A", "stroke-width": 1, "stroke-opacity": 0.4 } }, { "name": "detailLow", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 3, "text": "", "point": { "x": 52, "y": 20 }, "style": { "fill": "#6E6E6E", "font-size": "12px" } }, { "name": "detailHigh", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 3, "text": "", "point": { "x": 52, "y": 40 }, "style": { "fill": "#6E6E6E", "font-size": "12px" } }, { "name": "detailOpen", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 3, "text": "", "point": { "x": 52, "y": 60 }, "style": { "fill": "#6E6E6E", "font-size": "12px" } }, { "name": "detailClose", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 3, "text": "", "point": { "x": 52, "y": 80 }, "style": { "fill": "#6E6E6E", "font-size": "12px" } }, { "name": "detailVolume", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 3, "text": "", "point": { "x": 52, "y": 100 }, "style": { "fill": "#6E6E6E", "font-size": "12px" } }, { "name": "startLine", "type": "Line", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 1, "tooltip": "Previous close", "start": { "x": "2014-4-10", "y": 59.16 }, "end": { "x": "2016-4-10", "y": 59.16 }, "style": { "fill": "#000000", "stroke": "#000000", "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1 } }, { "name": "dividea", "type": "Image", "position": 0, "offset": { "x": 0, "y": -20 }, "width":20, "height":20, "seriesIndex":1, "href": "resources/divide.png", "tooltip": "Dividend", "attachment": 0, "pointIndex": 42 }, { "name": "divideb", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "width":20, "height":20, "seriesIndex":1, "href": "resources/divide.png", "tooltip": "Dividend", "attachment": 0, "pointIndex": 73 }, { "name": "dividec", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "width":20, "height":20, "seriesIndex":1, "href": "resources/divide.png", "tooltip": "Dividend", "attachment": 0, "pointIndex": 92 }, { "name": "divided", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "width":20, "height":20, "seriesIndex":1, "href": "resources/divide.png", "tooltip": "Dividend", "attachment": 0, "pointIndex": 142 }, { "name": "dividee", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "width":20, "height":20, "seriesIndex":1, "href": "resources/divide.png", "tooltip": "Dividend", "attachment": 0, "pointIndex": 202 }, { "name": "newsa", "type": "Text", "position": 0, "offset": { "x": 0, "y": 25 }, "text": "Alibaba Group Holding Ltd (BABA) and ... ", "attachment": 1, "point": { "x": "2015-3-2", "y": 80 } }, { "name": "newsaMarker", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "href": "resources/flag.png", "tooltip": "2015/3/2, Both JPMorgan Chase and Morgan Stanley offered up favorable comments on the social media giant, with JPMorgan citing that Facebook\"s core services accounted for 24% of all smartphone activity in the U.S. The figure was up 2% from reported usage in ...", "width":14, "heigh":24, "attachment": 1, "point": { "x": "2015-3-2", "y": 80 } }, { "name": "newsb", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "text": "Facebook Inc to acquire LiveRail.", "attachment": 1, "point": { "x": "2014-7-8", "y": 62 } }, { "name": "newsbMarker", "type": "Image", "position": 0, "offset": { "x": 7, "y": -20 }, "href": "resources/flag.png", "width":14, "heigh":24, "attachment": 1, "point": { "x": "2014-7-8", "y": 62 } }, { "name": "trendDesc", "type": "Text", "position": 0, "offset": { "x": 0, "y": -30 }, "text": "Rising wedge", "attachment": 1, "point": { "x": "2014-5-8", "y": 64 }, "style": { "font-size": "20px"} }, { "name": "buyAnno", "type": "Image", "position": 0, "offset": { "x": 0, "y": 15 }, "height": 24, "width": 24, "tooltip": "Bid: $73.59", "attachment": 1, "point": { "x": "2014-10-14", "y": 73 }, "href": "resources/up.png" }, { "name": "sellAnno", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "height": 24, "width": 24, "tooltip": "Offer: $77.74", "attachment": 1, "point": { "x": "2015-1-8", "y": 78 }, "href": "resources/down.png" } ]; for (var i = 0; i < data.length; i++) { if (data[i].start && data[i].start.x) { data[i].start.x = <any>core.Globalize.parseDate(data[i].start.x, 'yyyy-MM-dd'); } if (data[i].end && data[i].end.x) { data[i].end.x = <any>core.Globalize.parseDate(data[i].end.x, 'yyyy-MM-dd'); } if (data[i].attachment === 1 && data[i].point && data[i].point.x) { data[i].point.x = <any>core.Globalize.parseDate(<any>data[i].point.x, 'yyyy-MM-dd'); } } return data; } } .wj-flexchart { height: 300px; } body { margin-bottom: 24pt; } #rsChart { height: 100px; } <template> <div class="container-fluid"> <div class="form-group"> <wj-financial-chart :itemsSource="data" bindingX="date" chartType="Candlestick" :tooltipContent="tooltip" :rendered="render" :initialized="initializeChart"> <wj-financial-chart-series binding="high,low,open,close" name="HLOC"></wj-financial-chart-series> <wj-financial-chart-series binding="volume" name="Volume" chartType="Column"></wj-financial-chart-series> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-axis wjProperty="axisX" :axisLine="false" format="MM/dd/yy"></wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisY" position="Right"></wj-flex-chart-axis> </wj-financial-chart> <wj-financial-chart id="rsChart" tooltipContent="" :itemsSource="data" bindingX="date" chartType="Area" :rendered="rsRender" :initialized="initializeRSChart"> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-axis wjProperty="axisX" :labels="false"></wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisY" :labels="false" :majorGrid="false"></wj-flex-chart-axis> <wj-financial-chart-series binding="close" name="Box Inc"></wj-financial-chart-series> <wj-flex-chart-range-selector :seamless="true" :rangeChanged="rangeChanged"> </wj-flex-chart-range-selector> </wj-financial-chart> </div> </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 '@grapecity/wijmo.vue2.chart.interaction'; import { getData, getAnnotations } from './data'; import * as wjCore from '@grapecity/wijmo'; import * as wjChart from '@grapecity/wijmo.chart'; import * as wjAnnotation from '@grapecity/wijmo.chart.annotation'; let App = Vue.extend({ name: 'app', data: function () { return { data: getData(), tooltip: '<b>{date:MMM dd}</b><br/>' + '<table>' + '<tr><td>high</td><td>{high:c}</td><tr/>' + '<tr><td>low</td><td>{low:c}</td><tr/>' + '<tr><td>open</td><td>{open:c}</td><tr/>' + '<tr><td>close</td><td>{close:c}</td><tr/>' + '<tr><td>volume</td><td>{volume:c}</td><tr/>' + '</table>' } }, methods: { initializeChart: function(flex) { this.theChart = flex; this.al = new wjAnnotation.AnnotationLayer(flex, getAnnotations()); }, initializeRSChart: function(flex) { this.rsChart = flex; }, render: function() { let volYAxis = this.volYAxis; if (!volYAxis) { var volSeries = this.theChart.series[1]; volYAxis = new wjChart.Axis(0); volSeries.axisY = volYAxis; if (volSeries.getValues(0)) { volYAxis.max = Math.max.apply(null, volSeries.getValues(0)) * 8; } } }, rsRender: function() { let chart = this.rsChart; let rs = this.selector; // set range if (rs) { var range = this.findRange(chart.axisX.actualMin, chart.axisX.actualMax); rs.min = range.min; rs.max = range.max; } }, rangeChanged: function(rs) { if(!this.selector) { this.selector = rs; } let chart = this.theChart; // update main chart's x & y range chart.axisX.min = rs.min; chart.axisX.max = rs.max; let yRange = this.findYRange(this.data, rs.min, rs.max); chart.axisY.min = yRange.min; chart.axisY.max = yRange.max; chart.invalidate(); }, // helper method to calculate (upper) percentage of total range // the default will show the top 20% of the available range findRange: function(min, max, percent) { var pctToShow = wjCore.isNumber(percent) && 0 < percent && percent < 1 ? percent : 0.2, range = { min: NaN, max: NaN }; if (wjCore.isDate(min) && wjCore.isDate(max)) { range.max = max.valueOf(); range.min = (max.valueOf() - min.valueOf()) * (1 - pctToShow) + min.valueOf(); } else if (wjCore.isNumber(min) && wjCore.isNumber(max)) { range.max = max; range.min = (max - min) * (1 - pctToShow) + min; } return range; }, // assumes High, Low, Open, Close, and Volume data // also assumes category axis findYRange: function(data, xmin, xmax) { var item, i, ymin = null, ymax = null; for (i = 0; i < data.length; i++) { item = data[i]; let v = item.date.valueOf(); if (xmin > v || v > xmax) { continue; } if (ymax === null || item.close > ymax) { ymax = item.close; } if (ymin === null || item.close < ymin) { ymin = item.close; } } return { min: ymin, max: ymax }; } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } label { margin-right: 3px; } #rsChart { height: 100px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Event Annotations</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> import * as core from '@grapecity/wijmo'; export function getData() { let data = [ { "date": "04/10/14", "open": 63.08, "high": 63.18, "low": 58.68, "close": 59.16, "volume": 114987616 }, { "date": "04/11/14", "open": 57.6, "high": 60.31, "low": 57.31, "close": 58.53, "volume": 91451960 }, { "date": "04/14/14", "open": 60.09, "high": 60.45, "low": 57.78, "close": 58.89, "volume": 72324603 }, { "date": "04/15/14", "open": 59.29, "high": 59.68, "low": 55.88, "close": 59.09, "volume": 108622706 }, { "date": "04/16/14", "open": 59.79, "high": 60.19, "low": 57.74, "close": 59.72, "volume": 78773521 }, { "date": "04/17/14", "open": 59.3, "high": 60.58, "low": 58.72, "close": 58.94, "volume": 88040346 }, { "date": "04/21/14", "open": 59.46, "high": 61.24, "low": 59.15, "close": 61.24, "volume": 60363619 }, { "date": "04/22/14", "open": 62.65, "high": 63.44, "low": 62.22, "close": 63.03, "volume": 60631312 }, { "date": "04/23/14", "open": 63.45, "high": 63.48, "low": 61.26, "close": 61.36, "volume": 96564750 }, { "date": "04/24/14", "open": 63.6, "high": 63.65, "low": 59.77, "close": 60.87, "volume": 138769345 }, { "date": "04/25/14", "open": 59.97, "high": 60.01, "low": 57.57, "close": 57.71, "volume": 92501529 }, { "date": "04/28/14", "open": 58.05, "high": 58.31, "low": 54.66, "close": 56.14, "volume": 107757756 }, { "date": "04/29/14", "open": 56.09, "high": 58.28, "low": 55.84, "close": 58.15, "volume": 75557202 }, { "date": "04/30/14", "open": 57.58, "high": 59.85, "low": 57.16, "close": 59.78, "volume": 76093004 }, { "date": "05/01/14", "open": 60.43, "high": 62.28, "low": 60.21, "close": 61.15, "volume": 82428606 }, { "date": "05/02/14", "open": 61.3, "high": 61.89, "low": 60.18, "close": 60.46, "volume": 54189197 }, { "date": "05/05/14", "open": 59.67, "high": 61.35, "low": 59.18, "close": 61.22, "volume": 46057411 }, { "date": "05/06/14", "open": 60.98, "high": 61.15, "low": 58.49, "close": 58.53, "volume": 55900809 }, { "date": "05/07/14", "open": 58.77, "high": 59.3, "low": 56.26, "close": 57.39, "volume": 78587247 }, { "date": "05/08/14", "open": 57.23, "high": 58.82, "low": 56.5, "close": 56.76, "volume": 61251053 }, { "date": "05/09/14", "open": 56.85, "high": 57.65, "low": 56.38, "close": 57.24, "volume": 52583858 }, { "date": "05/12/14", "open": 57.98, "high": 59.9, "low": 57.98, "close": 59.83, "volume": 48575487 }, { "date": "05/13/14", "open": 59.66, "high": 60.89, "low": 59.51, "close": 59.83, "volume": 48525476 }, { "date": "05/14/14", "open": 59.53, "high": 60.45, "low": 58.95, "close": 59.23, "volume": 47428583 }, { "date": "05/15/14", "open": 59.26, "high": 59.38, "low": 57.52, "close": 57.92, "volume": 56813940 }, { "date": "05/16/14", "open": 58.31, "high": 58.45, "low": 57.31, "close": 58.02, "volume": 47933075 }, { "date": "05/19/14", "open": 57.89, "high": 59.56, "low": 57.57, "close": 59.21, "volume": 43033925 }, { "date": "05/20/14", "open": 59.5, "high": 60.19, "low": 58.18, "close": 58.56, "volume": 53931469 }, { "date": "05/21/14", "open": 58.56, "high": 60.5, "low": 58.25, "close": 60.49, "volume": 58991505 }, { "date": "05/22/14", "open": 60.94, "high": 61.48, "low": 60.4, "close": 60.52, "volume": 54200116 }, { "date": "05/23/14", "open": 60.41, "high": 61.45, "low": 60.15, "close": 61.35, "volume": 38293993 }, { "date": "05/27/14", "open": 61.62, "high": 63.51, "low": 61.57, "close": 63.48, "volume": 55681663 }, { "date": "05/28/14", "open": 63.39, "high": 64.14, "low": 62.62, "close": 63.51, "volume": 47795088 }, { "date": "05/29/14", "open": 63.84, "high": 64.3, "low": 63.51, "close": 63.83, "volume": 42699670 }, { "date": "05/30/14", "open": 63.95, "high": 64.17, "low": 62.56, "close": 63.3, "volume": 45283577 }, { "date": "06/02/14", "open": 63.23, "high": 63.59, "low": 62.05, "close": 63.08, "volume": 35995537 }, { "date": "06/03/14", "open": 62.62, "high": 63.42, "low": 62.32, "close": 62.87, "volume": 32216707 }, { "date": "06/04/14", "open": 62.45, "high": 63.59, "low": 62.07, "close": 63.34, "volume": 36513991 }, { "date": "06/05/14", "open": 63.66, "high": 64.36, "low": 62.82, "close": 63.19, "volume": 47352368 }, { "date": "06/06/14", "open": 63.37, "high": 63.48, "low": 62.15, "close": 62.5, "volume": 42442096 }, { "date": "06/09/14", "open": 62.4, "high": 63.34, "low": 61.79, "close": 62.88, "volume": 37617413 }, { "date": "06/10/14", "open": 63.53, "high": 65.82, "low": 63.5, "close": 65.77, "volume": 69338140 }, { "date": "06/11/14", "open": 65.32, "high": 65.8, "low": 64.9, "close": 65.78, "volume": 44241926 }, { "date": "06/12/14", "open": 65.85, "high": 66.47, "low": 64.06, "close": 64.29, "volume": 55729828 }, { "date": "06/13/14", "open": 64.7, "high": 64.97, "low": 63.83, "close": 64.5, "volume": 29418910 }, { "date": "06/16/14", "open": 64.16, "high": 64.88, "low": 63.75, "close": 64.19, "volume": 31045811 }, { "date": "06/17/14", "open": 64.1, "high": 64.88, "low": 63.93, "close": 64.4, "volume": 27714816 }, { "date": "06/18/14", "open": 64.49, "high": 65.75, "low": 64.05, "close": 65.6, "volume": 35570154 }, { "date": "06/19/14", "open": 65.46, "high": 65.58, "low": 64.21, "close": 64.34, "volume": 34245182 }, { "date": "06/20/14", "open": 64.46, "high": 64.81, "low": 63.35, "close": 64.5, "volume": 46466073 }, { "date": "06/23/14", "open": 64.32, "high": 65.66, "low": 64.22, "close": 65.37, "volume": 34560121 }, { "date": "06/24/14", "open": 65.36, "high": 67.17, "low": 65.27, "close": 65.72, "volume": 57334867 }, { "date": "06/25/14", "open": 65.58, "high": 67.48, "low": 65.57, "close": 67.44, "volume": 44308249 }, { "date": "06/26/14", "open": 68, "high": 68, "low": 66.9, "close": 67.13, "volume": 47713944 }, { "date": "06/27/14", "open": 67.31, "high": 67.7, "low": 66.84, "close": 67.6, "volume": 46460627 }, { "date": "06/30/14", "open": 67.46, "high": 67.92, "low": 67.13, "close": 67.29, "volume": 27201749 }, { "date": "07/01/14", "open": 67.58, "high": 68.44, "low": 67.39, "close": 68.06, "volume": 33243166 }, { "date": "07/02/14", "open": 68.04, "high": 68.3, "low": 65.79, "close": 66.45, "volume": 41895220 }, { "date": "07/03/14", "open": 66.86, "high": 67, "low": 65.76, "close": 66.29, "volume": 25203215 }, { "date": "07/07/14", "open": 66.3, "high": 66.57, "low": 65.12, "close": 65.29, "volume": 28745099 }, { "date": "07/08/14", "open": 65.06, "high": 65.56, "low": 62.21, "close": 62.76, "volume": 68926036 }, { "date": "07/09/14", "open": 63.41, "high": 65.12, "low": 63.15, "close": 64.97, "volume": 51431582 }, { "date": "07/10/14", "open": 63.31, "high": 65.34, "low": 63.05, "close": 64.87, "volume": 44421915 }, { "date": "07/11/14", "open": 65.28, "high": 66.59, "low": 64.79, "close": 66.34, "volume": 39212022 }, { "date": "07/14/14", "open": 67.13, "high": 68.17, "low": 66.9, "close": 67.9, "volume": 38536924 }, { "date": "07/15/14", "open": 67.96, "high": 68.09, "low": 66.26, "close": 67.16, "volume": 44292944 }, { "date": "07/16/14", "open": 67.54, "high": 67.94, "low": 67.07, "close": 67.66, "volume": 29593589 }, { "date": "07/17/14", "open": 67.03, "high": 67.85, "low": 66.04, "close": 66.41, "volume": 38188432 }, { "date": "07/18/14", "open": 66.8, "high": 68.46, "low": 66.16, "close": 68.42, "volume": 42455649 }, { "date": "07/21/14", "open": 68.81, "high": 69.96, "low": 68.5, "close": 69.4, "volume": 49539121 }, { "date": "07/22/14", "open": 69.76, "high": 69.77, "low": 68.61, "close": 69.27, "volume": 40397693 }, { "date": "07/23/14", "open": 69.74, "high": 71.33, "low": 69.61, "close": 71.29, "volume": 78434716 }, { "date": "07/24/14", "open": 75.96, "high": 76.74, "low": 74.51, "close": 74.98, "volume": 124167936 }, { "date": "07/25/14", "open": 74.99, "high": 75.67, "low": 74.66, "close": 75.19, "volume": 45917435 }, { "date": "07/28/14", "open": 75.17, "high": 75.5, "low": 73.85, "close": 74.92, "volume": 41725249 }, { "date": "07/29/14", "open": 74.72, "high": 74.92, "low": 73.42, "close": 73.71, "volume": 41324470 }, { "date": "07/30/14", "open": 74.21, "high": 75.19, "low": 74.13, "close": 74.68, "volume": 36853018 }, { "date": "07/31/14", "open": 74, "high": 74.16, "low": 72.44, "close": 72.65, "volume": 43991772 }, { "date": "08/01/14", "open": 72.22, "high": 73.22, "low": 71.55, "close": 72.36, "volume": 43535314 }, { "date": "08/04/14", "open": 72.36, "high": 73.88, "low": 72.36, "close": 73.51, "volume": 30776819 }, { "date": "08/05/14", "open": 73.51, "high": 73.59, "low": 72.18, "close": 72.69, "volume": 34986147 }, { "date": "08/06/14", "open": 72.02, "high": 73.72, "low": 71.79, "close": 72.47, "volume": 30985533 }, { "date": "08/07/14", "open": 73, "high": 74, "low": 72.7, "close": 73.17, "volume": 38140550 }, { "date": "08/08/14", "open": 73.4, "high": 73.43, "low": 72.56, "close": 73.06, "volume": 27202325 }, { "date": "08/11/14", "open": 73.46, "high": 73.91, "low": 73.06, "close": 73.44, "volume": 24591177 }, { "date": "08/12/14", "open": 73.09, "high": 73.33, "low": 72.22, "close": 72.83, "volume": 27418983 }, { "date": "08/13/14", "open": 73.12, "high": 74.25, "low": 73.05, "close": 73.77, "volume": 29265662 }, { "date": "08/14/14", "open": 73.97, "high": 74.38, "low": 73.69, "close": 74.3, "volume": 22207019 }, { "date": "08/15/14", "open": 74.32, "high": 74.65, "low": 73, "close": 73.63, "volume": 38909161 }, { "date": "08/18/14", "open": 74, "high": 74.72, "low": 73.96, "close": 74.59, "volume": 23973658 }, { "date": "08/19/14", "open": 74.81, "high": 75.58, "low": 74.77, "close": 75.29, "volume": 26678640 }, { "date": "08/20/14", "open": 74.97, "high": 75.18, "low": 74.62, "close": 74.81, "volume": 22916678 }, { "date": "08/21/14", "open": 74.92, "high": 75.19, "low": 74.41, "close": 74.57, "volume": 20101979 }, { "date": "08/22/14", "open": 74.34, "high": 74.73, "low": 73.57, "close": 74.57, "volume": 20897393 }, { "date": "08/25/14", "open": 74.94, "high": 75.28, "low": 74.79, "close": 75.02, "volume": 19734103 }, { "date": "08/26/14", "open": 75, "high": 75.99, "low": 74.73, "close": 75.96, "volume": 23992668 }, { "date": "08/27/14", "open": 75.27, "high": 75.49, "low": 74.46, "close": 74.63, "volume": 36323060 }, { "date": "08/28/14", "open": 74, "high": 74.43, "low": 73.73, "close": 73.86, "volume": 21946738 }, { "date": "08/29/14", "open": 74.3, "high": 74.82, "low": 74.01, "close": 74.82, "volume": 26241162 }, { "date": "09/02/14", "open": 75.01, "high": 76.7, "low": 74.82, "close": 76.68, "volume": 34979438 }, { "date": "09/03/14", "open": 77.14, "high": 77.48, "low": 75.6, "close": 75.83, "volume": 32389102 }, { "date": "09/04/14", "open": 75.89, "high": 76.93, "low": 75.53, "close": 75.95, "volume": 26676444 }, { "date": "09/05/14", "open": 76.1, "high": 77.38, "low": 75.6, "close": 77.26, "volume": 29475854 }, { "date": "09/08/14", "open": 77.26, "high": 78.17, "low": 77.01, "close": 77.89, "volume": 28183156 }, { "date": "09/09/14", "open": 77.59, "high": 78.17, "low": 76.2, "close": 76.67, "volume": 28881803 }, { "date": "09/10/14", "open": 76.52, "high": 77.95, "low": 76.51, "close": 77.43, "volume": 29908606 }, { "date": "09/11/14", "open": 77.13, "high": 78.36, "low": 77.05, "close": 77.92, "volume": 32247724 }, { "date": "09/12/14", "open": 78.02, "high": 78.3, "low": 77.1, "close": 77.48, "volume": 26744356 }, { "date": "09/15/14", "open": 77.15, "high": 77.25, "low": 73.43, "close": 74.58, "volume": 49679130 }, { "date": "09/16/14", "open": 73.52, "high": 76.23, "low": 73.07, "close": 76.08, "volume": 37742482 }, { "date": "09/17/14", "open": 75.96, "high": 77.25, "low": 75.57, "close": 76.43, "volume": 28693348 }, { "date": "09/18/14", "open": 76.77, "high": 77.33, "low": 76.52, "close": 77, "volume": 23030936 }, { "date": "09/19/14", "open": 77.4, "high": 78.3, "low": 76.44, "close": 77.91, "volume": 76671330 }, { "date": "09/22/14", "open": 77, "high": 77.53, "low": 75.95, "close": 76.8, "volume": 31961015 }, { "date": "09/23/14", "open": 76.33, "high": 78.63, "low": 76.04, "close": 78.29, "volume": 36814111 }, { "date": "09/24/14", "open": 78.1, "high": 78.62, "low": 77.51, "close": 78.54, "volume": 30679642 }, { "date": "09/25/14", "open": 78.6, "high": 78.94, "low": 77.13, "close": 77.22, "volume": 37532580 }, { "date": "09/26/14", "open": 77.59, "high": 78.84, "low": 77.33, "close": 78.79, "volume": 28872012 }, { "date": "09/29/14", "open": 78.12, "high": 79.2, "low": 77.91, "close": 79, "volume": 34030635 }, { "date": "09/30/14", "open": 79.35, "high": 79.71, "low": 78.6, "close": 79.04, "volume": 35899444 }, { "date": "10/01/14", "open": 78.78, "high": 78.82, "low": 75.9, "close": 76.55, "volume": 55090157 }, { "date": "10/02/14", "open": 76.57, "high": 77.48, "low": 75.64, "close": 77.08, "volume": 36487612 }, { "date": "10/03/14", "open": 77.76, "high": 78.06, "low": 77.26, "close": 77.44, "volume": 23340173 }, { "date": "10/06/14", "open": 77.19, "high": 77.89, "low": 76.85, "close": 77.56, "volume": 25729191 }, { "date": "10/07/14", "open": 77.05, "high": 77.95, "low": 76.24, "close": 76.29, "volume": 25317488 }, { "date": "10/08/14", "open": 76.18, "high": 77.71, "low": 75.1, "close": 77.52, "volume": 32975514 }, { "date": "10/09/14", "open": 77.28, "high": 77.76, "low": 75.85, "close": 75.91, "volume": 32487174 }, { "date": "10/10/14", "open": 75.59, "high": 76.5, "low": 72.76, "close": 72.91, "volume": 52146162 }, { "date": "10/13/14", "open": 73.23, "high": 74.78, "low": 72.52, "close": 72.99, "volume": 43937638 }, { "date": "10/14/14", "open": 74, "high": 74.18, "low": 72.05, "close": 73.59, "volume": 50299288 }, { "date": "10/15/14", "open": 71.69, "high": 73.8, "low": 70.32, "close": 73.21, "volume": 61528317 }, { "date": "10/16/14", "open": 70.79, "high": 73.35, "low": 70.58, "close": 72.63, "volume": 53529459 }, { "date": "10/17/14", "open": 74.23, "high": 76, "low": 73.75, "close": 75.95, "volume": 76341638 }, { "date": "10/20/14", "open": 75.6, "high": 77.09, "low": 75.38, "close": 76.95, "volume": 34701260 }, { "date": "10/21/14", "open": 77.56, "high": 78.74, "low": 77.15, "close": 78.69, "volume": 32252403 }, { "date": "10/22/14", "open": 78.82, "high": 79.85, "low": 78.01, "close": 78.37, "volume": 41862393 }, { "date": "10/23/14", "open": 79.38, "high": 80.63, "low": 79.01, "close": 80.04, "volume": 35055800 }, { "date": "10/24/14", "open": 80.2, "high": 80.82, "low": 79.32, "close": 80.67, "volume": 32247520 }, { "date": "10/27/14", "open": 80.74, "high": 80.8, "low": 79.76, "close": 80.28, "volume": 30168921 }, { "date": "10/28/14", "open": 80.18, "high": 81.16, "low": 79.57, "close": 80.77, "volume": 74211768 }, { "date": "10/29/14", "open": 75.45, "high": 76.88, "low": 74.78, "close": 75.86, "volume": 106119520 }, { "date": "10/30/14", "open": 75.05, "high": 75.35, "low": 72.9, "close": 74.11, "volume": 83269554 }, { "date": "10/31/14", "open": 74.93, "high": 75.7, "low": 74.45, "close": 74.99, "volume": 44544325 }, { "date": "11/03/14", "open": 75.47, "high": 75.52, "low": 73.7, "close": 73.88, "volume": 40727330 }, { "date": "11/04/14", "open": 74.23, "high": 75.77, "low": 73.65, "close": 75.76, "volume": 39326471 }, { "date": "11/05/14", "open": 76.51, "high": 76.8, "low": 74.42, "close": 74.83, "volume": 35912588 }, { "date": "11/06/14", "open": 74.89, "high": 75.6, "low": 74.31, "close": 75.26, "volume": 21383194 }, { "date": "11/07/14", "open": 75.39, "high": 75.86, "low": 75.02, "close": 75.6, "volume": 20774381 }, { "date": "11/10/14", "open": 75.36, "high": 75.48, "low": 74.61, "close": 75, "volume": 21575126 }, { "date": "11/11/14", "open": 74.95, "high": 74.98, "low": 74.03, "close": 74.61, "volume": 18735123 }, { "date": "11/12/14", "open": 74.28, "high": 75.14, "low": 73.54, "close": 74.72, "volume": 26536609 }, { "date": "11/13/14", "open": 74.74, "high": 75.24, "low": 73.64, "close": 74.25, "volume": 26448451 }, { "date": "11/14/14", "open": 74.27, "high": 74.93, "low": 74.04, "close": 74.88, "volume": 19476878 }, { "date": "11/17/14", "open": 74.88, "high": 75.66, "low": 73.88, "close": 74.24, "volume": 28701191 }, { "date": "11/18/14", "open": 74.45, "high": 74.8, "low": 73.9, "close": 74.34, "volume": 20696643 }, { "date": "11/19/14", "open": 74.01, "high": 74.54, "low": 73.11, "close": 73.33, "volume": 25441163 }, { "date": "11/20/14", "open": 72.8, "high": 73.99, "low": 72.51, "close": 73.6, "volume": 19154862 }, { "date": "11/21/14", "open": 74.5, "high": 74.5, "low": 73.5, "close": 73.75, "volume": 23060382 }, { "date": "11/24/14", "open": 73.54, "high": 74.35, "low": 73.35, "close": 74.01, "volume": 22103831 }, { "date": "11/25/14", "open": 74.21, "high": 75.74, "low": 74.13, "close": 75.63, "volume": 32250205 }, { "date": "11/26/14", "open": 75.53, "high": 77.78, "low": 75.51, "close": 77.62, "volume": 32721585 }, { "date": "11/28/14", "open": 77.67, "high": 78.27, "low": 77.23, "close": 77.7, "volume": 15992035 }, { "date": "12/01/14", "open": 77.26, "high": 77.31, "low": 74.8, "close": 75.1, "volume": 31789866 }, { "date": "12/02/14", "open": 75.33, "high": 75.91, "low": 75.04, "close": 75.46, "volume": 16773884 }, { "date": "12/03/14", "open": 75.38, "high": 75.73, "low": 74.4, "close": 74.88, "volume": 16689857 }, { "date": "12/04/14", "open": 74.83, "high": 75.55, "low": 74.66, "close": 75.24, "volume": 14390520 }, { "date": "12/05/14", "open": 75.8, "high": 76.76, "low": 75.36, "close": 76.36, "volume": 24306446 }, { "date": "12/08/14", "open": 76.18, "high": 77.25, "low": 75.4, "close": 76.52, "volume": 25733853 }, { "date": "12/09/14", "open": 75.2, "high": 76.93, "low": 74.78, "close": 76.84, "volume": 25358584 }, { "date": "12/10/14", "open": 76.65, "high": 77.55, "low": 76.07, "close": 76.18, "volume": 32210532 }, { "date": "12/11/14", "open": 76.52, "high": 78.52, "low": 76.48, "close": 77.73, "volume": 33492661 }, { "date": "12/12/14", "open": 77.16, "high": 78.88, "low": 77.02, "close": 77.83, "volume": 28091617 }, { "date": "12/15/14", "open": 78.46, "high": 78.58, "low": 76.56, "close": 76.99, "volume": 29396532 }, { "date": "12/16/14", "open": 76.19, "high": 77.39, "low": 74.59, "close": 74.69, "volume": 31554593 }, { "date": "12/17/14", "open": 75.01, "high": 76.41, "low": 74.9, "close": 76.11, "volume": 29203904 }, { "date": "12/18/14", "open": 76.89, "high": 78.4, "low": 76.51, "close": 78.4, "volume": 34222081 }, { "date": "12/19/14", "open": 78.75, "high": 80, "low": 78.33, "close": 79.88, "volume": 43334992 }, { "date": "12/22/14", "open": 80.08, "high": 81.89, "low": 80, "close": 81.45, "volume": 31395770 }, { "date": "12/23/14", "open": 82.02, "high": 82.17, "low": 80.4, "close": 80.61, "volume": 19865820 }, { "date": "12/24/14", "open": 81.03, "high": 81.43, "low": 80.75, "close": 80.77, "volume": 7685481 }, { "date": "12/26/14", "open": 81.02, "high": 81.28, "low": 80.51, "close": 80.78, "volume": 10647388 }, { "date": "12/29/14", "open": 80.49, "high": 80.96, "low": 79.71, "close": 80.02, "volume": 14134666 }, { "date": "12/30/14", "open": 79.85, "high": 80.59, "low": 79.1, "close": 79.22, "volume": 14370763 }, { "date": "12/31/14", "open": 79.54, "high": 79.8, "low": 77.86, "close": 78.02, "volume": 20040439 }, { "date": "01/02/15", "open": 78.58, "high": 78.93, "low": 77.7, "close": 78.45, "volume": 18177475 }, { "date": "01/05/15", "open": 77.98, "high": 79.25, "low": 76.86, "close": 77.19, "volume": 26452191 }, { "date": "01/06/15", "open": 77.23, "high": 77.59, "low": 75.36, "close": 76.15, "volume": 27399288 }, { "date": "01/07/15", "open": 76.76, "high": 77.36, "low": 75.82, "close": 76.15, "volume": 22045333 }, { "date": "01/08/15", "open": 76.74, "high": 78.23, "low": 76.08, "close": 78.18, "volume": 23960953 }, { "date": "01/09/15", "open": 78.2, "high": 78.62, "low": 77.2, "close": 77.74, "volume": 21157007 }, { "date": "01/12/15", "open": 77.84, "high": 78, "low": 76.21, "close": 76.72, "volume": 19190194 }, { "date": "01/13/15", "open": 77.23, "high": 78.08, "low": 75.85, "close": 76.45, "volume": 25179561 }, { "date": "01/14/15", "open": 76.42, "high": 77.2, "low": 76.03, "close": 76.28, "volume": 25918564 }, { "date": "01/15/15", "open": 76.4, "high": 76.57, "low": 73.54, "close": 74.05, "volume": 34133974 }, { "date": "01/16/15", "open": 74.04, "high": 75.32, "low": 73.84, "close": 75.18, "volume": 21791529 }, { "date": "01/20/15", "open": 75.72, "high": 76.31, "low": 74.82, "close": 76.24, "volume": 22821614 }, { "date": "01/21/15", "open": 76.16, "high": 77.3, "low": 75.85, "close": 76.74, "volume": 25096737 }, { "date": "01/22/15", "open": 77.17, "high": 77.75, "low": 76.68, "close": 77.65, "volume": 19519458 }, { "date": "01/23/15", "open": 77.65, "high": 78.19, "low": 77.04, "close": 77.83, "volume": 16746503 }, { "date": "01/26/15", "open": 77.98, "high": 78.47, "low": 77.29, "close": 77.5, "volume": 19260820 }, { "date": "01/27/15", "open": 76.71, "high": 76.88, "low": 75.63, "close": 75.78, "volume": 20109977 }, { "date": "01/28/15", "open": 76.9, "high": 77.64, "low": 76, "close": 76.24, "volume": 53306422 }, { "date": "01/29/15", "open": 76.85, "high": 78.02, "low": 74.21, "close": 78, "volume": 61293468 }, { "date": "01/30/15", "open": 78, "high": 78.16, "low": 75.75, "close": 75.91, "volume": 42649491 }, { "date": "02/02/15", "open": 76.11, "high": 76.14, "low": 73.75, "close": 74.99, "volume": 41955258 }, { "date": "02/03/15", "open": 75.19, "high": 75.58, "low": 73.86, "close": 75.4, "volume": 26957714 }, { "date": "02/04/15", "open": 75.09, "high": 76.35, "low": 75.01, "close": 75.63, "volume": 20277368 }, { "date": "02/05/15", "open": 75.71, "high": 75.98, "low": 75.21, "close": 75.62, "volume": 15062573 }, { "date": "02/06/15", "open": 75.68, "high": 75.7, "low": 74.25, "close": 74.47, "volume": 21210994 }, { "date": "02/09/15", "open": 74.05, "high": 74.83, "low": 73.45, "close": 74.44, "volume": 16194322 }, { "date": "02/10/15", "open": 74.85, "high": 75.34, "low": 74.5, "close": 75.19, "volume": 15811344 }, { "date": "02/11/15", "open": 75.09, "high": 76.75, "low": 75.03, "close": 76.51, "volume": 20877427 }, { "date": "02/12/15", "open": 76.86, "high": 76.87, "low": 75.89, "close": 76.23, "volume": 17234976 }, { "date": "02/13/15", "open": 76.46, "high": 76.48, "low": 75.5, "close": 75.74, "volume": 18621860 }, { "date": "02/17/15", "open": 75.3, "high": 76.91, "low": 75.08, "close": 75.6, "volume": 25254400 }, { "date": "02/18/15", "open": 75.94, "high": 76.9, "low": 75.45, "close": 76.71, "volume": 22426421 }, { "date": "02/19/15", "open": 76.99, "high": 79.84, "low": 76.95, "close": 79.42, "volume": 45851177 }, { "date": "02/20/15", "open": 79.55, "high": 80.34, "low": 79.2, "close": 79.9, "volume": 36931698 }, { "date": "02/23/15", "open": 79.96, "high": 80.19, "low": 78.38, "close": 78.84, "volume": 24139056 }, { "date": "02/24/15", "open": 78.5, "high": 79.48, "low": 78.1, "close": 78.45, "volume": 18897133 }, { "date": "02/25/15", "open": 78.5, "high": 80.2, "low": 78.5, "close": 79.56, "volume": 25593800 }, { "date": "02/26/15", "open": 79.88, "high": 81.37, "low": 79.72, "close": 80.41, "volume": 31111891 }, { "date": "02/27/15", "open": 80.68, "high": 81.23, "low": 78.62, "close": 78.97, "volume": 30739197 }, { "date": "03/02/15", "open": 79, "high": 79.86, "low": 78.52, "close": 79.75, "volume": 21662537 }, { "date": "03/03/15", "open": 79.61, "high": 79.7, "low": 78.52, "close": 79.6, "volume": 18634973 }, { "date": "03/04/15", "open": 79.3, "high": 81.15, "low": 78.85, "close": 80.9, "volume": 28126686 }, { "date": "03/05/15", "open": 81.23, "high": 81.99, "low": 81.05, "close": 81.21, "volume": 27825733 }, { "date": "03/06/15", "open": 80.9, "high": 81.33, "low": 79.83, "close": 80, "volume": 24488581 }, { "date": "03/09/15", "open": 79.68, "high": 79.91, "low": 78.63, "close": 79.44, "volume": 18925097 }, { "date": "03/10/15", "open": 78.5, "high": 79.26, "low": 77.55, "close": 77.55, "volume": 23067057 }, { "date": "03/11/15", "open": 77.8, "high": 78.43, "low": 77.26, "close": 77.57, "volume": 20215704 }, { "date": "03/12/15", "open": 78.1, "high": 79.05, "low": 77.91, "close": 78.93, "volume": 16093319 }, { "date": "03/13/15", "open": 78.6, "high": 79.38, "low": 77.68, "close": 78.05, "volume": 18557296 }, { "date": "03/16/15", "open": 77.96, "high": 78.12, "low": 77.36, "close": 78.07, "volume": 19305406 }, { "date": "03/17/15", "open": 78.36, "high": 79.78, "low": 78.34, "close": 79.36, "volume": 22169969 }, { "date": "03/18/15", "open": 79.25, "high": 81.24, "low": 79.17, "close": 80.91, "volume": 36912446 }, { "date": "03/19/15", "open": 81.12, "high": 83, "low": 81, "close": 82.75, "volume": 42099523 }, { "date": "03/20/15", "open": 83.39, "high": 84.6, "low": 83.07, "close": 83.8, "volume": 44466323 }, { "date": "03/23/15", "open": 83.92, "high": 84.96, "low": 83.3, "close": 84.43, "volume": 27357333 }, { "date": "03/24/15", "open": 84.71, "high": 86.07, "low": 84.52, "close": 85.31, "volume": 32576522 }, { "date": "03/25/15", "open": 85.5, "high": 85.52, "low": 82.92, "close": 82.92, "volume": 37436147 }, { "date": "03/26/15", "open": 82.72, "high": 83.77, "low": 82.14, "close": 83.01, "volume": 32794800 }, { "date": "03/27/15", "open": 83.38, "high": 83.95, "low": 82.88, "close": 83.3, "volume": 18372582 }, { "date": "03/30/15", "open": 83.81, "high": 84.34, "low": 82.41, "close": 83.2, "volume": 24527686 }, { "date": "03/31/15", "open": 82.9, "high": 83.5, "low": 82.21, "close": 82.22, "volume": 19734277 }, { "date": "04/01/15", "open": 82.5, "high": 82.72, "low": 80.87, "close": 81.66, "volume": 22058167 }, { "date": "04/02/15", "open": 82.25, "high": 82.56, "low": 81.44, "close": 81.56, "volume": 19664053 }, { "date": "04/06/15", "open": 80.8, "high": 82.81, "low": 80.8, "close": 82.44, "volume": 19062934 }, { "date": "04/07/15", "open": 82.65, "high": 83.42, "low": 82.22, "close": 82.32, "volume": 17467042 }, { "date": "04/08/15", "open": 82.63, "high": 83.1, "low": 81.84, "close": 82.28, "volume": 18966732 }, { "date": "04/09/15", "open": 82.5, "high": 82.8, "low": 81.71, "close": 82.17, "volume": 15927281 }, { "date": "04/10/15", "open": 82.21, "high": 82.61, "low": 81.91, "close": 82.04, "volume": 12529738 } ]; for (var i = 0; i < data.length; i++) { data[i].date = core.Globalize.parseDate(data[i].date, 'MM/dd/yy'); } return data; } export function getAnnotations() { let data = [ { "name": "tradeRange", "type": "Rectangle", "position": 0, "offset": { "x": 0, "y": -80 }, "width": 465, "height": 430, "attachment": 1, "point": { "x": "2014-11-26", "y": 70 }, "style": { "fill": "#669999", "stroke": "#B40431", "fill-opacity": 0.2, "stroke-width": 0.5, "stroke-opacity": 0.2 } }, { "name": "waterMarker", "type": "Text", "attachment": 2, "point": { "x": 0.5, "y": 0.5 }, "text": "wijmo.com", "style": { "fill": "#B45F04", "fill-opacity": 0.1, "stroke": "rgba(124,240,10,0.2)", "font-size": "100px" } }, { "name": "trendLine1", "type": "Line", "attachment": 1, "position": 0, "start": { "x": "2014-05-08", "y": 64 }, "end": { "x": "2014-09-08", "y": 84 }, "style": { "fill": "#FF0040", "stroke": "#3ADF00", "fill-opacity": 2, "stroke-width": 1, "stroke-opacity": 0.5 } }, { "name": "trendLine2", "type": "Line", "attachment": 1, "position": 0, "start": { "x": "2014-05-08", "y": 56 }, "end": { "x": "2014-09-08", "y": 76 }, "style": { "fill": "#FF0040", "stroke": "#3ADF00", "fill-opacity": 2, "stroke-width": 1, "stroke-opacity": 0.5 } }, { "name": "eventa", "type": "Rectangle", "offset": { "x": 0, "y": -10 }, "attachment": 0, "content": "E", "tooltip": "Results of Operations and Financial Condition.", "width": 20, "height": 20, "pointIndex": 73, "style": { "fill": "#01DFD7", "stroke": "#000000", "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1 } }, { "name": "eventb", "type": "Rectangle", "offset": { "x": 0, "y": 10 }, "attachment": 0, "content": "E", "tooltip": "Completion of Acquisition or Disposition of Assets, Change in Directors or Principal.", "width": 20, "height": 20, "pointIndex": 124, "style": { "fill": "#01DFD7", "stroke": "#000000", "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1 } }, { "name": "eventc", "type": "Rectangle", "offset": { "x": 0, "y": -10 }, "attachment": 0, "content": "E", "tooltip": "Facebook Inc Earnings Call scheduled for 5:00 pm ET today.", "width": 20, "height": 20, "pointIndex": 202, "style": { "fill": "#01DFD7", "stroke": "#000000", "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1 } }, { "name": "eventd", "type": "Rectangle", "offset": { "x": 0, "y": -20 }, "attachment": 0, "content": "E", "tooltip": "Coverage initiated on Facebook by Brean Capital.", "width": 20, "height": 20, "pointIndex": 235, "style": { "fill": "#01DFD7", "stroke": "#000000", "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1 } }, { "name": "detailContainer", "type": "Square", "length": 110, "isVisible": false, "point": { "x": 55, "y": 55 }, "style": { "fill": "#CCCC00", "stroke": "#0B2F3A", "stroke-width": 1, "stroke-opacity": 0.4 } }, { "name": "detailLow", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 3, "text": "", "point": { "x": 52, "y": 20 }, "style": { "fill": "#6E6E6E", "font-size": "12px" } }, { "name": "detailHigh", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 3, "text": "", "point": { "x": 52, "y": 40 }, "style": { "fill": "#6E6E6E", "font-size": "12px" } }, { "name": "detailOpen", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 3, "text": "", "point": { "x": 52, "y": 60 }, "style": { "fill": "#6E6E6E", "font-size": "12px" } }, { "name": "detailClose", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 3, "text": "", "point": { "x": 52, "y": 80 }, "style": { "fill": "#6E6E6E", "font-size": "12px" } }, { "name": "detailVolume", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 3, "text": "", "point": { "x": 52, "y": 100 }, "style": { "fill": "#6E6E6E", "font-size": "12px" } }, { "name": "startLine", "type": "Line", "position": 0, "offset": { "x": 0, "y": 0 }, "attachment": 1, "tooltip": "Previous close", "start": { "x": "2014-4-10", "y": 59.16 }, "end": { "x": "2016-4-10", "y": 59.16 }, "style": { "fill": "#000000", "stroke": "#000000", "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1 } }, { "name": "dividea", "type": "Image", "position": 0, "offset": { "x": 0, "y": -20 }, "width":20, "height":20, "seriesIndex":1, "href": "resources/divide.png", "tooltip": "Dividend", "attachment": 0, "pointIndex": 42 }, { "name": "divideb", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "width":20, "height":20, "seriesIndex":1, "href": "resources/divide.png", "tooltip": "Dividend", "attachment": 0, "pointIndex": 73 }, { "name": "dividec", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "width":20, "height":20, "seriesIndex":1, "href": "resources/divide.png", "tooltip": "Dividend", "attachment": 0, "pointIndex": 92 }, { "name": "divided", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "width":20, "height":20, "seriesIndex":1, "href": "resources/divide.png", "tooltip": "Dividend", "attachment": 0, "pointIndex": 142 }, { "name": "dividee", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "width":20, "height":20, "seriesIndex":1, "href": "resources/divide.png", "tooltip": "Dividend", "attachment": 0, "pointIndex": 202 }, { "name": "newsa", "type": "Text", "position": 0, "offset": { "x": 0, "y": 25 }, "text": "Alibaba Group Holding Ltd (BABA) and ... ", "attachment": 1, "point": { "x": "2015-3-2", "y": 80 } }, { "name": "newsaMarker", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "href": "resources/flag.png", "tooltip": "2015/3/2, Both JPMorgan Chase and Morgan Stanley offered up favorable comments on the social media giant, with JPMorgan citing that Facebook\"s core services accounted for 24% of all smartphone activity in the U.S. The figure was up 2% from reported usage in ...", "width":14, "heigh":24, "attachment": 1, "point": { "x": "2015-3-2", "y": 80 } }, { "name": "newsb", "type": "Text", "position": 0, "offset": { "x": 0, "y": 0 }, "text": "Facebook Inc to acquire LiveRail.", "attachment": 1, "point": { "x": "2014-7-8", "y": 62 } }, { "name": "newsbMarker", "type": "Image", "position": 0, "offset": { "x": 7, "y": -20 }, "href": "resources/flag.png", "width":14, "heigh":24, "attachment": 1, "point": { "x": "2014-7-8", "y": 62 } }, { "name": "trendDesc", "type": "Text", "position": 0, "offset": { "x": 0, "y": -30 }, "text": "Rising wedge", "attachment": 1, "point": { "x": "2014-5-8", "y": 64 }, "style": { "font-size": "20px"} }, { "name": "buyAnno", "type": "Image", "position": 0, "offset": { "x": 0, "y": 15 }, "height": 24, "width": 24, "tooltip": "Bid: $73.59", "attachment": 1, "point": { "x": "2014-10-14", "y": 73 }, "href": "resources/up.png" }, { "name": "sellAnno", "type": "Image", "position": 0, "offset": { "x": 0, "y": -10 }, "height": 24, "width": 24, "tooltip": "Offer: $77.74", "attachment": 1, "point": { "x": "2015-1-8", "y": 78 }, "href": "resources/down.png" } ]; for (var i = 0; i < data.length; i++) { if (data[i].start && data[i].start.x) { data[i].start.x = core.Globalize.parseDate(data[i].start.x, 'yyyy-MM-dd'); } if (data[i].end && data[i].end.x) { data[i].end.x = core.Globalize.parseDate(data[i].end.x, 'yyyy-MM-dd'); } if (data[i].attachment === 1 && data[i].point && data[i].point.x) { data[i].point.x = core.Globalize.parseDate(data[i].point.x, 'yyyy-MM-dd'); } } return data; }