SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage Data Visualization and Objects / Charts / Chart Types / Column Chart
In This Topic
    Column Chart
    In This Topic

    A column chart represents data in vertical bars across the plot area on a horizontal axis. This type of chart is ideal for performing comparisons and analysis between two or more categories of data.  

    The data arranged in columns or rows of a worksheet can be plotted in a column chart.

    SpreadJS supports the following three types of column chart. In the examples shown below, the annual sales record for Quarter 1, Quarter 2 and Quarter 3 for different categories of gadgets: Mobile Phones, Laptops and Tablets is depicted in different types of column charts.

    1. Clustered Column Chart

      A clustered column chart can be used when you want to compare different values across different categories and show them in two-dimensional or three-dimensional vertical rectangles. This chart can be stacked normally in a regular way just like any other chart.

      An image of the clustered column chart is shown below:
              Clustered column chart

    2. Stacked Column Chart

      A stacked column chart can be used when you want to display the relationship of specific items to the whole across different categories and plot values in two-dimensional or three-dimensional vertical rectangles. This chart stacks the data series vertically (in a vertical direction).

      An image of the stacked column chart is shown below:
              Stacked column chart

    3. 100% Stacked Column Chart

      A 100% stacked column chart can be used when you want to perform comparisons of the percentages that each of the values are contributing to the total, across all your categories in the spreadsheet. This chart stacks the data series vertically and also equalizes the plotted values to meet 100%. The plotted values are displayed in two-dimensional and three-dimensional rectangles.

      An image of the clustered column chart is shown below:
              100% stacked column chart

    Using Code

    This code shows how to add the three types of column chart in a spreadsheet.

    JavaScript
    Copy Code
    var chart_columnClustered, chart_columnStacked, chart_columnStacked100, sheet;
            window.onload = function () {        
                var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
                sheet = spread.getActiveSheet();
                sheet.suspendPaint();
                //prepare data for chart
                sheet.setValue(0, 1, "Q1");
                sheet.setValue(0, 2, "Q2");
                sheet.setValue(0, 3, "Q3");
                sheet.setValue(1, 0, "Mobile Phones");
                sheet.setValue(2, 0, "Laptops");
                sheet.setValue(3, 0, "Tablets");
                for (var r = 1; r <= 3; r++) {
                    for (var c = 1; c <= 3; c++) {
                        sheet.setValue(r, c, parseInt(Math.random() * 100));
                    }
                }
    //add columnClustered chart
                chart_columnClustered = sheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4");
    //add columnStacked chart
                chart_columnStacked = sheet.charts.add('chart_columnStacked', GC.Spread.Sheets.Charts.ChartType.columnStacked, 250, 480, 600, 400, "A1:D4");
    //add columnStacked100 chart
                chart_columnStacked100 = sheet.charts.add('chart_columnStacked100', GC.Spread.Sheets.Charts.ChartType.columnStacked100, 250, 900, 600, 400, "A1:D4");
                sheet.resumePaint();
            };