Jump to content

JSignage:Graph:Basic bar and column charts

From SpinetiX Wiki

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

.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

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