Combo Chart

Data that's arranged in columns and rows can be plotted in a combo chart. Combo charts combine two or more chart types to make the data easy to read and understand.

<p>There are two steps to create a combo chart via add series:</p> <p>1. Create a column chart:</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">//create a column chart</span> sheet.charts.add((sheet.name() + <span class="hljs-string">'Chart1'</span>), GC.Spread.Sheets.Charts.ChartType.columnClustered, <span class="hljs-number">30</span>, <span class="hljs-number">120</span>, <span class="hljs-number">900</span>, <span class="hljs-number">300</span>, <span class="hljs-string">'A1:M3'</span>, GC.Spread.Sheets.Charts.RowCol.rows) </code></pre> <p>2. Add a series, and set its chart type. For example, you could add a line chart:</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">//add a line chart to create combo chart</span> <span class="hljs-keyword">var</span> seriesItem = {}; seriesItem.chartType = GC.Spread.Sheets.Charts.ChartType.line; seriesItem.backColor = <span class="hljs-string">'rgb(113,173,72)'</span>; seriesItem.name = <span class="hljs-string">'A4'</span>; seriesItem.xValues = <span class="hljs-string">'B1:M1'</span>; seriesItem.yValues = <span class="hljs-string">'B4:M4'</span>; chart.series().add(seriesItem); </code></pre>
var spread; window.onload = function () { spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); initSpread(spread); }; function initSpread(spread) { var chartType = [{ type: GC.Spread.Sheets.Charts.ChartType.columnClusterd, comboType: GC.Spread.Sheets.Charts.ChartType.lineMarkers }]; var sheets = spread.sheets; spread.suspendPaint(); for (var i = 0; i < chartType.length; i++) { var sheet = sheets[i]; initSheet(sheet); var chart = initChart(sheet, chartType[i].type);//add chart chart.title({text:"Monthly Registration Number and Distribution of Men and Women"}); addSeriesLine(chart, chartType[i].comboType); changColumnChartDataLabels(chart); } spread.resumePaint(); } function initSheet(sheet) { //prepare data for chart var dataArray = [["", "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"], ["MAN", 327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220], ["WOMEN", 709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078], ["TOTAL", 1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298] ]; sheet.setArray(0, 0, dataArray); } function initChart(sheet, type) { //add chart return sheet.charts.add((sheet.name() + 'Chart1'), type, 30, 120, 900, 300, "A1:M3", GC.Spread.Sheets.Charts.RowCol.rows); } //add a line type to create combo chart function addSeriesLine(chart, type) { var seriesItem = {}; seriesItem.chartType = type; seriesItem.border = {width: 3}; seriesItem.name = 'A4'; seriesItem.xValues = 'B1:M1'; seriesItem.yValues = 'B4:M4'; chart.series().add(seriesItem); } //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.above; chart.dataLabels(dataLabels); }
<!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; }