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