Jump to content

JSignage:Graph:Grouped bar and column charts

From SpinetiX Wiki

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

.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

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