Skip to content
This repository has been archived by the owner on Jan 29, 2021. It is now read-only.

Latest commit

 

History

History
334 lines (274 loc) · 10.6 KB

BubbleSingleDataset.md

File metadata and controls

334 lines (274 loc) · 10.6 KB
Raw

Bubble Single Dataset

A native bubble 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
        }
    }
};

var data = {
    key: "uid_1",
    label: {
        display: "Data Label 1"
    },
    color: Carbon.helpers.COLORS.BLUE,
    values: [
        {
            x: "2016-02-03T12:00:00Z",
            y: 4
        },
        {
            x: "2016-05-01T12:00:00Z",
            y: 15
        },
        {
            x: "2016-10-01T12:00:00Z",
            y: 10
        }
    ]
};
var bubbleDefault = Carbon.api.graph(root);
bubbleDefault.loadContent(Carbon.api.bubble(data));

Weight Based Bubble

For weight based bubble Graph, provide a weight object with min and max values. For the individual bubbles in the values array, include weight along with its x and y coordinates.

var dataWeightBased = {
    key: "uid_1",
    label: {
        display: "Data Label 1"
    },
    weight: {
        min: 10,
        max: 50
    }
    color: Carbon.helpers.COLORS.BLUE,
    values: [
        {
            x: "2016-02-03T12:00:00Z",
            y: 4,
            weight: 15
        },
        {
            x: "2016-05-01T12:00:00Z",
            y: 15,
            weight: 20
        },
        {
            x: "2016-10-01T12:00:00Z",
            y: 10,
            weight: 40
        }
    ]
};
var bubbleWeight = Carbon.api.graph(root);
bubbleWeight.loadContent(Carbon.api.bubbleSingleDataset(dataWeightBased));

Color Based Bubble

For a Color Based Bubble Graph, provide palette and load the following content:

var colorBasedData = {
    key: "uid_2",
    label: {
        display: "Data Label 2"
    },
    palette: BUBBLE.PALETTE.ORANGE,
    values: [
        {
            x: "2016-03-01T12:00:00Z",
            y: 14
        },
        {
            x: "2016-04-10T12:00:00Z",
            y: 1
        },
        {
            x: "2016-11-01T12:00:00Z",
            y: 18
        }
    ]
};
bubbleColorBased = Carbon.api.graph(root);
bubbleColorBased.loadContent(Carbon.api.bubbleSingleDataset(colorBasedData));

Weight Color Based Bubble

For a Weight and Color Based Bubble Graph, provide palette with a color shades reference see valid values and a weight object with a min and max value:

var weightColorBasedData = {
    key: "uid_2",
    label: {
        display: "Data Label 2"
    },
    weight: {
        min: 10,
        max: 50
    }
    palette: BUBBLE.PALETTE.ORANGE,
    values: [
        {
            x: "2016-03-01T12:00:00Z",
            y: 14,
            weight: 15
        },
        {
            x: "2016-04-10T12:00:00Z",
            y: 1,
            weight: 20
        },
        {
            x: "2016-11-01T12:00:00Z",
            y: 18,
            weight: 40
        }
    ]
};
bubbleWeightColorBased = Carbon.api.graph(root);
bubbleWeightColorBased.loadContent(Carbon.api.bubbleSingleDataset(weightColorBasedData));

Custom Sized Bubble

For a custom size bubble, provide fixedRadius in the weight object. fixedRadius takes priority over the min and max properties if they are provided.

Note: this property was formerly known as maxRadius in the old Bubble API

var customSizeBasedData = {
    key: "uid_2",
    label: {
        display: "Data Label 2"
    },
    weight: {
        fixedRadius: 10
    }
    values: [
        {
            x: "2016-03-01T12:00:00Z",
            y: 14,
        },
        {
            x: "2016-04-10T12:00:00Z",
            y: 1,
        },
        {
            x: "2016-11-01T12:00:00Z",
            y: 18,
        }
    ]
};
bubbleGraph = Carbon.api.graph(root);
bubbleGraph.loadContent(Carbon.api.bubbleSingleDataset(customSizeBasedData));

JSON Properties

Root

Refer Graph Root for more details.

Data

BubbleSingleDataset is limited to 1 dataset. All subsequent datasets are ignored.

Required

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

Optional

Property Name Expected Default Description
color string COLORS.BLACK Single color for the bubbles. Overrides palette when both are provided.
label object {} Display value for the data-set which the data points belong to
legendOptions object undefined Toggle to show legend. Refer to LegendOptions
onClick Function undefined Any action that can be performed when clicking on the data point
palette Function undefined Set of shades to be used for color based bubbles. Only works for datasets of <=4 datapoints
regions array [] Refer to Regions
weight object {} Provide min and max for weight based or fixedRadius for a custom sized bubble. Refer to Weight
yAxis string "y" Setting for using different Y based axis. For now: its either Y or Y2

LegendOptions

Each bubble can have a legendOptions object in Values level.

Optional

Property Name Expected Default Description
showElement boolean true Toggle to hide legend when legend item has no data.

Weight

For a weight based bubble, provide weight with min and max, with each bubble having a weight property among their values. For custom sized bubbles across the dataset, provide fixedRadius instead.

Note: this property was formerly known as maxRadius in the old Bubble API

weight: {
    min: 10,
    max: 30,
}

// OR

weight: {
    fixedRadius: 30
}

Optional

Property Name Expected Default Description
min number undefined Min value for the weight based bubble
max number undefined Max value for the weight based bubble
fixedRadius number 30 Used to set a single weight for all bubbles in the dataset and overrides max and min

Palette

For color based bubble provide a color constant for the shades. Only works if datapoints are <= 4 and if color is undefined

Palette: BUBBLE.PALETTE.ORANGE

Acceptable values

Property Name
BLUE
GREEN
ORANGE
PINK
PURPLE

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
weight number undefined Make bubble based on the weight provided in the weight inside values, based on the weight range Weight

Regions

Each dataset 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 the dataset's label property is undefined, then it will not be shown in the legend.