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.

Description
app.js
index.html
styles.css
Copy to CodeMine

SpreadJS supports barClustered, barStacked, and barStacked100 charts.

You can add a bar chart to Spread and change its style using the chart API.

     var chart = sheet.charts.add('barClustered', GC.Spread.Sheets.Charts.ChartType.barClustered, 0, 100, 400, 300, 'A1:D4')
     var dataLabels = chart.dataLabels();
     var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
     dataLabels.position = dataLabelPosition.outsideEnd;
     chart.dataLabels(dataLabels);

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.

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; }