Combo Chart

A Combo chart combines two or more chart types in a single chart, making it easier for users to interpret and understand data. This chart is ideal when you want to visualize the different type of data that is completely unrelated (for instance: price and volume) or when you need to plot one or more data series on the secondary axis.

The data arranged in columns or rows of a worksheet can be plotted in a Combo chart. You can create a combo chart in two ways: 1) By creating a column chart and 2) By adding a series and setting its chart type. For instance, by adding a line chart.

In the example shown below, the monthly registration number and distribution (which are two different types of data) of men and women are depicted with the help of a combo chart.

The following code sample shows how to add a combo chart to a spreadsheet.

// initializing Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });
// get the activesheet
var activeSheet = spread.getSheet(0);

//prepare data for chart
var dataArray = [
    ["", "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    ["MEN", 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]
];
activeSheet.setArray(0, 0, dataArray);
var chartType = [{
    type: GC.Spread.Sheets.Charts.ChartType.columnClusterd,
    comboType: GC.Spread.Sheets.Charts.ChartType.lineMarkers
}];

// Add Combo Chart
var chart = activeSheet.charts.add('ComboChart', chartType[0].type, 10, 120, 900, 300, "A1:M3", GC.Spread.Sheets.Charts.RowCol.rows);
chart.title({ text: "Monthly Registration Number and Distribution of Men and Women" });
var seriesItem = {};
seriesItem.chartType = chartType[0].comboType;
seriesItem.border = { width: 3 };
seriesItem.name = 'A4';
seriesItem.xValues = 'B1:M1';
seriesItem.yValues = 'B4:M4';
chart.series().add(seriesItem);

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

Create Gauge Chart as Combo Chart

A gauge chart is a data visualization tool representing a single value against a scale divided into various segments. The chart uses a needle to indicate the value and helps quickly visualize the performance of KPI against defined criteria. Gauge charts prove very effective in displaying progressive information, target metrics, project deadlines, etc.

In SpreadJS, just like Excel, you can use combo charts to create a gauge chart by combining a doughnut and a pie chart.

gauge-chart

The following sample code shows how to create a gauge chart in SpreadJS.

var spread;
window.onload = function () {
    spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
        sheetCount: 1
    });
    initSpread(spread);
};
function initSpread(spread) {
    var sheets = spread.sheets;
    spread.suspendPaint();
    var sheet1 = sheets[0];

    initsheet1(sheet1);
    var chart2 = initChart(sheet1, GC.Spread.Sheets.Charts.ChartType.doughnut); //add chart
    chart2.title({
        text: "Annual Performance"
    });
    adjustDoughnutSeries(chart2);
    addPieSeries(chart2)
    spread.resumePaint();
}
function initsheet1(sheet) {
    var dataArray1 = [
        ['Performance Label', 'Value'],
        ["Poor", 20],
        ["Average", 50],
        ["Good", 20],
        ["Excellent", 10],
        ["Total", 100],
    ];
    sheet.setArray(0, 0, dataArray1);

    var dataArray2 = [
        ["Labels", "Values"],
        ["Pointer", 65],
        ["Thickness", 2],
        ["Rest", 154],
    ];
    sheet.setArray(0, 6, dataArray2);
    sheet.setFormula(3, 7, "=200-H2-H3");
    sheet.name("Annual Performance");
}
function initChart(sheet, type) {
    //add chart
    let chart = sheet.charts.add((sheet.name() + 'Chart1'), type, 0, 250, 600, 340, "A1:B6", GC.Spread.Sheets.Charts.RowCol.column);
    return chart

}
function adjustDoughnutSeries(chart) {
    let doughnutSeries1 = chart.series().get(0);
    doughnutSeries1.startAngle = 270;
	doughnutSeries1.doughnutHoleSize = 0.5;
    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 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);
}