Bar Chart

Data that's arranged in columns or rows on a worksheet can be plotted in a bar chart. Bar charts illustrate comparisons among individual items. In a bar chart, the categories are typically organized along the vertical axis, and the values along the horizontal axis.

SpreadJS supports barClustered, barStacked, and barStacked100 charts. You can add a bar chart to Spread and change its style using the chart API. Bar: A bar chart compares individual items. Stacked Bar: Stacked bar charts show the relationship of individual items to the whole in bars. 100% Stacked Bar: A 100% stacked bar shows bars that compare the percentage that each value contributes to a total across categories.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 3}); initSpread(spread); }; var colorArray = ['rgb(120, 180, 240)', 'rgb(240, 160, 80)', 'rgb(140, 240, 120)', 'rgb(120, 150, 190)']; function initSpread(spread) { var chartType = [{ type: GC.Spread.Sheets.Charts.ChartType.barClustered, desc: "barClustered", dataArray: [ ["", 'Tokyo', 'New York', 'London', 'Berlin'], ["The First Quarter", 227.8, 260.9, 127, 110.1], ["The Second Quarter", 449.2, 283.9, 136.7, 167.8], ["The Third Quarter", 500.5, 300.5, 171, 165.4], ["The Fourth Quarter", 344.1, 282.4, 175.7, 137] ], dataFormula: "A1:E5", changeStyle: function (chart) { changeChartTitle(chart, "The Average Quarterly Rainfall"); changColumnChartDataLabels(chart); chart.legend({position:GC.Spread.Sheets.Charts.LegendPosition.right}); chart.axes({primaryValue: {title: {text: "Rainfall(mm)"}, majorUnit:50}}); changeChartSeriesColor(chart); changeChartSeriesGapWidthAndOverLap(chart); } }, { type: GC.Spread.Sheets.Charts.ChartType.barStacked, desc: "barStacked", dataArray: [ ["", 'Tokyo', 'New York', 'London', 'Berlin'], ["The First Quarter", 227.8, 260.9, 127, 110.1], ["The Second Quarter", 449.2, 283.9, 136.7, 167.8], ["The Third Quarter", 500.5, 300.5, 171, 165.4], ["The Fourth Quarter", 344.1, 282.4, 175.7, 137] ], dataFormula: "A1:E5", changeStyle: function (chart) { changeChartTitle(chart, "The Average Quarterly Rainfall"); changColumnChartDataLabels(chart); chart.axes({primaryValue: {title: {text: "Rainfall(mm)"}}}); changeChartSeriesColor(chart); changeChartSeriesGapWidthAndOverLap(chart); } }, { type: GC.Spread.Sheets.Charts.ChartType.barStacked100, desc: "barStacked100", dataArray: [ ["", 'Tokyo', 'New York', 'London', 'Berlin'], ["The First Quarter", 227.8, 260.9, 127, 110.1], ["The Second Quarter", 449.2, 283.9, 136.7, 167.8], ["The Third Quarter", 500.5, 300.5, 171, 165.4], ["The Fourth Quarter", 344.1, 282.4, 175.7, 137] ], dataFormula: "A1:E5", changeStyle: function (chart) { changeChartTitle(chart, "The Average Quarterly Rainfall"); changColumnChartDataLabels(chart); chart.axes({primaryValue: {title: {text: "Rainfall(%)"}}}); changeChartSeriesColor(chart); changeChartSeriesGapWidthAndOverLap(chart); } }]; var sheets = spread.sheets; spread.suspendPaint(); for (var i = 0; i < chartType.length; i++) { var sheet = sheets[i]; initSheet(sheet, chartType[i].desc, chartType[i].dataArray); var chart = addChart(sheet, chartType[i].type, chartType[i].dataFormula);//add chart chartType[i].changeStyle(chart); } spread.resumePaint(); } function initSheet(sheet, sheetName, dataArray) { sheet.name(sheetName); //prepare data for chart sheet.setArray(0, 0, dataArray); sheet.setColumnWidth(0, 120); } function addChart(sheet, chartType, dataFormula) { //add chart return sheet.charts.add((sheet.name() + 'Chart1'), chartType, 0, 100, 900, 330, dataFormula, GC.Spread.Sheets.Charts.RowCol.rows); } function changeChartTitle(chart, title) { chart.title({text: title}); } // show dataLabels function changColumnChartDataLabels(chart) { var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.showSeriesName = false; dataLabels.showCategoryName = false; var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition; dataLabels.position = dataLabelPosition.outsideEnd; chart.dataLabels(dataLabels); } //change color function changeChartSeriesColor(chart) { var series = chart.series().get(); for (var i = 0; i < series.length; i++) { chart.series().set(i, {backColor: colorArray[i]}); } } function changeChartSeriesGapWidthAndOverLap(chart) { var seriesItem = chart.series().get(0); seriesItem.gapWidth = 2; seriesItem.overlap = 0.1; chart.series().set(0, seriesItem); }
<!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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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; }