There are two steps to create a combo chart via add series:
1. Create a column chart:
2. Add a series, and set its chart type. For example, you could add a line chart:
Currently, the following combinations of chart types are supported
Clustered column chart
Stacked column chart
100% Stacked column chart
Clustered bar chart
Stacked bar chart
100% Stacked bar chart
Line chart
Stacked line chart
100% Stacked line chart
Line with makers chart
Stacked line with makers chart
100% Stacked line with makers chart
Area chart
Stacked area chart
100% Stacked area chart
Pie chart
Doughnut chart
Scatter chart
Scatter with smooth lines chart
Scatter with smooth lines with makers chart
Scatter with straight lines chart
Scatter with straight lines with makers chart
var spread;
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
sheetCount: 2
});
initSpread(spread);
};
function initSpread(spread) {
var sheets = spread.sheets;
spread.suspendPaint();
var sheet1 = sheets[0];
var sheet2 = sheets[1];
initSheet1(sheet1);
initSheet2(sheet2);
addFormControl(sheet2);
var chart1 = initChart1(sheet1, GC.Spread.Sheets.Charts.ChartType.columnClusterd); //add chart
chart1.title({
text: "Monthly Registration Number and Distribution of Men and Women"
});
addSeriesLine(chart1, GC.Spread.Sheets.Charts.ChartType.lineMarkers);
changColumnChartDataLabels(chart1);
var chart2 = initChart2(sheet2, GC.Spread.Sheets.Charts.ChartType.doughnut); //add chart
chart2.title({
text: "Gauge Chart"
});
adjustDoughnutSeries(chart2);
addDoughnutSeries(chart2);
addPieSeries(chart2)
spread.resumePaint();
}
function initSheet1(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);
sheet.name("Normal Combo Chart");
}
function initSheet2(sheet) {
var dataArray1 = [
['Performance Label', 'Value'],
["Poor", 20],
["Average", 50],
["Good", 20],
["Excellent", 10],
["Total", 100],
];
sheet.setArray(0, 0, dataArray1);
sheet.tables.add('table1', 0, 0, 6, 2, GC.Spread.Sheets.Tables.TableThemes.light1);
var dataArray2 = [
["Labels", "Values"],
[10, 10],
[20, 10],
[30, 10],
[40, 10],
[50, 10],
[60, 10],
[70, 10],
[80, 10],
[90, 10],
[100, 10],
["Total", 100],
];
sheet.setArray(0, 3, dataArray2);
sheet.tables.add('table2', 0, 3, 11, 2, GC.Spread.Sheets.Tables.TableThemes.light1);
var dataArray3 = [
["Labels", "Values"],
["Pointer", 45],
["Thickness", 2],
["Rest", 154],
];
sheet.setArray(0, 6, dataArray3);
sheet.tables.add('table3', 0, 6, 4, 2, GC.Spread.Sheets.Tables.TableThemes.medium7);
sheet.setFormula(3, 7, "=200-H2-H3");
sheet.name("Gauge Chart");
}
function initChart1(sheet, type) {
//add chart
return sheet.charts.add((sheet.name() + 'Chart2'), type, 30, 120, 900, 300, "A1:M3", GC.Spread.Sheets.Charts.RowCol.rows);
}
function initChart2(sheet, type) {
//add chart
return sheet.charts.add((sheet.name() + 'Chart1'), type, 0, 250, 800, 450, "A1:B6", GC.Spread.Sheets.Charts.RowCol.column);
}
//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);
}
//add a form control
function addFormControl(sheet) {
var spinButton = sheet.shapes.addFormControl("spin button", GC.Spread.Sheets.Shapes.FormControlType.spinButton, 650, 300, 100, 60);
var options = spinButton.options();
options.minValue = 0;
options.maxValue = 100;
options.step = 1;
options.cellLink = "H2";
spinButton.options(options);
spinButton.value(25);
}
//add a form control
function adjustDoughnutSeries(chart) {
let doughnutSeries1 = chart.series().get(0);
doughnutSeries1.startAngle = 270;
var dataLabels = doughnutSeries1.dataLabels || {};
dataLabels.showCategoryName = true
var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels.position = dataLabelPosition.outsideEnd;
doughnutSeries1.dataPoints[0] = {
backColor: "rgb(192,0,0)"
}
doughnutSeries1.dataPoints[1] = {
backColor: "rgb(255,255,0)"
}
doughnutSeries1.dataPoints[2] = {
backColor: "rgb(68,144,96)"
}
doughnutSeries1.dataPoints[3] = {
backColor: "rgb(112,173,71)"
}
doughnutSeries1.dataPoints[4] = {
backColor: ""
}
chart.series().set(0, doughnutSeries1);
var legend = chart.legend();
legend.visible = false;
chart.legend(legend);
}
function addDoughnutSeries(chart) {
var doughnutSeries2 = {};
doughnutSeries2.chartType = GC.Spread.Sheets.Charts.ChartType.doughnut;
doughnutSeries2.name = 'D1';
doughnutSeries2.yValues = 'E2:E12';
doughnutSeries2.startAngle = 270;
doughnutSeries2.doughnutHoleSize = 0.5;
doughnutSeries2.dataPoints = {
0: {
backColor: "rgb(231,230,230)",
},
1: {
backColor: "rgb(231,230,230)",
},
2: {
backColor: "rgb(231,230,230)",
},
3: {
backColor: "rgb(231,230,230)",
},
4: {
backColor: "rgb(231,230,230)",
},
5: {
backColor: "rgb(231,230,230)",
},
6: {
backColor: "rgb(231,230,230)",
},
7: {
backColor: "rgb(231,230,230)",
},
8: {
backColor: "rgb(231,230,230)",
},
9: {
backColor: "rgb(231,230,230)",
},
10: {
backColor: "",
},
}
chart.series().add(doughnutSeries2);
}
function addPieSeries(chart) {
var pieSeries = {};
pieSeries.chartType = GC.Spread.Sheets.Charts.ChartType.pie;
pieSeries.name = 'G1';
pieSeries.xValues = 'G2:G4';
pieSeries.yValues = 'H2:H4';
pieSeries.axisGroup = GC.Spread.Sheets.Charts.AxisGroup.secondary;
pieSeries.startAngle = 270;
pieSeries.dataPoints = {
0: {
backColor: "",
},
1: {
backColor: "red",
},
2: {
backColor: "",
},
}
chart.series().add(pieSeries);
}
<!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;
}
