JSignage:Graph:Stacked and grouped bar and column charts

From SpinetiX Support Wiki

Jump to: navigation, search

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

.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

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
StackedGroupedColumn1.png
// 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');
This page was last modified on 5 February 2015, at 13:22.