JSignage:Graph:Stacked and grouped bar and column charts

This page is related to Bar and column charts of jSignage Graph API.

Introduction

The stacked and grouped bar and column charts represent data as horizontal bars / vertical columns where the size of each bar / column is determined by the data associated to it. The particularity of these charts is that the bars / columns can be grouped together and also stacked together.

For more details, see also this introduction section on bar and column charts.

.Graph.stackedAndGroupedBarChart()

$.Graph.stackedAndGroupedBarChart( attributes );

Returns: jSignage Object

Description

Draws a stacked and grouped bar chart layer. For each set of data from the 3D source data array, a group of stacked bars, each of variable size, is drawn from the baseline to the corresponding value. Each bar in a group of stacked bars has its own color and label.

Parameters

• attributes

  Type: Plain Object.

  The stacked bar chart layer attributes, which can contain both the specific attributes detailed below and any of the common attributes to all bar & column charts.

.Graph.stackedAndGroupedColumnChart()

$.Graph.stackedAndGroupedColumnChart( attributes );

Returns: jSignage Object

Description

Draws a stacked and grouped column chart layer. For each set of data from the 3D data source array, a group of stacked columns, each of variable size, is drawn from the baseline to the corresponding value. Each column in a stack has its own color and label.

Parameters

• attributes

  Type: Plain Object.

  The stacked column chart layer attributes, which can contain both the specific attributes detailed below and any of the common attributes to all bar & column charts.

Specific attributes

• data (required)

  Type: Array.<Array.<Array.<Number>>>.

  3D array of positive numbers, where each set of values corresponds to a group of stacked of bars / columns. The first dimension is the position along the major axis (i.e. the group), the second dimension is the position within the group and the third dimension is the position within the stack. Negative values are not allowed.

• barWidth

  Type: Number or String. Default: '100%'.

  Width occupied by each stack of bars / columns, either in pixels or as a percentage relative to the maximum space available within the group. The value '100%' means that the stack of bars / columns in a group are "glued" together.

• colors

  Type: Array.<Color>. Default: Default color set.

  Array of fill colors for each position in a group of stacked bars / columns.

• groupWidth

  Type: Number or String. Default: '61.8%'.

  Width occupied by each group of stacked of bars / columns, either in pixels or as a percentage relative to the maximum space available.

• labels

  Type: Array.<String>. Default: [ '1', '2', '3', '4', ... ].

  Array of labels for each position in a group of stacked bars / columns.

Example

Stacked and grouped column chart

// draw a stacked and grouped column chart
$.Graph.stackedAndGroupedColumnChart( {
    data: [ [ [ 2133, 969   ], [ 357, 838 ] ],
            [ [ 2733,  54   ], [ 598,  68 ] ],
            [ [  288, 422   ], [  91, 258 ] ],
            [ [  197, 511   ], [ 167, 163 ] ],
            [ [  569, 116   ], [ 128,  15 ] ],
            [ [  112,  50.8 ], [ 386,  94 ] ],
            [ [  291,  97.2 ], [  72, 148 ] ],
            [ [   27,  27.8 ], [  75, 439 ] ]
    ],
    width: 1280,
    height: 720,
    labels: [ 'Coal' , 'Oil & Gas', 'Renewable', 'Nuclear' ],
    legend: { position: 'top' },
    fontSize: 24,
    fontWeight: 'bold',
    xAxis: {
        categories: [ 'U.S.A.', 'China', 'Japan', 'Russia', 
                      'India', 'Canada', 'Germany', 'France' ]
    },
    yAxis: { minorGridlines: true }
} ).addTo('svg');