Spread.Sheets Documentation
Creating Column Chart
Spread.Sheets Documentation > Developer's Guide > Customizing the Appearance > Understanding Chart > Working with Chart Types > Creating Column Chart

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.

Spread.Sheets 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:
            

  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:
            

  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:
            

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