Column Chart

The Column Chart is the most common and widely used method for data analysis. Data that's arranged in columns or rows on a worksheet can be plotted in a column chart.

<p>SpreadJS supports columnClustered, columnStacked, and columnStacked100 column charts. You can use the <strong>GC.Spread.Sheets.Charts.ChartType.columnClustered</strong> property to get the chart type.</p> <p>For example, you can insert a <strong>columnClustered</strong> chart type and change the chart style using the chart API.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chart = sheet.charts.add(<span class="hljs-string">'columnClustered'</span>, Spread.Sheets.Charts.ChartType.columnClustered, <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(index ?) <span class="hljs-comment">//You can set the parameter using the series index. If the parameter exists, get(index) will get the specific series information, If not, the get() will return an array and contain all series.</span> <span class="hljs-keyword">var</span> ser = series[<span class="hljs-number">0</span>].backColor = <span class="hljs-string">'red'</span>; chart.series.set(index, ser); </code></pre> <p>The column chart can be stacked normally or 100 percent using the <strong>columnStacked</strong> and <strong>columnStacked100</strong> chart types.</p> <p>The <strong>columnStacked</strong> chart type stacks the series vertically.</p> <p>The <strong>ColumnStacked100</strong> chart type stacks the series vertically and equalizes the values to meet 100 percent.</p>
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.columnClustered, desc: "columnClustered", dataArray: [ ["", 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], ["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], ["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3], ["London", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2], ["Berlin", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] ], dataFormula: "A1:M5", changeStyle: function (chart) { changeChartTitle(chart, "The Average Monthly Rainfall"); changColumnChartDataLabels(chart); chart.axes({primaryValue: {title: {text: "Rainfall(mm)"}}}); changeChartSeriesColor(chart); } }, { type: GC.Spread.Sheets.Charts.ChartType.columnStacked, desc: "columnStacked", 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); } }, { type: GC.Spread.Sheets.Charts.ChartType.columnStacked100, desc: "columnStacked100", 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); } }]; 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, 30, 100, 900, 400, 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]}); } }
<!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; }