JSignage:Graph:Grouped bar and column charts

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

Introduction

The 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 some bars / columns can be grouped together.

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

.Graph.groupedBarChart()

$.Graph.groupedBarChart( attributes );

Returns: jSignage Object

Description

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

Parameters

• attributes

  Type: Plain Object.

  The grouped 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.groupedColumnChart()

$.Graph.groupedColumnChart( attributes );

Returns: jSignage Object

Description

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

Parameters

• attributes

  Type: Plain Object.

  The grouped 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 numbers, where each set of values corresponds to a group of bars / columns. The first dimension is the position along the major axis (i.e. the groups), the second dimension is the position within the group. For negative values, the bars / columns are drawn on the opposite side of the baseline.

• barWidth

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

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

• colors

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

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

• groupWidth

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

  Width occupied by each group 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 group of bars / columns.

Example

Grouped column chart

// draw a grouped column chart
$.Graph.groupedColumnChart( {
    data: [ 
        [ 18835.5, 8331 ],  [ 9790, 3846 ],     [ 3292.2, 854 ], 
        [ 2259.1, 3288 ],   [ 2132.7, 3707 ],   [ 2817.5, 10665 ], 
        [ 3145.1, 9677 ] 
    ],
    width: 1280,
    height: 720,
    labels: [ 'Consumption', 'Production' ],
    legend: { 
        position: { left: '80%', top: '5%' } 
    },
    fontSize: 24,
    fontWeight: 'bold',
    xAxis: {
        categories: [ 'U.S.A.', 'China', 'India', 
                      'Canada', 'Mexico', 'Saudi Arabia', 
                      'Russia' ]
    }
} ).addTo('svg');