Jump to content

JSignage:Graph:Stacked bar and column charts

From SpinetiX Wiki

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

.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

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');
Retrieved from "https://support.spinetix.com/w/index.php?title=JSignage:Graph:Stacked_bar_and_column_charts&oldid=8931"