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.

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