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

    A bar chart is extensively used to illustrate comparisons between individual items or categories.

    The data arranged in columns or rows of a worksheet can be plotted in a bar chart. In bar charts, the categories are organized along the vertical axis with the data values along the horizontal axis.

    SpreadJS supports the following types of bar charts. 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 bar charts.

    1. Clustered Bar Chart

      A clustered bar chart displays the comparisons of values across different categories.

      An image of a clustered bar chart is shown below:
              Clustered bar chart

    2. Stacked Bar Chart

      A stacked bar chart displays the relationship of each item/category to the whole in two-dimensional and three-dimensional rectangles.

      An image of a stacked bar chart is shown below:
              Stacked bar chart

    3. 100% Stacked Bar Chart

      A 100% stacked bar chart displays the comparisons of percentage that each of the values contribute to the total across different categories.

      An image of a 100% stacked bar chart is shown below:
              100% stacked bar chart

    Using Code

    This code shows how to add different types of bar charts in a spreadsheet.

    JavaScript
    Copy Code
      var chart_barClustered, chart_barStacked, chart_barStacked100, 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 barClustered chart
                chart_barClustered = sheet.charts.add('chart_barClustered', GC.Spread.Sheets.Charts.ChartType.barClustered, 250, 20, 600, 400, "A1:D4");
    //add barStacked chart
                chart_barStacked = sheet.charts.add('chart_barStacked', GC.Spread.Sheets.Charts.ChartType.barStacked, 250, 480, 600, 400, "A1:D4");
    //add barStacked100 chart
                chart_barStacked100 = sheet.charts.add('chart_barStacked100', GC.Spread.Sheets.Charts.ChartType.barStacked100, 250, 900, 600, 400, "A1:D4");
                sheet.resumePaint();
            };