JSignage:Graph:Stacked bar and column charts

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

Introduction

The stacked 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 some bars / columns can be stacked together, thus creating a combined bar / column.

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

.Graph.stackedBarChart()

$.Graph.stackedBarChart( attributes );

Returns: jSignage Object

Description

Draws a stacked bar chart layer. For each set of data from the 2D data source array, a stack of bars, each of variable size, is drawn from the baseline to the corresponding value (sum of bar values). Each bar in a stack 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.stackedColumnChart()

$.Graph.stackedColumnChart( attributes );

Returns: jSignage Object

Description

Draws a stacked column chart layer. For each set of data from the 2D data source array, a stack of columns, each of variable size, is drawn from the baseline to the corresponding value (sum of column values). 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.<Number>>.

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

• barWidth

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

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

• colors

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

  Array of fill colors for the bars / columns within a stack .

• labels

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

  Array of labels for each stack of bars / columns.

Examples

Stacked bar chart

// draw a stacked bar chart
$.Graph.stackedBarChart( {
    data: [ [ 3101, 838, 357 ], [ 2788, 68, 598 ],  [ 711, 258, 91 ], 
            [ 708, 163, 167 ],  [ 685, 15, 128 ],   [ 162, 94, 386 ], 
            [ 388, 148, 72 ],   [ 55, 439, 75 ] 
    ],
    width: 1280,
    height: 720,
    labels: [ 'Fossil Fuel' , 'Nuclear', 'Renewable' ],
    legend: { position: { left: '80%' }, alignment: 'center' },
    fontSize: 24,
    fontWeight: 'bold',
    textOutside: 'category',
    yAxis: {
        categories: [ 'U.S.A.', 'China', 'Japan', 
                      'Russia', 'India', 'Canada', 
                      'Germany', 'France' ],
        textPlacement: 'none'
    }
} ).addTo('svg');

Stacked column chart

// draw a stacked column chart
$.Graph.stackedColumnChart( {
    data: [ [ 3101, 838, 357 ], [ 2788, 68, 598 ], [ 711, 258, 91 ], 
            [ 708, 163, 167 ], [ 685, 15, 128 ], [ 162, 94, 386 ], 
            [ 388, 148, 72 ], [ 55, 439, 75 ] 
    ],
    width: 1280,
    height: 720,
    labels: [ 'Fossil Fuel' , 'Nuclear', 'Renewable' ],
    legend: { position: 'top' },
    fontSize: 24,
    fontWeight: 'bold',
    xAxis: {
        categories: [ 'U.S.A.', 'China', 'Japan', 
                      'Russia', 'India', 'Canada', 
                      'Germany', 'France' ]
    },
    yAxis: { minorGridlines: true }
} ).addTo('svg');