SpreadJS 14
Features / Charts / Chart Types / Combo Chart
In This Topic
    Combo Chart
    In This Topic

    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 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, monthly registration number and distribution (which are two different types of data) of men and women is depicted with the help of a combo chart.
    Combo chart

    Using Code

    This code shows how to add a combo chart in a spreadsheet.

    JavaScript
    Copy Code
    // 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);