Skip to content

Latest commit

 

History

History
171 lines (139 loc) · 6.27 KB

PairedResult.md

File metadata and controls

171 lines (139 loc) · 6.27 KB
Raw

Paired Result

A native paired result graph, representing a pair of result with an optional median value. A pair can be represented in any co-ordinate on a graph. Most common pattern used is charting a Blood Pressure graph where the pair - High, low, mid are vertical data points connected by a vertical line.

Usage

Structure

You will not need all the properties in the example below. Check out optional/required properties explained in the JSON Properties section.

var root = {
    bindTo: "#root",
    axis: {
        x: {
            label: "Some X Label",
            lowerLimit: 0,
            upperLimit: 1000
        },
        y: {
            label: "Some Y Label",
            lowerLimit: 0,
            upperLimit: 200
        }
    },
    showLabel: true,
    showLegend: true,
    showVGrid: true,
    showHGrid: true
};
var data = {
    key: "uid_1",
    regions: {
        high: [
            {
                axis: "y",
                start: 120,
                end: 170,
                color: "#c8cacb"
            }
        ],
        low: [
            {
                axis: "y",
                start: 20,
                end: 100
            }
        ]
    },
    onClick: (onCloseCB, key, index, value) => {
        // onCloseCB needs to called by the consumer after popup is closed;
        // This is so that graphing api can remove the selected indicator from data point
    },
    values: [
        {
            high: {
                x: 200,
                y: 150,
                isCritical: true
            },
            low: {
                x: 200,
                y: 10
            },
            mid: {
                x: 200,
                y: 40
            }
        }
    ]
};
var pairedGraph = Carbon.api.graph(root);
pairedGraph.loadContent(Carbon.api.pairedResult(data));

JSON Properties

Root

Refer Graph Root for more details.

Data

Required

Property Name Expected Description
key string Unique id which represents the data-set
values Array Values

Optional

Property Name Expected Default Description
yAxis string "y" Setting for using different Y based axis. For now: its either Y or Y2
regions object {} Refer Regions
label object {} Display value for the data-set which the data points belong to
color string COLORS.BLACK Color for the data point
shape string SHAPES.DARK.CIRCLE Shape for representing the data points
onClick Function undefined Any action that can be performed when clicking on the data point

Values

Required

Property Name Expected Value Description
high object {x: "", y: "", isCritical: true} Data point co-ordinate x and y
low object {x: "", y: "", isCritical: true} Data point co-ordinate x and y

Optional

Property Name Expected Value Description
mid object {x: "", y: "", isCritical: true} Data point co-ordinate x and y

Note:

  • isCritical toggle is disabled by default
  • When isCritical toggle is enabled, an indicator will be shown surrounding the data point

Regions

Draws a Horizontal area along the X-Axis

  • Each data-set can have 1 or more regions for high, low and/or mid
  • Each pair type mentioned above needs to have a start and end

Required

Property Name Expected Value Description
high object {start: number, end: number} Start and end @type: number
low object {start: number, end: number} Start and end @type: number

Optional

Property Name Expected Value Description
mid object {start: number, end: number} Start and end @type: number

Optional type properties

Property Name Expected Default Description
axis string "y" Defines which axis if represents from
color string #f4f4f4 #f4f4f4 Default color of the region area

Constraints

  • If data-set label display is not provided for high, low and mid, the legend item will not be shown as well