JSignage:Graph:Basic bar and column charts

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

Introduction

The basic 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. For more details, see this introduction section on bar and column charts.

.Graph.barChart()

$.Graph.barChart( attributes );

Returns: jSignage Object

Description

Draws a bar chart layer. A bar of variable width is drawn from the baseline to the value for each position in the source array and all bars have the same color.

Parameters

• attributes

  Type: Plain Object.

  The bar chart layer attributes, which can contain both the specific attributes detailed below and any of the common attributes to all bar charts.

.Graph.columnChart()

$.Graph.columnChart( attributes );

Returns: jSignage Object

Description

Draws a column chart layer. A column of variable height is drawn from the baseline to the value for each position in the source array and all columns have the same color.

Parameters

• attributes

  Type: Plain Object.

  The column chart layer attributes, which can contain both the specific attributes detailed below and any of the common attributes to all bar charts.

Specific attributes

• data (required)

  Type: Array.<Number>.

  Array of numbers, where each value corresponds to a bar / column of the chart. For negative values, the bars / columns are drawn on the opposite side of the baseline.

• barWidth

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

  Width occupied by the bar / column either in pixels or as a percentage relative to the maximum space available.

• color

  Type: Color. Default: First color in the default color set.

  Fill color of the bars / columns.

• label

  Type: String. Default: '1'.

  Label for the bars / columns.

Examples

Basic bar chart

// draw a basic bar chart
$.Graph.barChart( {
    data: [ 89, 78, 84, 86, 107, 117, 95, 116, 96, 92, 99, 93 ],
    width: 1280,
    height: 720,
    fontSize: 24,
    fontWeight: 'bold',
    label: 'Average precipitation in Lausanne (mm)',
    legend: null,
    yAxis: {
        categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
    },
    chartGradient: -1.5
} ).addTo('svg');

Basic column chart

// draw a basic column chart
$.Graph.columnChart( {
    data: [ 0.4, 1, 4, 15.4, 62, 75.3, 95.2, 80.5, 65.5, 51.2, 13.8, 3.7 ],
    width: 1280,
    height: 720,
    label: 'Average snowfall in Davos (cm)',
    legend: null,
    fontSize: 24,
    fontWeight: 'bold',
    xAxis: {
        axis: true,
        categories: [ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 
                      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' ],
    },
    yAxis: {
        axis: true,
        tickMarks: true,
        minorGridlines: true,
        minorTickMarks: true
    },
    textOutside: 'value',
    barWidth: '90%',
    color: '#5b5',
    barGradient: 1.2,
    chartGradient: 0.5
} ).addTo('svg');

Basic column chart with negative values

// draw a basic column chart with negative values
$.Graph.columnChart( {
    data: [ -4.8, -4, -1.5, 2, 6.7, 10, 12.5, 11.7, 9, 4.8, -0.8, -3.8 ],
    width: 1280,
    height: 720,
    label: 'Average daily mean temperature in Zermmat (°C)',
    legend: null,
    fontSize: 24,
    fontWeight: 'bold',
    textInside: 'value',
    textInsideStyle: { color: 'white' },
    xAxis: {
        axis: true,
        categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
    }
} ).addTo('svg');