Skip to content

Latest commit

 

History

History
187 lines (156 loc) · 6.28 KB

Scatter.md

File metadata and controls

187 lines (156 loc) · 6.28 KB
Raw

Scatter

A native scatter graph using D3 based on standard design patterns.

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: {
            type: Carbon.helpers.AXIS_TYPE.TIME_SERIES,
            label: "Some X Label",
            lowerLimit: "2016-01-01T12:00:00Z",
            upperLimit: "2017-01-01T12:00:00Z"
        },
        y: {
            label: "Some Y Label",
            lowerLimit: 0,
            upperLimit: 20
        },
        y2: {
            show: false,
            label: "Some Y2 Label",
            lowerLimit: 0,
            upperLimit: 250
        }
    },
    dateline: [
        {
            showDatelineIndicator: true,
            label: {
                display: "Release A"
            },
            color: Carbon.helpers.COLORS.GREEN,
            shape: Carbon.helpers.SHAPES.DARK.TRIANGLE,
            onClick: (onCloseCB, payload) => {
                // onCloseCB needs to called by the consumer after popup is closed;
                // Payload is the dateline input object
            },
            value: new Date(2016, 5, 1).toISOString()
        }
    ],
    clickPassThrough: {
        datelines: false
    },
    showLabel: true,
    showLegend: true,
    showVGrid: true,
    showHGrid: true
};

var data = {
    key: "uid_1",
    label: {
        display: "Data Label 1"
    },
    regions: [
        {
            axis: "y",
            start: 2,
            end: 10,
            color: "#f4f4f4"
        }
    ],
    shape: Carbon.helpers.SHAPES.DARK.CIRCLE,
    color: Carbon.helpers.COLORS.BLUE,
    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: [
        {
            x: "2016-02-03T12:00:00Z",
            y: 4
        },
        {
            x: "2016-05-01T12:00:00Z",
            y: 15,
            isCritical: true
        },
        {
            x: "2016-10-01T12:00:00Z",
            y: 10
        }
    ]
};
var scatterDefault = Carbon.api.graph(root);
scatterDefault.loadContent(Carbon.api.scatter(data));

Multi scatter

For loading multiple data-sets, you can load as additional content:

var scatterDefault = Carbon.api.graph(/* Input JSON */);
scatterDefault.loadContent(Carbon.api.scatter(/* Data array A */));
scatterDefault.loadContent(Carbon.api.scatter(/* Data array B */));
scatterDefault.loadContent(Carbon.api.scatter(/* Data array C */));
scatterDefault.loadContent(Carbon.api.scatter(/* Data array D */));

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 array [] 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 Description
x string Co-ordinate x, for plotting the data point
y string Co-ordinate y, for plotting the data point

Optional

Property Name Expected Default Description
isCritical boolean false Shows an indicator surrounding the data point when enabled

Regions

Each data-set can have 1 or more regions. start and end is necessary for rendering a horizontal area.

Required

Property Name Expected Description
start number Start of the region
end number End of the region

Optional

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 then the legend item will not be shown as well