JSignage:Graph:Percentage bar and column charts

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

Introduction

The percentage chart is a special type of stacked chart where each stack of bars / columns occupies all the available space and the size of each bar / column within the stack represents a percentage (from 0 to 100%) relative to the sum of all the bars / columns within the stack.

The percentage chart can also be seen as a collection of parallel unrolled pie / donut charts, one for each position on the major axis.

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

.Graph.percentageBarChart()

$.Graph.percentageBarChart( attributes );

Returns: jSignage Object

Description

Draws a percentage bar chart layer. For each set of data from the 2D data source array, a full-size stack of bars is drawn, containing bars of variable size, where each bar represents the percentage of the selected value relative to the sum of all the values in the selected data set. 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.percentageColumnChart()

$.Graph.percentageColumnChart( attributes );

Returns: jSignage Object

Description

Draws a percentage column chart layer. For each set of data from the 2D data source array, a full-size stack of columns is drawn, containing columns of variable size, where each column represents the percentage of the selected value relative to the sum of all the values in the selected data set. 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

Percentage bar chart

// draw a percentage bar chart
$.Graph.percentageBarChart( {
    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' },
    textInside: 'percentage',
    textInsideStyle: { color: 'white', fontSize: 16 },
    fontSize: 24,
    fontWeight: 'bold',
    xAxis: { tickInterval: 'none', baselineStrokeStyle: null },
    yAxis: { 
        categories: [ 'U.S.A.', 'China', 'Japan', 'Russia', 
                      'India', 'Canada', 'Germany', 'France' ]
    }
} ).addTo('svg');

Percentage column chart

// draw a percentage column chart
$.Graph.percentageColumnChart( {
    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: 'right' },
    textInside: 'percentage',
    textInsideStyle: { color: 'white', fontSize: 16 },
    fontSize: 24,
    fontWeight: 'bold',
    xAxis: {
        axis: true,
        categories: [ 'U.S.A.', 'China', 'Japan', 'Russia', 
                      'India', 'Canada', 'Germany', 'France' ]
    },
    yAxis: { tickInterval: 'none' }
} ).addTo('svg');