JSignage:Graph:Scatter and bubble charts

This page is related to jSignage Graph API.

Introduction

Scatter plot and bubble charts display a set of data values for two variables, X and Y, having the value of one variable (X) determining the position on the horizontal axis and the value of the other variable (Y) determining the position on the vertical axis. Additionally, the bubble charts, use the values of a third variable to determine the size of each point marker.

These charts are similar to the line and area charts, but with the following differences:

• The x coordinate of each point is part of the input data.
• The X axis must be continuous.
• No connecting line is drawn between consecutive points (yet one can be added on scatter charts).

Classification

Type	Scatter charts	Bubble charts
Single series	$.Graph.scatterChart()	$.Graph.bubbleChart()
Multiple series	$.Graph.multiScatterChart()	$.Graph.multiBubbleChart()

Gallery of scatter and bubble charts

• 

  Scatter chart

• 

  Bubble chart

.Graph.scatterChart()

$.Graph.scatterChart( attributes );

Returns: jSignage Object

Description

Draws a scatter plot chart layer.

Parameters

• attributes

  Type: Plain Object.

  The scatter chart layer attributes, which can contain both the specific attributes detailed below and any of the common attributes of the scatter & bubble charts.

Specific attributes

• dataX (required)

  Type: Array.<Number>.

  Array of numbers, where each value corresponds to a X-coordinate for a point.

• dataY (required)

  Type: Array.<Number>.

  Array of numbers, where each value corresponds to a Y-coordinate for a point.

.Graph.multiScatterChart()

$.Graph.multiScatterChart( attributes );

Returns: jSignage Object

Description

Draws a scatter plot chart layer with multiple series of data.

Parameters

• attributes

  Type: Plain Object.

  The multi scatter chart layer attributes, which can contain both the specific attributes detailed below and any of the common attributes of the scatter & bubble charts.

Specific attributes

• dataX (required)

  Type: Array.<Array.<Number>>.

  2D array of numbers, where each inner array corresponds to a series and each value inside it corresponds to a X-coordinate for a point.

• dataY (required)

  Type: Array.<Array.<Number>>.

  2D array of numbers, where each inner array corresponds to a series and each value inside it corresponds to a Y-coordinate for a point.

• series

  Type: Array.<Plain Object>.

  Array of series styling objects to override the general styling of series.

.Graph.bubbleChart()

$.Graph.bubbleChart( attributes );

Returns: jSignage Object

Description

Draws a bubble chart layer.

Parameters

• attributes

  Type: Plain Object.

  The bubble chart layer attributes, which can contain both the specific attributes detailed below and any of the common attributes of the scatter & bubble charts.

Specific attributes

• dataSize (required)

  Type: Array.<Number>.

  Array of numbers, where each value corresponds to a size for a point marker.

• dataX (required)

  Type: Array.<Number>.

  Array of numbers, where each value corresponds to a X-coordinate for a point.

• dataY (required)

  Type: Array.<Number>.

  Array of numbers, where each value corresponds to a Y-coordinate for a point.

.Graph.multiBubbleChart()

$.Graph.multiBubbleChart( attributes );

Returns: jSignage Object

Description

Draws a bubble chart layer with multiple series of data.

Parameters

• attributes

  Type: Plain Object.

  The multi bubble chart layer attributes, which can contain both the specific attributes detailed below and any of the common attributes of the scatter & bubble charts.

Specific attributes

• dataSize (required)

  Type: Array.<Array.<Number>>.

  2D array of numbers, where each inner array corresponds to a series and each value inside it corresponds to a size for a point marker.

• dataX (required)

  Type: Array.<Array.<Number>>.

  2D array of numbers, where each inner array corresponds to a series and each value inside it corresponds to a X-coordinate for a point.

• dataY (required)

  Type: Array.<Array.<Number>>.

  2D array of numbers, where each inner array corresponds to a series and each value inside it corresponds to a Y-coordinate for a point.

• series

  Type: Array.<Plain Object>.

  Array of series styling objects to override the general styling of series.

Common attributes

See also Graph styling attributes page.

The following attributes are common to all scatter and bubble charts:

• axisStrokeStyle

  Type: Plain Object.

  Stroke styling object which serves as a default for drawing both the horizontal and vertical axis.

• baselineStrokeStyle

  Type: Plain Object.

  Stroke styling object which serves as a default for drawing the baseline of both the horizontal and vertical axis.

• chartArea

  Type: Plain Object.

  Object with top, left, width and height attributes to define the position of the chart proper within the layer. By default the chart will occupy as much space as possible without overlapping the legend box.

• color, fillOpacity, label, line, marker, pointText, pointTextStyle, strokeStyle

  Series styling attributes for general series styling.

• colors

  Type: Array.<Color>. Default: The default color set ($.Graph.baseColors).

  List of colors to be used for markers and lines for each series of the chart.

• fontFamily, fontSize, fontStyle, fontVariant, fontWeight

  Type: String or Number.

  Default text styling attributes for point text, axis text and legend. The fontSize is set by default to 4% of layer size.

• gridlinesStrokeStyle

  Type: Plain Object.

  Stroke styling object which serves as a default for gridlines along both the horizontal and vertical axis.

• labels

  Type: Array.<String>. Default: [ '1', '2', '3', '4', ... ].

  Array of labels for each series.

• legend

  Type: Plain Object.

  Legend styling object or null to disable the legend box. When enabled, the legend box reduces the graph area and is positioned at the top.

• markers

  Type: Array.<String>.

  List of marker shapes for the series of the chart; valid values are 'circle', 'square', 'diamond', 'triangle' or 'star'.

• xAxis

  Type: Plain Object.

  A continuous axis object to configure the horizontal axis.

• yAxis

  Type: Plain Object.

  A continuous axis object to configure the vertical axis.

Examples

Scatter chart

// draw a scatter plot chart
$.Graph.scatterChart( {
    dataX: [  8, 4  , 11, 4, 3  , 6 ],
    dataY: [ 12, 5.5, 14, 8, 3.5, 7 ],
    fontSize: 24,
    width: 1280,
    height: 720,
    fontWeight: 'bold',
    marker: { size: 30 },
    pointText: 'value',
    strokeStyle: { lineWidth: 4 },
    xAxis: { baselineStrokeStyle: null },
    yAxis: { minorGridlines: true }
} ).addTo('svg');

Bubble chart

// draw a bubble chart
$.Graph.bubbleChart( {
    dataX: [ 8, 4, 11, 4, 3, 6 ],
    dataY: [ 12, 5.5, 14, 8, 3.5, 7 ],
    dataSize: [ 150, 50, 70, 100, 200, 300 ],
    fontSize: 24,
    width: 1280,
    height: 720,
    fontWeight: 'bold',
    fillOpacity: 0.5,
    pointText: 'value',
    pointTextStyle: { color: 'black' },
    strokeStyle: { lineWidth: 2 },
    xAxis: { baselineStrokeStyle: null },
    yAxis: { minorGridlines: true }
} ).addTo('svg');