JSignage:Graph:Scatter and bubble charts

From SpinetiX Support Wiki

Jump to: navigation, search

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

.Graph.scatterChart()

$.Graph.scatterChart( attributes );

Returns: jSignage Object

Description

Draws a scatter plot chart layer.

Parameters

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

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

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

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
Scatter1.png
// 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
Bubble1.png
// 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');
This page was last modified on 20 February 2015, at 12:50.