Stock Chart

A stock chart can show fluctuations in data, representing the fluctuations for stock (as the name implies), daily rainfall, annual temperatures, or other types of fluctuating data.

<p>SpreadJS supports High-Low-Close, Open-High-Low-Close, Volume-High-Low-Close, and Volume-Open-High-Low-Close chart types. Use the <strong>GC.Spread.Sheets.Charts.ChartType.stockHLC</strong> to get the chart type.</p> <p>A <strong>High-Low-Close</strong> chart can be added to Spread, and the chart style can be changed using the chart API. The stockHLC chart requires that the data be organized as high, low, and close, with the close value in between the high and low values.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chart = sheet.charts.add(<span class="hljs-string">'stockHLC'</span>, GC.Spread.Sheets.Charts.ChartType.stockHLC, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>, <span class="hljs-number">400</span>, <span class="hljs-number">300</span>, <span class="hljs-string">'A1:D4'</span>) <span class="hljs-keyword">var</span> title = chart.title() chart.title(title); </code></pre> <p>The <strong>Open-High-Low-Close</strong> chart adds the <strong>Open</strong> data to the stockHLC data. The values are organized as: open, high, low, and then close.</p> <p><strong>Volume-High-Low-Close</strong> chart can be added to Spread, and the chart style can be changed using the chart API. The stockVHLC adds the <strong>v1olume</strong> data to the stockVHLC data. The values are organized in the following order: volume, high, low, and then close. The volume series' chart type is columnStacked, and you can change that series' style.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chart = sheet.charts.add(<span class="hljs-string">'stockVHLC'</span>, GC.Spread.Sheets.Charts.ChartType.stockVHLC, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>, <span class="hljs-number">400</span>, <span class="hljs-number">300</span>, <span class="hljs-string">'A1:D4'</span>); <span class="hljs-keyword">var</span> series = chart.series().get(); <span class="hljs-keyword">var</span> ser = series[<span class="hljs-number">0</span>]; <span class="hljs-keyword">var</span> ser.backColor = <span class="hljs-string">'red'</span>; chart.series().set(<span class="hljs-number">0</span>, ser); </code></pre> <p><strong>The Volume-Open-High-Low-Close</strong> chart adds all the data. The values are organized in the following the order: column, open, high, low, and then close.</p>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 4}); initSpread(spread); }; var data = dataSource; function initSpread(spread) { spread.suspendPaint(); spread.options.tabStripRatio = 0.7; var chartTypeStr = ['stockHLC', 'stockOHLC', 'stockVHLC', 'stockVOHLC']; var chartType = [{ type: GC.Spread.Sheets.Charts.ChartType.stockHLC, desc: chartTypeStr[0], }, { type: GC.Spread.Sheets.Charts.ChartType.stockOHLC, desc: chartTypeStr[1], }, { type: GC.Spread.Sheets.Charts.ChartType.stockVHLC, desc: chartTypeStr[2], }, { type: GC.Spread.Sheets.Charts.ChartType.stockVOHLC, desc: chartTypeStr[3], }]; var sheets = spread.sheets; var sheet = sheets[sheets.length - 1]; sheet.suspendPaint(); sheet.name(chartTypeStr[chartTypeStr.length - 1]); sheet.setArray(0, 0, data); sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy'); sheet.setColumnWidth(0, 80); sheet.resumePaint(); initStockHLCChartSheetData(sheets[0], chartTypeStr[0]); initStockOHLCChartSheetData(sheets[1], chartTypeStr[1]); initStockVHLCChartSheetData(sheets[2], chartTypeStr[2]); for (var i = 0; i < chartType.length; i++) { sheet = sheets[i]; initChart(sheet, chartType[i].type, i);//add chart } spread.resumePaint(); } function initStockHLCChartSheetData(sheet, sheetName) { sheet.name(sheetName); sheet.suspendPaint(); var formula = "='stockVOHLC'!"; for (var i = 0; i < data.length - 1; i++) { var formula1 = formula + 'A' + (i + 1); sheet.setFormula(i, 0, formula1); formula1 = formula + 'D' + (i + 1); sheet.setFormula(i, 1, formula1); formula1 = formula + 'E' + (i + 1); sheet.setFormula(i, 2, formula1); formula1 = formula + 'F' + (i + 1); sheet.setFormula(i, 3, formula1); } sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy'); sheet.setColumnWidth(0, 80); sheet.resumePaint(); } function initStockOHLCChartSheetData(sheet, sheetName) { sheet.name(sheetName); sheet.suspendPaint(); var formula = "='stockVOHLC'!"; for (var i = 0; i < data.length - 1; i++) { var formula1 = formula + 'A' + (i + 1); sheet.setFormula(i, 0, formula1); formula1 = formula + 'C' + (i + 1); sheet.setFormula(i, 1, formula1); formula1 = formula + 'D' + (i + 1); sheet.setFormula(i, 2, formula1); formula1 = formula + 'E' + (i + 1); sheet.setFormula(i, 3, formula1); formula1 = formula + 'F' + (i + 1); sheet.setFormula(i, 4, formula1); } sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy'); sheet.setColumnWidth(0, 80); sheet.resumePaint(); } function initStockVHLCChartSheetData(sheet, sheetName) { sheet.name(sheetName); sheet.suspendPaint(); var formula = "='stockVOHLC'!"; for (var i = 0; i < data.length - 1; i++) { var formula1 = formula + 'A' + (i + 1); sheet.setFormula(i, 0, formula1); formula1 = formula + 'B' + (i + 1); sheet.setFormula(i, 1, formula1); formula1 = formula + 'D' + (i + 1); sheet.setFormula(i, 2, formula1); formula1 = formula + 'E' + (i + 1); sheet.setFormula(i, 3, formula1); formula1 = formula + 'f' + (i + 1); sheet.setFormula(i, 4, formula1); } sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy'); sheet.setColumnWidth(0, 80); sheet.resumePaint(); } function initChart(sheet, chartType, index) { sheet.suspendPaint(); var rangeIndex = ['A1:D61', 'A1:E61', 'A1:E61', 'A1:F61']; //add chart var chart = sheet.charts.add('Chart1', chartType, 270, 60, 615, 270, rangeIndex[index]); sheet.resumePaint(); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/stockChartData.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-tutorial"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }