Area Chart

Data that's arranged in columns or rows on a worksheet can be plotted in an area chart. Area charts can be used to plot change over time and draw attention to the total value across a trend by showing the sum of the plotted values.

SpreadJS supports area, stacked area and 100% stacked area charts. Use the GC.Spread.Sheets.Charts.ChartType.area property to get the chart type. You can add an area chart to Spread and change its style using the chart API. Area: Area charts show trends over time. Stacked area: Stacked area charts show the trend of the contribution of each value over time or other categorical data. 100% stacked area: One-hundred percent stacked area charts show the trend of the percentage that each value contributes over time or other categorical data.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 3}); initSpread(spread); }; function initSpread(spread) { var chartType = [{ type: GC.Spread.Sheets.Charts.ChartType.area, desc: "area", }, { type: GC.Spread.Sheets.Charts.ChartType.areaStacked, desc: "areaStacked", }, { type: GC.Spread.Sheets.Charts.ChartType.areaStacked100, desc: "areaStacked100", }]; var sheets = spread.sheets; spread.suspendPaint(); initArea(sheets[0], chartType[0].desc, chartType[0].type); initArea(sheets[1], chartType[1].desc, chartType[1].type); initArea(sheets[2], chartType[2].desc, chartType[2].type); spread.resumePaint(); } function initArea(sheet, sheetName, chartType) { sheet.name(sheetName); sheet.suspendPaint(); //prepare data for chart var dataArray = [ ["", "1750", "1800", "1850", "1900", "1950", "2000", "2050"], ["Asia", 502, 635, 809, 947, 1402, 3634, 5268], ["Africa", 106, 107, 111, 133, 221, 767, 1766], ["America", 18, 31, 54, 156, 339, 818, 1201], ["Europe", 163, 203, 276, 408, 547, 729, 628], ["Oceania", 2, 2, 2, 6, 13, 30, 46] ]; sheet.setArray(0, 0, dataArray); sheet.resumePaint(); var chart = sheet.charts.add((sheet.name() + 'Chart1'), chartType, 0, 120, 800, 300, "A1:H6", GC.Spread.Sheets.Charts.RowCol.rows); var series = chart.series().get(); var colorArray = ['rgba(158, 200, 242, 0.7)', 'rgba(245, 87, 31, 0.7)', 'rgba(173, 255, 131, 0.7)', 'rgba(255, 178, 50, 0.7)', 'rgba(93, 93, 93, 0.7)']; var colorLineArray = ['rgba(158, 200, 242)', 'rgba(245, 87, 31)', 'rgba(173, 255, 131)', 'rgba(255, 178, 50)', 'rgba(93, 93, 93)']; for (var i = 0; i < series.length; i++) { series[i].backColor = colorArray[i]; series[i].border.color = colorLineArray[i]; series[i].border.width = 2; chart.series().set(i, series[i]); } var axes = chart.axes(); axes.primaryValue.lineStyle.color = 'grey'; axes.primaryValue.majorTickPosition = GC.Spread.Sheets.Charts.TickMark.outside; axes.primaryValue.majorUnit = 1000; chart.axes(axes); chart.title({text:"The Continents History and Forecast of Population Growth",fontSize:18}); chart.axes({primaryValue:{title:{text:"Units: one million"}}}); }
<!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="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; }