JSignage:Graph:Line and area charts

From SpinetiX Support Wiki

Jump to: navigation, search

This page is related to jSignage Graph API.

Introduction

Line charts display a series of data points connected by straight line segments, with or without markers. There may be multiple series of data, materialized as multiple overlapped lines in the chart.Area charts are an extension of line charts, having the area(s) between the values line(s) and the baseline filled with color(s). Furthermore, it is possible to stack the series instead of overlapping them.

  • The horizontal axis is a discrete axis representing categories or a continuous axis representing the abscissas of the data points.
  • The vertical axis is a continuous axis representing values.
  • The shape, size and color of the point markers are configurable, as well as the style and color of the lines linking the points. Lines may be replaced by splines for a smoother path through the data points.
  • For area charts, the fill color and opacity of each series is configurable, including fill with a gradient paint.
  • The text next to each point is configurable among the following options: no text, category, value or percentage.
  • If labels are provided then a legend box can be included in the layer next to the graph area. In a basic line or area chart there is only one series, hence one label, but a legend box may still be included.
  • The x coordinates of the points are positioned regularly at a predefined interval.

Classification

Chart type Line charts Area charts
Single series $.Graph.lineChart() $.Graph.areaChart()
Multiple series $.Graph.multiLineChart() $.Graph.multiAreaChart()
$.Graph.stackedAreaChart()
$.Graph.percentageAreaChart()

Gallery of line and area charts

.Graph.lineChart()

$.Graph.lineChart( attributes );

Returns: jSignage Object

Description

Draws a line chart layer, with a line connecting all the points by default. The point markers are optional and the fill attributes don't apply.

Parameters

.Graph.multiLineChart()

$.Graph.multiLineChart( attributes );

Returns: jSignage Object

Description

Draws a multi-line chart layer (an extension of the line chart), representing multiple data series within the same chart. Each series is drawn over the precedent one and can be styled individually. The point markers are optional and the fill attributes don't apply.

Parameters

.Graph.areaChart()

$.Graph.areaChart( attributes );

Returns: jSignage Object

Description

Draws an area chart layer (an extension of the line chart), where the area between the data line and the baseline is filled with the selected color and opacity.

  • A vertical opacity gradient may be applied to the fill color.
  • In case of negative values, the filled area will be above the line, in the direction of the baseline.
  • The line and the point markers are optional. If the line is drawn, it is on top of the filled area.

Parameters

.Graph.multiAreaChart()

$.Graph.multiAreaChart( attributes );

Returns: jSignage Object

Description

Draws a multi-area chart layer (an extension of the area chart), representing multiple data series within the same chart. Each series is drawn over the precedent one and can be styled individually.

Parameters

.Graph.stackedAreaChart()

$.Graph.stackedAreaChart( attributes );

Returns: jSignage Object

Description

Draws a stacked area chart layer which is a variant of the multi-area chart, where the areas for the different series are drawn above each other by summing the values for a given position.

  • Negative values are not allowed.

Parameters

.Graph.percentageAreaChart()

$.Graph.percentageAreaChart( attributes );

Returns: jSignage Object

Description

Draws a percentage area chart layer which is a variant of the multi-area chart, where the areas for the different series are drawn above each other representing the relative weight of the values for each position (each value is divided by the sum all the values at a given position).

  • Negative values are not allowed.

Parameters

Common attributes

See also Graph styling attributes page.

The following attributes are common to all line and area 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. Note that this attribute has no effect over axis and grid lines.
  • color, fillColor, fillOpacity, fillOpacityGradient, label, line, marker, pointText, pointTextStyle, strokeStyle
    Series styling attributes for general series styling.
    The fill attributes (fillColor, fillOpacity and fillOpacityGradient) only apply to area charts.
  • colors
    Type: Array.<Color>. Default: The default color set ($.Graph.baseColors).
    List of colors to be used for markers, lines and areas 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.
    Configuration of the horizontal axis. This is either a discrete axis parameter object or a continuous axis object.
  • yAxis
    Type: Plain Object.
    A continuous axis object to configure the vertical axis.

Examples

Line chart
Line chart
// draw a line chart
$.Graph.lineChart( {
    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, fontSize: 24,  fontWeight: 'bold',
    label: 'Average snowfall in Davos (cm)',
    marker: { type: 'square', size: 10 },
    pointText: 'value',
    strokeStyle: { lineWidth: 4 },
    xAxis: { 
        categories: [ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
                      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' ]
    },
    yAxis: { minorGridlines: true }
} ).addTo('svg');
Line chart with negative values
Line chart with negative values
// draw a line chart with negative values
$.Graph.lineChart( {
    data: [ 0.4, 1, 4, 15.4, -62, -75.3, -90, 80.5, 65.5, 51.2, 13.8, 3.7 ], 
    width: 1280, height: 720, fontSize: 24, fontWeight: 'bold',
    line: 'spline',
    marker: { type: 'circle', size: 15 },
    pointText: 'value',
    strokeStyle: { lineWidth: 6 },
    xAxis: { 
        categories: [ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
                      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' ]
    },
    yAxis: { minorGridlines: true }
} ).addTo('svg');
Line chart with multiple series
Line chart with multiple series
// draw a line chart with negative values
$.Graph.multiLineChart( {
    data: [ 
        [ 0.4, 1, 4, 15.4, 62, 75.3, 95.2, 80.5, 65.5, 51.2, 13.8, 3.7 ],
        [ 50, 40, 35, 60, 50, 30, 40, 80, 75, 55, 35, 10 ],
        [ 40, 35, 20, 15, 12, 12, 20, 25, 24, 17, 10, 5 ] 
    ], 
    width: 1280, height: 720, fontSize: 24, fontWeight: 'bold',
    marker: true,
    series: [
        { label: 'Blue line', strokeStyle: { lineDash: 'dots' } },
        { label: 'Red line', strokeStyle: { lineDash: 'dashes' } },
        { label: 'Orange line', strokeStyle: { lineDash: 'alternated' } }
    ],
    strokeStyle: { lineWidth: 4 },
    xAxis: { 
        categories: [ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
                      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' ]
    },
    yAxis: { minorGridlines: true }
} ).addTo('svg');
Area chart
Area chart
// draw an area chart
$.Graph.areaChart( {
    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, fontSize: 24, fontWeight: 'bold',
    label: 'Average snowfall in Davos (cm)',
    fillOpacity: 0.5,
    xAxis: { 
        categories: [ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
                      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' ]
    },
    yAxis: { minorGridlines: true }
} ).addTo('svg');
Area chart with negative values
Area chart
// draw an area chart with negative values
$.Graph.areaChart( {
    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, fontSize: 24, fontWeight: 'bold',
    line: 'spline',
    fillOpacity: 1, fillOpacityGradient: 0.2,
    xAxis: { 
        categories: [ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
                      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' ]
    },
    yAxis: { minorGridlines: true }
} ).addTo('svg');
Area chart with multiple series
Area chart with multiple series
// draw an area chart with multiple series
$.Graph.multiAreaChart( {
    data: [ 
        [ 0.4, 1, 4, 15.4, 62, 75.3, 95.2, 80.5, 65.5, 51.2, 13.8, 3.7 ],
        [ 50, 40, 35, 60, 50, 30, 40, 80, 75, 55, 35, 10 ],
        [ 40, 35, 20, 15, 12, 12, 20, 25, 24, 17, 10, 5 ] 
    ], 
    width: 1280, height: 720, fontSize: 24,   fontWeight: 'bold',
    fillOpacity: 0.5,
    line: 'spline',
    series: [
        { label: 'Blue zone' },
        { label: 'Red zone' },
        { label: 'Orange zone' }
    ],
    strokeStyle: { lineWidth: 4 },
    xAxis: { 
        categories: [ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
                      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' ]
    },
    yAxis: { minorGridlines: true }
} ).addTo('svg');
Stacked area chart
Stacked area chart
// draw a stacked area chart
$.Graph.stackedAreaChart( {
    data: [ 
        [ 0.4, 1, 4, 15.4, 62, 75.3, 95.2, 80.5, 65.5, 51.2, 13.8, 3.7 ],
        [ 50, 40, 35, 60, 50, 30, 40, 80, 75, 55, 35, 10 ],
        [ 40, 35, 20, 15, 12, 12, 20, 25, 24, 17, 10, 5 ] 
    ], 
    width: 1280,  height: 720, fontSize: 24,  fontWeight: 'bold',
    fillOpacity: 0.5,
    line: 'spline',
    series: [
        { label: 'Blue zone' },
        { label: 'Red zone' },
        { label: 'Orange zone' }
    ],
    strokeStyle: { lineWidth: 4 },
    xAxis: { 
        categories: [ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
                      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' ]
    },
    yAxis: { minorGridlines: true }
} ).addTo('svg');
Percentage area chart
Percentage area chart
// draw a percentage area chart
$.Graph.percentageAreaChart( {
    data: [ 
        [ 0.4, 1, 4, 15.4, 62, 75.3, 95.2, 80.5, 65.5, 51.2, 13.8, 3.7 ],
        [ 50, 40, 35, 60, 50, 30, 40, 80, 75, 55, 35, 10 ],
        [ 40, 35, 20, 15, 12, 12, 20, 25, 24, 17, 10, 5 ] 
    ], 
    width: 1280, height: 720, fontSize: 24,  fontWeight: 'bold',
    fillOpacity: 0.5,
    line: 'spline',
    series: [
        { label: 'Blue zone' },
        { label: 'Red zone' },
        { label: 'Orange zone' }
    ],
    strokeStyle: { lineWidth: 4 },
    xAxis: { 
        categories: [ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
                      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' ]
    },
    yAxis: { minorGridlines: true }
} ).addTo('svg');
Retrieved from "https://support.spinetix.com/w/index.php?title=JSignage:Graph:Line_and_area_charts&oldid=15886"
This page was last modified on 3 September 2019, at 12:19.